@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/styles/tokens/shadow.css

@@ -2,18 +2,18 @@
 :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);
+    inset 0 1px 1px 0 var(--gray-a2),
+    inset 0 1px 1px 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);
+    0 1px 4px 0 var(--black-a1);
 
   --shadow-3:
-    0 0 0 1px var(--gray-a4),
+    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);
@@ -40,34 +40,34 @@
   :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);
+      inset 0 1px 1px 0 var(--gray-a2),
+      inset 0 1px 1px 0 var(--black-a2);
 
     --shadow-2:
-      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)),
+      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);
+      0 1px 4px 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 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-4:
-      0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) var(--color-mix-percentage-light)),
+      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) var(--color-mix-percentage-light)),
+      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) var(--color-mix-percentage-light)),
+      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);
@@ -78,9 +78,9 @@
 :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 -1px 0.5px 0 var(--gray-a3),
     inset 0 0 0 1px var(--gray-a3),
-    inset 0 3px 4px 0 var(--black-a5),
+    inset 0 2px 2px 0 var(--black-a5),
     inset 0 0 0 1px var(--gray-a4);
 
   --shadow-2:
@@ -88,10 +88,10 @@
     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);
+    0 1px 4px 0 var(--black-a5);
 
   --shadow-3:
-    0 0 0 1px var(--gray-a7),
+    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);
@@ -118,38 +118,38 @@
   :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 -1px 0.5px 0 var(--gray-a3),
       inset 0 0 0 1px var(--gray-a3),
-      inset 0 3px 4px 0 var(--black-a5),
+      inset 0 2px 2px 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) var(--color-mix-percentage-light)),
+      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);
+      0 1px 4px 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 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-4:
-      0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) var(--color-mix-percentage-light)),
+      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) var(--color-mix-percentage-light)),
+      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) var(--color-mix-percentage-light)),
+      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);
   }
-}
+}

package/src/styles/tokens/transition.css

@@ -1,10 +1,15 @@
 .radix-themes {
   /* Duration tokens */
-  --duration-1: 75ms; /* Micro interactions */
-  --duration-2: 125ms; /* Fast transitions */
-  --duration-3: 175ms; /* Standard transitions */
-  --duration-4: 225ms; /* Slower transitions */
-  --duration-5: 325ms; /* Slow animations */
+  --duration-1: 50ms; /* Micro interactions */
+  --duration-2: 75ms; /* Fast transitions */
+  --duration-3: 100ms; /* Standard transitions */
+  --duration-4: 150ms; /* Slower transitions */
+  --duration-5: 200ms; /* Slow animations */
+
+  /* Spring-specific duration tokens */
+  --duration-spring-1: 200ms; /* Quick spring */
+  --duration-spring-2: 250ms; /* Standard spring */
+  --duration-spring-3: 300ms; /* Slow spring */
 
   /* Easing tokens */
   --ease-1: ease-out; /* Fast start, slow end */
@@ -13,24 +18,34 @@
   --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 */
 
+  /* Spring-specific easing tokens */
+  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Spring out back */
+  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Spring bounce */
+  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring elastic */
+
   /* 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);
 
+  /* Spring transition combinations */
+  --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
+  --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
+  --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
+  --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
+  --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-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),
+    backdrop-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);
+    background var(--duration-2) var(--ease-1), box-shadow 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);
+    background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
 
   --transition-badge:
     background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
@@ -38,7 +53,7 @@
 
   --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);
+    top var(--duration-2) var(--ease-1);
 
   --transition-tabs:
     color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1),
@@ -50,8 +65,7 @@
     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);
+    background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
 
   --transition-checkbox:
     background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
@@ -65,6 +79,15 @@
 
   /* Progress component transition */
   --transition-progress: transform var(--duration-2) var(--ease-1);
+
+  /* Accordion component transitions */
+  --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
+  --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
+  --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
+  
+  /* GPU-optimized spring transitions */
+  --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
+  --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
 }
 
 /* Respect user preference for reduced motion */
@@ -75,9 +98,17 @@
     --duration-3: 0ms;
     --duration-4: 0ms;
     --duration-5: 0ms;
+    --duration-spring-1: 0ms;
+    --duration-spring-2: 0ms;
+    --duration-spring-3: 0ms;
     --transition-fast: none;
     --transition-standard: none;
     --transition-slow: none;
+    --transition-spring-fast: none;
+    --transition-spring-standard: none;
+    --transition-spring-slow: none;
+    --transition-spring-bounce: none;
+    --transition-spring-elastic: none;
     --transition-button: none;
     --transition-text-field: none;
     --transition-select: none;
@@ -90,5 +121,10 @@
     --transition-radio: none;
     --transition-focus: none;
     --transition-progress: none;
+    --transition-accordion-content: none;
+    --transition-accordion-trigger: none;
+    --transition-accordion-trigger-active: none;
+    --transition-spring-gpu: none;
+    --transition-spring-gpu-fast: none;
   }
 }

package/src/styles/tokens/typography.css

@@ -10,10 +10,14 @@
   --font-size-8: calc(35px * var(--scaling));
   --font-size-9: calc(60px * var(--scaling));
 
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
 
   --line-height-0: calc(12px * var(--scaling));
   --line-height-1: calc(16px * var(--scaling));
@@ -39,7 +43,7 @@
 
   /* default values */
 
-  --default-font-family: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
+  --default-font-family: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
     Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
   --default-font-style: normal;
@@ -71,7 +75,7 @@
 
   /* Code */
 
-  --code-font-family: var(--font-geist-mono, 'Geist Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono',
+  --code-font-family: var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono',
     monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
@@ -87,7 +91,7 @@
   --strong-font-family: var(--default-font-family);
   --strong-font-size-adjust: 1;
   --strong-font-style: inherit;
-  --strong-font-weight: var(--font-weight-bold);
+  --strong-font-weight: var(--font-weight-medium);
   --strong-letter-spacing: 0em;
 
   /* Em */

package/src/styles/utilities/font-weight.css

@@ -1,4 +1,12 @@
 @breakpoints {
+  .rt-r-weight-thin {
+    font-weight: var(--font-weight-thin);
+  }
+
+  .rt-r-weight-extralight {
+    font-weight: var(--font-weight-extralight);
+  }
+
   .rt-r-weight-light {
     font-weight: var(--font-weight-light);
   }
@@ -11,7 +19,15 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .rt-r-weight-semibold {
+    font-weight: var(--font-weight-semibold);
+  }
+
   .rt-r-weight-bold {
     font-weight: var(--font-weight-bold);
   }
+
+  .rt-r-weight-extrabold {
+    font-weight: var(--font-weight-extrabold);
+  }
 }