@kushagradhawan/kookie-ui 0.1.22 → 0.1.23

package/src/components/select.css

@@ -14,8 +14,8 @@
   text-align: start;
 
   &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
   }
 
   /* Reduced motion support */
@@ -95,7 +95,7 @@
 }
 
 .rt-SelectSeparator {
-  height: 1px;
+  height: var(--separator-height-thin);
   margin-top: var(--space-2);
   margin-bottom: var(--space-2);
   margin-left: var(--select-item-indicator-width);
@@ -218,7 +218,7 @@
     &:where(.rt-r-size-1) {
       --select-content-padding: var(--space-1);
       --select-item-height: var(--space-5);
-      --select-item-indicator-width: calc(var(--space-5) / 1.2);
+      --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
       --select-separator-margin-right: var(--space-2);
       border-radius: var(--radius-3);
 
@@ -234,8 +234,8 @@
         border-radius: var(--radius-1);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(8px * var(--scaling));
-        height: calc(8px * var(--scaling));
+        width: var(--select-indicator-icon-size-1);
+        height: var(--select-indicator-icon-size-1);
       }
     }
     &:where(.rt-r-size-2, .rt-r-size-3) {
@@ -261,8 +261,8 @@
         letter-spacing: var(--letter-spacing-2);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-2);
+        height: var(--select-indicator-icon-size-2);
       }
     }
     &:where(.rt-r-size-3) {
@@ -271,8 +271,8 @@
         letter-spacing: var(--letter-spacing-3);
       }
       & :where(.rt-SelectItemIndicatorIcon) {
-        width: calc(10px * var(--scaling));
-        height: calc(10px * var(--scaling));
+        width: var(--select-indicator-icon-size-3);
+        height: var(--select-indicator-icon-size-3);
       }
     }
   }
@@ -286,7 +286,7 @@
 
 /* Outline variant - neutral with gray border (previously surface) */
 .rt-SelectTrigger:where(.rt-variant-outline) {
-  --select-trigger-border-width: 1px;
+  --select-trigger-border-width: var(--border-width-standard);
   
   background-color: var(--color-surface);
   color: var(--gray-12);
@@ -331,22 +331,22 @@
 
 /* Classic variant - 3D inset form input */
 .rt-SelectTrigger:where(.rt-variant-classic) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   position: relative;
   /* Subtle inset positioning */
-  top: calc(var(--classic-elevation-offset) / 3); /* More pronounced than before */
+  top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
 
   background-color: var(--color-surface);
   color: var(--gray-12);
 
   /* 3D inset effect - more pronounced but still subtle */
   /* prettier-ignore */
-  box-shadow:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
-    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
-    0 0 0 var(--classic-border-width) var(--gray-a5);
+      box-shadow:
+      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);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
@@ -368,19 +368,19 @@
   @media (hover: hover) {
     &:where(:hover:not(:focus-visible)) {
       /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
-        0 0 0 var(--classic-border-width) var(--gray-a6);
+          box-shadow:
+      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);
     }
   }
   &:where([data-state='open']) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-      inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
+      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);
   }
 
@@ -388,8 +388,8 @@
   &:where(:focus-visible) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
-      0 0 0 2px var(--focus-8);
+      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);
   }
 
   &:where(:disabled) {
@@ -397,7 +397,7 @@
     background-color: var(--gray-a2);
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a1),
+      inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2),
       inset 0 0 0 var(--classic-border-width) var(--gray-a6);
   }
   &:where([data-placeholder]) {
@@ -409,7 +409,7 @@
 
 /* Soft variant - branded with accent colors */
 .rt-SelectTrigger:where(.rt-variant-soft) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   /* Use solid accent for solid panels, alpha accent for translucent panels */
   background-color: var(--accent-3);
@@ -482,7 +482,7 @@
 
 /* Surface variant - transparent with accent border (previously outline) */
 .rt-SelectTrigger:where(.rt-variant-surface) {
-  --select-trigger-border-width: 1px;
+  --select-trigger-border-width: var(--border-width-standard);
   
   background-color: transparent;
   box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--accent-7);
@@ -595,7 +595,7 @@
 
 /* Ghost variant - transparent until interaction */
 .rt-SelectTrigger:where(.rt-variant-ghost) {
-  --select-trigger-border-width: 0px;
+  --select-trigger-border-width: var(--border-width-none);
   
   background-color: transparent;
   color: var(--accent-12);

package/src/components/slider.css

@@ -7,7 +7,7 @@
   flex-grow: 1;
 
   border-radius: max(
-    calc(var(--radius-factor) * var(--slider-track-size) / 3),
+    calc(var(--radius-factor) * var(--slider-track-size) / var(--slider-track-radius-factor)),
     calc(var(--radius-factor) * var(--radius-thumb))
   );
 
@@ -47,11 +47,11 @@
   border-radius: inherit;
 
   &:where([data-orientation='horizontal']) {
-    height: 100%;
+    height: var(--position-full);
   }
 
   &:where([data-orientation='vertical']) {
-    width: 100%;
+    width: var(--position-full);
   }
 }
 
@@ -67,10 +67,10 @@
     content: '';
     position: absolute;
     z-index: -1;
-    width: calc(var(--slider-thumb-size) * 3);
-    height: calc(var(--slider-thumb-size) * 3);
-    top: 50%;
-    left: 50%;
+    width: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    height: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    top: var(--position-center);
+    left: var(--position-center);
     transform: translate(-50%, -50%);
   }
 
@@ -78,7 +78,7 @@
   &::after {
     content: '';
     position: absolute;
-    inset: calc(-0.25 * var(--slider-track-size));
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
     background-color: white;
     border-radius: max(var(--radius-1), var(--radius-thumb));
     box-shadow: var(--slider-thumb-box-shadow);
@@ -86,7 +86,7 @@
   }
 
   &:where(:focus-visible)::after {
-    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
   }
 
   &:where(:active) {
@@ -103,13 +103,13 @@
 @breakpoints {
   .rt-SliderRoot {
     &:where(.rt-r-size-1) {
-      --slider-track-size: calc(var(--space-2) * 0.75);
+      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
     }
     &:where(.rt-r-size-2) {
       --slider-track-size: var(--space-2);
     }
     &:where(.rt-r-size-3) {
-      --slider-track-size: calc(var(--space-2) * 1.25);
+      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
     }
   }
 }
@@ -125,17 +125,17 @@
 .rt-SliderRoot:where(.rt-variant-surface) {
   & :where(.rt-SliderTrack) {
     background-color: var(--gray-a3);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
 
     &:where([data-disabled]) {
-      box-shadow: inset 0 0 0 1px var(--gray-a4);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
     }
   }
 
   & :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
   }
 
   & :where(.rt-SliderThumb) {
@@ -160,21 +160,21 @@
       inset: 0;
       position: absolute;
       border-radius: inherit;
-      box-shadow: var(--shadow-1);
+      box-shadow: var(--classic-inset-shadow-dark);
     }
     &:where([data-disabled])::before {
-      opacity: 0.5;
+      opacity: var(--opacity-disabled);
     }
   }
 
   & :where(.rt-SliderRange) {
     background-color: var(--accent-track);
     background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
-      inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
+      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 
     &:where(.rt-high-contrast) {
-      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
     }
   }
 

package/src/components/switch.css

@@ -197,21 +197,21 @@
   &::before {
     background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
     background-color: var(--gray-a4);
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
   }
   &:where([data-state='unchecked']:active)::before {
     background-color: var(--gray-a5);
   }
   &:where([data-state='checked'])::before {
-    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
-      inset 0 1.5px 2px 0 var(--black-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
+      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
   }
   &:where([data-state='checked']:active)::before {
     filter: var(--switch-surface-checked-active-filter);
   }
   &:where(.rt-high-contrast) {
     &::before {
-      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
 
       /* prettier-ignore */
       background-image:
@@ -229,8 +229,8 @@
       filter: none;
       background-image: none;
       background-color: var(--gray-a5);
-      box-shadow: var(--shadow-1);
-      opacity: 0.5;
+      box-shadow: var(--classic-inset-shadow-dark);
+      opacity: var(--opacity-disabled);
     }
   }
 

package/src/components/text-area.css

@@ -209,11 +209,11 @@
 
   /* 3D inset effect - same as TextField */
   /* prettier-ignore */
-  box-shadow:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
-    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
-    0 0 0 var(--classic-border-width) var(--gray-a5);
+      box-shadow:
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2),
+      inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a5);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
@@ -235,11 +235,11 @@
   @media (hover: hover) {
     &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
       /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
-        0 0 0 var(--classic-border-width) var(--gray-a6);
+          box-shadow:
+      inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3),
+      inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2),
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a6);
     }
   }
 
@@ -247,7 +247,7 @@
   &:where(:has(.rt-TextAreaInput:focus)) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
+      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2),
       0 0 0 2px var(--focus-8);
   }
 

package/src/components/text-field.css

@@ -378,11 +378,11 @@
 
   /* 3D inset effect - more pronounced but still subtle */
   /* prettier-ignore */
-  box-shadow:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a3),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a1),
-    inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a2),
-    0 0 0 var(--classic-border-width) var(--gray-a5);
+      box-shadow:
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2),
+      inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a5);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent']) & {
@@ -404,11 +404,11 @@
   @media (hover: hover) {
     &:where(:hover:not(:has(.rt-TextFieldInput:focus))) {
       /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a1),
-        inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a2),
-        0 0 0 var(--classic-border-width) var(--gray-a6);
+          box-shadow:
+      inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3),
+      inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2),
+      inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3),
+      0 0 0 var(--classic-border-width) var(--gray-a6);
     }
   }
 
@@ -416,7 +416,7 @@
   &:where(:has(.rt-TextFieldInput:focus)) {
     /* prettier-ignore */
     box-shadow:
-      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a1),
+      inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2),
       0 0 0 2px var(--focus-8);
   }
 

package/src/styles/tokens/constants.css

@@ -6,7 +6,7 @@
 
 :where(.radix-themes) {
   /* Backdrop blur constants */
-  --backdrop-blur-panel: 64px;
+  --backdrop-blur-panel: 48px;
   --backdrop-blur-components: 16px;
   --backdrop-blur-heavy: 48px;
   --backdrop-blur-light: 16px;
@@ -33,21 +33,76 @@
   
   /* Standard border width constants */
   --border-width-standard: 1px;
-  
-  /* Classic variant 3D effect constants */
-  --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 variant 3D effect constants - softened for smaller controls */
+  --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 variant division factors for different intensities */
+  --classic-elevation-factor-subtle: 3;     /* For select: calc(var(--classic-elevation-offset) / 3) */
+  --classic-shadow-factor-light: 1.5;       /* For lighter shadows: calc(var(--classic-shadow-blur-small) / 1.5) */
+  --classic-shadow-factor-medium: 2;        /* For medium shadows: calc(var(--classic-shadow-blur-small) / 2) */
+  --classic-shadow-factor-heavy: 3;         /* For heavy shadows: calc(var(--classic-shadow-blur-small) / 3) */
+  --classic-shadow-factor-subtle: 4;        /* For subtle shadows: calc(var(--classic-shadow-blur-medium) / 4) */
+  --classic-border-factor-half: 2;          /* For half borders: calc(var(--classic-border-width) / 2) */
+  --classic-border-factor-light: 1.5;       /* For light borders: calc(var(--classic-border-width) / 1.5) */
+  --classic-border-multiplier-double: 2;    /* For double borders: calc(var(--classic-border-width) * 2) */
+  --classic-shadow-medium-factor-third: 3;  /* For medium shadow thirds: calc(var(--classic-shadow-blur-medium) / 3) */
+  
+  /* Classic inset shadow tokens - based on text field pattern for consistent 3D effects */
+  /* Light mode inset shadows - creates sophisticated multi-layer depth */
+  --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);
+  
+  /* Hover state - slightly reduced inset effect */
+  --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);
+  
+  /* Focus state - minimal inset with accent ring */
+  --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);
+  
+  /* Darker inset shadow tokens - for form controls and smaller components */
+  /* These provide more pronounced depth for better visual hierarchy */
+  --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);
+  
+  /* Hover state - slightly reduced inset effect with darker shadows */
+  --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);
+  
+  /* Focus state - minimal inset with accent ring and darker base */
+  --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 mixing percentages */
   --color-mix-percentage-light: 25%;
@@ -68,12 +123,72 @@
   --content-icon-size-4: var(--space-5);               /* 20px */
   
   /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
-  --indicator-icon-size-1: calc(8px * var(--scaling));  /* ~8px */
-  --indicator-icon-size-2: calc(10px * var(--scaling)); /* ~10px */
+  --indicator-icon-size-1: calc(9px * var(--scaling));  /* ~9px - used by checkbox size 1 */
+  --indicator-icon-size-2: calc(10px * var(--scaling)); /* ~10px - used by checkbox size 2 */
+  --indicator-icon-size-3: calc(12px * var(--scaling)); /* ~12px - used by checkbox size 3 */
+  
+  /* Select-specific indicator icon sizes */
+  --select-indicator-icon-size-1: calc(8px * var(--scaling));  /* ~8px - used by select size 1 */
+  --select-indicator-icon-size-2: calc(10px * var(--scaling)); /* ~10px - used by select size 2 */
+  --select-indicator-icon-size-3: calc(10px * var(--scaling)); /* ~10px - used by select size 3 */
+  
+  /* Select component specific constants */
+  --select-item-indicator-width-factor: 1.2; /* Division factor for indicator width calculation */
+  
+  /* Separator constants */
+  --separator-height-thin: 1px;
+  
+  /* Progress component constants */
+  --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; /* width: 400% -> calc(100% * 4) */
+  --progress-gradient-stop-start: 25%;
+  --progress-gradient-stop-end: 75%;
+  --progress-border-radius-factor: 3; /* For calc(var(--progress-height) / 3) */
+  
+  /* Progress animation scale values */
+  --progress-scale-initial: 0.01;
+  --progress-scale-step-1: 0.1;  /* 20% */
+  --progress-scale-step-2: 0.6;  /* 30% */
+  --progress-scale-step-3: 0.9;  /* 40-50% */
+  --progress-scale-final: 1;     /* 100% */
+  
+  /* Progress animation timing percentages */
+  --progress-timing-step-1: 20%;
+  --progress-timing-step-2: 30%;
+  --progress-timing-step-3: 40%;
+  --progress-timing-step-4: 50%;
+  
+  /* Slider component constants */
+  --slider-thumb-hit-area-multiplier: 3; /* For calc(var(--slider-thumb-size) * 3) */
+  --slider-thumb-inset-factor: 0.25; /* For calc(-0.25 * var(--slider-track-size)) */
+  --slider-track-radius-factor: 3; /* For calc(var(--slider-track-size) / 3) */
+  --slider-focus-ring-inner: 3px;
+  --slider-focus-ring-outer: 5px;
+  --slider-classic-inset-offset: 1.5px;
+  
+  /* Size multipliers */
+  --size-multiplier-small: 0.75;
+  --size-multiplier-large: 1.25;
+  
+  /* Opacity constants */
+  --opacity-disabled: 0.5;
+  --opacity-soft-variant: 0.75;
+  --opacity-high-contrast: 0.8;
+  
+  /* Positioning constants */
+  --position-center: 50%;
+  --position-full: 100%;
+  --position-negative-full: -100%;
+  --position-zero: 0%;
   
   /* Transition constants */
   --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 multipliers for component sizing */
   --spacing-multiplier-small: 0.5;

package/src/styles/tokens/transition.css

@@ -45,11 +45,26 @@
     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);
+
+  /* Progress component transition */
+  --transition-progress: transform var(--duration-2) var(--ease-1);
 }
 
 /* Respect user preference for reduced motion */
@@ -69,7 +84,11 @@
     --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;
   }
 }