opui-css 2.3.0 → 2.4.0

package/README.md

@@ -8,6 +8,13 @@ https://open-props-ui.netlify.app/
 
 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.
@@ -23,26 +30,3 @@ Yes and no. Right now that's true for most components. The point is to let the s
 - Follow accessibility guidelines
 - Serve as an inspiration
 - Be scalable
-
-## Development
-
-```bash
-# Install dependencies
-pnpm i
-
-# Build all themes (outputs to dist/)
-pnpm build
-
-# Build themes in watch mode (rebuilds on file changes)
-pnpm dev
-
-# Clean the dist folder
-pnpm clean
-```
-
-### Theme Building
-
-The build system automatically processes all themes in the `src/themes/` folder. For each theme folder (ex: `chad-zn`, `theme-one`), it:
-
-1. Bundles `theme.css` → `dist/{theme-name}.css`
-2. Bundles `theme+op.css` → `dist/{theme-name}+op.css`

package/dist/{theme-one+op.css → op+ui.css}

@@ -1,5 +1,9 @@
 @layer openprops, normalize, utils, theme, components.root, components.extended;
-/* Open Props */
+/*
+This main.css file represents whatever file you choose to use as an entry point for OPUI
+Ideally it's the root/entry CSS file in your project.
+*/
+/* Open Props imports */
 /*
 * Open Props
 * Import as many props as you need here.
@@ -85,7 +89,7 @@
 	--oklch-yellow: 100;
 	--oklch-orange: 75;
 }}
-/* theme one theme */
+/* OPUI Core */
 /* Normalize */
 @layer normalize {
   *,
@@ -901,7 +905,11 @@ When you visibly want to hide an element but make it accessible for screen reade
 
       /* Selected */
       &.selected {
-        --_bg-color: oklch(from var(--primary) l c h / 25%);
+        --_bg-color: color-mix(
+          in oklch,
+          var(--primary) 12%,
+          var(--surface-default)
+        );
 
         /* Checkmark */
         svg:first-of-type {
@@ -1436,6 +1444,13 @@ When you visibly want to hide an element but make it accessible for screen reade
       text-align: start;
     }
 
+    /* Header */
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
     /* Footer */
     tfoot {
       border-top: 2px solid var(--border-color);
@@ -4136,167 +4151,5 @@ Lists meant to be used stand-alone or as part of Select elements
     }
   }
 }
-/* Setup */
-/*
-  theme one theme setup
-*/
-@layer theme {
-  .light {
-    --color-scheme: light;
-  }
-  .dark {
-    --color-scheme: dark;
-  }
-
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
-
-    --palette-hue: var(--oklch-teal);
-    --palette-hue-rotate-by: 5;
-    --palette-chroma: 0.89;
-
-    /* Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* Text */
-    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
-    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
-    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* Surface */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* Shadows */
-    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
-    --shadow-strength: light-dark(1%, 10%);
-    --inner-shadow-highlight: light-dark(
-      inset 0 -0.5px 0 0 #fff,
-      inset 0 0.5px 0 0 #0001,
-      inset 0 -0.5px 0 0 #fff1,
-      inset 0 0.5px 0 0 #0007
-    );
-
-    /* Typography */
-    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
-    --font-size-h2: var(--font-size-fluid-2, 2rem);
-    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
-    --font-size-h4: var(--font-size-3, 1.25rem);
-    --font-size-h5: var(--font-size-2, 1.1rem);
-    --font-size-h6: var(--font-size-fluid-0, 1rem);
-    --font-size-lg: var(--font-size-3, 1.25rem);
-    --font-size-md: var(--font-size-fluid-0, 1rem);
-    --font-size-sm: 0.875rem;
-    --font-size-xs: var(--font-size-0, 0.75rem);
-
-    /* Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-1);
-    --border-width: 1px;
-
-    /* Input Field */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-1);
-    --field-border-width: 1px;
-    --field-size: 2.3lh;
-    --field-size-small: 1.9lh;
-
-    /* Button */
-    --button-border-radius: var(--radius-round);
-    /* Ripple effect */
-    @media (prefers-reduced-motion: no-preference) {
-      --button-ripple-size: 100%;
-      --button-ripple-duration: 0.5s;
-    }
-  }
-
-  /* Highlight colors */
-  :where(.red, .error, del) {
-    --palette-hue: var(--oklch-red, 25);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.blue, .ok, abbr, dfn) {
-    --palette-hue: var(--oklch-blue, 210);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.green, .good, ins) {
-    --palette-hue: var(--oklch-green, 145);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.orange, .warning) {
-    --palette-hue: var(--oklch-orange, 75);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(html) {
-    --red: oklch(from var(--color-9) l 0.2 25);
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-  }
-
-  /* Gray palette */
-  :where(html) {
-    --gray-chroma: 0.01;
-    --gray-lightness: 255;
-
-    --gray-1: oklch(
-      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-2: oklch(
-      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-3: oklch(
-      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-4: oklch(
-      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-5: oklch(
-      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-6: oklch(
-      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-7: oklch(
-      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-8: oklch(
-      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-9: oklch(
-      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-10: oklch(
-      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-11: oklch(
-      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-12: oklch(
-      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-13: oklch(
-      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-14: oklch(
-      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-15: oklch(
-      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-16: oklch(
-      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
-    );
-  }
-}
+/* Theme (example) */
+/* @import "./theme.css"; */

package/dist/{theme-one.css → ui.css}

@@ -825,7 +825,11 @@ When you visibly want to hide an element but make it accessible for screen reade
 
       /* Selected */
       &.selected {
-        --_bg-color: oklch(from var(--primary) l c h / 25%);
+        --_bg-color: color-mix(
+          in oklch,
+          var(--primary) 12%,
+          var(--surface-default)
+        );
 
         /* Checkmark */
         svg:first-of-type {
@@ -1368,6 +1372,13 @@ When you visibly want to hide an element but make it accessible for screen reade
       text-align: start;
     }
 
+    /* Header */
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
     /* Footer */
     tfoot {
       border-top: 2px solid var(--border-color);
@@ -4087,170 +4098,3 @@ Lists meant to be used stand-alone or as part of Select elements
     }
   }
 }
-
-/* Setup */
-
-/*
-  theme one theme setup
-*/
-
-@layer theme {
-  .light {
-    --color-scheme: light;
-  }
-  .dark {
-    --color-scheme: dark;
-  }
-
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
-
-    --palette-hue: var(--oklch-teal);
-    --palette-hue-rotate-by: 5;
-    --palette-chroma: 0.89;
-
-    /* Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* Text */
-    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
-    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
-    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* Surface */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* Shadows */
-    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
-    --shadow-strength: light-dark(1%, 10%);
-    --inner-shadow-highlight: light-dark(
-      inset 0 -0.5px 0 0 #fff,
-      inset 0 0.5px 0 0 #0001,
-      inset 0 -0.5px 0 0 #fff1,
-      inset 0 0.5px 0 0 #0007
-    );
-
-    /* Typography */
-    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
-    --font-size-h2: var(--font-size-fluid-2, 2rem);
-    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
-    --font-size-h4: var(--font-size-3, 1.25rem);
-    --font-size-h5: var(--font-size-2, 1.1rem);
-    --font-size-h6: var(--font-size-fluid-0, 1rem);
-    --font-size-lg: var(--font-size-3, 1.25rem);
-    --font-size-md: var(--font-size-fluid-0, 1rem);
-    --font-size-sm: 0.875rem;
-    --font-size-xs: var(--font-size-0, 0.75rem);
-
-    /* Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-1);
-    --border-width: 1px;
-
-    /* Input Field */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-1);
-    --field-border-width: 1px;
-    --field-size: 2.3lh;
-    --field-size-small: 1.9lh;
-
-    /* Button */
-    --button-border-radius: var(--radius-round);
-    /* Ripple effect */
-    @media (prefers-reduced-motion: no-preference) {
-      --button-ripple-size: 100%;
-      --button-ripple-duration: 0.5s;
-    }
-  }
-
-  /* Highlight colors */
-  :where(.red, .error, del) {
-    --palette-hue: var(--oklch-red, 25);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.blue, .ok, abbr, dfn) {
-    --palette-hue: var(--oklch-blue, 210);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.green, .good, ins) {
-    --palette-hue: var(--oklch-green, 145);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.orange, .warning) {
-    --palette-hue: var(--oklch-orange, 75);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(html) {
-    --red: oklch(from var(--color-9) l 0.2 25);
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-  }
-
-  /* Gray palette */
-  :where(html) {
-    --gray-chroma: 0.01;
-    --gray-lightness: 255;
-
-    --gray-1: oklch(
-      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-2: oklch(
-      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-3: oklch(
-      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-4: oklch(
-      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-5: oklch(
-      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-6: oklch(
-      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-7: oklch(
-      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-8: oklch(
-      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-9: oklch(
-      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-10: oklch(
-      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-11: oklch(
-      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-12: oklch(
-      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-13: oklch(
-      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-14: oklch(
-      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-15: oklch(
-      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-16: oklch(
-      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
-    );
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "license": "MIT",
   "files": [
@@ -20,17 +20,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "nodemon": "^3.1.10",
     "open-props": "2.0.0-beta.5",
-    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
+    "postcss": "^8.5.6",
     "shx": "^0.4.0"
   },
   "scripts": {
-    "build:themes": "node scripts/build-themes.js",
-    "build": "pnpm run clean && pnpm run build:themes && postcss src/open-props.css -o dist/op.css",
+    "build": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css && postcss src/opui.css -o dist/ui.css && postcss src/open-props.css -o dist/op.css",
     "clean": "pnpm exec shx rm -rf dist",
-    "dev": "nodemon --watch src --ext css --delay 500ms --verbose --exec \"pnpm build:themes\""
+    "dev": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css -w & postcss src/opui.css -o dist/ui.css -w & postcss src/open-props.css -o dist/op.css -w"
   }
 }

package/src/{themes/theme-one/components → components}/toggle-button-group.css

@@ -123,7 +123,11 @@
 
       /* Selected */
       &.selected {
-        --_bg-color: oklch(from var(--primary) l c h / 25%);
+        --_bg-color: color-mix(
+          in oklch,
+          var(--primary) 12%,
+          var(--surface-default)
+        );
 
         /* Checkmark */
         svg:first-of-type {

package/src/core/components.css

@@ -0,0 +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";

package/src/main.css

@@ -0,0 +1,13 @@
+/*
+This main.css file represents whatever file you choose to use as an entry point for OPUI
+Ideally it's the root/entry CSS file in your project.
+*/
+
+/* Open Props imports */
+@import "./open-props.css";
+
+/* OPUI Core */
+@import "./opui.css";
+
+/* Theme (example) */
+/* @import "./theme.css"; */

package/src/opui.css

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

package/src/{themes/theme-one/setup.css → theme.css}

@@ -1,5 +1,5 @@
 /*
-  theme one theme setup
+OPUI default theme
 */
 @layer theme {
   .light {