@womp/kookie-ui 0.13.3 → 0.14.1

package/src/components/_internal/base-button.props.ts

@@ -1,3 +1,4 @@
+import { parseVariant } from '../../helpers/parse-variant.js';
 import { asChildPropDef } from '../../props/as-child.prop.js';
 import { accentColorPropDef } from '../../props/color.prop.js';
 import { radiusPropDef } from '../../props/radius.prop.js';
@@ -15,14 +16,14 @@ const sizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Available button variants for different visual contexts
- * - classic: Premium, sophisticated appearance
+ * - raised: lifted off its ground, with an edge and a shadow (the default)
  * - solid: Primary actions that should be noticed first
  * - soft: Content-heavy interfaces, natural integration
  * - surface: Elevated appearance with subtle depth
  * - outline: Secondary actions that support primary actions
  * - ghost: Utility functions that don't compete for attention
  */
-const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'] as const;
 
 /**
  * Available panel background options (deprecated)
@@ -76,7 +77,7 @@ const baseButtonPropDefs = {
   /**
    * Visual variant that determines the button's appearance and context
    */
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...accentColorPropDef,
   ...radiusPropDef,
   /**

package/src/components/_internal/base-card.css

@@ -553,11 +553,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-classic) {
+.rt-BaseCard:where(.rt-variant-raised) {
   --card-border-width: 1px;
   --card-background-color: var(--color-surface-solid);
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {

package/src/components/_internal/base-checkbox.css

@@ -143,11 +143,11 @@
   }
 }
 
-/* classic */
+/* raised */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-classic) {
+.rt-BaseCheckboxRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   
   &:where([data-state='unchecked']) {
     &::before {
@@ -195,7 +195,7 @@
   }
 
   &:where(:active:not(:disabled)) {
-    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
       background-color: var(--accent-3);

package/src/components/_internal/base-checkbox.props.ts

@@ -1,14 +1,15 @@
+import { parseVariant } from '../../helpers/parse-variant.js';
 import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['classic', 'solid', 'soft', 'outline', 'surface'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const baseCheckboxPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
 } satisfies {

package/src/components/_internal/base-menu.css

@@ -367,6 +367,39 @@
   }
 }
 
+/* The menu highlight is soft, and solid when the person asks for more contrast. */
+@media (prefers-contrast: more) {
+  .rt-BaseMenuContent:where(.rt-variant-soft) {
+    & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+      background-color: var(--gray-3);
+    }
+
+    &:where([data-panel-background='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+      background-color: var(--gray-a3);
+    }
+
+    /* Gray fills with step 12 automatically; a coloured item re-resolves the solid tokens */
+    & :where(.rt-BaseMenuItem[data-highlighted]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+
+      & :where(.rt-BaseMenuSubTriggerIcon) {
+        color: var(--accent-solid-contrast);
+      }
+
+      /* Force all text elements to inherit hover color, including those with color="gray" */
+      & :where(.rt-Text) {
+        color: inherit !important;
+      }
+
+      /* Also target any element with data-accent-color="gray" */
+      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
 /* Forced colors support */
 @media (forced-colors: active) {
   .rt-BaseMenuItem:where(:focus-visible) {

package/src/components/_internal/base-menu.props.ts

@@ -22,7 +22,7 @@ const baseMenuSharedPropDefs = {
     type: 'enum',
     className: 'rt-variant',
     values: contentVariants,
-    default: 'solid',
+    default: 'soft',
   },
   material: {
     type: 'enum',

package/src/components/_internal/base-radio.css

@@ -122,11 +122,11 @@
   }
 }
 
-/* classic */
+/* raised */
 
-.rt-BaseRadioRoot:where(.rt-variant-classic) {
+.rt-BaseRadioRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   
   &:where(:not(:checked), [data-state='unchecked'])::before {
     color: var(--accent-ink);
@@ -170,7 +170,7 @@
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
       background-color: var(--accent-3);

package/src/components/_internal/base-radio.props.ts

@@ -1,14 +1,15 @@
+import { parseVariant } from '../../helpers/parse-variant.js';
 import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft', 'outline', 'surface'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const baseRadioPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
 } satisfies {

package/src/components/_internal/base-tab-list.css

@@ -121,6 +121,48 @@
         gap: var(--component-gap-2);
       }
     }
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+      --tab-height: var(--control-height-3);
+      --tab-padding-x: var(--space-3);
+      --tab-inner-padding-x: var(--space-3);
+      --tab-inner-padding-y: var(--space-2);
+      --tab-inner-border-radius: var(--radius-3);
+
+      /* Icon sizing for size 3 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-3);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      --tab-height: var(--control-height-4);
+      --tab-padding-x: var(--space-3);
+      --tab-inner-padding-x: var(--space-4);
+      --tab-inner-padding-y: var(--space-2);
+      --tab-inner-border-radius: var(--radius-4);
+
+      /* Icon sizing for size 4 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-4);
+        height: var(--content-icon-size-4);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-4);
+      }
+    }
   }
 }
 

package/src/components/_internal/base-tab-list.props.ts

@@ -2,7 +2,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
@@ -22,11 +22,14 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 

package/src/components/_internal/pane-chrome.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+/**
+ * A pane's own chrome: a header row, a scrolling region and a footer row.
+ *
+ * Shell.Sidebar and Shell.Panel render these as `Shell.PaneHeader`, `Shell.Scroll` and
+ * `Shell.PaneFooter`. The pane renders anything; with these parts it is the presentation, so
+ * Sidebar's menu parts work inside it with no `Sidebar.Root`. The index comes from the nearest
+ * Shell (`Shell.Root size`), or from a deprecated `Sidebar.Root` that still wraps them.
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { ScrollArea } from '../scroll-area.js';
+
+type PaneSize = '1' | '2' | '3';
+
+type SidebarVisualContextValue = {
+  size: PaneSize;
+  menuVariant: 'solid' | 'soft';
+  presentation?: 'thin' | 'expanded';
+  color?: string;
+};
+
+/** Size, menu highlight and presentation for the Sidebar parts. Internal: not exported. */
+const SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);
+
+function useSidebarVisual() {
+  return React.useContext(SidebarVisualContext);
+}
+
+/** The Shell's index. `Shell.Root size` sets it; panes hand it to their chrome. */
+const ShellSizeContext = React.createContext<PaneSize>('2');
+
+/**
+ * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail
+ * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.
+ */
+function PaneChromeScope({ children, presentation }: { children: React.ReactNode; presentation?: 'thin' }) {
+  const size = React.useContext(ShellSizeContext);
+  const value = React.useMemo<SidebarVisualContextValue>(() => ({ size, menuVariant: 'soft', presentation }), [size, presentation]);
+  return <SidebarVisualContext.Provider value={value}>{children}</SidebarVisualContext.Provider>;
+}
+
+function useChromeClasses() {
+  const visual = useSidebarVisual();
+  const size = visual?.size ?? '2';
+  const menuVariant = visual?.menuVariant ?? 'soft';
+  return ['rt-ShellPaneChrome', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`];
+}
+
+interface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+/** A pane's header row, pinned above its scrolling region. */
+const PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ className, ...props }, forwardedRef) => {
+  const chrome = useChromeClasses();
+  return <div {...props} ref={forwardedRef} className={classNames('rt-ShellPaneHeader', 'rt-SidebarHeader', 'rt-SidebarHeader--container', ...chrome, className)} />;
+});
+PaneHeader.displayName = 'Shell.PaneHeader';
+
+interface PaneFooterProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+/** A pane's footer row, pinned below its scrolling region. */
+const PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ className, ...props }, forwardedRef) => {
+  const chrome = useChromeClasses();
+  return <div {...props} ref={forwardedRef} className={classNames('rt-ShellPaneFooter', 'rt-SidebarFooter', 'rt-SidebarFooter--container', ...chrome, className)} />;
+});
+PaneFooter.displayName = 'Shell.PaneFooter';
+
+interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+/**
+ * The one region of a pane that scrolls; it takes the room the header and footer leave.
+ * It is not a landmark: for navigation, pass `role="navigation"` and an `aria-label`.
+ */
+const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, children, ...props }, forwardedRef) => {
+  const chrome = useChromeClasses();
+  return (
+    <ScrollArea type="hover" className="rt-ShellScroll">
+      <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', ...chrome, className)}>
+        <div className="rt-BaseMenuViewport">{children}</div>
+      </div>
+    </ScrollArea>
+  );
+});
+Scroll.displayName = 'Shell.Scroll';
+
+export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll };
+export type { SidebarVisualContextValue, PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps };

package/src/components/_internal/shell-sidebar.tsx

@@ -10,14 +10,17 @@ import { splitHandles, useResizablePane, type SizeChangeMeta } from './shell-res
 import { useInsetRegistration, warnOnce, type PaneValue } from './shell-store.js';
 import { navigationRest, startAnchoredGrowth, withoutRemovedPaneProps } from './shell-rest.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
+import { warnDeprecated } from '../../helpers/warn-deprecated.js';
+import { PaneChromeScope } from './pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, Responsive, SidebarMode } from '../shell.types.js';
 
 type SidebarStateChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };
 type SidebarControlledProps = { state: Responsive<SidebarMode>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; defaultState?: never };
 type SidebarUncontrolledProps = { defaultState?: SidebarMode | Partial<Record<Breakpoint, SidebarMode>>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; state?: never };
 type SidebarPublicProps = PaneBaseProps & {
+  /** @deprecated Thin mode is removed in 0.15.0. Use `Shell.Rail`. */
   thinSize?: number;
-  /** `both` toggles through collapsed, thin and expanded; `single` between collapsed and the default. */
+  /** `both` (deprecated with thin mode; `single` is the 0.15.0 behaviour) toggles through collapsed, thin and expanded; `single` between collapsed and the default. */
   toggleModes?: 'both' | 'single';
   size?: number | string;
   defaultSize?: number | string;
@@ -109,6 +112,12 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
   });
   useInsetRegistration('sidebar', inset);
 
+  if (props.thinSize !== undefined || pane.value === 'thin') {
+    warnDeprecated(
+      "Shell.Sidebar's thin mode is deprecated and will be removed in 0.15.0. Put the rows in Shell.Rail, which draws them as tiles, and use toggleModes=\"single\" so the toggle skips thin.",
+    );
+  }
+
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
       warnOnce('Shell.Sidebar: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
@@ -184,7 +193,9 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
         } as CSSPropertiesWithVars
       }
     >
-      <div className="rt-ShellSidebarContent">{content}</div>
+      <div className="rt-ShellSidebarContent">
+        <PaneChromeScope>{content}</PaneChromeScope>
+      </div>
       {handle}
     </div>
   );

package/src/components/accordion.css

@@ -72,7 +72,7 @@
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-classic)) {
+:where(.rt-AccordionRoot:where(.rt-variant-raised)) {
   /* Base state: solid surface for solid panels */
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
@@ -256,13 +256,13 @@
 }
 
 /* Trigger colour reads the loud ink in every variant; gray resolves to step 12 */
-:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-classic)) .rt-AccordionTrigger {
+:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-raised)) .rt-AccordionTrigger {
   color: var(--accent-ink);
 }
 
-/* Classic variant shadow states */
+/* Raised variant shadow states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-classic):hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-raised):hover) {
     background-color: var(--accent-2);
     box-shadow: var(--shadow-2);
   
@@ -282,7 +282,7 @@
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-classic):focus-within) {
+:where(.rt-AccordionRoot:where(.rt-variant-raised):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
   transition: var(--transition-text-field);

package/src/components/accordion.props.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
@@ -5,13 +6,13 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['classic', 'soft', 'surface', 'outline', 'ghost'] as const;
+const variants = ['raised', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const accordionRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...colorPropDef,
   ...radiusPropDef,
   material: { type: 'enum', values: panelBackgrounds, default: undefined },

package/src/components/app-bar.tsx

@@ -1,3 +1,4 @@
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 
@@ -43,8 +44,12 @@ interface AppBarRootProps extends Omit<CardProps, 'asChild'> {
  * This component was called `Toolbar` until 0.11.0. It is not a `role="toolbar"`: for a row of
  * controls with one tab stop and arrow-key navigation, use `Toolbar`.
  */
+/** @deprecated Removed in 0.15.0. Put a `Toolbar` in `Shell.Header`, or at the top edge of the pane that owns it. */
 const AppBarRoot = React.forwardRef<AppBarRootElement, AppBarRootProps>(
   (props, forwardedRef) => {
+    warnDeprecated(
+      'AppBar is deprecated and will be removed in 0.15.0. Put a Toolbar in Shell.Header, or at the top edge of the pane that owns it.',
+    );
     const {
       anchor = 'top',
       floating = false,

package/src/components/avatar.css

@@ -6,7 +6,7 @@
  * - Sizes: Responsive avatar dimensions and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/disabled selectors
- * - Special variants: classic, solid (unique behavior, kept separate)
+ * - Special variants: raised, solid (unique behavior, kept separate)
  * - Image, object-fit, fallback, status indicator, badge
  */
 
@@ -438,10 +438,10 @@
   }
 }
 
-/* Classic variant - uses --color-surface and gray interactive states */
-.rt-AvatarRoot:where(.rt-variant-classic) {
+/* Raised variant - uses --color-surface and gray interactive states */
+.rt-AvatarRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
 
   & :where(.rt-AvatarFallback) {
     position: relative;
@@ -459,8 +459,8 @@
   }
 }
 
-/* Classic interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-classic) {
+/* Raised interactive states */
+.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-raised) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: color-mix(in srgb, var(--gray-a2) calc(var(--material-alpha) * 100%), var(--gray-2) var(--material-blend));
@@ -474,7 +474,7 @@
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    padding-top: var(--classic-active-padding-offset-2);
+    padding-top: var(--raised-active-padding-offset-2);
     padding-bottom: 0;
     background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
 

package/src/components/avatar.props.tsx

@@ -1,11 +1,12 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef, accentColors } from '../props/color.prop.js';
+import { grayAccentColorPropDef, accentColors } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
@@ -13,8 +14,8 @@ const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as co
 const avatarPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
-  ...accentColorPropDef,
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  ...grayAccentColorPropDef,
   ...radiusPropDef,
   fallback: { type: 'ReactNode', required: true },
   material: { type: 'enum', values: materials, default: undefined },

package/src/components/badge.css

@@ -195,27 +195,27 @@
   color: var(--accent-ink);
 }
 
-/* classic */
+/* raised */
 
-.rt-Badge:where(.rt-variant-classic) {
+.rt-Badge:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 
-  --classic-surface: var(--color-surface-solid);
-  background-color: var(--classic-surface);
+  --raised-surface: var(--color-surface-solid);
+  background-color: var(--raised-surface);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 
   &:where([data-panel-background='solid'], [data-material='solid']) {
-    --classic-surface: var(--color-surface-solid);
+    --raised-surface: var(--color-surface-solid);
   }
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 }

package/src/components/badge.props.tsx

@@ -1,19 +1,20 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef } from '../props/color.prop.js';
+import { grayAccentColorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['solid', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const badgePropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
-  ...accentColorPropDef,
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  ...grayAccentColorPropDef,
   ...radiusPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /**

package/src/components/button.css

@@ -193,7 +193,7 @@
  * VARIANTS                                                                                        *
  *                                                                                                 *
  * Button variants provide different visual contexts and hierarchies:
- * - classic: Premium, sophisticated appearance
+ * - raised: lifted off its ground, with an edge and a shadow
  * - solid: Primary actions that should be noticed first
  * - soft: Content-heavy interfaces, natural integration
  * - surface: Elevated appearance with subtle depth