opui-css 5.4.2 → 6.0.0-rc.1

package/core/palette.css

@@ -1,207 +1,3 @@
-@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,
@@ -209,106 +5,127 @@
     .ui-critical,
     .ui-info,
     .ui-success,
-    [data-invalid],
-    del,
-    ins,
-    abbr,
-    dfn,
+    .ui-neutral,
     .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)
+    --ui-palette-source: oklch(
+      58% calc(0.21 * var(--ui-palette-chroma)) var(--ui-palette-hue)
     );
 
     /* Colors */
-    --color-1: oklch(
-      from var(--palette-source) 98% calc(0.03 * (c / 0.21))
-        calc(h + (0 * var(--palette-hue-rotate-by)))
+    --ui-color-1: oklch(
+      from var(--ui-palette-source) 98% calc(0.03 * (c / 0.21))
+        calc(h + (0 * var(--ui-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)))
+    --ui-color-2: oklch(
+      from var(--ui-palette-source) 97% calc(0.06 * (c / 0.21))
+        calc(h + (1 * var(--ui-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)))
+    --ui-color-3: oklch(
+      from var(--ui-palette-source) 93% calc(0.1 * (c / 0.21))
+        calc(h + (2 * var(--ui-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)))
+    --ui-color-4: oklch(
+      from var(--ui-palette-source) 84% calc(0.12 * (c / 0.21))
+        calc(h + (3 * var(--ui-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)))
+    --ui-color-5: oklch(
+      from var(--ui-palette-source) 80% calc(0.16 * (c / 0.21))
+        calc(h + (4 * var(--ui-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)))
+    --ui-color-6: oklch(
+      from var(--ui-palette-source) 71% calc(0.19 * (c / 0.21))
+        calc(h + (5 * var(--ui-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)))
+    --ui-color-7: oklch(
+      from var(--ui-palette-source) 66% calc(0.2 * (c / 0.21))
+        calc(h + (6 * var(--ui-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)))
+    --ui-color-8: oklch(
+      from var(--ui-palette-source) 58% calc(0.21 * (c / 0.21))
+        calc(h + (7 * var(--ui-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)))
+    --ui-color-9: oklch(
+      from var(--ui-palette-source) 53% calc(0.2 * (c / 0.21))
+        calc(h + (8 * var(--ui-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)))
+    --ui-color-10: oklch(
+      from var(--ui-palette-source) 49% calc(0.19 * (c / 0.21))
+        calc(h + (9 * var(--ui-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)))
+    --ui-color-11: oklch(
+      from var(--ui-palette-source) 42% calc(0.17 * (c / 0.21))
+        calc(h + (10 * var(--ui-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)))
+    --ui-color-12: oklch(
+      from var(--ui-palette-source) 35% calc(0.15 * (c / 0.21))
+        calc(h + (11 * var(--ui-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)))
+    --ui-color-13: oklch(
+      from var(--ui-palette-source) 27% calc(0.12 * (c / 0.21))
+        calc(h + (12 * var(--ui-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)))
+    --ui-color-14: oklch(
+      from var(--ui-palette-source) 20% calc(0.09 * (c / 0.21))
+        calc(h + (13 * var(--ui-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)))
+    --ui-color-15: oklch(
+      from var(--ui-palette-source) 16% calc(0.07 * (c / 0.21))
+        calc(h + (14 * var(--ui-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)))
+    --ui-color-16: oklch(
+      from var(--ui-palette-source) 10% calc(0.05 * (c / 0.21))
+        calc(h + (15 * var(--ui-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));
+    --ui-gray-1: oklch(
+      from var(--ui-color-1) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-2: oklch(
+      from var(--ui-color-2) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-3: oklch(
+      from var(--ui-color-3) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-4: oklch(
+      from var(--ui-color-4) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-5: oklch(
+      from var(--ui-color-5) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-6: oklch(
+      from var(--ui-color-6) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-7: oklch(
+      from var(--ui-color-7) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-8: oklch(
+      from var(--ui-color-8) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-9: oklch(
+      from var(--ui-color-9) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-10: oklch(
+      from var(--ui-color-10) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-11: oklch(
+      from var(--ui-color-11) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-12: oklch(
+      from var(--ui-color-12) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-13: oklch(
+      from var(--ui-color-13) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-14: oklch(
+      from var(--ui-color-14) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-15: oklch(
+      from var(--ui-color-15) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
+    --ui-gray-16: oklch(
+      from var(--ui-color-16) l var(--ui-gray-chroma) var(--ui-gray-hue)
+    );
   }
 }

package/core/utils.css

@@ -1,4 +1,23 @@
 @layer utils {
+  .ui-motion-off {
+    --ui-motion: 0;
+  }
+
+  .ui-motion-on {
+    --ui-motion: 1;
+  }
+
+  .ui-motion-debug {
+    --ui-motion: 10;
+  }
+
+  .ui-contrast-more {
+    --ui-contrast: more;
+  }
+
+  .ui-contrast-normal {
+    --ui-contrast: normal;
+  }
 
   /*
 Screen-reader only
@@ -10,6 +29,14 @@ Screen-reader only
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
+
+    &.ui-focusable:focus-visible {
+      block-size: auto;
+      clip-path: none;
+      inline-size: auto;
+      position: static;
+      white-space: normal;
+    }
   }
 
   /*
@@ -17,52 +44,12 @@ Scroll-lock
 Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dialog>,
 <details>, or any custom element). When that element is open, the page is locked.
 */
-  html:has(.ui-scroll-lock[open]) {
+  html:has(
+    .ui-dialog:modal,
+    .ui-scroll-lock[open]:not(.ui-backdrop-transparent)
+  ) {
     overflow: clip;
     overscroll-behavior: contain;
     scrollbar-gutter: stable;
   }
-
-  /* Hover and active effect for checkbox, radio and icon buttons */
-  :where(.ui-checkbox input, .ui-radio input, .ui-icon-button) {
-    --isLTR: 1;
-    --isRTL: -1;
-
-    position: relative;
-    transform-style: preserve-3d;
-
-    &:dir(rtl) {
-      --isLTR: -1;
-      --isRTL: 1;
-    }
-
-    &:where(:not([disabled])) {
-      &:hover:before {
-        --thumb-scale: 1;
-      }
-
-      &:active:before {
-        --thumb-scale: 1.1;
-      }
-
-      &::before {
-        --thumb-scale: 0.01;
-        --highlight-size: 150%;
-
-        background-color: oklch(0.6 0 0 / 0.2);
-        block-size: var(--highlight-size);
-        clip-path: circle(50%);
-        content: "";
-        inline-size: var(--highlight-size);
-        inset-block-start: 50%;
-        inset-inline-start: 50%;
-        position: absolute;
-        transform-origin: center center;
-        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
-        will-change: transform;
-
-        transition: transform calc(0.2s * var(--motion, 1)) ease;
-      }
-    }
-  }
 }

package/css/compat/avatar.css

@@ -0,0 +1,7 @@
+@layer components.compat {
+  @supports not (corner-shape: squircle) {
+    :where(.ui-avatar).ui-squircle {
+      border-radius: 27%;
+    }
+  }
+}

package/css/compat/menu.css

@@ -0,0 +1,20 @@
+@layer components.compat {
+  /* iOS Safari doesn't place a submenu at its trigger item, so there it
+     anchors to the parent menu. Remove once iOS Safari does. */
+  @supports (-webkit-touch-callout: none) {
+    :where(.ui-menu) {
+      &:has(.ui-menu[popover]) {
+        anchor-name: --ui-menu;
+      }
+
+      &:not(.ui-menu .ui-menu):has(.ui-menu[popover]) {
+        anchor-name: --ui-menu-root, --ui-menu;
+        anchor-scope: --ui-menu-root, --ui-menu;
+      }
+
+      & .ui-menu[popover] {
+        position-anchor: --ui-menu;
+      }
+    }
+  }
+}

package/css/compat.css

@@ -0,0 +1,3 @@
+@import "./layers.css";
+@import "./compat/avatar.css";
+@import "./compat/menu.css";