opui-css 5.0.0 → 5.1.0

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 */
-
-  /* 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));
-}
+@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,71 +1,71 @@
-@layer utils {
-
-  /*
-Screen-reader only
-When you visibly want to hide an element but make it accessible for screen readers.
-*/
-  .ui-sr-only {
-    block-size: 1px;
-    clip-path: inset(50%);
-    inline-size: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-  }
-
-  /*
-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]) {
-    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;
-
-        @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.
+*/
+  .ui-sr-only {
+    block-size: 1px;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  /*
+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]) {
+    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;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: transform 0.2s ease;
+        }
+      }
+    }
+  }
+}

package/css/components/accordion.css

@@ -1,174 +1,174 @@
-@layer components.extended {
-  :where(details.ui-accordion) {
-    --_actions-gap: var(--size-1);
-    --_actions-margin-block-start: var(--size-3);
-    --_actions-padding-block-end: var(--size-1);
-    --_actions-padding-inline: var(--size-3) var(--size-1);
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-radius: var(--border-radius, 4px);
-    --_border-width: 0;
-    --_content-padding-block: var(--size-2) var(--size-3);
-    --_content-padding-inline: var(--_padding-inline);
-    --_margin-inline: var(--size-1);
-    --_padding-inline: initial;
-    --_shadow: none;
-    --_summary-padding-block: var(--size-3);
-    --_summary-padding-inline: var(--_padding-inline);
-    --_svg-transition: 0.2s var(--ease-1);
-    --_transition: 0.2s;
-
-    background-color: var(--_bg-color);
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_border-radius);
-    box-shadow: var(--_shadow);
-    display: block;
-    margin-inline: var(--_margin-inline);
-    transition: all var(--_transition) ease-out;
-
-    &.ui-elevated {
-      --_bg-color: var(--surface-elevated);
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-      --_shadow: var(--shadow-3);
-    }
-
-    &.ui-outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_border-width: 1px;
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-    }
-
-    /* Accordion animation */
-    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    @media (prefers-reduced-motion: no-preference) {
-      interpolate-size: allow-keywords;
-    }
-
-    &::details-content {
-      block-size: 0;
-      opacity: 0;
-      overflow-y: clip;
-      transition:
-        content-visibility var(--_transition) allow-discrete,
-        opacity var(--_transition),
-        block-size var(--_transition);
-    }
-
-    &[open]::details-content {
-      block-size: auto;
-      opacity: 1;
-    }
-
-    /* Layout */
-    &>summary {
-      background-color: inherit;
-      cursor: pointer;
-      font-weight: 700;
-      padding-block: var(--_summary-padding-block);
-      padding-inline: var(--_summary-padding-inline);
-      user-select: none;
-
-      &:has(svg) {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        list-style: none;
-
-        &::marker,
-        &::-webkit-details-marker {
-          display: none;
-        }
-      }
-
-      svg {
-        transition: rotate var(--_svg-transition);
-      }
-    }
-
-    &[open]>summary svg {
-      rotate: 180deg;
-    }
-
-    &>.ui-content {
-      margin-block-start: 0;
-      padding-block: var(--_content-padding-block);
-      padding-inline: var(--_content-padding-inline);
-    }
-
-    &>.ui-actions {
-      display: flex;
-      gap: var(--_actions-gap);
-      justify-content: end;
-      margin-block-start: var(--_actions-margin-block-start);
-      padding-block-end: var(--_actions-padding-block-end);
-      padding-inline: var(--_actions-padding-inline);
-    }
-  }
-
-  /* Accordion group  */
-  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
-    --_group-radius: var(--border-radius);
-    --_gutter-color: var(--border-color);
-    --_item-padding-inline: var(--size-3);
-    --_item-summary-padding-inline: var(--_item-padding-inline);
-
-    display: block;
-
-    &.ui-card {
-      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
-        --_item-summary-padding-inline: 0;
-      }
-    }
-
-    &>.ui-content {
-      margin-block: 0;
-      padding: 0;
-    }
-
-    &>details.ui-accordion {
-      --_border-color: transparent;
-      --_border-width: 0;
-      --_margin-inline: 0;
-      --_padding-inline: var(--_item-padding-inline);
-      --_shadow: none;
-      --_summary-padding-inline: var(--_item-summary-padding-inline);
-
-      /* Border between accordion items */
-      &+& {
-        border-block-start: 1px solid var(--_gutter-color);
-        border-radius: 0;
-      }
-
-      /* First item */
-      &:first-of-type {
-        border-start-end-radius: var(--_group-radius);
-        border-start-start-radius: var(--_group-radius);
-
-        summary {
-          border-start-end-radius: var(--_group-radius);
-          border-start-start-radius: var(--_group-radius);
-        }
-      }
-
-      /* Last item */
-      &:last-of-type {
-        border-end-end-radius: var(--_group-radius);
-        border-end-start-radius: var(--_group-radius);
-
-        summary {
-          border-end-end-radius: var(--_group-radius);
-          border-end-start-radius: var(--_group-radius);
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(details.ui-accordion) {
+    --_actions-gap: var(--size-1);
+    --_actions-margin-block-start: var(--size-3);
+    --_actions-padding-block-end: var(--size-1);
+    --_actions-padding-inline: var(--size-3) var(--size-1);
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-radius: var(--border-radius, 4px);
+    --_border-width: 0;
+    --_content-padding-block: var(--size-2) var(--size-3);
+    --_content-padding-inline: var(--_padding-inline);
+    --_margin-inline: var(--size-1);
+    --_padding-inline: initial;
+    --_shadow: none;
+    --_summary-padding-block: var(--size-3);
+    --_summary-padding-inline: var(--_padding-inline);
+    --_svg-transition: 0.2s var(--ease-1);
+    --_transition: 0.2s;
+
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    box-shadow: var(--_shadow);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    transition: all var(--_transition) ease-out;
+
+    &.ui-elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+      --_shadow: var(--shadow-3);
+    }
+
+    &.ui-outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_border-width: 1px;
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    &.ui-tonal {
+      --_bg-color: var(--surface-tonal);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition:
+        content-visibility var(--_transition) allow-discrete,
+        opacity var(--_transition),
+        block-size var(--_transition);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+
+    /* Layout */
+    & > summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--_summary-padding-block);
+      padding-inline: var(--_summary-padding-inline);
+      user-select: none;
+
+      &:has(svg) {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        list-style: none;
+
+        &::marker,
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+
+      svg {
+        transition: rotate var(--_svg-transition);
+      }
+    }
+
+    &[open] > summary svg {
+      rotate: 180deg;
+    }
+
+    & > .ui-content {
+      margin-block-start: 0;
+      padding-block: var(--_content-padding-block);
+      padding-inline: var(--_content-padding-inline);
+    }
+
+    & > .ui-actions {
+      display: flex;
+      gap: var(--_actions-gap);
+      justify-content: end;
+      margin-block-start: var(--_actions-margin-block-start);
+      padding-block-end: var(--_actions-padding-block-end);
+      padding-inline: var(--_actions-padding-inline);
+    }
+  }
+
+  /* Accordion group  */
+  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
+    --_group-radius: var(--border-radius);
+    --_gutter-color: var(--border-color);
+    --_item-padding-inline: var(--size-3);
+    --_item-summary-padding-inline: var(--_item-padding-inline);
+
+    display: block;
+
+    &.ui-card {
+      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
+        --_item-summary-padding-inline: 0;
+      }
+    }
+
+    & > .ui-content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    & > details.ui-accordion {
+      --_border-color: transparent;
+      --_border-width: 0;
+      --_margin-inline: 0;
+      --_padding-inline: var(--_item-padding-inline);
+      --_shadow: none;
+      --_summary-padding-inline: var(--_item-summary-padding-inline);
+
+      /* Border between accordion items */
+      & + & {
+        border-block-start: 1px solid var(--_gutter-color);
+        border-radius: 0;
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-end-radius: var(--_group-radius);
+        border-start-start-radius: var(--_group-radius);
+
+        summary {
+          border-start-end-radius: var(--_group-radius);
+          border-start-start-radius: var(--_group-radius);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-end-radius: var(--_group-radius);
+        border-end-start-radius: var(--_group-radius);
+
+        summary {
+          border-end-end-radius: var(--_group-radius);
+          border-end-start-radius: var(--_group-radius);
+        }
+      }
+    }
+  }
+}