opui-css 1.2.7 → 2.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Felix
+Copyright (c) 2024 Felix Bohlin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,25 +1,32 @@
-# Open Props UI
-
-A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with **ease-of-use** and **scalability** in mind. Last but not least - you **copy and paste** the components into your repo. It's the best way to have a complete **understanding** and **ownership** over your stuff.
-
-https://open-props-ui.netlify.app/
-
-## Getting started
-
-Check out the [getting started guide](https://open-props-ui.netlify.app/guide/getting-started.html).
-
-## Backstory
-
-Practically all established UI libraries need to take older browser versions into account. Some have only just dropped Internet Explorer. Some have barely discovered the power of CSS grid. Open Props UI starts from a blank slate and re-imagines how a component library could be built if you used the most modern features.
-
-## The goal of the component library
-
-> "If you only use the latest features, that means this is can never enter production"
-
-Yes and no. Right now that's true for most components. The point is to let the spec and the components mature alongside each other and in time the library will be ready for production.
-
-- Have sensible defaults without sacrificing flexibility and control
-- Use modern HTML & CSS features
-- Follow accessibility guidelines
-- Serve as an inspiration
-- Be scalable
+# Open Props UI
+
+A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with **ease-of-use** and **scalability** in mind. Last but not least - you **copy and paste** the components into your repo. It's the best way to have a complete **understanding** and **ownership** over your stuff.
+
+https://open-props-ui.netlify.app/
+
+## Getting started
+
+Check out the [getting started guide](https://open-props-ui.netlify.app/guide/getting-started.html).
+
+## Development
+
+```
+pnpm i
+pnpm dev:css
+```
+
+## Backstory
+
+Practically all established UI libraries need to take older browser versions into account. Some have only just dropped Internet Explorer. Some have barely discovered the power of CSS grid. Open Props UI starts from a blank slate and re-imagines how a component library could be built if you used the most modern features.
+
+## The goal of the component library
+
+> "If you only use the latest features, that means this is can never enter production"
+
+Yes and no. Right now that's true for most components. The point is to let the spec and the components mature alongside each other and in time the library will be ready for production.
+
+- Have sensible defaults without sacrificing flexibility and control
+- Use modern HTML & CSS features
+- Follow accessibility guidelines
+- Serve as an inspiration
+- Be scalable

package/dist/op+ui.css

@@ -503,8 +503,8 @@ When you visibly want to hide an element but make it accessible for screen reade
   }
 }
 /* Components */
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
 */
 /*** Root components (no dependencies)  */
 @layer components.root {
@@ -1531,26 +1531,26 @@ When you visibly want to hide an element but make it accessible for screen reade
     margin-block: var(--size-fluid-3);
   }
 }
-@layer components.root {
-  :where(.link) {
-    color: var(--primary);
-    cursor: pointer;
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: var(--primary);
-    text-underline-offset: 2px;
-
-    &[href] {
-      &:hover,
-      &:focus-visible {
-        color: var(--primary-light);
-      }
-    }
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
+@layer components.root {
+  :where(.link) {
+    color: var(--primary);
+    cursor: pointer;
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 2px;
+
+    &[href] {
+      &:hover,
+      &:focus-visible {
+        color: var(--primary-light);
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
 }
 @layer components.root {
   :where(table) {

package/dist/ui.css

@@ -1,7 +1,7 @@
-@layer openprops, normalize, utils, theme, components.root, components.extended;
-
-/* Normalize */
-
+@layer openprops, normalize, utils, theme, components.root, components.extended;
+
+/* Normalize */
+
 @layer normalize {
   *,
   ::before,
@@ -195,10 +195,10 @@
   :target {
     scroll-margin-block-start: 2rem;
   }
-}
-
-/* Utils */
-
+}
+
+/* Utils */
+
 @layer utils {
   /*
 Screen-reader only
@@ -258,10 +258,10 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
-/* Theme */
-
+}
+
+/* Theme */
+
 @layer theme {
   .light {
     --color-scheme: light;
@@ -421,16 +421,16 @@ When you visibly want to hide an element but make it accessible for screen reade
       from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
     );
   }
-}
-
-/* Components */
-
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-
+}
+
+/* Components */
+
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+
 @layer components.root {
   :where(.button) {
     --_bg-color: transparent;
@@ -697,8 +697,8 @@ When you visibly want to hide an element but make it accessible for screen reade
     cursor: pointer;
     margin-inline-end: var(--size-relative-6);
   }
-}
-
+}
+
 @layer components.root {
   :where(.icon-button) {
     --_text-color: inherit;
@@ -738,8 +738,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(nav.tabs) {
     --_bg-color: transparent;
@@ -859,8 +859,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where([role="group"].toggle-button-group) {
     --_border-radius: var(--radius-round);
@@ -999,8 +999,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.avatar) {
     --_bg-color: var(--color-8);
@@ -1068,8 +1068,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       outline: 2px solid var(--surface-default);
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.badge) {
     --_bg-color: var(--primary);
@@ -1170,8 +1170,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.card) {
     --_bg-color: transparent;
@@ -1253,8 +1253,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       padding-inline: var(--size-1) var(--size-3);
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.chip) {
     --_bg-color: var(--surface-tonal);
@@ -1389,8 +1389,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       cursor: not-allowed;
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.definition-list) {
     --_border-style: solid;
@@ -1455,38 +1455,38 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(hr) {
     background-color: var(--border-color);
     block-size: var(--border-size-1);
     margin-block: var(--size-fluid-3);
   }
-}
-
-@layer components.root {
-  :where(.link) {
-    color: var(--primary);
-    cursor: pointer;
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: var(--primary);
-    text-underline-offset: 2px;
-
-    &[href] {
-      &:hover,
-      &:focus-visible {
-        color: var(--primary-light);
-      }
-    }
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
-}
-
+}
+
+@layer components.root {
+  :where(.link) {
+    color: var(--primary);
+    cursor: pointer;
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 2px;
+
+    &[href] {
+      &:hover,
+      &:focus-visible {
+        color: var(--primary-light);
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+}
+
 @layer components.root {
   :where(table) {
     border-collapse: collapse;
@@ -1593,8 +1593,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(progress) {
     --_accent-color: var(--primary);
@@ -1677,8 +1677,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       right: -8%;
     }
   }
-}
-
+}
+
 @layer components.root {
   [aria-busy="true"]:not(
       input,
@@ -1716,8 +1716,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       transform: rotate(1turn);
     }
   }
-}
-
+}
+
 @layer components.root {
   label:where(.checkbox, .radio) {
     align-items: center;
@@ -1840,8 +1840,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.switch) {
     --_accent-color: var(--primary);
@@ -2030,8 +2030,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   :where(.range > input[type="range"]) {
     --thumb-bg: var(--primary);
@@ -2152,8 +2152,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.root {
   /* Base typography */
   :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
@@ -2362,10 +2362,10 @@ When you visibly want to hide an element but make it accessible for screen reade
       text-wrap: balance;
     }
   }
-}
-
-/*** Extended components (has dependencies) */
-
+}
+
+/*** Extended components (has dependencies) */
+
 @layer components.extended {
   :where([role="group"].button-group) {
     --_border-radius: var(--button-border-radius);
@@ -2434,8 +2434,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   :where(details) {
     --_accordion-transition-time: 0.2s;
@@ -2607,8 +2607,8 @@ When you visibly want to hide an element but make it accessible for screen reade
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   /*
 Lists meant to be used stand-alone or as part of Select elements
@@ -2925,8 +2925,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   :where(.alert) {
     --_bg-color: var(--surface-tonal);
@@ -3011,8 +3011,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   :where(dialog) {
     margin-block-start: 15%; /* vertical alignment */
@@ -3071,8 +3071,8 @@ Lists meant to be used stand-alone or as part of Select elements
   :where(html:has(dialog[open])) {
     overflow: hidden;
   }
-}
-
+}
+
 @layer components.extended {
   :where(.snackbar) {
     align-items: center;
@@ -3220,8 +3220,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   /* Common styling for checkbox, radio and switch groups */
   :where(fieldset.field-group) {
@@ -3304,8 +3304,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   /*
 - Common styling for input, textarea and select
@@ -3799,8 +3799,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   :where(.field > select) {
     position: relative;
@@ -3963,8 +3963,8 @@ Lists meant to be used stand-alone or as part of Select elements
   ::picker(select) {
     appearance: base-select;
   }
-}
-
+}
+
 @layer components.extended {
   :where(
       .field:has(
@@ -4021,8 +4021,8 @@ Lists meant to be used stand-alone or as part of Select elements
       translate: 0 -50%;
     }
   }
-}
-
+}
+
 @layer components.extended {
   :where(.field:has(textarea)) {
     textarea {
@@ -4047,8 +4047,8 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
-
+}
+
 @layer components.extended {
   @scope (.rich-text) to (.not-rich-text) {
     a {
@@ -4258,4 +4258,4 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "1.2.7",
+  "version": "2.0.1",
   "private": false,
   "license": "MIT",
   "files": [

package/src/components/link.css

@@ -1,21 +1,21 @@
-@layer components.root {
-  :where(.link) {
-    color: var(--primary);
-    cursor: pointer;
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: var(--primary);
-    text-underline-offset: 2px;
-
-    &[href] {
-      &:hover,
-      &:focus-visible {
-        color: var(--primary-light);
-      }
-    }
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
-}
+@layer components.root {
+  :where(.link) {
+    color: var(--primary);
+    cursor: pointer;
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 2px;
+
+    &[href] {
+      &:hover,
+      &:focus-visible {
+        color: var(--primary-light);
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+}

package/src/core/components.css

@@ -1,37 +1,37 @@
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-@import "../components/button.css";
-@import "../components/icon-button.css";
-@import "../components/tab-buttons.css";
-@import "../components/toggle-button-group.css";
-@import "../components/avatar.css";
-@import "../components/badge.css";
-@import "../components/card.css";
-@import "../components/chip.css";
-@import "../components/definition-list.css";
-@import "../components/divider.css";
-@import "../components/link.css";
-@import "../components/table.css";
-@import "../components/progress.css";
-@import "../components/spinner.css";
-@import "../components/checkbox-radio.css";
-@import "../components/switch.css";
-@import "../components/range.css";
-@import "../components/typography.css";
-
-/*** Extended components (has dependencies) */
-@import "../components/button-group.css";
-@import "../components/accordion.css";
-@import "../components/list.css";
-@import "../components/alert.css";
-@import "../components/dialog.css";
-@import "../components/snackbar.css";
-@import "../components/field-group.css";
-@import "../components/field.css";
-@import "../components/select.css";
-@import "../components/text-field.css";
-@import "../components/textarea.css";
-@import "../components/rich-text.css";
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+@import "../components/button.css";
+@import "../components/icon-button.css";
+@import "../components/tab-buttons.css";
+@import "../components/toggle-button-group.css";
+@import "../components/avatar.css";
+@import "../components/badge.css";
+@import "../components/card.css";
+@import "../components/chip.css";
+@import "../components/definition-list.css";
+@import "../components/divider.css";
+@import "../components/link.css";
+@import "../components/table.css";
+@import "../components/progress.css";
+@import "../components/spinner.css";
+@import "../components/checkbox-radio.css";
+@import "../components/switch.css";
+@import "../components/range.css";
+@import "../components/typography.css";
+
+/*** Extended components (has dependencies) */
+@import "../components/button-group.css";
+@import "../components/accordion.css";
+@import "../components/list.css";
+@import "../components/alert.css";
+@import "../components/dialog.css";
+@import "../components/snackbar.css";
+@import "../components/field-group.css";
+@import "../components/field.css";
+@import "../components/select.css";
+@import "../components/text-field.css";
+@import "../components/textarea.css";
+@import "../components/rich-text.css";

package/src/opui.css

@@ -1,13 +1,13 @@
-@layer openprops, normalize, utils, theme, components.root, components.extended;
-
-/* Normalize */
-@import "./core/normalize.css";
-
-/* Utils */
-@import "./core/utils.css";
-
-/* Theme */
-@import "./core/theme.css";
-
-/* Components */
-@import "./core/components.css";
+@layer openprops, normalize, utils, theme, components.root, components.extended;
+
+/* Normalize */
+@import "./core/normalize.css";
+
+/* Utils */
+@import "./core/utils.css";
+
+/* Theme */
+@import "./core/theme.css";
+
+/* Components */
+@import "./core/components.css";