@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/tokens/base.css

@@ -1101,11 +1101,11 @@
   --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;
+  --duration-1: 50ms;
+  --duration-2: 100ms;
+  --duration-3: 150ms;
+  --duration-4: 200ms;
+  --duration-5: 300ms;
   --ease-1: ease-out;
   --ease-2: ease-in-out;
   --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1119,9 +1119,13 @@
   --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-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
+  --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color 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-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
+  --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
+  --transition-progress: transform 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));
@@ -1310,8 +1314,12 @@
     --transition-badge: none;
     --transition-card: none;
     --transition-tabs: none;
+    --transition-segmented-control: none;
     --transition-menu: none;
+    --transition-checkbox: none;
+    --transition-radio: none;
     --transition-focus: none;
+    --transition-progress: none;
   }
 }
 @font-face {

package/tokens.css

@@ -3306,12 +3306,12 @@
   }
 }
 :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;
+  --backdrop-blur-panel: 48px;
+  --backdrop-blur-components: 16px;
+  --backdrop-blur-heavy: 48px;
+  --backdrop-blur-light: 16px;
+  --backdrop-blur-dialog: 32px;
+  --panel-opacity-light: 0.75;
   --panel-opacity-heavy: 0.75;
   --surface-opacity-light: 0.25;
   --surface-opacity-heavy: 0.75;
@@ -3323,18 +3323,38 @@
   --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;
+  --border-width-inset: 1px;
+  --border-width-none: 0px;
+  --classic-elevation-offset: -0.02em;
+  --classic-active-padding-offset-1: 0.5px;
+  --classic-active-padding-offset-2: 1px;
+  --classic-shadow-blur-small: 0.15em;
+  --classic-shadow-blur-medium: 0.2em;
+  --classic-shadow-blur-large: 0.4em;
+  --classic-border-width: 0.03em;
+  --classic-border-width-thick: 0.05em;
   --classic-border-width-thin: 0.1em;
-  --classic-shadow-offset-y: 0.08em;
+  --classic-shadow-offset-y: 0.04em;
   --classic-shadow-offset-negative: -0.1em;
   --classic-word-spacing: -0.1em;
+  --classic-inset-shadow-offset: 0.5px;
+  --classic-inset-shadow-offset-negative: -0.5px;
+  --classic-inset-shadow-blur: 0.5px;
+  --classic-elevation-factor-subtle: 3;
+  --classic-shadow-factor-light: 1.5;
+  --classic-shadow-factor-medium: 2;
+  --classic-shadow-factor-heavy: 3;
+  --classic-shadow-factor-subtle: 4;
+  --classic-border-factor-half: 2;
+  --classic-border-factor-light: 1.5;
+  --classic-border-multiplier-double: 2;
+  --classic-shadow-medium-factor-third: 3;
+  --classic-inset-shadow-light: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a5);
+  --classic-inset-shadow-light-hover: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a1), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a2), 0 0 0 var(--classic-border-width) var(--gray-a6);
+  --classic-inset-shadow-light-focus: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a1), 0 0 0 var(--focus-outline-width) var(--focus-8);
+  --classic-inset-shadow-dark: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
+  --classic-inset-shadow-dark-hover: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
+  --classic-inset-shadow-dark-focus: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a2), 0 0 0 var(--focus-outline-width) var(--focus-8);
   --color-mix-percentage-light: 25%;
   --color-mix-percentage-medium: 50%;
   --color-mix-percentage-heavy: 75%;
@@ -3347,10 +3367,50 @@
   --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-1: calc(9px * var(--scaling));
   --indicator-icon-size-2: calc(10px * var(--scaling));
+  --indicator-icon-size-3: calc(12px * var(--scaling));
+  --select-indicator-icon-size-1: calc(8px * var(--scaling));
+  --select-indicator-icon-size-2: calc(10px * var(--scaling));
+  --select-indicator-icon-size-3: calc(10px * var(--scaling));
+  --select-item-indicator-width-factor: 1.2;
+  --separator-height-thin: 1px;
+  --progress-default-duration: 5s;
+  --progress-animation-delay-start: 5s;
+  --progress-animation-delay-shine: 7.5s;
+  --progress-animation-duration-fade: 2.5s;
+  --progress-animation-duration-pulse: 5s;
+  --progress-shine-width-multiplier: 4;
+  --progress-gradient-stop-start: 25%;
+  --progress-gradient-stop-end: 75%;
+  --progress-border-radius-factor: 3;
+  --progress-scale-initial: 0.01;
+  --progress-scale-step-1: 0.1;
+  --progress-scale-step-2: 0.6;
+  --progress-scale-step-3: 0.9;
+  --progress-scale-final: 1;
+  --progress-timing-step-1: 20%;
+  --progress-timing-step-2: 30%;
+  --progress-timing-step-3: 40%;
+  --progress-timing-step-4: 50%;
+  --slider-thumb-hit-area-multiplier: 3;
+  --slider-thumb-inset-factor: 0.25;
+  --slider-track-radius-factor: 3;
+  --slider-focus-ring-inner: 3px;
+  --slider-focus-ring-outer: 5px;
+  --slider-classic-inset-offset: 1.5px;
+  --size-multiplier-small: 0.75;
+  --size-multiplier-large: 1.25;
+  --opacity-disabled: 0.5;
+  --opacity-soft-variant: 0.75;
+  --opacity-high-contrast: 0.8;
+  --position-center: 50%;
+  --position-full: 100%;
+  --position-negative-full: -100%;
+  --position-zero: 0%;
   --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);
+  --transition-transform-progress: transform 120ms;
   --spacing-multiplier-small: 0.5;
   --spacing-multiplier-medium: 0.75;
   --spacing-multiplier-large: 1.25;
@@ -3376,6 +3436,10 @@
   --scale-active: 0.98;
   --scale-pressed: 0.96;
   --scale-normal: 1;
+  --backdrop-filter-nested-disabled: none;
+  --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
+  --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
+  --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
@@ -4452,11 +4516,11 @@
   --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;
+  --duration-1: 50ms;
+  --duration-2: 100ms;
+  --duration-3: 150ms;
+  --duration-4: 200ms;
+  --duration-5: 300ms;
   --ease-1: ease-out;
   --ease-2: ease-in-out;
   --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4470,9 +4534,13 @@
   --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-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
+  --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color 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-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
+  --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
   --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
+  --transition-progress: transform 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));
@@ -4661,8 +4729,12 @@
     --transition-badge: none;
     --transition-card: none;
     --transition-tabs: none;
+    --transition-segmented-control: none;
     --transition-menu: none;
+    --transition-checkbox: none;
+    --transition-radio: none;
     --transition-focus: none;
+    --transition-progress: none;
   }
 }
 @font-face {