@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/theme.tsx

@@ -7,7 +7,6 @@ import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { themePropDefs } from './theme.props.js';
 
 import type { ThemeOwnProps } from './theme.props.js';
@@ -19,7 +18,6 @@ type ThemeAppearance = (typeof themePropDefs.appearance.values)[number];
 type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
 type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
 type ThemeMaterial = (typeof themePropDefs.material.values)[number];
-type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
@@ -32,7 +30,6 @@ interface ThemeChangeHandlers {
   onAccentColorChange: (accentColor: ThemeAccentColor) => void;
   onGrayColorChange: (grayColor: ThemeGrayColor) => void;
   onMaterialChange: (material: ThemeMaterial) => void;
-  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;
   onRadiusChange: (radius: ThemeRadius) => void;
   onScalingChange: (scaling: ThemeScaling) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
@@ -45,7 +42,6 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   grayColor: ThemeGrayColor;
   resolvedGrayColor: ThemeGrayColor;
   material: ThemeMaterial;
-  panelBackground: ThemePanelBackground;
   radius: ThemeRadius;
   scaling: ThemeScaling;
   fontFamily: ThemeFontFamily;
@@ -58,7 +54,6 @@ const defaultThemeContext: ThemeContextValue = {
   grayColor: themePropDefs.grayColor.default,
   resolvedGrayColor: themePropDefs.grayColor.default,
   material: themePropDefs.material.default,
-  panelBackground: themePropDefs.panelBackground.default,
   radius: themePropDefs.radius.default,
   scaling: themePropDefs.scaling.default,
   fontFamily: themePropDefs.fontFamily.default,
@@ -67,7 +62,6 @@ const defaultThemeContext: ThemeContextValue = {
   onAccentColorChange: noop,
   onGrayColorChange: noop,
   onMaterialChange: noop,
-  onPanelBackgroundChange: noop,
   onRadiusChange: noop,
   onScalingChange: noop,
   onFontFamilyChange: noop,
@@ -109,7 +103,6 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       accentColor: accentColorProp = themePropDefs.accentColor.default,
       grayColor: grayColorProp = themePropDefs.grayColor.default,
       material: materialProp = themePropDefs.material.default,
-      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,
       radius: radiusProp = themePropDefs.radius.default,
       scaling: scalingProp = themePropDefs.scaling.default,
       fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
@@ -118,7 +111,6 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
       ...rootProps
     } = props;
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // Each of these follows its prop but stays independently settable, so
     // `ThemePanel` can change the theme at runtime. Syncing during render
@@ -128,13 +120,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
     const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
     const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
 
-    // Material takes precedence over panelBackground
-    const effectiveMaterial =
-      materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;
-    const [material, setMaterial] = usePropSyncedState(effectiveMaterial);
-
-    // Keep panelBackground in sync with material for backward compatibility
-    const [panelBackground, setPanelBackground] = usePropSyncedState(material);
+    const [material, setMaterial] = usePropSyncedState(materialProp);
 
     const [radius, setRadius] = usePropSyncedState(radiusProp);
     const [scaling, setScaling] = usePropSyncedState(scalingProp);
@@ -152,7 +138,6 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         accentColor={accentColor}
         grayColor={grayColor}
         material={material}
-        panelBackground={panelBackground}
         radius={radius}
         scaling={scaling}
         fontFamily={fontFamily}
@@ -162,7 +147,6 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
         onAccentColorChange={setAccentColor}
         onGrayColorChange={setGrayColor}
         onMaterialChange={setMaterial}
-        onPanelBackgroundChange={setPanelBackground}
         onRadiusChange={setRadius}
         onScalingChange={setScaling}
         onFontFamilyChange={setFontFamily}
@@ -201,9 +185,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,
     grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,
     material = props.material ?? context?.material ?? themePropDefs.material.default,
-    panelBackground = props.panelBackground ??
-      context?.panelBackground ??
-      themePropDefs.panelBackground.default,
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
@@ -213,7 +194,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onAccentColorChange = noop,
     onGrayColorChange = noop,
     onMaterialChange = noop,
-    onPanelBackgroundChange = noop,
     onRadiusChange = noop,
     onScalingChange = noop,
     onFontFamilyChange = noop,
@@ -255,7 +235,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           grayColor,
           resolvedGrayColor,
           material,
-          panelBackground,
           radius,
           scaling,
           fontFamily,
@@ -265,7 +244,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onAccentColorChange,
           onGrayColorChange,
           onMaterialChange,
-          onPanelBackgroundChange,
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
@@ -277,7 +255,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           grayColor,
           resolvedGrayColor,
           material,
-          panelBackground,
           radius,
           scaling,
           fontFamily,
@@ -287,7 +264,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onAccentColorChange,
           onGrayColorChange,
           onMaterialChange,
-          onPanelBackgroundChange,
           onRadiusChange,
           onScalingChange,
           onFontFamilyChange,
@@ -302,7 +278,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
         // for nested `Theme` background
         data-has-background={hasBackground ? 'true' : 'false'}
         data-material={material}
-        data-panel-background={panelBackground}
         data-radius={radius}
         data-scaling={scaling}
         data-font-family={fontFamily}

package/src/components/toggle-button.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Toggle } from 'radix-ui';
 import { Button } from './button.js';
-import { useToggleState } from '../hooks/use-toggle-state.js';
 import type { ButtonProps, ButtonRankProps } from './button.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
 
 /**
  * ToggleButton props that extend Button with toggle-specific functionality

package/src/components/toggle-icon-button.tsx

@@ -33,12 +33,12 @@ type AccessibilityProps =
  */
 type ToggleIconButtonProps = Omit<IconButtonProps, 'as' | 'variant' | 'emphasis'> &
   ButtonRankProps & {
-  /** Controlled pressed state */
-  pressed?: ToggleProps['pressed'];
-  /** Callback when pressed state changes */
-  onPressedChange?: ToggleProps['onPressedChange'];
-  /** Default pressed state for uncontrolled usage */
-  defaultPressed?: ToggleProps['defaultPressed'];
+    /** Controlled pressed state */
+    pressed?: ToggleProps['pressed'];
+    /** Callback when pressed state changes */
+    onPressedChange?: ToggleProps['onPressedChange'];
+    /** Default pressed state for uncontrolled usage */
+    defaultPressed?: ToggleProps['defaultPressed'];
   };
 
 /**

package/src/components/toolbar.tsx

@@ -27,9 +27,6 @@ import type { ButtonRankProps } from './button.js';
  * nothing; a `ToolbarGroup` draws a quiet well around controls that belong together, and a
  * `ToolbarSeparator` draws a gray hairline between clusters. Use a `Flex` to cluster controls
  * without a well: the row spaces the clusters with `space-between`.
- *
- * The band anchored to a pane's edge (Left / Center / Right / Title) that this name used to
- * mean is `AppBar` since 0.11.0.
  */
 
 type ToolbarSize = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs>['size']>;
@@ -153,7 +150,7 @@ type ToolbarTextButtonProps = ToolbarButtonBaseProps &
 };
 
 /** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
-type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> &
+type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'fullWidth'> &
   ButtonRankProps & {
   iconOnly: true;
   /** The control's accessible name. An icon has no words of its own, so this is required. */

package/src/components/tooltip.css

@@ -5,27 +5,7 @@
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
-  transform-origin: var(--radix-tooltip-content-transform-origin);
-
-  animation-duration: var(--motion-duration-small);
-  animation-timing-function: var(--motion-spring-snappy);
-
-  @media (prefers-reduced-motion: no-preference) {
-    &:where([data-state='delayed-open']) {
-      &:where([data-side='top']) {
-        animation-name: rt-slide-from-top, rt-fade-in;
-      }
-      &:where([data-side='bottom']) {
-        animation-name: rt-slide-from-bottom, rt-fade-in;
-      }
-      &:where([data-side='left']) {
-        animation-name: rt-slide-from-left, rt-fade-in;
-      }
-      &:where([data-side='right']) {
-        animation-name: rt-slide-from-right, rt-fade-in;
-      }
-    }
-  }
+  transform-origin: var(--radix-tooltip-content-transform-origin)
 }
 
 .rt-TooltipText {

package/src/helpers/map-prop-values.ts

@@ -1,5 +1,4 @@
 import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';
-import type { calloutRootPropDefs } from '../components/callout.props.js';
 import type { spinnerPropDefs } from '../components/spinner.props.js';
 import type { textPropDefs } from '../components/text.props.js';
 import type { Responsive } from '../props/prop-def.js';
@@ -17,11 +16,6 @@ function mapResponsiveProp<Input extends string, Output>(
   );
 }
 
-function mapCalloutSizeToTextSize(
-  size: (typeof calloutRootPropDefs.size.values)[number]
-): (typeof textPropDefs.size.values)[number] {
-  return size === '3' ? '3' : size === '1' ? '1' : '2';
-}
 
 function mapButtonSizeToSpinnerSize(
   size: (typeof baseButtonPropDefs.size.values)[number]
@@ -37,4 +31,4 @@ function mapButtonSizeToSpinnerSize(
   }
 }
 
-export { mapResponsiveProp, mapCalloutSizeToTextSize, mapButtonSizeToSpinnerSize };
+export { mapResponsiveProp, mapButtonSizeToSpinnerSize };

package/src/props/color.prop.ts

@@ -27,8 +27,7 @@ const accentColorPropDef = {
   color: PropDef<(typeof accentColors)[number]>;
 };
 
-// For components whose colour comes from their content (Badge, Avatar, Code, Callout,
-// UserCard): they rest gray, and `color` picks a category when it means something.
+// For components whose colour comes from their content (Badge, Avatar, Code): they rest gray, and `color` picks a category when it means something.
 const grayAccentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/index.ts

@@ -26,7 +26,6 @@ export * from '../components/badge.props.js';
 export * from '../components/blockquote.props.js';
 export * from '../components/box.props.js';
 export * from '../components/button.props.js';
-export * from '../components/callout.props.js';
 export * from '../components/card.props.js';
 export * from '../components/checkbox-cards.props.js';
 export * from '../components/checkbox-group.props.js';

package/src/styles/tokens/base.css

@@ -3,7 +3,6 @@
 @import './layout.css';
 @import './radius.css';
 @import './shadow.css';
-@import './transition.css';
 @import './font-family.css';
 @import './typography.css';
 @import './blur.css';

package/src/styles/tokens/color.css

@@ -1,11 +1,8 @@
 @import '@radix-ui/colors/black-alpha.css';
 @import '@radix-ui/colors/white-alpha.css';
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*           Semantic colors           */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 :where(.radix-themes) {
   --color-background: white;
@@ -52,30 +49,21 @@
   --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*            Transparency             */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
-/* Because Chrome is buggy with box-shadow transitions from "transparent" keyword and/or RGB color into P3 colors. */
 /* Note: using `:where` here to guarantee that the P3 color will take over regardless of the output rule order. */
 :where(.radix-themes) {
-  --color-transparent: rgb(0 0 0 / 0);
 }
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
     .radix-themes {
-      --color-transparent: color(display-p3 0 0 0 / 0);
     }
   }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*            Color scheme             */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 /*
  * Make sure that forced light/dark appearance also sets corresponding browser colors,
@@ -94,11 +82,8 @@
   }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*   Focus, selection, and autofill    */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 .radix-themes,
 [data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
@@ -133,11 +118,8 @@
   background-color: var(--focus-a5);
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*         Background and text         */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 .radix-themes {
   color: var(--gray-12);
@@ -146,14 +128,11 @@
   }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*          Panel background           */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 .radix-themes {
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     --color-panel: var(--color-panel-solid);
     --color-surface: var(--color-surface-solid);
     --color-dialog: var(--color-dialog-solid);
@@ -164,7 +143,7 @@
     --material-blend: 100%;
     --material-alpha: 0;
   }
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     --color-panel: var(--color-panel-translucent);
     --color-surface: var(--color-surface-translucent);
     --color-dialog: var(--color-dialog-translucent);
@@ -177,11 +156,8 @@
   }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*            Accent color             */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 [data-accent-color='amber'] {
   --accent-1: var(--amber-1);
@@ -1041,11 +1017,8 @@
   --accent-track: var(--yellow-track);
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*             Accent roles            */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 /*
  * Role tokens for accent text and solid fills. There is no per-component contrast prop.
@@ -1150,11 +1123,8 @@
   --accent-solid-open-filter: var(--solid-gray-open-filter);
 }
 
-/* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*             Gray color              */
 /*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 .radix-themes {
   &:where([data-gray-color='mauve']) {

package/src/styles/tokens/constants.css

@@ -1,8 +1,4 @@
 /* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*        Design System Constants      */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
 
 :where(.radix-themes) {
   /* Backdrop blur constants - using new blur tokens */
@@ -21,11 +17,6 @@
   --backdrop-filter-panel-enabled: blur(var(--backdrop-blur-panel));
   --backdrop-filter-dialog-enabled: blur(var(--backdrop-blur-dialog));
 
-  /* 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: var(--opacity-9);
   --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
@@ -51,25 +42,8 @@
   --raised-shadow-offset-y: 0.04em;
   --raised-word-spacing: -0.1em;
 
-  /* Raised variant division factors for form components and inset effects */
-  --raised-elevation-factor-subtle: 3;
-  --raised-shadow-factor-light: 1.5;
-  --raised-border-multiplier-double: 2;
-
   /* Complex shadow tokens for form components and inset effects */
-  --raised-shadow-blur-medium: 0.2em;
   --raised-shadow-blur-large: 0.4em;
-  --raised-shadow-medium-factor-third: 3;
-
-  /* Raised inset shadow tokens - based on text field pattern for consistent 3D effects */
-  --raised-inset-shadow-dark:
-    inset 0 var(--raised-border-width)
-      calc(var(--raised-shadow-blur-small) / var(--raised-shadow-factor-light)) var(--gray-a4),
-    inset 0 calc(-1 * var(--raised-border-width)) var(--gray-a2),
-    inset 0 calc(var(--raised-border-width) * var(--raised-border-multiplier-double))
-      calc(var(--raised-shadow-blur-medium) / var(--raised-shadow-medium-factor-third))
-      var(--gray-a3),
-    0 0 0 var(--raised-border-width) var(--gray-a5);
 
   /* Trigger icon size constants (for dropdowns, selects) */
   --trigger-icon-size-default: 9px;
@@ -103,13 +77,6 @@
 
   /* 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;
-  --progress-gradient-stop-start: 25%;
-  --progress-gradient-stop-end: 75%;
 
   /* Progress animation scale values */
   --progress-scale-initial: 0.01;
@@ -118,18 +85,11 @@
   --progress-scale-step-3: 0.9;
   --progress-scale-final: 1;
 
-  /* Progress animation timing percentages */
-  --progress-timing-step-1: 20%;
-  --progress-timing-step-2: 30%;
-  --progress-timing-step-3: 40%;
-  --progress-timing-step-4: 50%;
-
   /* Slider component constants */
   --slider-thumb-hit-area-multiplier: 2;
   --slider-thumb-inset-factor: 0.25;
   --slider-focus-ring-inner: 3px;
   --slider-focus-ring-outer: 5px;
-  --slider-raised-inset-offset: 1.5px;
 
   /* Shared Progress and Slider sizing tokens */
   --progress-slider-height-1: var(--space-1);
@@ -137,47 +97,15 @@
   --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: var(--radius-pill-1); */
-  /* --progress-slider-radius-6: var(--radius-pill-2); */
-  /* --progress-slider-radius-7: var(--radius-pill-3); */
-  /* --progress-slider-radius-8: var(--radius-pill-4); */
-  /* --progress-slider-radius-9: var(--radius-pill-5); */
-
-  /* Size multipliers */
-  --size-multiplier-small: 0.75;
-  --size-multiplier-large: 1.25;
-
-  /* Opacity constants - using new opacity tokens */
-  --opacity-disabled: var(--opacity-5);
-  --opacity-soft-variant: var(--opacity-8);
-
   /* Positioning constants */
   --position-center: 50%;
   --position-full: 100%;
-  --position-negative-full: -100%;
-  --position-zero: 0%;
-
-  /* Transition constants */
-  --transition-background-blur:
-    background-color var(--duration-2) var(--ease-1),
-    scale var(--motion-duration-small) var(--motion-ease-standard);
-
-  /* Sheet animation constants */
-  --sheet-slide-distance: 50%;
 
   /* Spacing multipliers for component sizing */
   --spacing-multiplier-small: 0.5;
@@ -203,22 +131,4 @@
 
   /* Component padding relationships */
   --padding-ratio-horizontal: 1.5;
-
-  /* Deprecated: the old `--classic-*` names. They point at `--raised-*` and are removed in 0.15.0. */
-  --classic-active-padding-offset-1: var(--raised-active-padding-offset-1);
-  --classic-active-padding-offset-2: var(--raised-active-padding-offset-2);
-  --classic-border-multiplier-double: var(--raised-border-multiplier-double);
-  --classic-border-width: var(--raised-border-width);
-  --classic-border-width-thick: var(--raised-border-width-thick);
-  --classic-elevation-factor-subtle: var(--raised-elevation-factor-subtle);
-  --classic-elevation-offset: var(--raised-elevation-offset);
-  --classic-inset-shadow-dark: var(--raised-inset-shadow-dark);
-  --classic-shadow-blur-large: var(--raised-shadow-blur-large);
-  --classic-shadow-blur-medium: var(--raised-shadow-blur-medium);
-  --classic-shadow-blur-small: var(--raised-shadow-blur-small);
-  --classic-shadow-factor-light: var(--raised-shadow-factor-light);
-  --classic-shadow-medium-factor-third: var(--raised-shadow-medium-factor-third);
-  --classic-shadow-offset-y: var(--raised-shadow-offset-y);
-  --classic-word-spacing: var(--raised-word-spacing);
-  --slider-classic-inset-offset: var(--slider-raised-inset-offset);
 }