opui-css 3.3.5 → 4.0.0

package/{src/core → core}/normalize.css

@@ -1,196 +1,194 @@
-@layer normalize {
-  *,
-  ::before,
-  ::after {
-    /* Set box sizing instead of inheriting */
-    /* https://www.oddbird.net/2025/09/04/box-model/ */
-    box-sizing: border-box;
-  }
-
-  * {
-    scrollbar-width: thin;
-  }
-
-  :where(html) {
-    --_page-bg-color: var(--surface-default);
-
-    accent-color: var(--primary);
-    background-color: var(--_page-bg-color);
-    block-size: 100%;
-    caret-color: var(--primary);
-    color: var(--text-color-2);
-    font-family: var(--font-sans);
-    interpolate-size: allow-keywords;
-    line-height: var(--font-lineheight-4);
-
-    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-
-    @media (--motionOK) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  :where(body) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    container-type: inline-size;
-    font-size: 16px;
-    font-synthesis: style;
-    font-weight: 400;
-    inline-size: 100%;
-    margin: 0;
-    min-block-size: 100%;
-    min-inline-size: 320px;
-    position: relative;
-    text-rendering: optimizeLegibility;
-  }
-
-  /* TODO */
-  :where(:not(dialog, popover)) {
-    margin: 0;
-  }
-
-  :where(:not(fieldset, progress, meter)) {
-    background-origin: border-box;
-    background-repeat: no-repeat;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  :where(fieldset) {
-    border: var(--field-border-width) solid var(--field-border-color);
-    border-radius: var(--field-border-radius);
-    padding: var(--size-3);
-    display: grid;
-    gap: var(--size-3);
-  }
-
-  :where(input, button, textarea),
-  :where(input[type="file"])::-webkit-file-upload-button {
-    color: inherit;
-    font-size: inherit;
-    font: inherit;
-    letter-spacing: inherit;
-  }
-
-  :where(input):-webkit-autofill,
-  :where(input):-webkit-autofill:hover,
-  :where(input):-webkit-autofill:focus,
-  :where(textarea):-webkit-autofill,
-  :where(textarea):-webkit-autofill:hover,
-  :where(textarea):-webkit-autofill:focus,
-  :where(select):-webkit-autofill,
-  :where(select):-webkit-autofill:hover,
-  :where(select):-webkit-autofill:focus,
-  :where(input):autofill,
-  :where(input):autofill:hover,
-  :where(input):autofill:focus,
-  :where(textarea):autofill,
-  :where(textarea):autofill:hover,
-  :where(textarea):autofill:focus,
-  :where(select):autofill,
-  :where(select):autofill:hover,
-  :where(select):autofill:focus {
-    -webkit-text-fill-color: var(--text-color-2);
-    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
-    transition: background-color 5000s ease-in-out 0s;
-  }
-
-  ::placeholder {
-    color: var(--text-color-2);
-  }
-
-  ::-moz-placeholder {
-    opacity: 1;
-  }
-
-  :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)
-    );
-
-    border-radius: var(--border-radius, 0px);
-    outline: 2px solid var(--_focus-visible-color);
-    outline-offset: 2px;
-  }
-
-  @media (--motionOK) {
-    :where(:focus-visible) {
-      transition: outline-offset 145ms var(--ease-2);
-    }
-    :where(:not(:active):focus-visible) {
-      transition-duration: 0.15s;
-    }
-  }
-
-  :where(:not(:active):focus-visible) {
-    outline-offset: var(--outline-offset, 0px);
-  }
-
-  :where(
-      a[href],
-      area,
-      button,
-      input:not(
-          [type="text"],
-          [type="email"],
-          [type="number"],
-          [type="password"],
-          [type=""],
-          [type="tel"],
-          [type="url"]
-        ),
-      label[for],
-      select,
-      summary
-    ) {
-    cursor: pointer;
-  }
-
-  :where(
-      a[href],
-      area,
-      button,
-      [role="button"],
-      input,
-      label[for],
-      select,
-      summary,
-      textarea,
-      [tabindex]:not([tabindex*="-"])
-    ) {
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-  }
-
-  :where(img, svg, video, canvas, audio, iframe, embed, object) {
-    display: block;
-  }
-
-  :where(img, svg, video) {
-    block-size: auto;
-    max-inline-size: 100%;
-  }
-
-  :where(svg:not([width])) {
-    inline-size: var(--size-7);
-  }
-
-  :where(dt:not(:first-of-type)) {
-    margin-block-start: var(--size-5);
-  }
-
-  :where(figure) {
-    display: grid;
-    gap: var(--size-2);
-    place-items: center;
-  }
-
-  :target {
-    scroll-margin-block-start: 2rem;
-  }
-}
+@layer normalize {
+
+  *,
+  ::before,
+  ::after {
+    /* Set box sizing instead of inheriting */
+    /* https://www.oddbird.net/2025/09/04/box-model/ */
+    box-sizing: border-box;
+  }
+
+  * {
+    scrollbar-width: thin;
+  }
+
+  :where(html) {
+    --_page-bg-color: var(--surface-default);
+
+    accent-color: var(--primary);
+    background-color: var(--_page-bg-color);
+    block-size: 100%;
+    caret-color: var(--primary);
+    color: var(--text-muted, var(--text-color-2));
+    /* text-color-2 is for backwards compatibility */
+    font-family: var(--font-sans);
+    interpolate-size: allow-keywords;
+    line-height: var(--font-lineheight-4);
+
+    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  :where(body) {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    container-type: inline-size;
+    font-size: 16px;
+    font-synthesis: style;
+    font-weight: 400;
+    inline-size: 100%;
+    margin: 0;
+    min-block-size: 100%;
+    min-inline-size: 320px;
+    position: relative;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(:not(dialog, popover)) {
+    margin: 0;
+  }
+
+  :where(dialog:not([open])) {
+    outline: none !important;
+  }
+
+
+  :where(:not(fieldset, progress, meter)) {
+    background-origin: border-box;
+    background-repeat: no-repeat;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  :where(fieldset) {
+    border: var(--field-border-width) solid var(--field-border-color);
+    border-radius: var(--field-border-radius);
+    padding: var(--size-3);
+    display: grid;
+    gap: var(--size-3);
+  }
+
+  :where(input, button, textarea),
+  :where(input[type="file"])::-webkit-file-upload-button {
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  :where(input):-webkit-autofill,
+  :where(input):-webkit-autofill:hover,
+  :where(input):-webkit-autofill:focus,
+  :where(textarea):-webkit-autofill,
+  :where(textarea):-webkit-autofill:hover,
+  :where(textarea):-webkit-autofill:focus,
+  :where(select):-webkit-autofill,
+  :where(select):-webkit-autofill:hover,
+  :where(select):-webkit-autofill:focus,
+  :where(input):autofill,
+  :where(input):autofill:hover,
+  :where(input):autofill:focus,
+  :where(textarea):autofill,
+  :where(textarea):autofill:hover,
+  :where(textarea):autofill:focus,
+  :where(select):autofill,
+  :where(select):autofill:hover,
+  :where(select):autofill:focus {
+    -webkit-text-fill-color: var(--text-muted, var(--text-color-2));
+    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  ::placeholder {
+    color: var(--text-muted, var(--text-color-2));
+  }
+
+  ::-moz-placeholder {
+    opacity: 1;
+  }
+
+  :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));
+
+    border-radius: var(--border-radius, 0px);
+    outline: 2px solid var(--_focus-visible-color);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(:focus-visible) {
+      transition: outline-offset .15 var(--ease-2);
+    }
+
+    :where(:not(:active):focus-visible) {
+      transition-duration: 0.15s;
+    }
+  }
+
+  :where(:not(:active):focus-visible) {
+    outline-offset: var(--outline-offset, 0px);
+  }
+
+  :where(a[href],
+    area,
+    button,
+    input:not([type="text"],
+      [type="email"],
+      [type="number"],
+      [type="password"],
+      [type=""],
+      [type="tel"],
+      [type="url"]),
+    label[for],
+    select,
+    summary) {
+    cursor: pointer;
+  }
+
+  :where(a[href],
+    area,
+    button,
+    [role="button"],
+    input,
+    label[for],
+    select,
+    summary,
+    textarea,
+    [tabindex]:not([tabindex*="-"])) {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+  }
+
+  :where(img, svg, video) {
+    block-size: auto;
+    max-inline-size: 100%;
+  }
+
+  :where(svg:not([width])) {
+    inline-size: var(--size-7);
+  }
+
+  :where(dt:not(:first-of-type)) {
+    margin-block-start: var(--size-5);
+  }
+
+  :where(figure) {
+    display: grid;
+    gap: var(--size-2);
+    place-items: center;
+  }
+
+  :target {
+    scroll-margin-block-start: 2rem;
+  }
+}

package/core/palette.css

@@ -0,0 +1,59 @@
+: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));
+}

package/{src/core → core}/utils.css

@@ -1,60 +1,71 @@
-@layer utils {
-  /*
-Screen-reader only
-When you visibly want to hide an element but make it accessible for screen readers.
-*/
-  .sr-only {
-    block-size: 1px;
-    clip-path: inset(50%);
-    inline-size: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-  }
-
-  /* Hover and active effect for checkbox, radio and icon buttons */
-  :where(.checkbox input, .radio input, .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;
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform 0.2s ease;
-        }
-      }
-    }
-  }
-}
+@layer utils {
+
+  /*
+Screen-reader only
+When you visibly want to hide an element but make it accessible for screen readers.
+*/
+  .sr-only {
+    block-size: 1px;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  /*
+Scroll-lock
+Add `.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(.scroll-lock[open]) {
+    overflow: clip;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  /* Hover and active effect for checkbox, radio and icon buttons */
+  :where(.checkbox input, .radio input, .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;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: transform 0.2s ease;
+        }
+      }
+    }
+  }
+}