@womp/kookie-ui 0.16.0 → 0.17.0

package/tokens/base.css

@@ -61,11 +61,8 @@
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, var(--panel-opacity));
   --color-surface-solid: white;
-  --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
-  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
   --color-page: var(--color-background);
   --color-text: var(--gray-12);
   --neutral-1: var(--gray-1);
@@ -80,8 +77,6 @@
   --neutral-10: var(--gray-10);
   --neutral-11: var(--gray-11);
   --neutral-12: var(--gray-12);
-  --material-blend: 100%;
-  --material-alpha: 0;
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.9) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.96) contrast(1.02);
@@ -94,40 +89,14 @@
   --shadow-4: 0 0 0 0.5px var(--gray-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
   --shadow-5: 0 0 0 0.5px var(--gray-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
   --shadow-6: 0 0 0 0.5px var(--gray-a6), 0 25px 50px -12px var(--black-a5);
-  --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));
-  --blur-10: calc(52px * var(--scaling) * var(--blur-factor));
-  --blur-11: calc(60px * var(--scaling) * var(--blur-factor));
-  --blur-12: calc(68px * var(--scaling) * var(--blur-factor));
-  --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));
 }
 :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-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-opacity-percentage), transparent);
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
@@ -203,25 +172,214 @@
 .radix-themes:where([data-has-background='true']) {
   background-color: var(--color-background);
 }
-.radix-themes:where([data-material='solid']) {
+.radix-themes {
   --color-panel: var(--color-panel-solid);
   --color-surface: var(--color-surface-solid);
   --color-dialog: var(--color-dialog-solid);
-  --backdrop-filter-panel: none;
-  --backdrop-filter-components: none;
-  --backdrop-filter-dialog: none;
-  --material-blend: 100%;
-  --material-alpha: 0;
-}
-.radix-themes:where([data-material='translucent']) {
-  --color-panel: var(--color-panel-translucent);
-  --color-surface: var(--color-surface-translucent);
-  --color-dialog: var(--color-dialog-translucent);
-  --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
-  --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  --backdrop-filter-dialog: var(--backdrop-filter-dialog-enabled);
-  --material-blend: 60%;
-  --material-alpha: 1;
+  --gray-ink: var(--gray-12);
+  --gray-ink-muted: var(--gray-a11);
+  --gray-ink-faint: var(--gray-a10);
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+  --scale: 1;
+  --space-1: calc(2px * var(--scale));
+  --space-2: calc(4px * var(--scale));
+  --space-3: calc(8px * var(--scale));
+  --space-4: calc(12px * var(--scale));
+  --space-5: calc(16px * var(--scale));
+  --space-6: calc(24px * var(--scale));
+  --space-7: calc(32px * var(--scale));
+  --space-8: calc(40px * var(--scale));
+  --space-9: calc(48px * var(--scale));
+  --space-10: calc(64px * var(--scale));
+  --space-11: calc(96px * var(--scale));
+  --space-12: calc(128px * var(--scale));
+  --layout-space-1: var(--space-1);
+  --layout-space-2: var(--space-2);
+  --layout-space-3: var(--space-3);
+  --layout-space-4: var(--space-4);
+  --layout-space-5: var(--space-5);
+  --layout-space-6: var(--space-6);
+  --layout-space-7: var(--space-7);
+  --layout-space-8: var(--space-8);
+  --layout-space-9: var(--space-9);
+  --layout-space-10: var(--space-10);
+  --layout-space-11: var(--space-11);
+  --layout-space-12: var(--space-12);
+  --surface-p-1: var(--layout-space-5);
+  --surface-p-2: var(--layout-space-6);
+  --surface-p-3: var(--layout-space-7);
+  --surface-p-4: var(--layout-space-8);
+  --panel-p-1: var(--layout-space-3);
+  --panel-p-2: var(--layout-space-4);
+  --panel-p-3: var(--layout-space-5);
+  --panel-p-4: var(--layout-space-6);
+  --control-height-1: calc(28px * var(--scale));
+  --control-height-2: calc(32px * var(--scale));
+  --control-height-3: calc(40px * var(--scale));
+  --control-height-4: calc(48px * var(--scale));
+  --control-px-1: calc(8px * var(--scale));
+  --control-px-2: calc(10px * var(--scale));
+  --control-px-3: calc(13px * var(--scale));
+  --control-px-4: calc(16px * var(--scale));
+  --control-px-pill-1: calc(12px * var(--scale));
+  --control-px-pill-2: calc(14px * var(--scale));
+  --control-px-pill-3: calc(17px * var(--scale));
+  --control-px-pill-4: calc(20px * var(--scale));
+  --control-gap-1: var(--space-2);
+  --control-gap-2: var(--space-3);
+  --control-gap-3: var(--space-3);
+  --control-gap-4: var(--space-4);
+  --icon-size-1: calc(16px * var(--scale));
+  --icon-size-2: calc(16px * var(--scale));
+  --icon-size-3: calc(20px * var(--scale));
+  --icon-size-4: calc(24px * var(--scale));
+  --row-inset-1: calc(4px * var(--scale));
+  --row-inset-2: calc(5px * var(--scale));
+  --row-inset-3: calc(5px * var(--scale));
+  --row-inset-4: calc(6px * var(--scale));
+  --slot-inset-1: calc(3px * var(--scale));
+  --slot-inset-2: calc(3px * var(--scale));
+  --slot-inset-3: calc(4px * var(--scale));
+  --slot-inset-4: calc(4px * var(--scale));
+  --overlay-w-1: calc(360px * var(--scale));
+  --overlay-w-2: calc(440px * var(--scale));
+  --overlay-w-3: calc(560px * var(--scale));
+  --overlay-w-4: calc(720px * var(--scale));
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-display, var(--font-body));
+  --font-code: var(--font-mono);
+  --font-strong: var(--font-body);
+  --font-em: var(--font-serif);
+  --font-quote: var(--font-serif);
+  --default-font-family: var(--font-body);
+  --heading-font-family: var(--font-heading);
+  --code-font-family: var(--font-code);
+  --strong-font-family: var(--font-strong);
+  --em-font-family: var(--font-em);
+  --quote-font-family: var(--font-quote);
+  --default-font-family-sans: var(--font-sans);
+  --default-font-family-mono: var(--font-mono);
+  --default-font-family-serif: var(--font-serif);
+  --font-size-0: calc(10px * var(--scale));
+  --font-size-1: calc(12px * var(--scale));
+  --font-size-2: calc(14px * var(--scale));
+  --font-size-3: calc(16px * var(--scale));
+  --font-size-4: calc(18px * var(--scale));
+  --font-size-5: calc(20px * var(--scale));
+  --font-size-6: calc(24px * var(--scale));
+  --font-size-7: calc(28px * var(--scale));
+  --font-size-8: calc(35px * var(--scale));
+  --font-size-9: calc(60px * var(--scale));
+  --font-size-10: calc(72px * var(--scale));
+  --font-size-11: calc(86px * var(--scale));
+  --font-size-12: calc(104px * var(--scale));
+  --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(--scale));
+  --line-height-1: calc(16px * var(--scale));
+  --line-height-2: calc(20px * var(--scale));
+  --line-height-3: calc(24px * var(--scale));
+  --line-height-4: calc(26px * var(--scale));
+  --line-height-5: calc(28px * var(--scale));
+  --line-height-6: calc(30px * var(--scale));
+  --line-height-7: calc(36px * var(--scale));
+  --line-height-8: calc(40px * var(--scale));
+  --line-height-9: calc(60px * var(--scale));
+  --line-height-10: calc(76px * var(--scale));
+  --line-height-11: calc(90px * var(--scale));
+  --line-height-12: calc(108px * var(--scale));
+  --letter-spacing-0: 0.005em;
+  --letter-spacing-1: 0.0025em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: 0em;
+  --letter-spacing-4: -0.0025em;
+  --letter-spacing-5: -0.005em;
+  --letter-spacing-6: -0.00625em;
+  --letter-spacing-7: -0.0075em;
+  --letter-spacing-8: -0.01em;
+  --letter-spacing-9: -0.025em;
+  --letter-spacing-10: -0.03em;
+  --letter-spacing-11: -0.035em;
+  --letter-spacing-12: -0.04em;
+  --default-font-size: var(--font-size-3);
+  --default-font-style: normal;
+  --default-font-weight: var(--font-weight-regular);
+  --default-line-height: 1.5;
+  --default-letter-spacing: 0em;
+  --default-leading-trim-start: 0.42em;
+  --default-leading-trim-end: 0.36em;
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: 0em;
+  --heading-line-height-0: calc(12px * var(--scale));
+  --heading-line-height-1: calc(16px * var(--scale));
+  --heading-line-height-2: calc(18px * var(--scale));
+  --heading-line-height-3: calc(22px * var(--scale));
+  --heading-line-height-4: calc(24px * var(--scale));
+  --heading-line-height-5: calc(26px * var(--scale));
+  --heading-line-height-6: calc(30px * var(--scale));
+  --heading-line-height-7: calc(36px * var(--scale));
+  --heading-line-height-8: calc(40px * var(--scale));
+  --heading-line-height-9: calc(60px * var(--scale));
+  --heading-line-height-10: calc(76px * var(--scale));
+  --heading-line-height-11: calc(90px * var(--scale));
+  --heading-line-height-12: calc(108px * var(--scale));
+  --code-font-size-adjust: 0.95;
+  --code-font-style: normal;
+  --code-font-weight: inherit;
+  --code-letter-spacing: -0.007em;
+  --code-padding-top: 0.1em;
+  --code-padding-bottom: 0.1em;
+  --code-padding-left: 0.25em;
+  --code-padding-right: 0.25em;
+  --strong-font-size-adjust: 1;
+  --strong-font-style: inherit;
+  --heading-font-weight: var(--font-weight-bold);
+  --strong-font-weight: var(--font-weight-medium);
+  --strong-letter-spacing: 0em;
+  --em-font-size-adjust: 1.18;
+  --em-font-style: italic;
+  --em-font-weight: inherit;
+  --em-letter-spacing: -0.025em;
+  --quote-font-size-adjust: 1.18;
+  --quote-font-style: italic;
+  --quote-font-weight: inherit;
+  --quote-letter-spacing: -0.025em;
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-synthesis: none;
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+      -ms-text-size-adjust: none;
+          text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--gray-12);
 }
 [data-accent-color='amber'] {
   --accent-1: var(--amber-1);
@@ -1022,163 +1180,6 @@
   --accent-indicator: var(--yellow-indicator);
   --accent-track: var(--yellow-track);
 }
-.radix-themes {
-  --gray-ink: var(--gray-12);
-  --gray-ink-muted: var(--gray-a11);
-  --gray-ink-faint: var(--gray-a10);
-  --cursor-button: default;
-  --cursor-checkbox: default;
-  --cursor-disabled: not-allowed;
-  --cursor-link: pointer;
-  --cursor-menu-item: pointer;
-  --cursor-radio: default;
-  --cursor-slider-thumb: default;
-  --cursor-slider-thumb-active: default;
-  --cursor-switch: default;
-  --space-1: calc(4px * var(--scaling));
-  --space-2: calc(8px * var(--scaling));
-  --space-3: calc(12px * var(--scaling));
-  --space-4: calc(16px * var(--scaling));
-  --space-5: calc(24px * var(--scaling));
-  --space-6: calc(32px * var(--scaling));
-  --space-7: calc(40px * var(--scaling));
-  --space-8: calc(48px * var(--scaling));
-  --control-height-1: var(--space-5);
-  --control-height-2: var(--space-6);
-  --control-height-3: var(--space-7);
-  --control-height-4: var(--space-8);
-  --space-9: calc(64px * var(--scaling));
-  --space-10: calc(80px * var(--scaling));
-  --space-11: calc(96px * var(--scaling));
-  --space-12: calc(112px * var(--scaling));
-  --font-body: var(--font-sans);
-  --font-heading: var(--font-display, var(--font-body));
-  --font-code: var(--font-mono);
-  --font-strong: var(--font-body);
-  --font-em: var(--font-serif);
-  --font-quote: var(--font-serif);
-  --default-font-family: var(--font-body);
-  --heading-font-family: var(--font-heading);
-  --code-font-family: var(--font-code);
-  --strong-font-family: var(--font-strong);
-  --em-font-family: var(--font-em);
-  --quote-font-family: var(--font-quote);
-  --default-font-family-sans: var(--font-sans);
-  --default-font-family-mono: var(--font-mono);
-  --default-font-family-serif: var(--font-serif);
-  --font-size-0: calc(10px * var(--scaling));
-  --font-size-1: calc(12px * var(--scaling));
-  --font-size-2: calc(14px * var(--scaling));
-  --font-size-3: calc(16px * var(--scaling));
-  --font-size-4: calc(18px * var(--scaling));
-  --font-size-5: calc(20px * var(--scaling));
-  --font-size-6: calc(24px * var(--scaling));
-  --font-size-7: calc(28px * var(--scaling));
-  --font-size-8: calc(35px * var(--scaling));
-  --font-size-9: calc(60px * var(--scaling));
-  --font-size-10: calc(72px * var(--scaling));
-  --font-size-11: calc(86px * var(--scaling));
-  --font-size-12: calc(104px * 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));
-  --line-height-2: calc(20px * var(--scaling));
-  --line-height-3: calc(24px * var(--scaling));
-  --line-height-4: calc(26px * var(--scaling));
-  --line-height-5: calc(28px * var(--scaling));
-  --line-height-6: calc(30px * var(--scaling));
-  --line-height-7: calc(36px * var(--scaling));
-  --line-height-8: calc(40px * var(--scaling));
-  --line-height-9: calc(60px * var(--scaling));
-  --line-height-10: calc(76px * var(--scaling));
-  --line-height-11: calc(90px * var(--scaling));
-  --line-height-12: calc(108px * var(--scaling));
-  --letter-spacing-0: 0.005em;
-  --letter-spacing-1: 0.0025em;
-  --letter-spacing-2: 0em;
-  --letter-spacing-3: 0em;
-  --letter-spacing-4: -0.0025em;
-  --letter-spacing-5: -0.005em;
-  --letter-spacing-6: -0.00625em;
-  --letter-spacing-7: -0.0075em;
-  --letter-spacing-8: -0.01em;
-  --letter-spacing-9: -0.025em;
-  --letter-spacing-10: -0.03em;
-  --letter-spacing-11: -0.035em;
-  --letter-spacing-12: -0.04em;
-  --default-font-size: var(--font-size-3);
-  --default-font-style: normal;
-  --default-font-weight: var(--font-weight-regular);
-  --default-line-height: 1.5;
-  --default-letter-spacing: 0em;
-  --default-leading-trim-start: 0.42em;
-  --default-leading-trim-end: 0.36em;
-  --heading-font-size-adjust: 1;
-  --heading-font-style: normal;
-  --heading-leading-trim-start: var(--default-leading-trim-start);
-  --heading-leading-trim-end: var(--default-leading-trim-end);
-  --heading-letter-spacing: 0em;
-  --heading-line-height-0: calc(12px * var(--scaling));
-  --heading-line-height-1: calc(16px * var(--scaling));
-  --heading-line-height-2: calc(18px * var(--scaling));
-  --heading-line-height-3: calc(22px * var(--scaling));
-  --heading-line-height-4: calc(24px * var(--scaling));
-  --heading-line-height-5: calc(26px * var(--scaling));
-  --heading-line-height-6: calc(30px * var(--scaling));
-  --heading-line-height-7: calc(36px * var(--scaling));
-  --heading-line-height-8: calc(40px * var(--scaling));
-  --heading-line-height-9: calc(60px * var(--scaling));
-  --heading-line-height-10: calc(76px * var(--scaling));
-  --heading-line-height-11: calc(90px * var(--scaling));
-  --heading-line-height-12: calc(108px * var(--scaling));
-  --code-font-size-adjust: 0.95;
-  --code-font-style: normal;
-  --code-font-weight: inherit;
-  --code-letter-spacing: -0.007em;
-  --code-padding-top: 0.1em;
-  --code-padding-bottom: 0.1em;
-  --code-padding-left: 0.25em;
-  --code-padding-right: 0.25em;
-  --strong-font-size-adjust: 1;
-  --strong-font-style: inherit;
-  --heading-font-weight: var(--font-weight-bold);
-  --strong-font-weight: var(--font-weight-medium);
-  --strong-letter-spacing: 0em;
-  --em-font-size-adjust: 1.18;
-  --em-font-style: italic;
-  --em-font-weight: inherit;
-  --em-letter-spacing: -0.025em;
-  --quote-font-size-adjust: 1.18;
-  --quote-font-style: italic;
-  --quote-font-weight: inherit;
-  --quote-letter-spacing: -0.025em;
-  --tab-active-letter-spacing: -0.01em;
-  --tab-active-word-spacing: 0em;
-  --tab-inactive-letter-spacing: 0em;
-  --tab-inactive-word-spacing: 0em;
-  overflow-wrap: break-word;
-  font-family: var(--default-font-family);
-  font-synthesis: none;
-  font-size: var(--default-font-size);
-  font-weight: var(--default-font-weight);
-  font-style: var(--default-font-style);
-  line-height: var(--default-line-height);
-  letter-spacing: var(--default-letter-spacing);
-  -webkit-text-size-adjust: none;
-     -moz-text-size-adjust: none;
-      -ms-text-size-adjust: none;
-          text-size-adjust: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--gray-12);
-}
 .radix-themes:where([data-gray-color='mauve']) {
   --gray-1: var(--mauve-1);
   --gray-2: var(--mauve-2);
@@ -1329,34 +1330,19 @@
   --gray-indicator: var(--slate-indicator);
   --gray-track: var(--slate-track);
 }
-.radix-themes:where([data-scaling='90%']) {
-  --scaling: 0.9;
-}
-.radix-themes:where([data-scaling='95%']) {
-  --scaling: 0.95;
-}
-.radix-themes:where([data-scaling='100%']) {
-  --scaling: 1;
-}
-.radix-themes:where([data-scaling='105%']) {
-  --scaling: 1.05;
-}
-.radix-themes:where([data-scaling='110%']) {
-  --scaling: 1.1;
-}
 [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(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(28px * var(--scaling) * var(--radius-factor));
-  --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
-  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
+  --radius-1: calc(6px * var(--scale) * var(--radius-factor));
+  --radius-2: calc(8px * var(--scale) * var(--radius-factor));
+  --radius-3: calc(10px * var(--scale) * var(--radius-factor));
+  --radius-4: calc(12px * var(--scale) * var(--radius-factor));
+  --radius-5: calc(16px * var(--scale) * var(--radius-factor));
+  --radius-6: calc(20px * var(--scale) * var(--radius-factor));
+  --radius-7: calc(24px * var(--scale) * var(--radius-factor));
+  --radius-8: calc(28px * var(--scale) * var(--radius-factor));
+  --radius-9: calc(32px * var(--scale) * var(--radius-factor));
+  --radius-10: calc(40px * var(--scale) * var(--radius-factor));
+  --radius-11: calc(48px * var(--scale) * var(--radius-factor));
+  --radius-12: calc(56px * var(--scale) * var(--radius-factor));
   --radius-pill-1: max(var(--radius-1), var(--radius-full));
   --radius-pill-2: max(var(--radius-2), var(--radius-full));
   --radius-pill-3: max(var(--radius-3), var(--radius-full));
@@ -1369,18 +1355,18 @@
   --radius-pill-10: max(var(--radius-10), var(--radius-full));
   --radius-pill-11: max(var(--radius-11), var(--radius-full));
   --radius-pill-12: max(var(--radius-12), var(--radius-full));
-  --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-1: calc(6px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-2: calc(8px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-3: calc(10px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-4: calc(12px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-5: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-6: calc(20px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-7: calc(24px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-8: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-9: calc(32px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-10: calc(40px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-11: calc(48px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-12: calc(56px * var(--scale) * var(--radius-surface-factor));
 }
 [data-radius='none'] {
   --radius-factor: 0;
@@ -1600,43 +1586,3 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
-[data-blur='none'] {
-  --blur-factor: 0;
-  --backdrop-filter-components-enabled: none;
-  --backdrop-filter-panel-enabled: none;
-  --backdrop-filter-dialog-enabled: none;
-}
-@media (prefers-reduced-transparency: reduce) {
-  .radix-themes {
-    --backdrop-filter-components-enabled: none;
-    --backdrop-filter-panel-enabled: none;
-    --backdrop-filter-dialog-enabled: none;
-  }
-}
-[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;
-}
-[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;
-}