@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

package/src/styles/tokens/constants.css

@@ -0,0 +1,118 @@
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*        Design System Constants      */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+:where(.radix-themes) {
+  /* Backdrop blur constants */
+  --backdrop-blur-panel: 40px;
+  --backdrop-blur-components: 8px;
+  --backdrop-blur-heavy: 16px;
+  --backdrop-blur-light: 8px;
+  --backdrop-blur-dialog: 16px;
+  
+  /* Panel background opacity constants */
+  --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 background opacity constants (stronger than panel) */
+  --dialog-opacity-light: 0.75;
+  --dialog-opacity-heavy: 0.75;
+  --dialog-opacity-dark: 0.75;
+  
+  /* Dark mode panel background mix percentages */
+  --panel-mix-percentage: 50%;
+  --surface-mix-percentage: 75%;
+  
+  /* Dark mode dialog background mix percentages (stronger than panel) */
+  --dialog-mix-percentage: 50%;
+  
+  /* 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;
+  --classic-border-width-thin: 0.1em;
+  --classic-shadow-offset-y: 0.08em;
+  --classic-shadow-offset-negative: -0.1em;
+  --classic-word-spacing: -0.1em;
+  
+  
+  /* Color mixing percentages */
+  --color-mix-percentage-light: 25%;
+  --color-mix-percentage-medium: 50%;
+  --color-mix-percentage-heavy: 75%;
+  
+  /* Trigger icon size constants (for dropdowns, selects) */
+  --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 constants (for buttons, menu items) */
+  --content-icon-size-1: calc(var(--space-3) * 1.175); /* ~14.1px */
+  --content-icon-size-2: var(--space-4);               /* 16px */
+  --content-icon-size-3: calc(var(--space-4) * 1.175); /* ~18.8px */
+  --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 */
+  
+  /* 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);
+  
+  /* Spacing multipliers for component sizing */
+  --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 spacing constants (shared between Button, Select, etc.) */
+  --component-gap-1: var(--space-1);        /* 4px */
+  --component-gap-2: var(--space-2);        /* 8px */
+  --component-gap-3: var(--space-3);        /* 12px */
+  --component-gap-4: var(--space-3);        /* 12px */
+  
+  /* Ghost variant gap constants */
+  --component-gap-ghost-1: var(--space-1);              /* 4px */
+  --component-gap-ghost-2: calc(var(--space-1) * 1.5);  /* 6px */
+  --component-gap-ghost-3: var(--space-2);              /* 8px */
+  --component-gap-ghost-4: var(--space-2);              /* 8px */
+  
+  /* Font size multipliers */
+  --font-size-multiplier-badge: 0.8;
+  --font-size-multiplier-kbd: 0.8;
+  
+  /* Border radius multipliers for different component heights */
+  --radius-multiplier-compact: 0.35em;
+  --radius-multiplier-standard: 1em;
+  
+  /* Focus outline constants */
+  --focus-outline-width: 2px;
+  --focus-outline-offset: 2px;
+  --focus-outline-offset-inset: -1px;
+  
+  /* Component padding relationships */
+  --padding-ratio-horizontal: 1.5; /* horizontal padding is typically 1.5x vertical */
+  --padding-ratio-ghost: 0.25; /* ghost variants use 25% of normal padding */
+  
+  /* Scale transform constants */
+  --scale-active: 0.98;
+  --scale-pressed: 0.96;
+  --scale-normal: 1;
+} 

package/src/styles/tokens/index.css

@@ -31,4 +31,5 @@
 @import './colors/violet.css';
 @import './colors/yellow.css';
 
+@import './constants.css';
 @import './base.css';

package/src/styles/tokens/radius.css

@@ -1,10 +1,13 @@
 [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'] {

package/src/styles/tokens/shadow.css

@@ -44,30 +44,30 @@
       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 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) 25%),
+      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) 25%),
+      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) 25%),
+      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) 25%),
+      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);
@@ -124,30 +124,30 @@
       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 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) 25%),
+      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) 25%),
+      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) 25%),
+      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) 25%),
+      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);

package/src/styles/tokens/transition.css

@@ -21,7 +21,33 @@
   /* 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);
+    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);
 }
@@ -38,6 +64,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;
   }
 }