opui-css 5.0.1 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 5.1.0 - 2026-05-28
+
+### Fixed
+
+- [#351](https://github.com/felix-bohlin/ui/issues/351): (Attempted to) fix performance issue caused by palette being defined on `*` instead of `:root`. This was causing style recalculations on every element when the palette changed, oops. Hopefully now, recalculations will only happen on elements that use palette variables.
+
+The heavy color math is now properly scoped down to `:root`, severity classes (ex `.ui-warning`), and invalid components (`[class*="ui-"]:has(:user-invalid)`).
+
+- Palette no longer is included in the openprops layer, instead it's been placed in the `theme.palette` layer, so hopefully it will solve some potential specificity issues.
+
+### Changed
+
+- Renamed the `critical` prop to `error` for validation in form components (`TextField`, `Checkbox`, `Radio`, `Switch`, `Select`, `ClassicSelect`, `Textarea`). While `critical` remains the standard for severity coloring (e.g. Buttons, Callouts, Badges), `error` makes more contextual sense for validation states.
+
+### Added
+
+- Added a new `.ui-palette` util class. If you are building something where you want to make use of the palette you can just use that class and be able to use the palette right there.
+
+### Migration
+
+The `opui-css/open-props` export no longer bundles OPUI's custom palette variables (`--color-*` and `--gray-*`). It now strictly represents the underlying Open Props tokens.
+
+If you were relying on OPUI’s dynamic palette colors while importing the `open-props` subpath, you must now explicitly import the palette module alongside it:
+
+```diff
+  import 'opui-css/open-props';
++ import 'opui-css/core/palette.css';
+```
+
+Alternately, you can import the default full bundle (`import 'opui-css';`) which includes everything.
+
+### Thank you
+
+- [yinhx3](https://github.com/yinhx3) for reporting [#351](https://github.com/felix-bohlin/ui/issues/351)!
+
 ## 5.0.1 - 2026-05-26
 
 ### Breaking

package/MIGRATING.md

@@ -1,3 +1,14 @@
+# Migrating from v5.0 to v5.1
+
+In v5.1.0, the `critical` prop has been renamed to `error` on all form components (`TextField`, `Checkbox`, `Radio`, `Switch`, `Select`, `ClassicSelect`, `Textarea`).
+
+```diff
+- <TextField critical label="Name" />
++ <TextField error label="Name" />
+```
+
+Note: Components that use `critical` for severity styling (such as `Button`, `Callout`, `Badge`) still use the `critical` prop.
+
 # Migrating from v4 to v5
 
 v5 prefixes every OPUI-owned class with `ui-`. The component prop API is unchanged; only the rendered class names change.

package/README.md

@@ -55,7 +55,7 @@ If you do have a bundler that resolves CSS `@import`s (Vite, Astro, webpack, …
 The library defines this layer order:
 
 ```css
-@layer openprops, normalize, theme, components.root, components.extended, utils;
+@layer openprops, theme, normalize, components.root, components.extended, utils;
 ```
 
 Wrap your own styles in a layer above `utils` (or unlayered) to override.

package/components/Accordion/Accordion.astro

@@ -18,7 +18,12 @@ const contentId = $id("content")
 
 <details
   name={name}
-  class:list={["ui-accordion", "ui-card", variant && `ui-${variant}`, className]}
+  class:list={[
+    "ui-accordion",
+    "ui-card",
+    variant && `ui-${variant}`,
+    className,
+  ]}
   open={open}
   {...rest}
 >
@@ -27,7 +32,12 @@ const contentId = $id("content")
   <summary id={summaryId} aria-controls={contentId}><slot name="summary" /><slot name="marker" /></summary>
 
   <!-- Content -->
-  <div id={contentId} class="ui-content" role="region" aria-labelledby={summaryId}>
+  <div
+    id={contentId}
+    class="ui-content"
+    role="region"
+    aria-labelledby={summaryId}
+  >
     <slot />
   </div>
 

package/components/Anchor/Anchor.astro

@@ -45,7 +45,11 @@ const positionArea = alignment
       <slot />
     )
   }
-  <span class="ui-anchor-floating" id={id} popover={isHover ? "hint" : undefined}>
+  <span
+    class="ui-anchor-floating"
+    id={id}
+    popover={isHover ? "hint" : undefined}
+  >
     <slot name="anchored" />
   </span>
 </span>

package/components/ButtonGroup/ButtonGroup.astro

@@ -21,7 +21,14 @@ const {
 ---
 
 <div
-  class:list={["ui-button-group", color && `ui-${color}`, size && `ui-${size}`, variant && `ui-${variant}`, orientation && `ui-${orientation}`, className]}
+  class:list={[
+    "ui-button-group",
+    color && `ui-${color}`,
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    orientation && `ui-${orientation}`,
+    className,
+  ]}
   role="group"
   {...rest}
 >

package/components/Card/Card.astro

@@ -28,7 +28,9 @@ const { variant, actionsAlign, class: className, ...rest } = Astro.props
   <slot />
   {
     Astro.slots.has("actions") && (
-      <div class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}>
+      <div
+        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
+      >
         <slot name="actions" />
       </div>
     )

package/components/Checkbox/Checkbox.astro

@@ -5,7 +5,7 @@ type Props = {
   [key: string]: any
   checked?: boolean
   class?: string
-  critical?: boolean
+  error?: boolean
   disabled?: boolean
   hideLabel?: boolean
   id?: string
@@ -23,7 +23,7 @@ export const title = "Checkbox"
 const {
   checked,
   class: className,
-  critical,
+  error,
   disabled,
   hideLabel,
   id,
@@ -53,7 +53,7 @@ const finalName = name || currentFieldName
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
 >
   <CheckboxInput
     aria-describedby={endTextId}

package/components/ClassicSelect/ClassicSelect.astro

@@ -8,7 +8,7 @@ type Props = {
   [key: string]: any
   class?: string
   disabled?: boolean
-  critical?: boolean
+  error?: boolean
   id?: string
   items?: Item[]
   label?: string
@@ -25,7 +25,7 @@ export const title = "Classic Select"
 const {
   class: className,
   disabled,
-  critical,
+  error,
   id,
   items = [],
   label,
@@ -52,7 +52,7 @@ const labelId = $id("select-label")
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
 >
   {
     label && (

package/components/Dialog/Dialog.astro

@@ -33,7 +33,9 @@ const { actionsAlign, class: className, closedby, ...rest } = Astro.props
   <slot />
   {
     Astro.slots.has("actions") && (
-      <div class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}>
+      <div
+        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
+      >
         <slot name="actions" />
       </div>
     )

package/components/Radio/Radio.astro

@@ -6,7 +6,7 @@ type Props = {
   checked?: boolean
   class?: string
   disabled?: boolean
-  critical?: boolean
+  error?: boolean
   hideLabel?: boolean
   id?: string
   name?: string
@@ -22,7 +22,7 @@ const {
   checked,
   class: className,
   disabled,
-  critical,
+  error,
   hideLabel,
   id,
   name,
@@ -48,7 +48,7 @@ const finalName = name || currentFieldName
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
 >
   <RadioInput
     aria-describedby={endTextId}

package/components/Select/Select.astro

@@ -9,7 +9,7 @@ type Props = {
   class?: string
   description?: string
   disabled?: boolean
-  critical?: boolean
+  error?: boolean
   dense?: boolean
   id?: string
   items?: Item[]
@@ -29,7 +29,7 @@ const {
   class: className,
   description,
   disabled,
-  critical,
+  error,
   dense,
   id,
   items = [],
@@ -60,7 +60,7 @@ const labelId = $id("select-label")
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
 >
   {
     (label || Astro.slots.has("label")) && (

package/components/Switch/Switch.astro

@@ -6,7 +6,7 @@ type Props = {
   checked?: boolean
   class?: string
   disabled?: boolean
-  critical?: boolean
+  error?: boolean
   hideLabel?: boolean
   id?: string
   name?: string
@@ -23,7 +23,7 @@ const {
   checked,
   class: className,
   disabled,
-  critical,
+  error,
   hideLabel,
   id,
   name,
@@ -62,7 +62,7 @@ if (
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
 >
   {
     Astro.slots.has("icon-unchecked") && (

package/components/TextField/TextField.astro

@@ -3,7 +3,7 @@ type Props = {
   [key: string]: any
   autoFit?: boolean
   class?: string
-  critical?: boolean
+  error?: boolean
   description?: string
   disabled?: boolean
   endText?: string
@@ -43,7 +43,7 @@ export const title = "Text Field"
 const {
   autoFit,
   class: className,
-  critical,
+  error,
   description,
   disabled,
   endText,
@@ -82,7 +82,7 @@ const fieldName = name || currentFieldName
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
   {...rest}
 >
   {

package/components/Textarea/Textarea.astro

@@ -6,7 +6,7 @@ type Props = {
   cols?: number
   description?: string
   disabled?: boolean
-  critical?: boolean
+  error?: boolean
   filled?: boolean
   id?: string
   label?: string
@@ -30,7 +30,7 @@ const {
   cols,
   description,
   disabled,
-  critical,
+  error,
   filled,
   id,
   label,
@@ -63,7 +63,7 @@ const fieldName = name || currentFieldName
     },
     className,
   ]}
-  data-invalid={critical || undefined}
+  data-invalid={error || undefined}
   {...rest}
 >
 {

package/core/normalize.css

@@ -1,5 +1,4 @@
 @layer normalize {
-
   *,
   ::before,
   ::after {
@@ -58,7 +57,6 @@
     outline: none !important;
   }
 
-
   :where(:not(fieldset, progress, meter)) {
     background-origin: border-box;
     background-repeat: no-repeat;
@@ -114,7 +112,9 @@
 
   :focus-visible {
     /* Inverts the --_page-bg-color */
-    --_focus-visible-color: rgb(from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b));
+    --_focus-visible-color: rgb(
+      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
+    );
 
     border-radius: var(--border-radius, 0px);
     outline: 2px solid var(--_focus-visible-color);
@@ -123,7 +123,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     :where(:focus-visible) {
-      transition: outline-offset .15 var(--ease-2);
+      transition: outline-offset 0.15 var(--ease-2);
     }
 
     :where(:not(:active):focus-visible) {
@@ -135,23 +135,28 @@
     outline-offset: var(--outline-offset, 0px);
   }
 
-  :where(a[href],
+  :where(
+    a[href],
     area,
     button,
-    input:not([type="text"],
+    input:not(
+      [type="text"],
       [type="email"],
       [type="number"],
       [type="password"],
       [type=""],
       [type="tel"],
-      [type="url"]),
+      [type="url"]
+    ),
     label[for],
     select,
-    summary) {
+    summary
+  ) {
     cursor: pointer;
   }
 
-  :where(a[href],
+  :where(
+    a[href],
     area,
     button,
     [role="button"],
@@ -160,7 +165,8 @@
     select,
     summary,
     textarea,
-    [tabindex]:not([tabindex*="-"])) {
+    [tabindex]:not([tabindex*="-"])
+  ) {
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }

package/core/palette.css

@@ -1,59 +1,110 @@
-:where(:root) {
-  --palette-hue: 250;
-  /* <angle */
-  --palette-hue-rotate-by: 0;
-  /* +- deg : warm or cool the palette */
-  --palette-chroma: 0.15;
-  /* 0-1 : lower to mute and pastel, over 2 at own risk */
+@layer theme.palette {
+  :where(
+    :root,
+    .ui-warning,
+    .ui-critical,
+    .ui-info,
+    .ui-success,
+    [data-invalid],
+    del,
+    ins,
+    abbr,
+    dfn,
+    .ui-palette
+  ) {
+    --palette-hue: 250;
+    --palette-hue-rotate-by: 0;
+    --palette-chroma: 0.15;
 
-  /* New API: a single OKLCH source that drives the entire ramp.
-     The default below derives from the legacy --palette-hue / --palette-chroma
-     vars so themes that haven't migrated keep working unchanged. Themes opting
-     into the new API just set --palette-source directly. */
-  --palette-source: oklch(58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250));
-}
+    --palette-source: oklch(
+      58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250)
+    );
 
-* {
-  --color-1: oklch(from var(--palette-source) 98% calc(0.03 * (c / 0.21)) calc(h + (0 * var(--palette-hue-rotate-by))));
-  --color-2: oklch(from var(--palette-source) 97% calc(0.06 * (c / 0.21)) calc(h + (1 * var(--palette-hue-rotate-by))));
-  --color-3: oklch(from var(--palette-source) 93% calc(0.1 * (c / 0.21)) calc(h + (2 * var(--palette-hue-rotate-by))));
-  --color-4: oklch(from var(--palette-source) 84% calc(0.12 * (c / 0.21)) calc(h + (3 * var(--palette-hue-rotate-by))));
-  --color-5: oklch(from var(--palette-source) 80% calc(0.16 * (c / 0.21)) calc(h + (4 * var(--palette-hue-rotate-by))));
-  --color-6: oklch(from var(--palette-source) 71% calc(0.19 * (c / 0.21)) calc(h + (5 * var(--palette-hue-rotate-by))));
-  --color-7: oklch(from var(--palette-source) 66% calc(0.2 * (c / 0.21)) calc(h + (6 * var(--palette-hue-rotate-by))));
-  --color-8: oklch(from var(--palette-source) 58% calc(0.21 * (c / 0.21)) calc(h + (7 * var(--palette-hue-rotate-by))));
-  --color-9: oklch(from var(--palette-source) 53% calc(0.2 * (c / 0.21)) calc(h + (8 * var(--palette-hue-rotate-by))));
-  --color-10: oklch(from var(--palette-source) 49% calc(0.19 * (c / 0.21)) calc(h + (9 * var(--palette-hue-rotate-by))));
-  --color-11: oklch(from var(--palette-source) 42% calc(0.17 * (c / 0.21)) calc(h + (10 * var(--palette-hue-rotate-by))));
-  --color-12: oklch(from var(--palette-source) 35% calc(0.15 * (c / 0.21)) calc(h + (11 * var(--palette-hue-rotate-by))));
-  --color-13: oklch(from var(--palette-source) 27% calc(0.12 * (c / 0.21)) calc(h + (12 * var(--palette-hue-rotate-by))));
-  --color-14: oklch(from var(--palette-source) 20% calc(0.09 * (c / 0.21)) calc(h + (13 * var(--palette-hue-rotate-by))));
-  --color-15: oklch(from var(--palette-source) 16% calc(0.07 * (c / 0.21)) calc(h + (14 * var(--palette-hue-rotate-by))));
-  --color-16: oklch(from var(--palette-source) 10% calc(0.05 * (c / 0.21)) calc(h + (15 * var(--palette-hue-rotate-by))));
-}
+    /* Colors */
+    --color-1: oklch(
+      from var(--palette-source) 98% calc(0.03 * (c / 0.21))
+        calc(h + (0 * var(--palette-hue-rotate-by)))
+    );
+    --color-2: oklch(
+      from var(--palette-source) 97% calc(0.06 * (c / 0.21))
+        calc(h + (1 * var(--palette-hue-rotate-by)))
+    );
+    --color-3: oklch(
+      from var(--palette-source) 93% calc(0.1 * (c / 0.21))
+        calc(h + (2 * var(--palette-hue-rotate-by)))
+    );
+    --color-4: oklch(
+      from var(--palette-source) 84% calc(0.12 * (c / 0.21))
+        calc(h + (3 * var(--palette-hue-rotate-by)))
+    );
+    --color-5: oklch(
+      from var(--palette-source) 80% calc(0.16 * (c / 0.21))
+        calc(h + (4 * var(--palette-hue-rotate-by)))
+    );
+    --color-6: oklch(
+      from var(--palette-source) 71% calc(0.19 * (c / 0.21))
+        calc(h + (5 * var(--palette-hue-rotate-by)))
+    );
+    --color-7: oklch(
+      from var(--palette-source) 66% calc(0.2 * (c / 0.21))
+        calc(h + (6 * var(--palette-hue-rotate-by)))
+    );
+    --color-8: oklch(
+      from var(--palette-source) 58% calc(0.21 * (c / 0.21))
+        calc(h + (7 * var(--palette-hue-rotate-by)))
+    );
+    --color-9: oklch(
+      from var(--palette-source) 53% calc(0.2 * (c / 0.21))
+        calc(h + (8 * var(--palette-hue-rotate-by)))
+    );
+    --color-10: oklch(
+      from var(--palette-source) 49% calc(0.19 * (c / 0.21))
+        calc(h + (9 * var(--palette-hue-rotate-by)))
+    );
+    --color-11: oklch(
+      from var(--palette-source) 42% calc(0.17 * (c / 0.21))
+        calc(h + (10 * var(--palette-hue-rotate-by)))
+    );
+    --color-12: oklch(
+      from var(--palette-source) 35% calc(0.15 * (c / 0.21))
+        calc(h + (11 * var(--palette-hue-rotate-by)))
+    );
+    --color-13: oklch(
+      from var(--palette-source) 27% calc(0.12 * (c / 0.21))
+        calc(h + (12 * var(--palette-hue-rotate-by)))
+    );
+    --color-14: oklch(
+      from var(--palette-source) 20% calc(0.09 * (c / 0.21))
+        calc(h + (13 * var(--palette-hue-rotate-by)))
+    );
+    --color-15: oklch(
+      from var(--palette-source) 16% calc(0.07 * (c / 0.21))
+        calc(h + (14 * var(--palette-hue-rotate-by)))
+    );
+    --color-16: oklch(
+      from var(--palette-source) 10% calc(0.05 * (c / 0.21))
+        calc(h + (15 * var(--palette-hue-rotate-by)))
+    );
 
-/* Gray ramp — derived from each --color-N step so it shares the palette's
-   per-step lightness curve. --gray-chroma / --gray-hue follow the Open Props
-   convention (hue is the third oklch arg, NOT lightness). Override either
-   in a theme to warm/cool the grays without redefining each --gray-N. */
-* {
-  --gray-chroma: 0.01;
-  --gray-hue: 255;
+    /* Grays */
+    --gray-chroma: 0.01;
+    --gray-hue: 255;
 
-  --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
-  --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
-  --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
-  --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
-  --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
-  --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
-  --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
-  --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
-  --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
-  --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
-  --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
-  --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
-  --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
-  --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
-  --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
-  --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
+    --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
+    --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
+    --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
+    --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
+    --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
+    --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
+    --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
+    --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
+    --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
+    --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
+    --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
+    --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
+    --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
+    --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
+    --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
+    --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
+  }
 }

package/core/utils.css

@@ -1,5 +1,4 @@
 @layer utils {
-
   /*
 Screen-reader only
 When you visibly want to hide an element but make it accessible for screen readers.
@@ -59,7 +58,8 @@ Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dia
         inset-inline-start: 50%;
         position: absolute;
         transform-origin: center center;
-        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
+        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%)
+          translateZ(-1px) scale(var(--thumb-scale));
         will-change: transform;
 
         @media (prefers-reduced-motion: no-preference) {

package/css/components/accordion.css

@@ -69,7 +69,7 @@
     }
 
     /* Layout */
-    &>summary {
+    & > summary {
       background-color: inherit;
       cursor: pointer;
       font-weight: 700;
@@ -94,17 +94,17 @@
       }
     }
 
-    &[open]>summary svg {
+    &[open] > summary svg {
       rotate: 180deg;
     }
 
-    &>.ui-content {
+    & > .ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    &>.ui-actions {
+    & > .ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
@@ -129,12 +129,12 @@
       }
     }
 
-    &>.ui-content {
+    & > .ui-content {
       margin-block: 0;
       padding: 0;
     }
 
-    &>details.ui-accordion {
+    & > details.ui-accordion {
       --_border-color: transparent;
       --_border-width: 0;
       --_margin-inline: 0;
@@ -143,7 +143,7 @@
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      &+& {
+      & + & {
         border-block-start: 1px solid var(--_gutter-color);
         border-radius: 0;
       }