@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

package/tokens/base.css

@@ -58,8 +58,11 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, 0.7);
-  --color-surface: rgba(255, 255, 255, 0.85);
+  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity-light));
+  --color-surface-solid: white;
+  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity-light));
+  --color-dialog-solid: white;
+  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity-light));
   --color-transparent: rgb(0 0 0 / 0);
   --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
   --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
@@ -73,8 +76,11 @@
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: var(--gray-a2);
-  --color-surface: rgba(0, 0, 0, 0.25);
+  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-mix-percentage), transparent);
+  --color-surface-solid: var(--gray-1);
+  --color-surface-translucent: rgba(0, 0, 0, var(--surface-opacity-dark));
+  --color-dialog-solid: var(--gray-2);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-mix-percentage), transparent);
   --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
   --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
   --shadow-3: 0 0 0 1px var(--gray-a7), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
@@ -132,11 +138,19 @@
 }
 .radix-themes:where([data-panel-background='solid']) {
   --color-panel: var(--color-panel-solid);
+  --color-surface: var(--color-surface-solid);
+  --color-dialog: var(--color-dialog-solid);
   --backdrop-filter-panel: none;
+  --backdrop-filter-components: none;
+  --backdrop-filter-dialog: none;
 }
 .radix-themes:where([data-panel-background='translucent']) {
   --color-panel: var(--color-panel-translucent);
-  --backdrop-filter-panel: blur(64px);
+  --color-surface: var(--color-surface-translucent);
+  --color-dialog: var(--color-dialog-translucent);
+  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
 }
 [data-accent-color='amber'] {
   --accent-1: var(--amber-1);
@@ -1100,7 +1114,13 @@
   --transition-fast: var(--duration-2) var(--ease-1);
   --transition-standard: var(--duration-3) var(--ease-2);
   --transition-slow: var(--duration-4) var(--ease-3);
-  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1);
+  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
+  --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
+  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
+  --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
+  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
   --font-size-0: calc(10px * var(--scaling));
   --font-size-1: calc(12px * var(--scaling));
@@ -1218,12 +1238,15 @@
   --scaling: 1.1;
 }
 [data-radius] {
-  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
-  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
-  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
-  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
-  --radius-5: calc(14px * var(--scaling) * var(--radius-factor));
-  --radius-6: calc(18px * var(--scaling) * var(--radius-factor));
+  --radius-1: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(10px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(14px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
+  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
+  --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
+  --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
 }
 [data-radius='none'] {
   --radius-factor: 0;
@@ -1253,22 +1276,22 @@
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {
     --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a4), var(--gray-4) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a4), var(--gray-4) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
   }
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :is(.dark, .dark-theme),
   :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
     --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1282,6 +1305,12 @@
     --transition-standard: none;
     --transition-slow: none;
     --transition-button: none;
+    --transition-text-field: none;
+    --transition-select: none;
+    --transition-badge: none;
+    --transition-card: none;
+    --transition-tabs: none;
+    --transition-menu: none;
     --transition-focus: none;
   }
 }

package/tokens.css

@@ -3305,6 +3305,93 @@
     --yellow-track: color-mix(in oklab, var(--yellow-8), var(--yellow-9) 65%);
   }
 }
+:where(.radix-themes) {
+  --backdrop-blur-panel: 40px;
+  --backdrop-blur-components: 8px;
+  --backdrop-blur-heavy: 16px;
+  --backdrop-blur-light: 8px;
+  --backdrop-blur-dialog: 16px;
+  --panel-opacity-light: 0.25;
+  --panel-opacity-heavy: 0.75;
+  --surface-opacity-light: 0.25;
+  --surface-opacity-heavy: 0.75;
+  --surface-opacity-dark: 0.25;
+  --dialog-opacity-light: 0.75;
+  --dialog-opacity-heavy: 0.75;
+  --dialog-opacity-dark: 0.75;
+  --panel-mix-percentage: 50%;
+  --surface-mix-percentage: 75%;
+  --dialog-mix-percentage: 50%;
+  --border-width-standard: 1px;
+  --classic-elevation-offset: -0.03em;
+  --classic-active-padding-offset-1: 1px;
+  --classic-active-padding-offset-2: 2px;
+  --classic-shadow-blur-small: 0.17em;
+  --classic-shadow-blur-medium: 0.25em;
+  --classic-shadow-blur-large: 0.5em;
+  --classic-border-width: 0.05em;
+  --classic-border-width-thick: 0.075em;
+  --classic-border-width-thin: 0.1em;
+  --classic-shadow-offset-y: 0.08em;
+  --classic-shadow-offset-negative: -0.1em;
+  --classic-word-spacing: -0.1em;
+  --color-mix-percentage-light: 25%;
+  --color-mix-percentage-medium: 50%;
+  --color-mix-percentage-heavy: 75%;
+  --trigger-icon-size-default: 9px;
+  --trigger-icon-size-1: 10px;
+  --trigger-icon-size-2: 11px;
+  --trigger-icon-size-3: 11px;
+  --trigger-icon-size-4: 12px;
+  --content-icon-size-1: calc(var(--space-3) * 1.175);
+  --content-icon-size-2: var(--space-4);
+  --content-icon-size-3: calc(var(--space-4) * 1.175);
+  --content-icon-size-4: var(--space-5);
+  --indicator-icon-size-1: calc(8px * var(--scaling));
+  --indicator-icon-size-2: calc(10px * var(--scaling));
+  --transition-backdrop-filter: backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-background-blur: background-color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --spacing-multiplier-small: 0.5;
+  --spacing-multiplier-medium: 0.75;
+  --spacing-multiplier-large: 1.25;
+  --spacing-multiplier-extra-large: 1.5;
+  --spacing-multiplier-double: 2;
+  --component-gap-1: var(--space-1);
+  --component-gap-2: var(--space-2);
+  --component-gap-3: var(--space-3);
+  --component-gap-4: var(--space-3);
+  --component-gap-ghost-1: var(--space-1);
+  --component-gap-ghost-2: calc(var(--space-1) * 1.5);
+  --component-gap-ghost-3: var(--space-2);
+  --component-gap-ghost-4: var(--space-2);
+  --font-size-multiplier-badge: 0.8;
+  --font-size-multiplier-kbd: 0.8;
+  --radius-multiplier-compact: 0.35em;
+  --radius-multiplier-standard: 1em;
+  --focus-outline-width: 2px;
+  --focus-outline-offset: 2px;
+  --focus-outline-offset-inset: -1px;
+  --padding-ratio-horizontal: 1.5;
+  --padding-ratio-ghost: 0.25;
+  --scale-active: 0.98;
+  --scale-pressed: 0.96;
+  --scale-normal: 1;
+  --color-background: white;
+  --color-overlay: var(--black-a6);
+  --color-panel-solid: white;
+  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity-light));
+  --color-surface-solid: white;
+  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity-light));
+  --color-dialog-solid: white;
+  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity-light));
+  --color-transparent: rgb(0 0 0 / 0);
+  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
+  --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+  --shadow-3: 0 0 0 1px var(--gray-a4), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+  --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+  --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+}
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
     :root {
@@ -3335,27 +3422,16 @@
     }
   }
 }
-:where(.radix-themes) {
-  --color-background: white;
-  --color-overlay: var(--black-a6);
-  --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, 0.7);
-  --color-surface: rgba(255, 255, 255, 0.85);
-  --color-transparent: rgb(0 0 0 / 0);
-  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
-  --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --shadow-3: 0 0 0 1px var(--gray-a4), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
-  --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
-  --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
-  --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
-}
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: var(--gray-a2);
-  --color-surface: rgba(0, 0, 0, 0.25);
+  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-mix-percentage), transparent);
+  --color-surface-solid: var(--gray-1);
+  --color-surface-translucent: rgba(0, 0, 0, var(--surface-opacity-dark));
+  --color-dialog-solid: var(--gray-2);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-mix-percentage), transparent);
   --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
   --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
   --shadow-3: 0 0 0 1px var(--gray-a7), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
@@ -3413,11 +3489,19 @@
 }
 .radix-themes:where([data-panel-background='solid']) {
   --color-panel: var(--color-panel-solid);
+  --color-surface: var(--color-surface-solid);
+  --color-dialog: var(--color-dialog-solid);
   --backdrop-filter-panel: none;
+  --backdrop-filter-components: none;
+  --backdrop-filter-dialog: none;
 }
 .radix-themes:where([data-panel-background='translucent']) {
   --color-panel: var(--color-panel-translucent);
-  --backdrop-filter-panel: blur(64px);
+  --color-surface: var(--color-surface-translucent);
+  --color-dialog: var(--color-dialog-translucent);
+  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
 }
 [data-accent-color='amber'] {
   --accent-1: var(--amber-1);
@@ -4381,7 +4465,13 @@
   --transition-fast: var(--duration-2) var(--ease-1);
   --transition-standard: var(--duration-3) var(--ease-2);
   --transition-slow: var(--duration-4) var(--ease-3);
-  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1);
+  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
+  --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
+  --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
+  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
+  --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
+  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
   --font-size-0: calc(10px * var(--scaling));
   --font-size-1: calc(12px * var(--scaling));
@@ -4499,12 +4589,15 @@
   --scaling: 1.1;
 }
 [data-radius] {
-  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
-  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
-  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
-  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
-  --radius-5: calc(14px * var(--scaling) * var(--radius-factor));
-  --radius-6: calc(18px * var(--scaling) * var(--radius-factor));
+  --radius-1: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(10px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(14px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
+  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
+  --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
+  --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
 }
 [data-radius='none'] {
   --radius-factor: 0;
@@ -4534,22 +4627,22 @@
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {
     --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a4), var(--gray-4) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a4), var(--gray-4) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
   }
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :is(.dark, .dark-theme),
   :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
     --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
-    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
-    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
-    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
-    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-7) var(--color-mix-percentage-light)), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4563,6 +4656,12 @@
     --transition-standard: none;
     --transition-slow: none;
     --transition-button: none;
+    --transition-text-field: none;
+    --transition-select: none;
+    --transition-badge: none;
+    --transition-card: none;
+    --transition-tabs: none;
+    --transition-menu: none;
     --transition-focus: none;
   }
 }