@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/src/props/weight.prop.ts

@@ -1,6 +1,6 @@
 import type { PropDef } from './prop-def.js';
 
-const weights = ['light', 'regular', 'medium', 'bold'] as const;
+const weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;
 
 const weightPropDef = {
   weight: {

package/src/styles/fonts.css

@@ -1,22 +1,36 @@
-/* Geist Font Variables */
+/* Inter and JetBrains Mono from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
+/* Font Variables */
 :root {
-  --font-geist-sans: 'GeistSans', 'Geist';
-  --font-geist-mono: 'GeistMono', 'Geist Mono';
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  
+  /* Primary font variables */
+  --font-general-sans: var(--font-inter);
+  --font-inter-mono: var(--font-jetbrains-mono);
+  
+  /* Tailwind-compatible aliases */
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-jetbrains-mono);
+  
+  /* Force proper font weight rendering */
+  font-synthesis: none; /* Prevent browser from synthesizing weights */
 }
 
-/* Fallback font-face declarations for Geist */
-@font-face {
-  font-family: 'Geist';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.4.2/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
+/* Radix Themes font weight enforcement */
+.radix-themes {
+  font-synthesis: none;
+  font-family: var(--font-inter);
 }
 
+/* System font fallback for critical loading scenarios */
 @font-face {
-  font-family: 'Geist Mono';
+  font-family: 'System Fallback';
   font-style: normal;
   font-weight: 100 900;
-  font-display: swap;
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.4.2/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+  font-display: block;
+  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
 }
+

package/src/styles/index.css

@@ -1,5 +1,5 @@
 @import './fonts.css';
-@import './breakpoints.css';
 @import './tokens/index.css';
+@import './breakpoints.css';
 @import '../components/index.css';
 @import './utilities/index.css';

package/src/styles/tokens/base.css

@@ -5,3 +5,5 @@
 @import './shadow.css';
 @import './transition.css';
 @import './typography.css';
+@import './blur.css';
+@import './opacity.css';

package/src/styles/tokens/blur.css

@@ -0,0 +1,32 @@
+:where(.radix-themes) {
+  --blur-factor: 1;
+  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
+  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
+  --blur-3: calc(8px * var(--scaling) * var(--blur-factor));
+  --blur-4: calc(12px * var(--scaling) * var(--blur-factor));
+  --blur-5: calc(16px * var(--scaling) * var(--blur-factor));
+  --blur-6: calc(20px * var(--scaling) * var(--blur-factor));
+  --blur-7: calc(28px * var(--scaling) * var(--blur-factor));
+  --blur-8: calc(36px * var(--scaling) * var(--blur-factor));
+  --blur-9: calc(44px * var(--scaling) * var(--blur-factor));
+}
+
+[data-blur='none'] {
+  --blur-factor: 0;
+}
+
+[data-blur='small'] {
+  --blur-factor: 0.75;
+}
+
+[data-blur='medium'] {
+  --blur-factor: 1;
+}
+
+[data-blur='large'] {
+  --blur-factor: 1.5;
+}
+
+[data-blur='extra'] {
+  --blur-factor: 2.0;
+} 

package/src/styles/tokens/color.css

@@ -11,22 +11,22 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity-light));
+  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity));
   --color-surface-solid: white;
-  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity-light));
+  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
-  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity-light));
+  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
 }
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-mix-percentage), transparent);
-  --color-surface-solid: var(--gray-1);
-  --color-surface-translucent: rgba(0, 0, 0, var(--surface-opacity-dark));
+  --color-panel-translucent: color-mix(in srgb, var(--gray-2) var(--panel-opacity-percentage), transparent);
+  --color-surface-solid: var(--gray-2)  ;
+  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
   --color-dialog-solid: var(--gray-2);
-  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-mix-percentage), transparent);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -138,7 +138,7 @@
     --backdrop-filter-components: none;
     --backdrop-filter-dialog: none;
   }
-  &:where([data-panel-background='translucent']) {
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
     --color-panel: var(--color-panel-translucent);
     --color-surface: var(--color-surface-translucent);
     --color-dialog: var(--color-dialog-translucent);
@@ -1183,4 +1183,4 @@
     --gray-indicator: var(--slate-indicator);
     --gray-track: var(--slate-track);
   }
-}
+}

package/src/styles/tokens/constants.css

@@ -5,110 +5,58 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 :where(.radix-themes) {
-  /* Backdrop blur constants */
-  --backdrop-blur-panel: 48px;
-  --backdrop-blur-components: 16px;
-  --backdrop-blur-heavy: 48px;
-  --backdrop-blur-light: 16px;
-  --backdrop-blur-dialog: 32px;
-  
-  /* Panel background opacity constants */
-  --panel-opacity-light: 0.75;
-  --panel-opacity-heavy: 0.75;
-  --surface-opacity-light: 0.5;
-  --surface-opacity-heavy: 0.75;
-  --surface-opacity-dark: 0.25;
-  
+  /* Backdrop blur constants - using new blur tokens */
+  --backdrop-blur-components: var(--blur-4);
+  --backdrop-blur-panel: var(--blur-5);
+  --backdrop-blur-dialog: var(--blur-6);
+
+  /* Surface background opacity constants - using new opacity tokens */
+  --surface-opacity-light: var(--opacity-5);
+  --surface-opacity-heavy: var(--opacity-6);
+  --surface-opacity-dark: var(--opacity-7);
+    
   /* 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%;
+  --dialog-opacity: var(--opacity-7);
+  --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
+    
+  /* Panel background opacity constants */
+  --panel-opacity: var(--opacity-6);
+  --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
   
-  /* Dark mode dialog background mix percentages (stronger than panel) */
-  --dialog-mix-percentage: 50%;
+  /* Surface background opacity constants */
+  --surface-opacity: var(--opacity-5);
+  --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
   
   /* Standard border width constants */
   --border-width-standard: 1px;
-  --border-width-inset: 1px;
-  --border-width-none: 0px;
   
-  /* Classic variant 3D effect constants - softened for smaller controls */
+  /* Classic variant 3D effect constants - simplified for button-like components */
   --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.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);
+  /* Classic variant division factors for form components and inset effects */
+  --classic-elevation-factor-subtle: 3;
+  --classic-shadow-factor-light: 1.5;
+  --classic-border-multiplier-double: 2;
   
-  /* 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);
+  /* Complex shadow tokens for form components and inset effects */
+  --classic-shadow-blur-medium: 0.2em;
+  --classic-shadow-blur-large: 0.4em;
+  --classic-shadow-medium-factor-third: 3;
   
-  /* Darker inset shadow tokens - for form controls and smaller components */
-  /* These provide more pronounced depth for better visual hierarchy */
+  /* Classic inset shadow tokens - based on text field pattern for consistent 3D effects */
   --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%;
-  --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;
@@ -117,44 +65,43 @@
   --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 */
+  --content-icon-size-1: calc(var(--space-5) * 0.55);
+  --content-icon-size-2: calc(var(--space-6) * 0.525);
+  --content-icon-size-3: calc(var(--space-7) * 0.5125);
+  --content-icon-size-4: calc(var(--space-8) * 0.5);
   
   /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
-  --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 */
+  --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-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-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 component specific constants */
-  --select-item-indicator-width-factor: 1.2; /* Division factor for indicator width calculation */
+  --select-item-indicator-width-factor: 1.2;
   
   /* Separator constants */
   --separator-height-thin: 1px;
   
-  /* Progress component constants */
+  /* Progress and Slider 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-shine-width-multiplier: 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-scale-step-1: 0.1;
+  --progress-scale-step-2: 0.6;
+  --progress-scale-step-3: 0.9;
+  --progress-scale-final: 1;
   
   /* Progress animation timing percentages */
   --progress-timing-step-1: 20%;
@@ -163,21 +110,46 @@
   --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-thumb-hit-area-multiplier: 2;
+  --slider-thumb-inset-factor: 0.25;
   --slider-focus-ring-inner: 3px;
   --slider-focus-ring-outer: 5px;
   --slider-classic-inset-offset: 1.5px;
   
+  /* Shared Progress and Slider sizing tokens */
+  --progress-slider-height-1: var(--space-1);
+  --progress-slider-height-2: calc(var(--space-1) * 1.5);
+  --progress-slider-height-3: var(--space-2);
+  --progress-slider-height-4: calc(var(--space-2) * 1.25);
+
+  /* Outlier sizing for size 5 to 9. */
+  /* --progress-slider-height-5: var(--space-5); */
+  /* --progress-slider-height-6: var(--space-6); */
+  /* --progress-slider-height-7: var(--space-7); */
+  /* --progress-slider-height-8: var(--space-8); */
+  /* --progress-slider-height-9: var(--space-9); */
+  
+  /* Shared Progress and Slider radius tokens */
+  --progress-slider-radius-1: var(--radius-1);
+  --progress-slider-radius-2: var(--radius-2);
+  --progress-slider-radius-3: var(--radius-3);
+  --progress-slider-radius-4: var(--radius-4);
+
+  /* Outlier radius for size 5 to 9. */
+  /* --progress-slider-radius-5: max(var(--radius-1), var(--radius-full)); */
+  /* --progress-slider-radius-6: max(var(--radius-2), var(--radius-full)); */
+  /* --progress-slider-radius-7: max(var(--radius-3), var(--radius-full)); */
+  /* --progress-slider-radius-8: max(var(--radius-4), var(--radius-full)); */
+  /* --progress-slider-radius-9: max(var(--radius-5), var(--radius-full)); */
+  
   /* 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;
+  /* Opacity constants - using new opacity tokens */
+  --opacity-disabled: var(--opacity-5);
+  --opacity-soft-variant: var(--opacity-8);
+  --opacity-high-contrast: var(--opacity-8);
   
   /* Positioning constants */
   --position-center: 50%;
@@ -186,36 +158,24 @@
   --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;
+  --transition-background-blur: background-color 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 */
+  --component-gap-1: var(--space-1);
+  --component-gap-2: var(--space-2);
+  --component-gap-3: var(--space-3);
+  --component-gap-4: var(--space-3);
   
   /* 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;
+  --component-gap-ghost-1: var(--space-1);
+  --component-gap-ghost-2: calc(var(--space-1) * 1.5);
+  --component-gap-ghost-3: var(--space-2);
+  --component-gap-ghost-4: var(--space-2);
   
   /* Focus outline constants */
   --focus-outline-width: 2px;
@@ -223,17 +183,5 @@
   --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;
-  
-  /* Nested backdrop-filter detection constants */
-  --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);
+  --padding-ratio-horizontal: 1.5;
 } 

package/src/styles/tokens/index.css

@@ -33,3 +33,5 @@
 
 @import './constants.css';
 @import './base.css';
+@import './blur.css';
+@import './opacity.css';

package/src/styles/tokens/opacity.css

@@ -0,0 +1,32 @@
+:where(.radix-themes) {
+  --opacity-factor: 1;
+  --opacity-1: calc(0.1 * var(--opacity-factor));
+  --opacity-2: calc(0.2 * var(--opacity-factor));
+  --opacity-3: calc(0.3 * var(--opacity-factor));
+  --opacity-4: calc(0.4 * var(--opacity-factor));
+  --opacity-5: calc(0.5 * var(--opacity-factor));
+  --opacity-6: calc(0.6 * var(--opacity-factor));
+  --opacity-7: calc(0.7 * var(--opacity-factor));
+  --opacity-8: calc(0.8 * var(--opacity-factor));
+  --opacity-9: calc(0.9 * var(--opacity-factor));
+}
+
+[data-opacity='none'] {
+  --opacity-factor: 0;
+}
+
+[data-opacity='subtle'] {
+  --opacity-factor: 0.5;
+}
+
+[data-opacity='medium'] {
+  --opacity-factor: 1;
+}
+
+[data-opacity='strong'] {
+  --opacity-factor: 1.5;
+}
+
+[data-opacity='full'] {
+  --opacity-factor: 2.0;
+} 

package/src/styles/tokens/radius.css

@@ -1,8 +1,8 @@
 [data-radius] {
-  --radius-1: calc(7px * 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-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(16px * var(--scaling) * var(--radius-factor));
   --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
   --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
@@ -10,32 +10,28 @@
   --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
 }
 
+
 [data-radius='none'] {
   --radius-factor: 0;
   --radius-full: 0px;
-  --radius-thumb: 0.5px;
 }
 
 [data-radius='small'] {
   --radius-factor: 0.75;
   --radius-full: 0px;
-  --radius-thumb: 0.5px;
 }
 
 [data-radius='medium'] {
   --radius-factor: 1;
   --radius-full: 0px;
-  --radius-thumb: 9999px;
 }
 
 [data-radius='large'] {
   --radius-factor: 1.5;
   --radius-full: 0px;
-  --radius-thumb: 9999px;
 }
 
 [data-radius='full'] {
-  --radius-factor: 1.5;
+  --radius-factor: 2.0;
   --radius-full: 9999px;
-  --radius-thumb: 9999px;
 }