opui-css 5.0.0 → 5.0.1

package/components/ToggleGroup/ToggleGroup.astro

@@ -1,49 +1,49 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  name?: string
-  orientation?: "vertical"
-  selection?: "single" | "multiple"
-  size?: "default" | "small" | "x-small"
-}
-
-export const title = "Toggle Group"
-
-const {
-  class: className,
-  name,
-  orientation,
-  selection = "multiple",
-  size = "default",
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-const groupName = name || $id("toggle-group")
-const inputType = selection === "single" ? "radio" : "checkbox"
-
-const originalName = Astro.locals.currentToggleGroupName
-const originalType = Astro.locals.currentToggleGroupType
-
-Astro.locals.currentToggleGroupName = groupName
-Astro.locals.currentToggleGroupType = inputType
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.currentToggleGroupName = originalName
-Astro.locals.currentToggleGroupType = originalType
----
-
-<div
-  class:list={[
-    "ui-toggle-group",
-    size !== "default" && size && `ui-${size}`,
-    orientation && `ui-${orientation}`,
-    className,
-  ]}
-  role={selection === "single" ? "radiogroup" : "group"}
-  {...rest}
->
-  <Fragment set:html={html} />
-</div>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  name?: string
+  orientation?: "vertical"
+  selection?: "single" | "multiple"
+  size?: "default" | "small" | "x-small"
+}
+
+export const title = "Toggle Group"
+
+const {
+  class: className,
+  name,
+  orientation,
+  selection = "multiple",
+  size = "default",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const groupName = name || $id("toggle-group")
+const inputType = selection === "single" ? "radio" : "checkbox"
+
+const originalName = Astro.locals.currentToggleGroupName
+const originalType = Astro.locals.currentToggleGroupType
+
+Astro.locals.currentToggleGroupName = groupName
+Astro.locals.currentToggleGroupType = inputType
+
+const html = await Astro.slots.render("default")
+
+Astro.locals.currentToggleGroupName = originalName
+Astro.locals.currentToggleGroupType = originalType
+---
+
+<div
+  class:list={[
+    "ui-toggle-group",
+    size !== "default" && size && `ui-${size}`,
+    orientation && `ui-${orientation}`,
+    className,
+  ]}
+  role={selection === "single" ? "radiogroup" : "group"}
+  {...rest}
+>
+  <Fragment set:html={html} />
+</div>

package/components/Tooltip/Tooltip.astro

@@ -1,30 +1,30 @@
----
-import Anchor from "../Anchor/Anchor.astro"
-
-type Props = {
-  [key: string]: any
-  alignment?: string
-  arrow?: boolean
-  class?: string
-  id?: string
-  label?: string
-}
-
-export const title = "Tooltip"
-
-const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
----
-
-<Anchor
-  alignment={alignment}
-  class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
-  id={id}
-  trigger="hover"
-  {...rest}
->
-  <slot />
-  <Fragment slot="anchored">
-    {label}
-    <slot name="content" />
-  </Fragment>
-</Anchor>
+---
+import Anchor from "../Anchor/Anchor.astro"
+
+type Props = {
+  [key: string]: any
+  alignment?: string
+  arrow?: boolean
+  class?: string
+  id?: string
+  label?: string
+}
+
+export const title = "Tooltip"
+
+const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
+---
+
+<Anchor
+  alignment={alignment}
+  class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
+  id={id}
+  trigger="hover"
+  {...rest}
+>
+  <slot />
+  <Fragment slot="anchored">
+    {label}
+    <slot name="content" />
+  </Fragment>
+</Anchor>

package/core/normalize.css

@@ -1,194 +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-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;
-  }
-}
+@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

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