@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/tokens/base.css

@@ -58,32 +58,52 @@
   --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));
   --color-transparent: rgb(0 0 0 / 0);
-  --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);
-  --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);
-  --shadow-3: 0 0 0 1px var(--gray-a4), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --shadow-1: inset 0 0 0 1px var(--gray-a5), 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 4px 0 var(--black-a1);
+  --shadow-3: 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);
   --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
   --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
   --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+  --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));
+  --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-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);
-  --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
-  --shadow-2: 0 0 0 1px var(--gray-a6), 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 var(--gray-a7), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
+  --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
+  --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
+  --shadow-3: 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);
   --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
   --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
   --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
@@ -144,7 +164,7 @@
   --backdrop-filter-components: none;
   --backdrop-filter-dialog: none;
 }
-.radix-themes:where([data-panel-background='translucent']) {
+.radix-themes: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);
@@ -1101,31 +1121,47 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
   --space-9: calc(64px * var(--scaling));
-  --duration-1: 75ms;
-  --duration-2: 125ms;
-  --duration-3: 175ms;
-  --duration-4: 225ms;
-  --duration-5: 325ms;
+  --duration-1: 50ms;
+  --duration-2: 75ms;
+  --duration-3: 100ms;
+  --duration-4: 150ms;
+  --duration-5: 200ms;
+  --duration-spring-1: 200ms;
+  --duration-spring-2: 250ms;
+  --duration-spring-3: 300ms;
   --ease-1: ease-out;
   --ease-2: ease-in-out;
   --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --transition-fast: var(--duration-2) var(--ease-1);
   --transition-standard: var(--duration-3) var(--ease-2);
   --transition-slow: var(--duration-4) var(--ease-3);
-  --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), 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-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);
+  --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) 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);
+  --transition-select: 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), 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-card: background-color var(--duration-2) var(--ease-1), box-shadow 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), 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-menu: 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), 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);
   --transition-progress: transform var(--duration-2) var(--ease-1);
+  --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);
+  --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);
   --font-size-0: calc(10px * var(--scaling));
   --font-size-1: calc(12px * var(--scaling));
   --font-size-2: calc(14px * var(--scaling));
@@ -1136,10 +1172,14 @@
   --font-size-7: calc(28px * var(--scaling));
   --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));
   --line-height-2: calc(20px * var(--scaling));
@@ -1160,7 +1200,7 @@
   --letter-spacing-7: -0.0075em;
   --letter-spacing-8: -0.01em;
   --letter-spacing-9: -0.025em;
-  --default-font-family: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --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);
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -1184,7 +1224,7 @@
   --heading-line-height-7: calc(36px * var(--scaling));
   --heading-line-height-8: calc(40px * var(--scaling));
   --heading-line-height-9: calc(60px * var(--scaling));
-  --code-font-family: var(--font-geist-mono, 'Geist Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --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;
   --code-font-weight: inherit;
@@ -1196,7 +1236,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-font-family: 'Times New Roman', 'Times', serif;
   --em-font-size-adjust: 1.18;
@@ -1242,10 +1282,10 @@
   --scaling: 1.1;
 }
 [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));
@@ -1255,47 +1295,42 @@
 [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;
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :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);
-    --shadow-2: 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) 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) 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) 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) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+    --shadow-1: inset 0 0 0 1px var(--gray-a5), 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) 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 4px 0 var(--black-a1);
+    --shadow-3: 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) 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) 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) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
   }
 }
 @supports (color: color-mix(in oklab, white, black)) {
   :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 0 0 1px var(--gray-a3), inset 0 3px 4px 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 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) 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) 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) 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) var(--color-mix-percentage-light)), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+    --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), 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) 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 4px 0 var(--black-a5);
+    --shadow-3: 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) 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) 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) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1305,9 +1340,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;
@@ -1320,6 +1363,11 @@
     --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;
   }
 }
 @font-face {
@@ -1476,3 +1524,33 @@
   descent-override: 22%;
   src: local('Consolas Bold Italic');
 }
+[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;
+}
+[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;
+}