@zylem/ui 0.9.5 → 0.9.7

package/dist/styles.js

@@ -1 +1 @@
-import"./chunk-YJVLOHJL.js";
+import"./chunk-UQ3MDDFI.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {

package/src/components/Button/Button.css.ts

@@ -67,6 +67,20 @@ globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
 	filter: 'brightness(1.08)',
 });
 
+globalStyle('.zylem-button[data-on]', {
+	borderColor: 'rgba(46, 231, 255, 0.9)',
+	background: vars.material.buttonGlassOn,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+	color: '#F3FDFF',
+});
+
+globalStyle('.zylem-button[data-on]:hover:not([disabled])', {
+	background: vars.material.buttonGlassOn,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+	filter: 'brightness(1.08)',
+	color: '#F3FDFF',
+});
+
 globalStyle('.zylem-button[data-variant="active"]', {
 	borderColor: 'rgba(20, 255, 60, 0.78)',
 	background: vars.material.buttonGlassActive,

package/src/components/Button/Button.tsx

@@ -9,18 +9,24 @@ export interface ButtonProps
   size?: ButtonSize;
   /** Icon drawn before the label. Omitted, the button is label only. */
   icon?: JSX.Element | undefined;
+  /**
+   * Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
+   * Pass `false` while off so the button still announces itself.
+   */
+  on?: boolean | undefined;
 }
 
 /**
  * HyperGlass button: squared Aqua-like bevel with glass depth. Variants map
- * to the Zylem palette — `active` for live/run actions, `danger` for
- * destructive actions, `ghost` for low-emphasis chrome.
+ * to the Zylem palette — `active` for live/run actions, `on` for a toggle
+ * that is switched on, `danger` for destructive actions, `ghost` for
+ * low-emphasis chrome.
  *
  * Styling lives on the global `.zylem-button` class (bundled in
  * `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
  */
 export function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon', 'on']);
   return (
     <button
       type="button"
@@ -28,6 +34,8 @@ export function Button(props: ButtonProps) {
       data-variant={local.variant ?? 'default'}
       data-size={local.size ?? 'md'}
       {...rest}
+      data-on={local.on ? '' : undefined}
+      aria-pressed={local.on === undefined ? undefined : local.on}
     >
       <Show when={local.icon}>
         <span class="zylem-button-icon" aria-hidden="true">

package/src/components/ToolButton/ToolButton.tsx

@@ -81,6 +81,7 @@ export function ToolButton(props: ToolButtonProps) {
   return (
     <ToolbarButton
       label={label()}
+      selected={props.selected}
       pressed={props.selected ?? false}
       disabled={props.disabled}
       onClick={props.onClick}

package/src/components/ToolbarButton/ToolbarButton.css.ts

@@ -48,6 +48,19 @@ globalStyle('.zylem-toolbar-btn:focus-visible', {
   boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
+globalStyle('.zylem-toolbar-btn[data-on]', {
+  borderColor: 'rgba(46, 231, 255, 0.9)',
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  color: '#F3FDFF',
+});
+
+globalStyle('.zylem-toolbar-btn[data-on]:hover', {
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  filter: 'brightness(1.08)',
+});
+
 globalStyle('.zylem-toolbar-btn[data-selected], .zylem-toolbar-btn.selected', {
   borderColor: 'rgba(20, 255, 60, 0.78)',
   background: vars.material.buttonGlassActive,

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -7,10 +7,18 @@ export interface ToolbarButtonProps {
   onClick?: (event: MouseEvent) => void;
   /**
    * The selected look alone, for a button whose label already says its state
-   * (Play / Pause). For a toggle with a constant label, use `pressed`.
+   * (Play / Pause). Live green. For a toggle with a constant label, use `on`.
    */
   selected?: boolean;
-  /** Makes the button a toggle: the state is exposed as `aria-pressed` and drawn as selected. */
+  /**
+   * Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
+   * Pass `false` for a toggle that is off so the button still announces itself.
+   */
+  on?: boolean;
+  /**
+   * Toggle drawn as `on`, unless `selected` is also set, which keeps the
+   * live-green jewel. Prefer `on` for new toggles.
+   */
   pressed?: boolean;
   disabled?: boolean;
   children: JSX.Element;
@@ -28,7 +36,7 @@ function insidePopup(element: Element | undefined): boolean {
 
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
- * Selected and pressed states render as a live-green jewel.
+ * `selected` is the live-green jewel. `on` is the electric-blue toggle.
  *
  * The tooltip portals into the layer container for its own tree, so it stays
  * styled when the toolbar lives inside a web component's shadow root.
@@ -58,7 +66,7 @@ export function ToolbarButton(props: ToolbarButtonProps) {
       >
         <KButton.Root
           aria-label={props.label}
-          aria-pressed={props.pressed}
+          aria-pressed={props.on !== undefined ? props.on : props.pressed}
           onClick={props.onClick}
           disabled={props.disabled}
           class={
@@ -66,7 +74,8 @@ export function ToolbarButton(props: ToolbarButtonProps) {
               ? `zylem-toolbar-btn ${props.class}`
               : 'zylem-toolbar-btn'
           }
-          data-selected={props.selected || props.pressed ? '' : undefined}
+          data-selected={props.selected ? '' : undefined}
+          data-on={props.on || (props.pressed && !props.selected) ? '' : undefined}
         >
           {props.children}
         </KButton.Root>

package/src/components/ToolboxButton/ToolboxButton.css.ts

@@ -50,6 +50,19 @@ globalStyle('.zylem-toolbox-btn:focus-visible', {
   boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
+globalStyle('.zylem-toolbox-btn[data-on]', {
+  borderColor: 'rgba(46, 231, 255, 0.9)',
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  color: '#F3FDFF',
+});
+
+globalStyle('.zylem-toolbox-btn[data-on]:hover:not([disabled])', {
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  filter: 'brightness(1.08)',
+});
+
 globalStyle('.zylem-toolbox-btn[data-selected]', {
   borderColor: 'rgba(20, 255, 60, 0.78)',
   background: vars.material.buttonGlassActive,

package/src/components/ToolboxButton/ToolboxButton.tsx

@@ -11,8 +11,13 @@ export interface ToolboxButtonProps {
   label: string;
   /** Icon rendered above the label. */
   children: JSX.Element;
-  /** Given at all, the tile is a toggle and exposes this as `aria-pressed`. */
+  /** Live-green jewel. Given at all, the tile exposes this as `aria-pressed`. */
   selected?: boolean;
+  /**
+   * Checkbox-like toggle. Electric blue while on. Given at all, the tile
+   * exposes this as `aria-pressed` instead of `selected`.
+   */
+  on?: boolean;
   disabled?: boolean;
   /** Overrides the size inherited from the enclosing `ToolboxGrid`. */
   size?: ToolboxSize;
@@ -30,7 +35,8 @@ export function ToolboxButton(props: ToolboxButtonProps) {
       class={props.class ? `zylem-toolbox-btn ${props.class}` : 'zylem-toolbox-btn'}
       data-size={props.size}
       data-selected={props.selected ? '' : undefined}
-      aria-pressed={props.selected}
+      data-on={props.on ? '' : undefined}
+      aria-pressed={props.on !== undefined ? props.on : props.selected}
       disabled={props.disabled}
       onClick={props.onClick}
     >

package/src/components/WindowControls/WindowControls.tsx

@@ -1,8 +1,8 @@
 import { Show } from 'solid-js';
 import ChevronDown from 'lucide-solid/icons/chevron-down';
 import ChevronUp from 'lucide-solid/icons/chevron-up';
-import Dock from 'lucide-solid/icons/dock';
 import X from 'lucide-solid/icons/x';
+import { Dock } from '../../icons';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu';
 
 /** Where a panel sits. `float` leaves it free of the top and bottom edges. */
@@ -45,7 +45,7 @@ export function WindowControls(props: WindowControlsProps) {
             triggerLabel="Dock panel"
             triggerClass="zylem-window-control zylem-window-control--dock"
             placement="bottom-end"
-            trigger={<Dock size={11} strokeWidth={2.5} aria-hidden="true" />}
+            trigger={<Dock size={11} aria-hidden="true" />}
             items={DOCK_OPTIONS.map((option) => ({
               id: option.id,
               label: option.label,

package/src/components/index.ts

@@ -237,10 +237,12 @@ export {
   Perspective,
   SideviewPerspective,
   TopDownPerspective,
+  Dock,
   cameraIconNodes,
   createZylemIcon,
   type CameraIcon,
   type CameraIconName,
   type IconNode,
+  type ZylemIconOptions,
   type ZylemIconProps,
 } from '../icons';

package/src/icons/create-icon.tsx

@@ -21,6 +21,19 @@ function kebab(name: string): string {
   return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
+export interface ZylemIconOptions {
+  /**
+   * Replaces the `zylem-icon` class. Toolbar icons keep that class, which
+   * sizes them to 18px; chrome glyphs omit it so `size` wins, the way a
+   * Lucide chevron does.
+   */
+  className?: string;
+  /** Draw with `currentColor` fill instead of a stroke. */
+  filled?: boolean;
+  /** Defaults to the 24×24 Lucide grid. */
+  viewBox?: string;
+}
+
 /**
  * Solid icon factory matching lucide-solid's size / color / strokeWidth
  * props so these glyphs drop into the same toolbar buttons and CSS.
@@ -28,6 +41,7 @@ function kebab(name: string): string {
 export function createZylemIcon(
   name: string,
   iconNode: IconNode,
+  options?: ZylemIconOptions,
 ): Component<ZylemIconProps> {
   const Icon: Component<ZylemIconProps> = (props) => {
     const [local, rest] = splitProps(props, [
@@ -46,17 +60,22 @@ export function createZylemIcon(
       return width;
     };
     const classes = () =>
-      ['zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
+      [options?.className ?? 'zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
         .filter((value) => Boolean(value))
         .join(' ');
 
+    const filled = options?.filled === true;
+    const paint = () => local.color ?? 'currentColor';
+
     return (
       <svg
         {...DEFAULTS}
+        viewBox={options?.viewBox ?? DEFAULTS.viewBox}
         width={size()}
         height={size()}
-        stroke={local.color ?? 'currentColor'}
-        stroke-width={strokeWidth()}
+        fill={filled ? paint() : 'none'}
+        stroke={filled ? 'none' : paint()}
+        stroke-width={filled ? 0 : strokeWidth()}
         class={classes()}
         aria-hidden="true"
         {...rest}

package/src/icons/icon-nodes.ts

@@ -63,6 +63,16 @@ export const GameCameraNode: IconNode = [
   ['path', { d: 'M14 10h.01M14 14h.01' }],
 ];
 
+/** Filled window frame for the dock control. 16×16, not the 24 stroke grid. */
+export const DockNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25ZM14.5 6h-13v7.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm-6-3.5v2h6V2.75a.25.25 0 0 0-.25-.25ZM5 2.5v2h2v-2Zm-3.25 0a.25.25 0 0 0-.25.25V4.5h2v-2Z',
+    },
+  ],
+];
+
 export const cameraIconNodes = {
   perspective: PerspectiveNode,
   'sideview-perspective': SideviewPerspectiveNode,

package/src/icons/index.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'solid-js';
 import { createZylemIcon, type ZylemIconProps } from './create-icon';
 import {
+  DockNode,
   FreePerspectiveNode,
   GameCameraNode,
   IsometricPerspectiveNode,
@@ -19,7 +20,7 @@ export {
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
 } from './icon-nodes';
-export { createZylemIcon, type ZylemIconProps } from './create-icon';
+export { createZylemIcon, type ZylemIconOptions, type ZylemIconProps } from './create-icon';
 
 export type CameraIcon = Component<ZylemIconProps>;
 
@@ -44,6 +45,13 @@ export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiv
 /** Recorder with controller buttons (game camera). */
 export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
 
+/** Filled window frame. Skips the 18px toolbar metric so `size` matches a chevron. */
+export const Dock = createZylemIcon('Dock', DockNode, {
+  className: 'zylem-dock',
+  filled: true,
+  viewBox: '0 0 16 16',
+});
+
 export const CAMERA_ICONS = [
   { name: 'perspective', label: 'Perspective', Icon: Perspective },
   { name: 'sideview-perspective', label: 'Side view', Icon: SideviewPerspective },

package/src/theme.css.ts

@@ -30,6 +30,8 @@ const tokens = {
 
 		active: 'rgba(20, 255, 60, 0.7)',
 		activeHover: 'rgba(20, 255, 60, 0.4)',
+		/** Electric blue for a toggle that is on. Brighter than the resting primary. */
+		on: '#2EE7FF',
 		successHover: '#2a6734b3',
 
 		text: '#E6EBEF',
@@ -79,6 +81,8 @@ const tokens = {
 			'linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))',
 		buttonGlassActive:
 			'linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))',
+		buttonGlassOn:
+			'linear-gradient(180deg, rgba(214, 251, 255, 0.55), rgba(0, 196, 255, 0.82) 48%, rgba(0, 72, 148, 0.96))',
 		buttonGlassDanger:
 			'linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))',
 		fieldGlass:
@@ -100,6 +104,7 @@ const tokens = {
 
 		glowPrimary: '0 0 18px rgba(97, 166, 232, 0.28)',
 		glowActive: '0 0 20px rgba(20, 255, 60, 0.26)',
+		glowOn: '0 0 20px rgba(46, 231, 255, 0.42)',
 		glowDanger: '0 0 20px rgba(230, 69, 52, 0.24)',
 
 		focusRing:
@@ -158,6 +163,7 @@ const varNames = {
 
 		active: 'zylem-color-active',
 		activeHover: 'zylem-color-active-hover',
+		on: 'zylem-color-on',
 		successHover: 'zylem-color-success-hover',
 
 		text: 'zylem-color-text',
@@ -197,6 +203,7 @@ const varNames = {
 		buttonGlass: 'zylem-material-button-glass',
 		buttonGlassHover: 'zylem-material-button-glass-hover',
 		buttonGlassActive: 'zylem-material-button-glass-active',
+		buttonGlassOn: 'zylem-material-button-glass-on',
 		buttonGlassDanger: 'zylem-material-button-glass-danger',
 		fieldGlass: 'zylem-material-field-glass',
 		panelHeaderGloss: 'zylem-material-panel-header-gloss',
@@ -212,6 +219,7 @@ const varNames = {
 
 		glowPrimary: 'zylem-effect-glow-primary',
 		glowActive: 'zylem-effect-glow-active',
+		glowOn: 'zylem-effect-glow-on',
 		glowDanger: 'zylem-effect-glow-danger',
 
 		focusRing: 'zylem-effect-focus-ring',

package/dist/chunk-YJVLOHJL.js

@@ -1 +0,0 @@
-var l={colors:{primary:"#61A6E8",primaryHover:"#3B8AD8",primaryActive:"#0C6EB8",accent:"#E64534",accentHover:"#C93A2C",accentActive:"#A82F24",background:"#11151C",backgroundTranslucent:"rgba(10, 20, 30, 0.46)",surface:"#1A1F27",surfaceHover:"#222831",border:"#2D3643",active:"rgba(20, 255, 60, 0.7)",activeHover:"rgba(20, 255, 60, 0.4)",successHover:"#2a6734b3",text:"#E6EBEF",textSecondary:"#88929E",consoleBackground:"rgba(20, 40, 60, 0.25)",consoleText:"#61A6E8"},spacing:{xxs:"0.125rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem",xxl:"2rem",xxxl:"3rem"},sizes:{icon:"28px",iconSm:"16px",iconLg:"96px"},typography:{fontFamily:"'Exo 2', sans-serif",fontFamilyMono:"'JetBrains Mono', ui-monospace, monospace",fontSize:"14px"},borders:{radius:"12px",width:"1.5px"},material:{glassPanel:"linear-gradient(180deg, rgba(38, 76, 112, 0.74), rgba(10, 24, 38, 0.58))",glassPanelDark:"linear-gradient(180deg, rgba(26, 31, 39, 0.75), rgba(10, 20, 30, 0.68))",glossyBar:"linear-gradient(180deg, rgba(205, 232, 255, 0.55) 0%, rgba(97, 166, 232, 0.34) 38%, rgba(18, 54, 88, 0.86) 100%)",buttonGlass:"linear-gradient(180deg, rgba(178, 219, 255, 0.34), rgba(30, 94, 148, 0.72) 48%, rgba(9, 34, 58, 0.92))",buttonGlassHover:"linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))",buttonGlassActive:"linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))",buttonGlassDanger:"linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))",fieldGlass:"linear-gradient(180deg, rgba(8, 19, 31, 0.82), rgba(15, 39, 62, 0.72))",panelHeaderGloss:"linear-gradient(180deg, rgba(190, 226, 255, 0.18), rgba(61, 118, 165, 0.16) 46%, rgba(10, 27, 44, 0.26))"},effects:{blurSm:"8px",blurMd:"14px",blurLg:"24px",shadowPanel:"0 22px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.10)",shadowButton:"inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.45), 0 2px 7px rgba(0,0,0,0.35)",shadowInset:"inset 0 1px 2px rgba(0,0,0,0.42), inset 0 -1px 0 rgba(255,255,255,0.08)",glowPrimary:"0 0 18px rgba(97, 166, 232, 0.28)",glowActive:"0 0 20px rgba(20, 255, 60, 0.26)",glowDanger:"0 0 20px rgba(230, 69, 52, 0.24)",focusRing:"0 0 0 2px rgba(97, 166, 232, 0.38), 0 0 18px rgba(97, 166, 232, 0.22)"},radii:{window:"14px",panel:"12px",button:"7px",control:"6px",card:"10px"},motion:{fast:"120ms",normal:"160ms",easeOut:"cubic-bezier(.2,.8,.2,1)"},art:{checkerLight:"#4F5C72",checkerDark:"#3C4759",canvasBorder:"rgba(150, 210, 255, 0.5)"},layers:{base:"0",panel:"1000",modal:"2000",popover:"3000",tooltip:"4000",menu:"5000"}},o={colors:{primary:"var(--zylem-color-primary)",primaryHover:"var(--zylem-color-primary-hover)",primaryActive:"var(--zylem-color-primary-active)",accent:"var(--zylem-color-accent)",accentHover:"var(--zylem-color-accent-hover)",accentActive:"var(--zylem-color-accent-active)",background:"var(--zylem-color-background)",backgroundTranslucent:"var(--zylem-color-background-translucent)",surface:"var(--zylem-color-surface)",surfaceHover:"var(--zylem-color-surface-hover)",border:"var(--zylem-color-border)",active:"var(--zylem-color-active)",activeHover:"var(--zylem-color-active-hover)",successHover:"var(--zylem-color-success-hover)",text:"var(--zylem-color-text)",textSecondary:"var(--zylem-color-text-secondary)",consoleBackground:"var(--zylem-color-console-background)",consoleText:"var(--zylem-color-console-text)"},spacing:{xxs:"var(--zylem-spacing-xxs)",xs:"var(--zylem-spacing-xs)",sm:"var(--zylem-spacing-sm)",md:"var(--zylem-spacing-md)",lg:"var(--zylem-spacing-lg)",xl:"var(--zylem-spacing-xl)",xxl:"var(--zylem-spacing-xxl)",xxxl:"var(--zylem-spacing-xxxl)"},sizes:{icon:"var(--zylem-size-icon)",iconSm:"var(--zylem-size-icon-sm)",iconLg:"var(--zylem-size-icon-lg)"},typography:{fontFamily:"var(--zylem-font-family)",fontFamilyMono:"var(--zylem-font-family-mono)",fontSize:"var(--zylem-font-size)"},borders:{radius:"var(--zylem-radius)",width:"var(--zylem-border)"},material:{glassPanel:"var(--zylem-material-glass-panel)",glassPanelDark:"var(--zylem-material-glass-panel-dark)",glossyBar:"var(--zylem-material-glossy-bar)",buttonGlass:"var(--zylem-material-button-glass)",buttonGlassHover:"var(--zylem-material-button-glass-hover)",buttonGlassActive:"var(--zylem-material-button-glass-active)",buttonGlassDanger:"var(--zylem-material-button-glass-danger)",fieldGlass:"var(--zylem-material-field-glass)",panelHeaderGloss:"var(--zylem-material-panel-header-gloss)"},effects:{blurSm:"var(--zylem-effect-blur-sm)",blurMd:"var(--zylem-effect-blur-md)",blurLg:"var(--zylem-effect-blur-lg)",shadowPanel:"var(--zylem-effect-shadow-panel)",shadowButton:"var(--zylem-effect-shadow-button)",shadowInset:"var(--zylem-effect-shadow-inset)",glowPrimary:"var(--zylem-effect-glow-primary)",glowActive:"var(--zylem-effect-glow-active)",glowDanger:"var(--zylem-effect-glow-danger)",focusRing:"var(--zylem-effect-focus-ring)"},radii:{window:"var(--zylem-radius-window)",panel:"var(--zylem-radius-panel)",button:"var(--zylem-radius-button)",control:"var(--zylem-radius-control)",card:"var(--zylem-radius-card)"},motion:{fast:"var(--zylem-motion-fast)",normal:"var(--zylem-motion-normal)",easeOut:"var(--zylem-motion-ease-out)"},art:{checkerLight:"var(--zylem-art-checker-light)",checkerDark:"var(--zylem-art-checker-dark)",canvasBorder:"var(--zylem-art-canvas-border)"},layers:{base:"var(--zylem-layer-base)",panel:"var(--zylem-layer-panel)",modal:"var(--zylem-layer-modal)",popover:"var(--zylem-layer-popover)",tooltip:"var(--zylem-layer-tooltip)",menu:"var(--zylem-layer-menu)"}};export{l as a,o as b};