@a-type/ui 5.0.20 → 5.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/css/main.css +2 -2
  2. package/dist/esm/components/autocomplete/Autocomplete.d.ts +22 -22
  3. package/dist/esm/components/collapsible/Collapsible.d.ts +4 -4
  4. package/dist/esm/components/collapsible/Collapsible.stories.d.ts +1 -1
  5. package/dist/esm/components/colorMode/ColorModeToggle.d.ts +1 -1
  6. package/dist/esm/components/colorMode/ColorModeToggle.js.map +1 -1
  7. package/dist/esm/components/combobox/Combobox.d.ts +27 -27
  8. package/dist/esm/components/combobox/Combobox.js +2 -2
  9. package/dist/esm/components/combobox/Combobox.js.map +1 -1
  10. package/dist/esm/components/contextMenu/contextMenu.d.ts +6 -6
  11. package/dist/esm/components/contextMenu/contextMenu.stories.d.ts +5 -5
  12. package/dist/esm/components/dialog/Dialog.d.ts +9 -7
  13. package/dist/esm/components/dialog/Dialog.stories.d.ts +6 -6
  14. package/dist/esm/components/dropdownMenu/DropdownMenu.d.ts +12 -12
  15. package/dist/esm/components/forms/FormikForm.d.ts +2 -2
  16. package/dist/esm/components/forms/FormikForm.stories.d.ts +2 -2
  17. package/dist/esm/components/forms/ToggleGroupField.d.ts +3 -3
  18. package/dist/esm/components/forms/ToggleGroupField.js +3 -3
  19. package/dist/esm/components/forms/ToggleGroupField.js.map +1 -1
  20. package/dist/esm/components/lightbox/Lightbox.d.ts +5 -5
  21. package/dist/esm/components/lightbox/Lightbox.stories.d.ts +6 -6
  22. package/dist/esm/components/popover/Popover.d.ts +4 -4
  23. package/dist/esm/components/progress/Progress.d.ts +8 -8
  24. package/dist/esm/components/progress/Progress.stories.d.ts +8 -8
  25. package/dist/esm/components/scrollArea/ScrollArea.d.ts +7 -7
  26. package/dist/esm/components/select/Select.d.ts +15 -15
  27. package/dist/esm/components/select/Select.stories.d.ts +13 -13
  28. package/dist/esm/components/slider/Slider.d.ts +12 -12
  29. package/dist/esm/components/slider/Slider.stories.d.ts +8 -8
  30. package/dist/esm/components/switch/Switch.d.ts +2 -2
  31. package/dist/esm/components/switch/Switch.stories.d.ts +3 -3
  32. package/dist/esm/components/tabs/tabs.d.ts +8 -8
  33. package/dist/esm/components/toasts/toasts.d.ts +1 -1
  34. package/dist/esm/components/toasts/toasts.js +1 -0
  35. package/dist/esm/components/toasts/toasts.js.map +1 -1
  36. package/dist/esm/components/toasts/toasts.stories.js +8 -1
  37. package/dist/esm/components/toasts/toasts.stories.js.map +1 -1
  38. package/dist/esm/components/toggleGroup/toggleGroup.d.ts +5 -4
  39. package/dist/esm/components/toggleGroup/toggleGroup.stories.d.ts +7 -3
  40. package/dist/esm/components/toggleGroup/toggleGroup.stories.js +5 -1
  41. package/dist/esm/components/toggleGroup/toggleGroup.stories.js.map +1 -1
  42. package/dist/esm/uno/preflights/colors.js +1 -1
  43. package/dist/esm/uno/preflights/properties.js +2 -0
  44. package/dist/esm/uno/preflights/properties.js.map +1 -1
  45. package/package.json +3 -3
  46. package/src/components/colorMode/ColorModeToggle.tsx +2 -2
  47. package/src/components/combobox/Combobox.tsx +8 -2
  48. package/src/components/forms/ToggleGroupField.tsx +13 -10
  49. package/src/components/toasts/toasts.stories.tsx +13 -0
  50. package/src/components/toasts/toasts.tsx +1 -0
  51. package/src/components/toggleGroup/toggleGroup.stories.tsx +5 -1
  52. package/src/uno/preflights/colors.ts +1 -1
  53. package/src/uno/preflights/properties.ts +2 -0
package/dist/css/main.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @layer preflightBase, preflightVariant, primitives, components, composed, composed-2, responsive, variants, utilities, user;
2
2
  @layer preflightBase{*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}}@layer preflightBase{::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}}
3
3
  :root { --u-font-sans: "Inter", sans-serif; --u-font-serif: "Domine", serif; --u-font-title: "Inter", sans-serif; --u-font-default: var(--u-font-sans, sans-serif); --z-now-playing: 40; --z-nav: 50; --z-menu: 100; --z-backdrop: 900; --z-dialog: 1000; --z-tooltip: 10000; --z-overdraw: 100000; --un-shadow-color: #000000; --un-shadow-opacity: 10%; --t-arrow-size: 1rem; } @layer preflightBase { html, body { margin: 0; padding: 0; font-family: var(--u-font-default, sans-serif); font-size: 16px; min-height: 100%; --webkit-font-smoothing: antialiased; } body { overflow: overlay; } #root, #main, #app, #storybook-root { isolation: isolate; display: flex; flex-direction: column; min-height: 100dvh; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-style: solid; border-width: 0; } }
4
- .palette-primary, .theme-primary { --p-name: primary; --p-main-hue: var(--u-c-primary-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-primary { --u-c-primary-hue: var(--u-c-primary-hue); --u-c-accent-hue: var(--u-c-primary-accent-hue); } .palette-accent, .theme-accent { --p-name: accent; --p-main-hue: var(--u-c-accent-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-accent { --u-c-primary-hue: var(--u-c-accent-hue); --u-c-accent-hue: var(--u-c-accent-accent-hue); } .palette-lemon, .theme-lemon { --p-name: lemon; --p-main-hue: var(--u-c-lemon-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-lemon { --u-c-primary-hue: var(--u-c-lemon-hue); --u-c-accent-hue: var(--u-c-lemon-accent-hue); } .palette-leek, .theme-leek { --p-name: leek; --p-main-hue: var(--u-c-leek-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-leek { --u-c-primary-hue: var(--u-c-leek-hue); --u-c-accent-hue: var(--u-c-leek-accent-hue); } .palette-tomato, .theme-tomato { --p-name: tomato; --p-main-hue: var(--u-c-tomato-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-tomato { --u-c-primary-hue: var(--u-c-tomato-hue); --u-c-accent-hue: var(--u-c-tomato-accent-hue); } .palette-blueberry, .theme-blueberry { --p-name: blueberry; --p-main-hue: var(--u-c-blueberry-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-blueberry { --u-c-primary-hue: var(--u-c-blueberry-hue); --u-c-accent-hue: var(--u-c-blueberry-accent-hue); } .palette-eggplant, .theme-eggplant { --p-name: eggplant; --p-main-hue: var(--u-c-eggplant-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-eggplant { --u-c-primary-hue: var(--u-c-eggplant-hue); --u-c-accent-hue: var(--u-c-eggplant-accent-hue); } .palette-attention, .theme-attention { --p-name: attention; --p-main-hue: var(--u-c-attention-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-attention { --u-c-primary-hue: var(--u-c-attention-hue); --u-c-accent-hue: var(--u-c-attention-accent-hue); } .palette-success, .theme-success { --p-name: success; --p-main-hue: var(--u-c-success-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-success { --u-c-primary-hue: var(--u-c-success-hue); --u-c-accent-hue: var(--u-c-success-accent-hue); } .palette-main { --p-saturation: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .palette-gray, .theme-gray { --p-name: gray; --p-saturation: 0.15; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-gray { --u-c-primary-hue: var(--u-c-gray-hue); --u-c-accent-hue: var(--u-c-gray-accent-hue); } .palette-high-contrast, .theme-high-contrast { --p-name: high-contrast; --p-saturation: 0.04; --p-lightness-spread: 10; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-high-contrast { --u-c-primary-hue: var(--u-c-high-contrast-hue); --u-c-accent-hue: var(--u-c-high-contrast-accent-hue); } body { --p-name: 'primary'; --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); color: var(--v-c-i); background-color: var(--v-bg-l); --p-main-hue: var(--u-c-primary-hue); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } @property --v-c { syntax: "*"; inherits: false; } @property --v-c-i { syntax: "*"; inherits: true; } @property --v-c-op { syntax: "<percentage>"; inherits: false; } @property --v-bg { syntax: "*"; inherits: false; } @property --v-bg-l { syntax: "*"; inherits: true; } @property --v-bg-op { syntax: "<percentage>"; inherits: false; } @property --v-bd-c { syntax: "*"; inherits: false; } @property --v-bd-c-i { syntax: "*"; inherits: true; } @property --v-bd-c-op { syntax: "<percentage>"; inherits: false; } @property --v-bd-t-c { syntax: "*"; inherits: false; } @property --v-bd-t-c-i { syntax: "*"; inherits: true; } @property --v-bd-t-c-op { syntax: "<percentage>"; inherits: false; } @property --v-bd-r-c { syntax: "*"; inherits: false; } @property --v-bd-r-c-i { syntax: "*"; inherits: true; } @property --v-bd-r-c-op { syntax: "<percentage>"; inherits: false; } @property --v-bd-b-c { syntax: "*"; inherits: false; } @property --v-bd-b-c-i { syntax: "*"; inherits: true; } @property --v-bd-b-c-op { syntax: "<percentage>"; inherits: false; } @property --v-bd-l-c { syntax: "*"; inherits: false; } @property --v-bd-l-c-i { syntax: "*"; inherits: true; } @property --v-bd-l-c-op { syntax: "<percentage>"; inherits: false; } @property --v-ring-c { syntax: "*"; inherits: false; } @property --v-ring-c-i { syntax: "*"; inherits: true; } @property --v-ring-c-op { syntax: "<percentage>"; inherits: false; }
4
+ .palette-primary, .theme-primary { --p-name: primary; --p-main-hue: var(--u-c-primary-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-primary { --u-c-primary-hue: var(--u-c-primary-hue); --u-c-accent-hue: var(--u-c-primary-accent-hue); } .palette-accent, .theme-accent { --p-name: accent; --p-main-hue: var(--u-c-accent-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-accent { --u-c-primary-hue: var(--u-c-accent-hue); --u-c-accent-hue: var(--u-c-accent-accent-hue); } .palette-lemon, .theme-lemon { --p-name: lemon; --p-main-hue: var(--u-c-lemon-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-lemon { --u-c-primary-hue: var(--u-c-lemon-hue); --u-c-accent-hue: var(--u-c-lemon-accent-hue); } .palette-leek, .theme-leek { --p-name: leek; --p-main-hue: var(--u-c-leek-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-leek { --u-c-primary-hue: var(--u-c-leek-hue); --u-c-accent-hue: var(--u-c-leek-accent-hue); } .palette-tomato, .theme-tomato { --p-name: tomato; --p-main-hue: var(--u-c-tomato-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-tomato { --u-c-primary-hue: var(--u-c-tomato-hue); --u-c-accent-hue: var(--u-c-tomato-accent-hue); } .palette-blueberry, .theme-blueberry { --p-name: blueberry; --p-main-hue: var(--u-c-blueberry-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-blueberry { --u-c-primary-hue: var(--u-c-blueberry-hue); --u-c-accent-hue: var(--u-c-blueberry-accent-hue); } .palette-eggplant, .theme-eggplant { --p-name: eggplant; --p-main-hue: var(--u-c-eggplant-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-eggplant { --u-c-primary-hue: var(--u-c-eggplant-hue); --u-c-accent-hue: var(--u-c-eggplant-accent-hue); } .palette-attention, .theme-attention { --p-name: attention; --p-main-hue: var(--u-c-attention-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-attention { --u-c-primary-hue: var(--u-c-attention-hue); --u-c-accent-hue: var(--u-c-attention-accent-hue); } .palette-success, .theme-success { --p-name: success; --p-main-hue: var(--u-c-success-hue); --p-saturation: 1; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-success { --u-c-primary-hue: var(--u-c-success-hue); --u-c-accent-hue: var(--u-c-success-accent-hue); } .palette-main { --p-saturation: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .palette-gray, .theme-gray { --p-name: gray; --p-saturation: 0.15; --p-lightness-spread: 1; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-gray { --u-c-primary-hue: var(--u-c-gray-hue); --u-c-accent-hue: var(--u-c-gray-accent-hue); } .palette-high-contrast, .theme-high-contrast { --p-name: high-contrast; --p-saturation: 0.04; --p-lightness-spread: 10; --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .theme-high-contrast { --u-c-primary-hue: var(--u-c-high-contrast-hue); --u-c-accent-hue: var(--u-c-high-contrast-accent-hue); } body { --p-name: 'primary'; --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); color: var(--v-c-i); background-color: var(--v-bg-l); --p-main-hue: var(--u-c-primary-hue); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } @property --v-c { syntax: "*"; inherits: false; } @property --v-c-i { syntax: "*"; inherits: true; } @property --v-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bg { syntax: "*"; inherits: false; } @property --v-bg-l { syntax: "*"; inherits: true; } @property --v-bg-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bd-c { syntax: "*"; inherits: false; } @property --v-bd-c-i { syntax: "*"; inherits: true; } @property --v-bd-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bd-t-c { syntax: "*"; inherits: false; } @property --v-bd-t-c-i { syntax: "*"; inherits: true; } @property --v-bd-t-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bd-r-c { syntax: "*"; inherits: false; } @property --v-bd-r-c-i { syntax: "*"; inherits: true; } @property --v-bd-r-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bd-b-c { syntax: "*"; inherits: false; } @property --v-bd-b-c-i { syntax: "*"; inherits: true; } @property --v-bd-b-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-bd-l-c { syntax: "*"; inherits: false; } @property --v-bd-l-c-i { syntax: "*"; inherits: true; } @property --v-bd-l-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; } @property --v-ring-c { syntax: "*"; inherits: false; } @property --v-ring-c-i { syntax: "*"; inherits: true; } @property --v-ring-c-op { syntax: "<percentage>"; initial-value: 100%; inherits: false; }
5
5
  @layer preflightBase { html { --m-mult: 1; --m-l-neutral: 90%; --m-l-range-up: 10%; --m-l-range-down: 70%; --m-s-neutral: 75%; --m-s-range-up: -55%; --m-s-range-down: 20%; --m-white: #ffffff; --m-black: #000000; color: var(--v-c-i); --p-primary-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-accent-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-lemon-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-lemon-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-leek-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-leek-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-tomato-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-tomato-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-blueberry-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-blueberry-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-eggplant-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-eggplant-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-attention-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-attention-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-success-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-success-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } @media (prefers-color-scheme: dark) { html { --m-mult: -1; --m-l-neutral: 60%; --m-l-range-up: 38%; --m-l-range-down: 70%; --m-s-neutral: 80%; --m-s-range-up: 40%; --m-s-range-down: -30%; --m-white: #000000; --m-black: #ffffff; color: var(--v-c-i); --p-primary-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-accent-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-lemon-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-lemon-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-leek-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-leek-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-tomato-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-tomato-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-blueberry-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-blueberry-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-eggplant-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-eggplant-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-attention-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-attention-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-success-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-success-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } } } @layer preflightVariants { .override-light { --m-mult: 1; --m-l-neutral: 90%; --m-l-range-up: 10%; --m-l-range-down: 70%; --m-s-neutral: 75%; --m-s-range-up: -55%; --m-s-range-down: 20%; --m-white: #ffffff; --m-black: #000000; color: var(--v-c-i); --p-primary-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-accent-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-lemon-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-lemon-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-leek-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-leek-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-tomato-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-tomato-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-blueberry-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-blueberry-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-eggplant-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-eggplant-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-attention-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-attention-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-success-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-success-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } .override-dark { --m-mult: -1; --m-l-neutral: 60%; --m-l-range-up: 38%; --m-l-range-down: 70%; --m-s-neutral: 80%; --m-s-range-up: 40%; --m-s-range-down: -30%; --m-white: #000000; --m-black: #ffffff; color: var(--v-c-i); --p-primary-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-primary-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-primary-hue,91.8))); --p-accent-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-accent-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--u-c-accent-hue,160.88))); --p-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-gray-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-high-contrast-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --p-lemon-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(90.8)); --p-lemon-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-lemon-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(90.8)); --p-leek-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(165.88)); --p-leek-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-leek-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(165.88)); --p-tomato-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(10.51)); --p-tomato-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-tomato-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(10.51)); --p-blueberry-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(248.14)); --p-blueberry-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-blueberry-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(248.14)); --p-eggplant-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(280.21)); --p-eggplant-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-eggplant-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(280.21)); --p-attention-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(30)); --p-attention-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(30)); --p-attention-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(30)); --p-success-shade-wash: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-light: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * 0.5 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * 0.75 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-mid: oklch(calc(var(--m-l-neutral)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * var(--m-s-neutral)), 100%)) calc(140)); --p-success-shade-dark: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 0.35 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 0.5 * var(--m-mult, 1)))), 100%)) calc(140)); --p-success-shade-ink: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(140)); --v-c-i: oklch(calc(clamp(0%, (var(--m-l-neutral) - (var(--m-l-range-down) * 1 * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) - (var(--m-s-range-down) * 1 * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); --v-bg-l: oklch(calc(clamp(0%, (var(--m-l-neutral) + (var(--m-l-range-up) * var(--m-mult, 1) * var(--p-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--p-saturation, 1) * var(--u-saturation, 1) * (var(--m-s-neutral) + (var(--m-s-range-up) * var(--m-mult, 1)))), 100%)) calc(var(--p-main-hue,var(--u-c-primary-hue,91.8)))); } }
6
6
  @font-face { font-family: "Inter"; src: url("https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; }
7
- @property --l-corner-scale { syntax: "*"; inherits: false; } @property --t-shadow-y-mult { syntax: "*"; inherits: false; }
7
+ @property --l-corner-scale { syntax: "*"; initial-value: 1; inherits: false; } @property --t-shadow-y-mult { syntax: "*"; initial-value: 1; inherits: false; }
8
8
  @layer preflightBase { :root { --u-saturation: 0.5; --u-corner-scale: 1; --u-spacing-scale: 1; --u-border-scale: 1; --u-shadow-spread: 1; --u-c-primary-hue: 90.8; --u-c-accent-hue: 165.88; --u-focus-color: var(--m-black); --u-c-lemon-hue: 90.8; --u-c-lemon-accent-hue: 165.88; --u-c-leek-hue: 165.88; --u-c-leek-accent-hue: 90.8; --u-c-tomato-hue: 10.51; --u-c-tomato-accent-hue: 165.88; --u-c-blueberry-hue: 248.14; --u-c-blueberry-accent-hue: 165.88; --u-c-eggplant-hue: 280.21; --u-c-eggplant-accent-hue: 165.88; --u-c-attention-hue: 30; --u-c-attention-accent-hue: 165.88; --u-c-success-hue: 140; --u-c-success-accent-hue: 165.88; } body, :host { font-size: 16px; } }
9
9
  .outline-off{outline:none;}.unset{all:unset;}.container{width:100%;}.hidden-input{pointer-events:none;position:absolute;z-index:-1;opacity:0;}.bottom-keyboard{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.center{left:50%;top:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:-50%;}.center-x{left:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.center-y{top:50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.hidden-input::webkit-file-upload-button{display:none;}.body{min-height:100vh;color:var(--v-c,var(--v-c-i));--v-c-i:var(--p-high-contrast-shade-ink);--v-c-op:100%;background-color:var(--v-bg,var(--v-bg-l));--v-bg-l:var(--p-gray-shade-wash);--v-bg-op:100%;}.flex-0-0-auto{flex-shrink:0;flex-grow:0;flex-basis:auto;}.flex-1-0-0{flex-shrink:0;flex-grow:1;flex-basis:0px;}.border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.border-default{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.border-light{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-gray-shade-mid);--v-bd-c-op:100%;--v-bd-c:oklch(from var(--v-bd-c-i,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--m-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--u-saturation, 0)))))) h);}:where(.border-default),:where(.border-light){--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}@layer components{.layer-components\:unset{all:unset;}.layer-components\:focus\:outline-off:focus{outline:none;}.col{display:flex;flex-direction:column;align-items:center;gap:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.row{display:flex;flex-direction:row;align-items:center;gap:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.layer-components\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.layer-components\:border-default,.layer-components\:data-\[pressed\]\:border-default[data-pressed]{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.layer-components\:data-\[pressed\]\:hover\:border-default:hover[data-pressed]{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.layer-components\:focus-visible\:border:focus-visible{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}:where(.layer-components\:border-default),:where(.layer-components\:data-\[pressed\]\:border-default)[data-pressed]{--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}:where(.layer-components\:data-\[pressed\]\:hover\:border-default):hover[data-pressed]{--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}}@layer composed{.layer-composed\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.layer-composed\:border-light{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-gray-shade-mid);--v-bd-c-op:100%;--v-bd-c:oklch(from var(--v-bd-c-i,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--m-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--u-saturation, 0)))))) h);}:where(.layer-composed\:border-light){--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}}@layer primitives{.layer-primitives\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}}@layer variants{.layer-variants\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.\[--gap\:0\.75rem\]{--gap:0.75rem;}.\[--height\:var\(--toast-frontmost-height\,var\(--toast-height\)\)\]{--height:var(--toast-frontmost-height,var(--toast-height));}.\[--offset-y\:calc\(var\(--toast-offset-y\)\+calc\(var\(--toast-index\)\*var\(--gap\)\)\+var\(--toast-swipe-movement-y\)\)\]{--offset-y:calc(var(--toast-offset-y) + calc(var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y));}.\[--peek\:0\.75rem\]{--peek:0.75rem;}.\[--scale\:calc\(max\(0\,1-\(var\(--toast-index\)\*0\.1\)\)\)\]{--scale:calc(max(0,1 - (var(--toast-index) * 0.1)));}.\[--shrink\:calc\(1-var\(--scale\)\)\]{--shrink:calc(1 - var(--scale));}.\[all\:unset\]{all:unset;}.\[background-size\:400\%_400\%\]{background-size:400% 400%;}.\[grid-area\:content\]{grid-area:content;}.\[grid-area\:leftGrid\]{grid-area:leftGrid;}.\[grid-area\:leftMonth\]{grid-area:leftMonth;}.\[grid-area\:nextMonth\]{grid-area:nextMonth;}.\[grid-area\:prevMonth\]{grid-area:prevMonth;}.\[grid-area\:rightGrid\]{grid-area:rightGrid;}.\[grid-area\:rightMonth\]{grid-area:rightMonth;}.\[justify-self\:anchor-center\]{justify-self:anchor-center;}.\[outline\:none\],.foc-contained>*:focus,.foc-effect:focus,.foc-lg:focus,.foc:focus{outline:none;}.\[stroke-dasharray\:80_200\]{stroke-dasharray:80 200;}.\[stroke-dashoffset\:0\]{stroke-dashoffset:0;}.\[transition-duration\:250ms\]{transition-duration:250ms;}.\[transition\:transform_0\.5s_cubic-bezier\(0\.22\,1\,0\.36\,1\)\,opacity_0\.5s\,height_0\.15s\]{transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),opacity 0.5s,height 0.15s;}.contain-strict{contain:strict;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-auto{pointer-events:auto;}.\!pointer-events-none{pointer-events:none !important;}.\[\&\[data-behind\]\:not\(\[data-expanded\]\)\]\:pointer-events-none[data-behind]:not([data-expanded]),.pointer-events-none{pointer-events:none;}.\!visible{visibility:visible !important;}.visible{visibility:visible;}[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:invisible{visibility:hidden;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.after\:absolute::after{position:absolute;}.static{position:static;}.inset-0{inset:0px;}.after\:inset-0::after{inset:0px;}.bottom-\[anchor\(bottom\)\]{bottom:anchor(bottom);}.bottom-\[var\(--mock-virtual-keyboard-height\,env\(keyboard-inset-height\,0px\)\)\]{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.bottom-0{bottom:0px;}.bottom-0px{bottom:0;}.bottom-2{bottom:0.5rem;}.left-\[anchor\(left\)\]{left:anchor(left);}.left-\[anchor\(right\)\]{left:anchor(right);}.left-0{left:0px;}.left-1\/2{left:50%;}.left-2{left:0.5rem;}.left-auto{left:auto;}.right-\[anchor\(right\)\]{right:anchor(right);}.right-0{right:0px;}.right-2{right:0.5rem;}.right-md{right:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.right-sm{right:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.right-xs{right:calc(0.25rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-\[anchor\(bottom\)\]{top:anchor(bottom);}.top-0{top:0px;}.top-1\/2{top:50%;}.top-1px{top:1px;}.top-2{top:0.5rem;}.top-2px{top:2px;}.top-auto{top:auto;}.top-md{top:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-sm{top:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-xs{top:calc(0.25rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.after\:left-0::after{left:0px;}.after\:top-auto::after{top:auto;}.after\:top-full::after{top:100%;}.isolate{isolation:isolate;}.z--1{z-index:-1;}.z-\[1000000\],.z-1000000{z-index:1000000;}.z-\[calc\(100000-var\(--toast-index\)\)\]{z-index:calc(100000 - var(--toast-index));}.z-1{z-index:1;}.z-1000{z-index:1000;}.z-10000{z-index:10000;}.z-10001{z-index:10001;}.z-101{z-index:101;}.grid{display:grid;}.col-span-2,.grid-col-span-2{grid-column:span 2/span 2;}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}.m-0{margin:0px;}.m-1{margin:0.25rem;}.m-auto{margin:auto;}.m5\.87{margin:1.4675rem;}.my-4{margin-top:1rem;margin-bottom:1rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.mb-1{margin-bottom:0.25rem;}.mb-auto{margin-bottom:auto;}.mb-sm{margin-bottom:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.me{margin-inline-end:1rem;}.ml-auto{margin-left:auto;}.ml-md{margin-left:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.ml-sm{margin-left:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.mr-0{margin-right:0px;}.mr-1{margin-right:0.25rem;}.mr-auto{margin-right:auto;}.mt-200px{margin-top:200px;}.mt-auto{margin-top:auto;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.\!hidden{display:none !important;}.\[\&\:\:webkit-file-upload-button\]\:hidden::webkit-file-upload-button,.hidden,[data-has-icon=true] .\[\[data-has-icon\=true\]_\&\]\:hidden{display:none;}.aspect-\[9\/16\]{aspect-ratio:9/16;}.aspect-1{aspect-ratio:1;}.\[\&\[data-state\=closed\]\]\:max-h-\[var\(--peek-height\,120px\)\][data-state=closed]{max-height:var(--peek-height,120px);}.data-\[both\]\:h-\[--collapsible-panel-height\][data-both],.data-\[vertical\]\:h-\[--collapsible-panel-height\][data-vertical]{height:var(--collapsible-panel-height);}.data-\[both\]\:w-\[--collapsible-panel-width\][data-both],.data-\[horizontal\]\:w-\[--collapsible-panel-width\][data-horizontal]{width:var(--collapsible-panel-width);}.data-\[expanded\]\:h-\[--toast-height\][data-expanded]{height:var(--toast-height);}.h-\[--height\]{height:var(--height);}.h-\[100vh\],.h-screen{height:100vh;}.h-\[12px\]{height:12px;}.h-\[var\(--mock-virtual-keyboard-height\,0\)\]{height:var(--mock-virtual-keyboard-height,0);}.h-100px{height:100px;}.h-16px{height:16px;}.h-1em{height:1em;}.h-1px{height:1px;}.h-200px{height:200px;}.h-240px{height:240px;}.h-24px{height:24px;}.h-300px{height:300px;}.h-32{height:8rem;}.h-600px{height:600px;}.h-64{height:16rem;}.h-80px{height:80px;}.h-full{height:100%;}.h-touch{height:30px;}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.h4{height:1rem;}.h5{height:1.25rem;}.max-h-200px{max-height:200px;}.max-h-20vh{max-height:20vh;}.max-h-full{max-height:100%;}.max-w-300px{max-width:300px;}.max-w-full{max-width:100%;}.max-w-sm{max-width:24rem;}.min-h-0{min-height:0;}.min-h-18px{min-height:18px;}.min-h-200px{min-height:200px;}.min-h-20vh{min-height:20vh;}.min-h-32px{min-height:32px;}.min-h-80px{min-height:80px;}.min-h-80vh{min-height:80vh;}.min-h-screen{min-height:100vh;}.min-w-0{min-width:0;}.min-w-32px{min-width:32px;}.min-w-80px{min-width:80px;}.start-end\:data-\[both\]\:h-0[data-both][data-starting-style], .start-end\:data-\[both\]\:h-0[data-both][data-ending-style],.start-end\:data-\[vertical\]\:h-0[data-vertical][data-starting-style], .start-end\:data-\[vertical\]\:h-0[data-vertical][data-ending-style]{height:0;}.start-end\:data-\[both\]\:w-0[data-both][data-starting-style], .start-end\:data-\[both\]\:w-0[data-both][data-ending-style],.start-end\:data-\[horizontal\]\:w-0[data-horizontal][data-starting-style], .start-end\:data-\[horizontal\]\:w-0[data-horizontal][data-ending-style],.w-0{width:0;}.w-\[12px\]{width:12px;}.w-\[200px\],.w-200px{width:200px;}.w-10000px{width:10000px;}.w-16px{width:16px;}.w-1em{width:1em;}.w-24px{width:24px;}.w-300px{width:300px;}.w-400px{width:400px;}.w-64{width:16rem;}.w-800px{width:800px;}.w-80px{width:80px;}.w-95vw{width:95vw;}.w-full{width:100%;}.w-max-content{width:max-content;}.w-touch{width:30px;}[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:max-h-\[--height\]{max-height:var(--height);}.after\:h-\[calc\(var\(--gap\)\+1px\)\]::after{height:calc(var(--gap) + 1px);}.after\:h-80px::after{height:80px;}.after\:w-full::after{width:100%;}.flex{display:flex;}.after\:flex::after{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink-0,.shrink-0{flex-shrink:0;}.flex-grow,.flex-grow-1,.grow{flex-grow:1;}.flex-grow-0{flex-grow:0;}.flex-basis-0{flex-basis:0px;}.flex-basis-auto{flex-basis:auto;}.flex-row{flex-direction:row;}.flex-col{flex-direction:column;}.after\:flex-col::after{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.origin-top{transform-origin:top;}.transform-origin-\[--transform-origin\]{transform-origin:var(--transform-origin);}.transform-origin-\[50\%_50\%\]{transform-origin:50% 50%;}.\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:-translate-y-150\%[data-ending-style]:not([data-limited]):not([data-swipe-direction]),.data-\[starting-style\]\:-translate-y-150\%[data-starting-style]{--un-translate-y:-150%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=down\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+150\%\)\][data-swipe-direction=down][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=down\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+150\%\)\][data-swipe-direction=down][data-ending-style][data-expanded]{--un-translate-y:calc(var(--toast-swipe-movement-y) + 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)-150\%\)\][data-swipe-direction=left][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)-150\%\)\][data-swipe-direction=left][data-ending-style][data-expanded]{--un-translate-x:calc(var(--toast-swipe-movement-x) - 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=left][data-ending-style],.data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=right][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=left][data-ending-style][data-expanded],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=right][data-ending-style][data-expanded],.data-\[expanded\]\:translate-y-\[--offset-y\][data-expanded]{--un-translate-y:var(--offset-y);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)\+150\%\)\][data-swipe-direction=right][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)\+150\%\)\][data-swipe-direction=right][data-ending-style][data-expanded]{--un-translate-x:calc(var(--toast-swipe-movement-x) + 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=up\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)-150\%\)\][data-swipe-direction=up][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=up\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)-150\%\)\][data-swipe-direction=up][data-ending-style][data-expanded]{--un-translate-y:calc(var(--toast-swipe-movement-y) - 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[expanded\]\:translate-x-\[--toast-swipe-movement-x\][data-expanded],.translate-x-\[--toast-swipe-movement-x\]{--un-translate-x:var(--toast-swipe-movement-x);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-x--1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y--1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+\(var\(--toast-index\)\*var\(--peek\)\)\+\(var\(--shrink\)\*var\(--height\)\)\)\]{--un-translate-y:calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek)) + (var(--shrink) * var(--height)));transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:scale-90[data-ending-style]:not([data-limited]):not([data-swipe-direction]){--un-scale-x:0.9;--un-scale-y:0.9;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[expanded\]\:scale-100[data-expanded]{--un-scale-x:1;--un-scale-y:1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.scale-\[var\(--scale\)\]{--un-scale-x:var(--scale);--un-scale-y:var(--scale);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes peek-close{
10
10
  from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
package/dist/esm/components/autocomplete/Autocomplete.d.ts CHANGED
@@ -43,19 +43,19 @@ declare function createAutocomplete<TItem>(): ((props: Omit<BaseAutocompleteRoot
43
43
  useFilter: (options?: import("@base-ui/react/autocomplete").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete").AutocompleteFilter;
44
44
  Input: ({ disableCaret, icon, children, disableClear, ...outerProps }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
45
45
  Content: ({ positioner, arrow, children, ...props }: AutocompletePopoupProps) => import("react/jsx-runtime").JSX.Element;
46
- Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
46
+ Empty: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
47
47
  Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
48
48
  ref?: React.Ref<HTMLDivElement>;
49
49
  }) => import("react/jsx-runtime").JSX.Element;
50
- GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
50
+ GroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
51
51
  GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
52
52
  Row: import("react").FC<BaseAutocompleteRowProps>;
53
- Separator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
53
+ Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
54
54
  Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime").JSX.Element;
55
- Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
56
- Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
57
- Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
58
- Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
55
+ Positioner: import("react").ForwardRefExoticComponent<Omit<BaseAutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
56
+ Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
57
+ Popup: import("react").FunctionComponent<Omit<BaseAutocompletePopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
58
+ Backdrop: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
59
59
  ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;
60
60
  GroupItem: typeof AutocompleteGroupItem;
61
61
  Unstyled: typeof BaseAutocomplete;
@@ -74,17 +74,17 @@ declare function createAutocompleteGrouped<TItemGroup extends {
74
74
  Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
75
75
  ref?: React.Ref<HTMLDivElement>;
76
76
  }) => import("react/jsx-runtime").JSX.Element;
77
- GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
77
+ GroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
78
78
  GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
79
- Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
79
+ Empty: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
80
80
  Row: import("react").FC<BaseAutocompleteRowProps>;
81
81
  useFilter: (options?: import("@base-ui/react/autocomplete").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete").AutocompleteFilter;
82
- Separator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
82
+ Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
83
83
  Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime").JSX.Element;
84
- Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
85
- Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
86
- Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
87
- Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
84
+ Positioner: import("react").ForwardRefExoticComponent<Omit<BaseAutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
85
+ Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
86
+ Popup: import("react").FunctionComponent<Omit<BaseAutocompletePopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
87
+ Backdrop: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
88
88
  ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;
89
89
  GroupItem: typeof AutocompleteGroupItem;
90
90
  Unstyled: typeof BaseAutocomplete;
@@ -93,21 +93,21 @@ export declare const Autocomplete: ((props: BaseAutocompleteRootProps<any>) => i
93
93
  useFilter: (options?: import("@base-ui/react/autocomplete").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete").AutocompleteFilter;
94
94
  Input: ({ disableCaret, icon, children, disableClear, ...outerProps }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
95
95
  Content: ({ positioner, arrow, children, ...props }: AutocompletePopoupProps) => import("react/jsx-runtime").JSX.Element;
96
- Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
97
- List: import("react").FunctionComponent<BaseAutocompleteListProps & import("react").RefAttributes<HTMLDivElement>>;
96
+ Empty: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
97
+ List: import("react").FunctionComponent<Omit<BaseAutocompleteListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
98
98
  Item: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;
99
99
  Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
100
100
  ref?: React.Ref<HTMLDivElement>;
101
101
  }) => import("react/jsx-runtime").JSX.Element;
102
- GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
102
+ GroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
103
103
  GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
104
104
  Row: import("react").FC<BaseAutocompleteRowProps>;
105
- Separator: import("react").FunctionComponent<import("@base-ui/react/separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
105
+ Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
106
106
  Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime").JSX.Element;
107
- Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
108
- Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
109
- Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
110
- Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
107
+ Positioner: import("react").ForwardRefExoticComponent<Omit<BaseAutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
108
+ Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
109
+ Popup: import("react").FunctionComponent<Omit<BaseAutocompletePopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
110
+ Backdrop: import("react").FunctionComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
111
111
  ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;
112
112
  GroupItem: typeof AutocompleteGroupItem;
113
113
  Unstyled: typeof BaseAutocomplete;
package/dist/esm/components/collapsible/Collapsible.d.ts CHANGED
@@ -1,24 +1,24 @@
1
1
  import { CollapsiblePanelProps, CollapsibleRootProps } from '@base-ui/react/collapsible';
2
2
  import { Ref } from 'react';
3
- export declare const CollapsibleRoot: import("react").ForwardRefExoticComponent<CollapsibleRootProps & import("react").RefAttributes<HTMLDivElement>>;
3
+ export declare const CollapsibleRoot: import("react").ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
4
4
  export declare const CollapsibleContent: ({ ref, horizontal, both, ...props }: CollapsiblePanelProps & {
5
5
  horizontal?: boolean;
6
6
  both?: boolean;
7
7
  ref?: Ref<HTMLDivElement>;
8
8
  }) => import("react/jsx-runtime").JSX.Element;
9
- export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<import("@base-ui/react/collapsible").CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
9
+ export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
10
10
  export declare const CollapsibleSimple: ({ horizontal, both, children, ...props }: CollapsibleRootProps & {
11
11
  horizontal?: boolean;
12
12
  both?: boolean;
13
13
  }) => import("react/jsx-runtime").JSX.Element;
14
14
  export declare const CollapsibleIcon: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
15
- export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleRootProps & import("react").RefAttributes<HTMLDivElement>> & {
15
+ export declare const Collapsible: import("react").ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
16
16
  Content: ({ ref, horizontal, both, ...props }: CollapsiblePanelProps & {
17
17
  horizontal?: boolean;
18
18
  both?: boolean;
19
19
  ref?: Ref<HTMLDivElement>;
20
20
  }) => import("react/jsx-runtime").JSX.Element;
21
- Trigger: import("react").ForwardRefExoticComponent<import("@base-ui/react/collapsible").CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
21
+ Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
22
22
  Simple: ({ horizontal, both, children, ...props }: CollapsibleRootProps & {
23
23
  horizontal?: boolean;
24
24
  both?: boolean;
package/dist/esm/components/collapsible/Collapsible.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
2
2
  import { CollapsibleSimple } from './Collapsible.js';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ horizontal, both, children, ...props }: import("@base-ui/react/collapsible").CollapsibleRootProps & {
5
+ component: ({ horizontal, both, children, ...props }: import("@base-ui/react").CollapsibleRootProps & {
6
6
  horizontal?: boolean;
7
7
  both?: boolean;
8
8
  }) => import("react/jsx-runtime").JSX.Element;