@kushagradhawan/kookie-ui 0.1.5 → 0.1.6

package/src/components/toggle-icon-button.tsx

@@ -1,11 +1,54 @@
 import * as React from 'react';
 import { Toggle } from 'radix-ui';
 import { IconButton } from './icon-button.js';
+import type { BaseButtonProps } from './_internal/base-button.js';
 
-interface ToggleIconButtonProps extends React.ComponentPropsWithoutRef<typeof IconButton> {
+// Extract the specific types we need
+type ButtonVariant = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
+type ButtonSize = '1' | '2' | '3' | '4';
+type ButtonColor =
+  | 'gray'
+  | 'gold'
+  | 'bronze'
+  | 'brown'
+  | 'yellow'
+  | 'amber'
+  | 'orange'
+  | 'tomato'
+  | 'red'
+  | 'ruby'
+  | 'crimson'
+  | 'pink'
+  | 'plum'
+  | 'purple'
+  | 'violet'
+  | 'iris'
+  | 'indigo'
+  | 'blue'
+  | 'cyan'
+  | 'teal'
+  | 'jade'
+  | 'green'
+  | 'grass'
+  | 'lime'
+  | 'mint'
+  | 'sky';
+type ButtonRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
+
+interface ToggleIconButtonProps {
   pressed?: boolean;
   onPressedChange?: (pressed: boolean) => void;
   defaultPressed?: boolean;
+  'aria-label': string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  color?: ButtonColor;
+  highContrast?: boolean;
+  radius?: ButtonRadius;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+  children?: React.ReactNode;
 }
 
 type ToggleIconButtonElement = React.ElementRef<typeof IconButton>;

package/src/styles/tokens/base.css

@@ -3,4 +3,5 @@
 @import './layout.css';
 @import './radius.css';
 @import './shadow.css';
+@import './transition.css';
 @import './typography.css';

package/src/styles/tokens/shadow.css

@@ -13,7 +13,7 @@
     0 1px 3px 0 var(--black-a1);
 
   --shadow-3:
-    0 0 0 1px var(--gray-a3),
+    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);
@@ -51,7 +51,7 @@
       0 1px 3px 0 var(--black-a1);
 
     --shadow-3:
-      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      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);
@@ -91,7 +91,7 @@
     0 1px 3px 0 var(--black-a5);
 
   --shadow-3:
-    0 0 0 1px var(--gray-a6),
+    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);
@@ -131,7 +131,7 @@
       0 1px 3px 0 var(--black-a5);
 
     --shadow-3:
-      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      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);

package/src/styles/tokens/transition.css

@@ -0,0 +1,43 @@
+.radix-themes {
+  /* Duration tokens */
+  --duration-1: 100ms; /* Micro interactions */
+  --duration-2: 150ms; /* Fast transitions */
+  --duration-3: 200ms; /* Standard transitions */
+  --duration-4: 300ms; /* Slower transitions */
+  --duration-5: 500ms; /* Slow animations */
+
+  /* Easing tokens */
+  --ease-1: ease-out; /* Fast start, slow end */
+  --ease-2: ease-in-out; /* Smooth both ways */
+  --ease-3: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design standard */
+  --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ease out back */
+  --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce */
+
+  /* Common transition combinations */
+  --transition-fast: var(--duration-2) var(--ease-1);
+  --transition-standard: var(--duration-3) var(--ease-2);
+  --transition-slow: var(--duration-4) var(--ease-3);
+
+  /* Specific component transitions */
+  --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-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
+}
+
+/* Respect user preference for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .radix-themes {
+    --duration-1: 0ms;
+    --duration-2: 0ms;
+    --duration-3: 0ms;
+    --duration-4: 0ms;
+    --duration-5: 0ms;
+    --transition-fast: none;
+    --transition-standard: none;
+    --transition-slow: none;
+    --transition-button: none;
+    --transition-focus: none;
+  }
+}

package/styles.css

@@ -3360,7 +3360,7 @@
   --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-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --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);
@@ -3368,6 +3368,8 @@
   --base-button-classic-hover-shadow: var(--shadow-3);
   --base-button-classic-active-shadow: var(--shadow-2);
   --base-button-classic-disabled-shadow: none;
+  --base-button-classic-hover-filter: brightness(1.08) saturate(1.02) contrast(1.02);
+  --base-button-classic-active-filter: brightness(0.88) saturate(1.05) contrast(1.1);
   --base-button-solid-active-filter: brightness(0.92) saturate(1.1);
   --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
   --base-button-solid-high-contrast-active-filter: contrast(0.82) saturate(1.2) brightness(1.16);
@@ -3403,7 +3405,7 @@
   --color-surface: rgba(0, 0, 0, 0.25);
   --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-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --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);
   --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
   --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
   --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
@@ -3411,6 +3413,8 @@
   --base-button-classic-hover-shadow: var(--shadow-3);
   --base-button-classic-active-shadow: var(--shadow-2);
   --base-button-classic-disabled-shadow: none;
+  --base-button-classic-hover-filter: brightness(1.12) saturate(1.05) contrast(1.02);
+  --base-button-classic-active-filter: brightness(0.92) saturate(1.1) contrast(1.05);
   --base-button-solid-active-filter: brightness(1.08);
   --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
   --base-button-solid-high-contrast-active-filter: brightness(0.95) saturate(1.2);
@@ -4433,6 +4437,21 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
+  --duration-1: 100ms;
+  --duration-2: 150ms;
+  --duration-3: 200ms;
+  --duration-4: 300ms;
+  --duration-5: 500ms;
+  --ease-1: ease-out;
+  --ease-2: ease-in-out;
+  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --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-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));
   --font-size-2: calc(14px * var(--scaling));
@@ -4600,7 +4619,7 @@
   :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-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --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);
@@ -4617,12 +4636,26 @@
   :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-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --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);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .radix-themes {
+    --duration-1: 0ms;
+    --duration-2: 0ms;
+    --duration-3: 0ms;
+    --duration-4: 0ms;
+    --duration-5: 0ms;
+    --transition-fast: none;
+    --transition-standard: none;
+    --transition-slow: none;
+    --transition-button: none;
+    --transition-focus: none;
+  }
+}
 @font-face {
   font-family: 'Segoe UI (Custom)';
   font-weight: 300;
@@ -6535,13 +6568,18 @@
   padding-left: min(var(--space-5), max(var(--space-3), 0.5em));
 }
 .rt-BaseButton {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   -webkit-user-select: none;
           user-select: none;
-  vertical-align: top;
+  position: relative;
+  cursor: default;
+  gap: var(--base-button-gap);
+  transition: var(--transition-button);
   font-family: var(--default-font-family);
   font-style: normal;
   text-align: center;
@@ -6549,9 +6587,23 @@
 }
 .rt-BaseButton:where([data-disabled]) {
   --spinner-opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-loading) {
   position: relative;
+  cursor: wait;
+}
+.rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
+  transform: scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+  .rt-BaseButton {
+    transition: none;
+  }
+  .rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
+    transform: none;
+  }
 }
 .rt-BaseButton:where(.rt-full-width) {
   display: flex;
@@ -6711,8 +6763,9 @@
 }
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-classic):where(:hover) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
     box-shadow: var(--base-button-classic-hover-shadow);
+    filter: var(--base-button-classic-hover-filter);
   }
   .rt-BaseButton:where(.rt-variant-classic):where(:hover):where(.rt-high-contrast) {
     background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
@@ -6723,8 +6776,9 @@
   }
 }
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']) {
-  background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+  background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
   box-shadow: var(--base-button-classic-hover-shadow);
+  filter: var(--base-button-classic-hover-filter);
 }
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']):where(.rt-high-contrast) {
   background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
@@ -6734,11 +6788,12 @@
   background: var(--accent-12);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])) {
-  background: linear-gradient(to bottom, var(--accent-10), var(--accent-9));
+  background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
   box-shadow: var(--base-button-classic-active-shadow);
+  filter: var(--base-button-classic-active-filter);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])):where(.rt-high-contrast) {
-  background: linear-gradient(to bottom, var(--accent-12), var(--accent-11));
+  background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
   filter: contrast(0.82) saturate(1.2) brightness(1.16);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
@@ -6750,6 +6805,8 @@
   box-shadow: var(--base-button-classic-disabled-shadow);
   outline: none;
   filter: none;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-solid) {
   background-color: var(--accent-9);
@@ -6800,6 +6857,8 @@
   background-color: var(--gray-a3);
   outline: none;
   filter: none;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost) {
   color: var(--accent-a11);
@@ -6810,6 +6869,8 @@
 .rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost):where([data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-soft) {
   background-color: var(--accent-a3);
@@ -6832,6 +6893,8 @@
 .rt-BaseButton:where(.rt-variant-soft):where([data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 @media (hover: hover) {
   .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
@@ -6851,6 +6914,8 @@
 .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]) {
   color: var(--gray-a8);
   background-color: transparent;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--accent-a8);
@@ -6879,6 +6944,8 @@
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   background-color: transparent;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-surface) {
   background-color: var(--accent-surface);
@@ -6908,24 +6975,36 @@
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a6);
   background-color: var(--gray-a2);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rt-BaseButton:where([data-state='on']) {
+  transform: scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+  .rt-BaseButton:where([data-state='on']) {
+    transform: none;
+  }
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
-  background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
-  box-shadow: var(--base-button-classic-hover-shadow);
+  background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
+  box-shadow: var(--base-button-classic-active-shadow);
+  filter: var(--base-button-classic-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast) {
   background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
-  filter: contrast(0.88) saturate(1.1) brightness(1.1);
+  filter: contrast(0.82) saturate(1.2) brightness(1.16);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
   background: var(--accent-12);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
   background-color: var(--accent-10);
+  filter: var(--base-button-solid-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast) {
   background-color: var(--accent-12);
-  filter: var(--base-button-solid-high-contrast-hover-filter);
+  filter: var(--base-button-solid-high-contrast-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
   background-color: var(--accent-a5);
@@ -6940,6 +7019,47 @@
   background-color: var(--accent-a3);
   box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
+.rt-BaseButton:where([disabled][aria-pressed]) {
+  transform: none;
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+  background: var(--gray-a3);
+  box-shadow: none;
+  filter: none;
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where([data-state='on']) {
+  transform: none;
+  background: var(--gray-a3);
+  background-color: var(--gray-a3);
+  box-shadow: none;
+  filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-classic) {
+  background: var(--gray-a3);
+  box-shadow: none;
+  filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-solid) {
+  background-color: var(--gray-a3);
+  filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-soft) {
+  background-color: var(--gray-a3);
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-ghost) {
+  background-color: var(--gray-a3);
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-outline) {
+  background-color: var(--gray-a3);
+  box-shadow: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-surface) {
+  background-color: var(--gray-a3);
+  box-shadow: none;
+}
 .rt-Button:where(:not(.rt-variant-ghost)) :where(svg) {
   opacity: 0.9;
 }

package/tokens/base.css

@@ -63,7 +63,7 @@
   --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-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --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);
@@ -77,7 +77,7 @@
   --color-surface: rgba(0, 0, 0, 0.25);
   --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-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --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);
   --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
   --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
   --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
@@ -1087,6 +1087,21 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
+  --duration-1: 100ms;
+  --duration-2: 150ms;
+  --duration-3: 200ms;
+  --duration-4: 300ms;
+  --duration-5: 500ms;
+  --ease-1: ease-out;
+  --ease-2: ease-in-out;
+  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --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-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));
   --font-size-2: calc(14px * var(--scaling));
@@ -1239,7 +1254,7 @@
   :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-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --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);
@@ -1250,12 +1265,26 @@
   :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-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --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);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .radix-themes {
+    --duration-1: 0ms;
+    --duration-2: 0ms;
+    --duration-3: 0ms;
+    --duration-4: 0ms;
+    --duration-5: 0ms;
+    --transition-fast: none;
+    --transition-standard: none;
+    --transition-slow: none;
+    --transition-button: none;
+    --transition-focus: none;
+  }
+}
 @font-face {
   font-family: 'Segoe UI (Custom)';
   font-weight: 300;

package/tokens.css

@@ -3344,7 +3344,7 @@
   --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-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --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);
@@ -3358,7 +3358,7 @@
   --color-surface: rgba(0, 0, 0, 0.25);
   --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-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --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);
   --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
   --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
   --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
@@ -4368,6 +4368,21 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
+  --duration-1: 100ms;
+  --duration-2: 150ms;
+  --duration-3: 200ms;
+  --duration-4: 300ms;
+  --duration-5: 500ms;
+  --ease-1: ease-out;
+  --ease-2: ease-in-out;
+  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --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-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));
   --font-size-2: calc(14px * var(--scaling));
@@ -4520,7 +4535,7 @@
   :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-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --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);
@@ -4531,12 +4546,26 @@
   :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-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --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);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .radix-themes {
+    --duration-1: 0ms;
+    --duration-2: 0ms;
+    --duration-3: 0ms;
+    --duration-4: 0ms;
+    --duration-5: 0ms;
+    --transition-fast: none;
+    --transition-standard: none;
+    --transition-slow: none;
+    --transition-button: none;
+    --transition-focus: none;
+  }
+}
 @font-face {
   font-family: 'Segoe UI (Custom)';
   font-weight: 300;