@womp/kookie-ui 0.5.0 → 0.7.0

package/tokens/base.css

@@ -69,6 +69,12 @@
   --material-blend: 100%;
   --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.9) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.96) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+  --solid-gray-active-filter: brightness(0.92);
+  --solid-gray-open-filter: brightness(0.96);
   --shadow-1: 0 0 0 0.25px var(--gray-a6), inset 0 1px 1px 0 var(--black-a2);
   --shadow-2: 0 0 0 0.25px var(--gray-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
   --shadow-3: 0 0 0 0.25px var(--gray-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
@@ -109,6 +115,12 @@
   --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
   --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+  --solid-gray-active-filter: brightness(0.9);
+  --solid-gray-open-filter: brightness(0.95);
   --shadow-1: inset 0 0 0 0.5px var(--gray-a6), inset 0 1px 1px 0 var(--black-a3);
   --shadow-2: 0 0 0 0.5px var(--gray-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
   --shadow-3: 0 0 0 0.5px var(--gray-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
@@ -155,6 +167,26 @@
   --focus-a10: var(--accent-a10);
   --focus-a11: var(--accent-a11);
   --focus-a12: var(--accent-a12);
+  --accent-ink-mix: 45%;
+  --accent-ink: color-mix(in oklab, var(--accent-11), var(--accent-12) var(--accent-ink-mix));
+  --accent-ink-muted: color-mix(in oklab, var(--accent-ink) 74%, transparent);
+  --accent-ink-faint: color-mix(in oklab, var(--accent-ink) 52%, transparent);
+  --accent-solid: var(--accent-9);
+  --accent-solid-a: var(--accent-a9);
+  --accent-solid-hover: var(--accent-10);
+  --accent-solid-hover-a: var(--accent-a10);
+  --accent-solid-active: var(--accent-11);
+  --accent-solid-active-a: var(--accent-a11);
+  --accent-solid-contrast: var(--accent-contrast);
+  --accent-solid-selection: var(--accent-7);
+  --accent-solid-selection-contrast: var(--accent-12);
+  --accent-solid-indicator: var(--accent-indicator);
+  --accent-solid-thumb: white;
+  --accent-solid-badge: var(--accent-12);
+  --accent-solid-badge-contrast: var(--accent-1);
+  --accent-solid-hover-filter: var(--solid-chroma-hover-filter);
+  --accent-solid-active-filter: var(--solid-chroma-active-filter);
+  --accent-solid-open-filter: var(--solid-chroma-open-filter);
 }
 .radix-themes ::-moz-selection {
   background-color: var(--focus-a5);
@@ -454,6 +486,25 @@
   --accent-surface: var(--gray-surface);
   --accent-indicator: var(--gray-indicator);
   --accent-track: var(--gray-track);
+  --accent-ink: var(--gray-12);
+  --accent-ink-muted: var(--gray-a11);
+  --accent-ink-faint: var(--gray-a10);
+  --accent-solid: var(--gray-12);
+  --accent-solid-a: var(--gray-a12);
+  --accent-solid-hover: var(--gray-12);
+  --accent-solid-hover-a: var(--gray-a12);
+  --accent-solid-active: var(--gray-12);
+  --accent-solid-active-a: var(--gray-a12);
+  --accent-solid-contrast: var(--gray-1);
+  --accent-solid-selection: var(--gray-a11);
+  --accent-solid-selection-contrast: var(--gray-1);
+  --accent-solid-indicator: var(--gray-12);
+  --accent-solid-thumb: var(--gray-1);
+  --accent-solid-badge: var(--gray-1);
+  --accent-solid-badge-contrast: var(--gray-12);
+  --accent-solid-hover-filter: var(--solid-gray-hover-filter);
+  --accent-solid-active-filter: var(--solid-gray-active-filter);
+  --accent-solid-open-filter: var(--solid-gray-open-filter);
 }
 [data-accent-color='green'] {
   --accent-1: var(--green-1);
@@ -965,157 +1016,10 @@
   --accent-indicator: var(--yellow-indicator);
   --accent-track: var(--yellow-track);
 }
-.radix-themes:where([data-gray-color='mauve']) {
-  --gray-1: var(--mauve-1);
-  --gray-2: var(--mauve-2);
-  --gray-3: var(--mauve-3);
-  --gray-4: var(--mauve-4);
-  --gray-5: var(--mauve-5);
-  --gray-6: var(--mauve-6);
-  --gray-7: var(--mauve-7);
-  --gray-8: var(--mauve-8);
-  --gray-9: var(--mauve-9);
-  --gray-10: var(--mauve-10);
-  --gray-11: var(--mauve-11);
-  --gray-12: var(--mauve-12);
-  --gray-a1: var(--mauve-a1);
-  --gray-a2: var(--mauve-a2);
-  --gray-a3: var(--mauve-a3);
-  --gray-a4: var(--mauve-a4);
-  --gray-a5: var(--mauve-a5);
-  --gray-a6: var(--mauve-a6);
-  --gray-a7: var(--mauve-a7);
-  --gray-a8: var(--mauve-a8);
-  --gray-a9: var(--mauve-a9);
-  --gray-a10: var(--mauve-a10);
-  --gray-a11: var(--mauve-a11);
-  --gray-a12: var(--mauve-a12);
-  --gray-contrast: var(--mauve-contrast);
-  --gray-surface: var(--mauve-surface);
-  --gray-indicator: var(--mauve-indicator);
-  --gray-track: var(--mauve-track);
-}
-.radix-themes:where([data-gray-color='olive']) {
-  --gray-1: var(--olive-1);
-  --gray-2: var(--olive-2);
-  --gray-3: var(--olive-3);
-  --gray-4: var(--olive-4);
-  --gray-5: var(--olive-5);
-  --gray-6: var(--olive-6);
-  --gray-7: var(--olive-7);
-  --gray-8: var(--olive-8);
-  --gray-9: var(--olive-9);
-  --gray-10: var(--olive-10);
-  --gray-11: var(--olive-11);
-  --gray-12: var(--olive-12);
-  --gray-a1: var(--olive-a1);
-  --gray-a2: var(--olive-a2);
-  --gray-a3: var(--olive-a3);
-  --gray-a4: var(--olive-a4);
-  --gray-a5: var(--olive-a5);
-  --gray-a6: var(--olive-a6);
-  --gray-a7: var(--olive-a7);
-  --gray-a8: var(--olive-a8);
-  --gray-a9: var(--olive-a9);
-  --gray-a10: var(--olive-a10);
-  --gray-a11: var(--olive-a11);
-  --gray-a12: var(--olive-a12);
-  --gray-contrast: var(--olive-contrast);
-  --gray-surface: var(--olive-surface);
-  --gray-indicator: var(--olive-indicator);
-  --gray-track: var(--olive-track);
-}
-.radix-themes:where([data-gray-color='sage']) {
-  --gray-1: var(--sage-1);
-  --gray-2: var(--sage-2);
-  --gray-3: var(--sage-3);
-  --gray-4: var(--sage-4);
-  --gray-5: var(--sage-5);
-  --gray-6: var(--sage-6);
-  --gray-7: var(--sage-7);
-  --gray-8: var(--sage-8);
-  --gray-9: var(--sage-9);
-  --gray-10: var(--sage-10);
-  --gray-11: var(--sage-11);
-  --gray-12: var(--sage-12);
-  --gray-a1: var(--sage-a1);
-  --gray-a2: var(--sage-a2);
-  --gray-a3: var(--sage-a3);
-  --gray-a4: var(--sage-a4);
-  --gray-a5: var(--sage-a5);
-  --gray-a6: var(--sage-a6);
-  --gray-a7: var(--sage-a7);
-  --gray-a8: var(--sage-a8);
-  --gray-a9: var(--sage-a9);
-  --gray-a10: var(--sage-a10);
-  --gray-a11: var(--sage-a11);
-  --gray-a12: var(--sage-a12);
-  --gray-contrast: var(--sage-contrast);
-  --gray-surface: var(--sage-surface);
-  --gray-indicator: var(--sage-indicator);
-  --gray-track: var(--sage-track);
-}
-.radix-themes:where([data-gray-color='sand']) {
-  --gray-1: var(--sand-1);
-  --gray-2: var(--sand-2);
-  --gray-3: var(--sand-3);
-  --gray-4: var(--sand-4);
-  --gray-5: var(--sand-5);
-  --gray-6: var(--sand-6);
-  --gray-7: var(--sand-7);
-  --gray-8: var(--sand-8);
-  --gray-9: var(--sand-9);
-  --gray-10: var(--sand-10);
-  --gray-11: var(--sand-11);
-  --gray-12: var(--sand-12);
-  --gray-a1: var(--sand-a1);
-  --gray-a2: var(--sand-a2);
-  --gray-a3: var(--sand-a3);
-  --gray-a4: var(--sand-a4);
-  --gray-a5: var(--sand-a5);
-  --gray-a6: var(--sand-a6);
-  --gray-a7: var(--sand-a7);
-  --gray-a8: var(--sand-a8);
-  --gray-a9: var(--sand-a9);
-  --gray-a10: var(--sand-a10);
-  --gray-a11: var(--sand-a11);
-  --gray-a12: var(--sand-a12);
-  --gray-contrast: var(--sand-contrast);
-  --gray-surface: var(--sand-surface);
-  --gray-indicator: var(--sand-indicator);
-  --gray-track: var(--sand-track);
-}
-.radix-themes:where([data-gray-color='slate']) {
-  --gray-1: var(--slate-1);
-  --gray-2: var(--slate-2);
-  --gray-3: var(--slate-3);
-  --gray-4: var(--slate-4);
-  --gray-5: var(--slate-5);
-  --gray-6: var(--slate-6);
-  --gray-7: var(--slate-7);
-  --gray-8: var(--slate-8);
-  --gray-9: var(--slate-9);
-  --gray-10: var(--slate-10);
-  --gray-11: var(--slate-11);
-  --gray-12: var(--slate-12);
-  --gray-a1: var(--slate-a1);
-  --gray-a2: var(--slate-a2);
-  --gray-a3: var(--slate-a3);
-  --gray-a4: var(--slate-a4);
-  --gray-a5: var(--slate-a5);
-  --gray-a6: var(--slate-a6);
-  --gray-a7: var(--slate-a7);
-  --gray-a8: var(--slate-a8);
-  --gray-a9: var(--slate-a9);
-  --gray-a10: var(--slate-a10);
-  --gray-a11: var(--slate-a11);
-  --gray-a12: var(--slate-a12);
-  --gray-contrast: var(--slate-contrast);
-  --gray-surface: var(--slate-surface);
-  --gray-indicator: var(--slate-indicator);
-  --gray-track: var(--slate-track);
-}
 .radix-themes {
+  --gray-ink: var(--gray-12);
+  --gray-ink-muted: var(--gray-a11);
+  --gray-ink-faint: var(--gray-a10);
   --cursor-button: default;
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
@@ -1201,7 +1105,7 @@
   --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
   --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
   --font-body: var(--font-sans);
-  --font-heading: var(--font-body);
+  --font-heading: var(--font-display, var(--font-body));
   --font-code: var(--font-mono);
   --font-strong: var(--font-body);
   --font-em: var(--font-serif);
@@ -1327,6 +1231,156 @@
   -moz-osx-font-smoothing: grayscale;
   color: var(--gray-12);
 }
+.radix-themes:where([data-gray-color='mauve']) {
+  --gray-1: var(--mauve-1);
+  --gray-2: var(--mauve-2);
+  --gray-3: var(--mauve-3);
+  --gray-4: var(--mauve-4);
+  --gray-5: var(--mauve-5);
+  --gray-6: var(--mauve-6);
+  --gray-7: var(--mauve-7);
+  --gray-8: var(--mauve-8);
+  --gray-9: var(--mauve-9);
+  --gray-10: var(--mauve-10);
+  --gray-11: var(--mauve-11);
+  --gray-12: var(--mauve-12);
+  --gray-a1: var(--mauve-a1);
+  --gray-a2: var(--mauve-a2);
+  --gray-a3: var(--mauve-a3);
+  --gray-a4: var(--mauve-a4);
+  --gray-a5: var(--mauve-a5);
+  --gray-a6: var(--mauve-a6);
+  --gray-a7: var(--mauve-a7);
+  --gray-a8: var(--mauve-a8);
+  --gray-a9: var(--mauve-a9);
+  --gray-a10: var(--mauve-a10);
+  --gray-a11: var(--mauve-a11);
+  --gray-a12: var(--mauve-a12);
+  --gray-contrast: var(--mauve-contrast);
+  --gray-surface: var(--mauve-surface);
+  --gray-indicator: var(--mauve-indicator);
+  --gray-track: var(--mauve-track);
+}
+.radix-themes:where([data-gray-color='olive']) {
+  --gray-1: var(--olive-1);
+  --gray-2: var(--olive-2);
+  --gray-3: var(--olive-3);
+  --gray-4: var(--olive-4);
+  --gray-5: var(--olive-5);
+  --gray-6: var(--olive-6);
+  --gray-7: var(--olive-7);
+  --gray-8: var(--olive-8);
+  --gray-9: var(--olive-9);
+  --gray-10: var(--olive-10);
+  --gray-11: var(--olive-11);
+  --gray-12: var(--olive-12);
+  --gray-a1: var(--olive-a1);
+  --gray-a2: var(--olive-a2);
+  --gray-a3: var(--olive-a3);
+  --gray-a4: var(--olive-a4);
+  --gray-a5: var(--olive-a5);
+  --gray-a6: var(--olive-a6);
+  --gray-a7: var(--olive-a7);
+  --gray-a8: var(--olive-a8);
+  --gray-a9: var(--olive-a9);
+  --gray-a10: var(--olive-a10);
+  --gray-a11: var(--olive-a11);
+  --gray-a12: var(--olive-a12);
+  --gray-contrast: var(--olive-contrast);
+  --gray-surface: var(--olive-surface);
+  --gray-indicator: var(--olive-indicator);
+  --gray-track: var(--olive-track);
+}
+.radix-themes:where([data-gray-color='sage']) {
+  --gray-1: var(--sage-1);
+  --gray-2: var(--sage-2);
+  --gray-3: var(--sage-3);
+  --gray-4: var(--sage-4);
+  --gray-5: var(--sage-5);
+  --gray-6: var(--sage-6);
+  --gray-7: var(--sage-7);
+  --gray-8: var(--sage-8);
+  --gray-9: var(--sage-9);
+  --gray-10: var(--sage-10);
+  --gray-11: var(--sage-11);
+  --gray-12: var(--sage-12);
+  --gray-a1: var(--sage-a1);
+  --gray-a2: var(--sage-a2);
+  --gray-a3: var(--sage-a3);
+  --gray-a4: var(--sage-a4);
+  --gray-a5: var(--sage-a5);
+  --gray-a6: var(--sage-a6);
+  --gray-a7: var(--sage-a7);
+  --gray-a8: var(--sage-a8);
+  --gray-a9: var(--sage-a9);
+  --gray-a10: var(--sage-a10);
+  --gray-a11: var(--sage-a11);
+  --gray-a12: var(--sage-a12);
+  --gray-contrast: var(--sage-contrast);
+  --gray-surface: var(--sage-surface);
+  --gray-indicator: var(--sage-indicator);
+  --gray-track: var(--sage-track);
+}
+.radix-themes:where([data-gray-color='sand']) {
+  --gray-1: var(--sand-1);
+  --gray-2: var(--sand-2);
+  --gray-3: var(--sand-3);
+  --gray-4: var(--sand-4);
+  --gray-5: var(--sand-5);
+  --gray-6: var(--sand-6);
+  --gray-7: var(--sand-7);
+  --gray-8: var(--sand-8);
+  --gray-9: var(--sand-9);
+  --gray-10: var(--sand-10);
+  --gray-11: var(--sand-11);
+  --gray-12: var(--sand-12);
+  --gray-a1: var(--sand-a1);
+  --gray-a2: var(--sand-a2);
+  --gray-a3: var(--sand-a3);
+  --gray-a4: var(--sand-a4);
+  --gray-a5: var(--sand-a5);
+  --gray-a6: var(--sand-a6);
+  --gray-a7: var(--sand-a7);
+  --gray-a8: var(--sand-a8);
+  --gray-a9: var(--sand-a9);
+  --gray-a10: var(--sand-a10);
+  --gray-a11: var(--sand-a11);
+  --gray-a12: var(--sand-a12);
+  --gray-contrast: var(--sand-contrast);
+  --gray-surface: var(--sand-surface);
+  --gray-indicator: var(--sand-indicator);
+  --gray-track: var(--sand-track);
+}
+.radix-themes:where([data-gray-color='slate']) {
+  --gray-1: var(--slate-1);
+  --gray-2: var(--slate-2);
+  --gray-3: var(--slate-3);
+  --gray-4: var(--slate-4);
+  --gray-5: var(--slate-5);
+  --gray-6: var(--slate-6);
+  --gray-7: var(--slate-7);
+  --gray-8: var(--slate-8);
+  --gray-9: var(--slate-9);
+  --gray-10: var(--slate-10);
+  --gray-11: var(--slate-11);
+  --gray-12: var(--slate-12);
+  --gray-a1: var(--slate-a1);
+  --gray-a2: var(--slate-a2);
+  --gray-a3: var(--slate-a3);
+  --gray-a4: var(--slate-a4);
+  --gray-a5: var(--slate-a5);
+  --gray-a6: var(--slate-a6);
+  --gray-a7: var(--slate-a7);
+  --gray-a8: var(--slate-a8);
+  --gray-a9: var(--slate-a9);
+  --gray-a10: var(--slate-a10);
+  --gray-a11: var(--slate-a11);
+  --gray-a12: var(--slate-a12);
+  --gray-contrast: var(--slate-contrast);
+  --gray-surface: var(--slate-surface);
+  --gray-indicator: var(--slate-indicator);
+  --gray-track: var(--slate-track);
+}
 .radix-themes:where([data-scaling='90%']) {
   --scaling: 0.9;
 }