opui-css 5.0.1 → 5.1.1

package/core/palette.css

@@ -1,59 +1,314 @@
-: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 */
-
-  /* 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));
-}
-
-* {
-  --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;
-
-  --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));
+@property --color-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --palette-source {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --palette-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 240;
+}
+
+@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;
+
+    --palette-source: oklch(
+      58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250)
+    );
+
+    /* 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)))
+    );
+
+    /* 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));
+  }
 }

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;
       }

package/css/components/anchor.css

@@ -1,27 +1,27 @@
 @layer components.root {
-	:where(.ui-anchor) {
-		anchor-name: --anchor;
-		anchor-scope: --anchor;
-		display: inline-block;
-		inline-size: fit-content;
+  :where(.ui-anchor) {
+    anchor-name: --anchor;
+    anchor-scope: --anchor;
+    display: inline-block;
+    inline-size: fit-content;
 
-		/* Always-visible */
-		&>.ui-anchor-floating:not([popover]) {
-			block-size: max-content;
-			inline-size: max-content;
-			position: absolute;
-			position-anchor: --anchor;
-			position-area: var(--anchor-position-area, start end);
-			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
-		}
+    /* Always-visible */
+    & > .ui-anchor-floating:not([popover]) {
+      block-size: max-content;
+      inline-size: max-content;
+      position: absolute;
+      position-anchor: --anchor;
+      position-area: var(--anchor-position-area, start end);
+      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+    }
 
-		/* Hover-triggered */
-		&>.ui-anchor-floating[popover] {
-			inset: unset;
-			margin: 0;
-			position: absolute;
-			position-area: var(--anchor-position-area, start end);
-			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
-		}
-	}
+    /* Hover-triggered */
+    & > .ui-anchor-floating[popover] {
+      inset: unset;
+      margin: 0;
+      position: absolute;
+      position-area: var(--anchor-position-area, start end);
+      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+    }
+  }
 }

package/css/components/badge.css

@@ -15,14 +15,14 @@
 
     /* Floating wrapper: traditional inset-based positioning so this works
        in browsers without position-area support (Firefox, older Safari). */
-    &>.ui-anchor-floating:not([popover]) {
+    & > .ui-anchor-floating:not([popover]) {
       inset: var(--_badge-inset);
       position-anchor: auto;
       position-area: none;
     }
 
     /* Indicator */
-    &>.ui-anchor-floating>.ui-badge-indicator {
+    & > .ui-anchor-floating > .ui-badge-indicator {
       background-color: var(--_bg-color);
       block-size: var(--_size);
       border: 2px solid var(--_border-color);
@@ -91,7 +91,7 @@
       --_anchor-ty: var(--_dot-size);
     }
 
-    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
+    &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
       block-size: var(--_dot-size);
       inline-size: var(--_dot-size);
       min-inline-size: var(--_dot-size);
@@ -99,7 +99,7 @@
     }
 
     /* Visibility */
-    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
+    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }

package/css/components/button-group.css

@@ -11,8 +11,10 @@
       border-radius: 0;
 
       /* button.css > --_accent-tonal */
-      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
-          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
+      --_divider-color: light-dark(
+        oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+        oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
+      );
 
       &.ui-outlined {
         --_divider-color: var(--_border-color);
@@ -29,16 +31,19 @@
       /* Color inheritance from Button Group — shared interaction model.
          The .critical scope class in theme.css redirects --palette-source so
          --color-6 below becomes a tint of the active color. */
-      :where(.ui-button-group.ui-critical,
-        .ui-button-group.ui-primary) & {
+      :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
         --_color-contrast: var(--gray-1);
         --_color-tonal: var(--color-6);
         --_accent-tonal-contrast: var(--text-primary-contrast);
         --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
         --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
         --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
-        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+        --_filled-active-bg-color: oklch(
+          from var(--_accent) calc(l - 0.15) c h
+        );
+        --_outlined-active-bg-color: oklch(
+          from var(--_accent) calc(l - 0.1) c h
+        );
       }
 
       :where(.ui-button-group.ui-critical) & {
@@ -101,10 +106,11 @@
         --_text-color: var(--_accent-contrast);
         --_divider-color: currentColor;
 
-        :where(.ui-button-group.ui-critical,
-          .ui-button-group.ui-primary) & {
-          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
-              oklch(from var(--_accent) calc(l + 0.1) c h));
+        :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
+          --_divider-color: light-dark(
+            oklch(from var(--_accent) calc(l - 0.1) c h),
+            oklch(from var(--_accent) calc(l + 0.1) c h)
+          );
         }
 
         &:where(:not([disabled])) {
@@ -132,13 +138,17 @@
         }
 
         /* Siblings */
-        &+& {
+        & + & {
           border-inline-start-color: var(--_divider-color);
           border-inline-width: 1px;
           margin-inline-start: -1px;
 
           &[disabled] {
-            border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+            border-inline-start-color: color-mix(
+              in oklch,
+              var(--_divider-color) 40%,
+              transparent
+            );
           }
         }
       }
@@ -165,12 +175,16 @@
           border-end-end-radius: var(--_border-radius);
         }
 
-        &+& {
+        & + & {
           border-block-start: 1px solid var(--_divider-color);
           margin-block-start: -1px;
 
           &[disabled] {
-            border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+            border-block-start-color: color-mix(
+              in oklch,
+              var(--_divider-color) 40%,
+              transparent
+            );
           }
         }
       }