@zylem/ui 0.8.8 → 0.8.11

package/src/components/TimelineTrack/TimelineTrack.css.ts

@@ -0,0 +1,163 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const TRACK_HEIGHT = '18px';
+
+globalStyle('.zylem-timeline', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.md,
+  width: '100%',
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-timeline-root', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xxs,
+  flex: '1 1 auto',
+  minWidth: 0,
+  userSelect: 'none',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-timeline-root[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-timeline-label', {
+  fontSize: '11px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-timeline-track', {
+  position: 'relative',
+  height: TRACK_HEIGHT,
+  width: '100%',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  cursor: 'pointer',
+});
+
+globalStyle('.zylem-timeline-fill', {
+  position: 'absolute',
+  top: 0,
+  height: '100%',
+  borderRadius: '999px',
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.55), rgba(48, 137, 220, 0.8))',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.4)',
+});
+
+globalStyle('.zylem-timeline-markers, .zylem-timeline-keyframes', {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+});
+
+// Interval dots: small, dim, centered on the rail.
+globalStyle('.zylem-timeline-tick', {
+  position: 'absolute',
+  top: '50%',
+  width: '4px',
+  height: '4px',
+  marginLeft: '-2px',
+  borderRadius: '999px',
+  background: 'rgba(205, 232, 255, 0.55)',
+  boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.35)',
+  transform: 'translateY(-50%)',
+});
+
+// Keyframes: rotated squares that catch the pointer over the rail.
+globalStyle('.zylem-timeline-keyframe', {
+  position: 'absolute',
+  top: '50%',
+  width: '10px',
+  height: '10px',
+  padding: 0,
+  margin: '0 0 0 -5px',
+  cursor: 'pointer',
+  pointerEvents: 'auto',
+  border: '1px solid rgba(255, 255, 255, 0.7)',
+  borderRadius: '2px',
+  background:
+    'linear-gradient(135deg, rgba(255, 244, 200, 0.98), rgba(240, 180, 60, 0.95))',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.55)',
+  transform: 'translateY(-50%) rotate(45deg)',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-timeline-keyframe:hover:not([disabled])', {
+  filter: 'brightness(1.12)',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(240, 180, 60, 0.6)',
+});
+
+globalStyle('.zylem-timeline-keyframe[data-active]', {
+  boxShadow: '0 1px 3px rgba(0,0,0,0.55), 0 0 12px rgba(240, 180, 60, 0.8)',
+});
+
+globalStyle('.zylem-timeline-keyframe:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-timeline-thumb', {
+  display: 'block',
+  width: '14px',
+  height: `calc(${TRACK_HEIGHT} + 6px)`,
+  top: '-4px',
+  borderRadius: '5px',
+  border: '1px solid rgba(255,255,255,0.55)',
+  background:
+    'linear-gradient(180deg, rgba(240,250,255,0.96), rgba(140,190,235,0.92))',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.glowPrimary}`,
+  cursor: 'grab',
+  outline: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-timeline-thumb:active', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-timeline-thumb:focus-visible', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-timeline-thumb-input', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
+// Fixed box so the readout doesn't reflow the track as digits change:
+// wide enough for `59.99s / 120s`, one track-height tall, right-aligned.
+globalStyle('.zylem-timeline-time', {
+  boxSizing: 'border-box',
+  flex: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  width: '12ch',
+  height: TRACK_HEIGHT,
+  lineHeight: TRACK_HEIGHT,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.text,
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+});

package/src/components/TimelineTrack/TimelineTrack.tsx

@@ -0,0 +1,90 @@
+import { Slider as KSlider } from '@kobalte/core';
+import { For, Show, createMemo } from 'solid-js';
+import { formatSeconds, intervalTicks, markerPercent } from './timeline-math';
+
+export interface TimelineTrackProps {
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max: number;
+  step?: number;
+  /** Times to mark with a diamond. */
+  keyframes?: readonly number[];
+  /** Explicit tick times to mark with a dot. */
+  ticks?: readonly number[];
+  /** Or split the range into this many equal intervals and dot the boundaries. */
+  intervals?: number;
+  onKeyframeClick?: (time: number) => void;
+  /** Show `value / max` as seconds after the track. */
+  showTime?: boolean;
+  disabled?: boolean;
+  label?: string;
+  class?: string;
+}
+
+/**
+ * Director scrub track: a taller inset glass rail with the playhead as a
+ * glossy thumb, keyframes as diamonds, and interval boundaries as dots.
+ */
+export function TimelineTrack(props: TimelineTrackProps) {
+  const min = () => props.min ?? 0;
+  const ticks = createMemo(() => {
+    if (props.ticks) return [...props.ticks];
+    if (props.intervals) return intervalTicks(props.intervals, min(), props.max);
+    return [];
+  });
+  const pct = (t: number) => `${markerPercent(t, min(), props.max)}%`;
+
+  return (
+    <div class={props.class ? `zylem-timeline ${props.class}` : 'zylem-timeline'}>
+      <KSlider.Root
+        class="zylem-timeline-root"
+        value={[props.value]}
+        onChange={(values) => props.onChange?.(values[0] ?? min())}
+        minValue={min()}
+        maxValue={props.max}
+        step={props.step ?? 0.01}
+        disabled={props.disabled}
+        getValueLabel={(params) => formatSeconds(params.values[0] ?? 0)}
+      >
+        <Show when={props.label}>
+          <KSlider.Label class="zylem-timeline-label">{props.label}</KSlider.Label>
+        </Show>
+        <KSlider.Track class="zylem-timeline-track">
+          <KSlider.Fill class="zylem-timeline-fill" />
+          <div class="zylem-timeline-markers" aria-hidden="true">
+            <For each={ticks()}>
+              {(t) => <span class="zylem-timeline-tick" style={{ left: pct(t) }} />}
+            </For>
+          </div>
+          <Show when={props.keyframes?.length}>
+            <div class="zylem-timeline-keyframes">
+              <For each={props.keyframes}>
+                {(t) => (
+                  <button
+                    type="button"
+                    class="zylem-timeline-keyframe"
+                    style={{ left: pct(t) }}
+                    aria-label={`Keyframe at ${formatSeconds(t)}`}
+                    data-active={Math.abs(t - props.value) < (props.step ?? 0.01) ? '' : undefined}
+                    disabled={props.disabled}
+                    onPointerDown={(event) => event.stopPropagation()}
+                    onClick={() => props.onKeyframeClick?.(t)}
+                  />
+                )}
+              </For>
+            </div>
+          </Show>
+          <KSlider.Thumb class="zylem-timeline-thumb">
+            <KSlider.Input class="zylem-timeline-thumb-input" />
+          </KSlider.Thumb>
+        </KSlider.Track>
+      </KSlider.Root>
+      <Show when={props.showTime}>
+        <span class="zylem-timeline-time">
+          {formatSeconds(props.value)} / {formatSeconds(props.max)}
+        </span>
+      </Show>
+    </div>
+  );
+}

package/src/components/TimelineTrack/timeline-math.ts

@@ -0,0 +1,43 @@
+/**
+ * Position of `t` along a track, as a 0–100 percentage clamped to the
+ * track's range. A degenerate range (max <= min) pins everything to 0.
+ */
+export function markerPercent(t: number, min: number, max: number): number {
+  if (!Number.isFinite(t) || max <= min) {
+    return 0;
+  }
+  const ratio = (t - min) / (max - min);
+  return Math.min(100, Math.max(0, ratio * 100));
+}
+
+/**
+ * Evenly spaced tick times between `min` and `max` (exclusive of both ends),
+ * one per interval boundary: `intervals = 4` yields three ticks.
+ */
+export function intervalTicks(intervals: number, min: number, max: number): number[] {
+  if (!Number.isFinite(intervals) || intervals < 2 || max <= min) {
+    return [];
+  }
+  const count = Math.floor(intervals);
+  const span = max - min;
+  const ticks: number[] = [];
+  for (let i = 1; i < count; i += 1) {
+    ticks.push(min + (span * i) / count);
+  }
+  return ticks;
+}
+
+/**
+ * Seconds as a short readout: whole seconds bare (`10s`), fractions to two
+ * places with trailing zeros trimmed (`5.62s`, `2.5s`).
+ */
+export function formatSeconds(seconds: number): string {
+  if (!Number.isFinite(seconds)) {
+    return '0s';
+  }
+  const rounded = Math.round(seconds * 100) / 100;
+  if (Number.isInteger(rounded)) {
+    return `${rounded}s`;
+  }
+  return `${rounded.toFixed(2).replace(/0+$/, '')}s`;
+}

package/src/components/Toast/Toast.css.ts

@@ -0,0 +1,48 @@
+import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const enter = keyframes({
+  from: { opacity: 0, transform: 'translate(-50%, 6px)' },
+  to: { opacity: 1, transform: 'translate(-50%, 0)' },
+});
+
+globalStyle('.zylem-toast', {
+  position: 'absolute',
+  left: '50%',
+  bottom: vars.spacing.lg,
+  transform: 'translateX(-50%)',
+  zIndex: vars.layers.panel,
+  maxWidth: 'calc(100% - 32px)',
+  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(150, 210, 255, 0.45)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurSm})`,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  lineHeight: 1.4,
+  textAlign: 'center',
+  pointerEvents: 'none',
+  animation: `${enter} 0.16s ${vars.motion.easeOut}`,
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.zylem-toast[data-position="top"]', {
+  top: vars.spacing.lg,
+  bottom: 'auto',
+});
+
+globalStyle('.zylem-toast[data-tone="success"]', {
+  borderColor: 'rgba(120, 255, 150, 0.55)',
+});
+
+globalStyle('.zylem-toast[data-tone="error"]', {
+  borderColor: 'rgba(255, 132, 114, 0.65)',
+  color: '#FFD9D3',
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,37 @@
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export type ToastTone = 'info' | 'success' | 'error';
+
+export interface ToastProps {
+  /** The message. Nothing renders while this is empty. */
+  message?: JSX.Element | null | false;
+  tone?: ToastTone;
+  /** Edge of the positioned parent to float against. Defaults to `bottom`. */
+  position?: 'top' | 'bottom';
+  class?: string;
+}
+
+/**
+ * Transient glass message floated over a stage (a game view, an editor
+ * surface). It positions itself against the nearest positioned ancestor and
+ * ignores the pointer, so it never gets in the way of what it reports on.
+ *
+ * Timing is the caller's: show it by passing a message and hide it by passing
+ * none, which is how a store's `flashHint()` already works.
+ */
+export function Toast(props: ToastProps) {
+  return (
+    <Show when={props.message}>
+      <div
+        class={props.class ? `zylem-toast ${props.class}` : 'zylem-toast'}
+        role="status"
+        aria-live="polite"
+        data-tone={props.tone}
+        data-position={props.position}
+      >
+        {props.message}
+      </div>
+    </Show>
+  );
+}

package/src/components/ToolButton/ToolButton.tsx

@@ -0,0 +1,92 @@
+import Circle from 'lucide-solid/icons/circle';
+import Eraser from 'lucide-solid/icons/eraser';
+import Hand from 'lucide-solid/icons/hand';
+import PaintBucket from 'lucide-solid/icons/paint-bucket';
+import Pencil from 'lucide-solid/icons/pencil';
+import Pipette from 'lucide-solid/icons/pipette';
+import Square from 'lucide-solid/icons/square';
+import SquareDashed from 'lucide-solid/icons/square-dashed';
+import { type Component, type JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+/** Pixel-editor tools with a built-in icon and label. */
+export type ArtTool =
+  | 'pencil'
+  | 'fill'
+  | 'eraser'
+  | 'rectangle'
+  | 'ellipse'
+  | 'select'
+  | 'eyedropper'
+  | 'move';
+
+type IconComponent = Component<JSX.SvgSVGAttributes<SVGSVGElement>>;
+
+export const ART_TOOL_ICONS: Record<ArtTool, IconComponent> = {
+  pencil: Pencil,
+  fill: PaintBucket,
+  eraser: Eraser,
+  rectangle: Square,
+  ellipse: Circle,
+  select: SquareDashed,
+  eyedropper: Pipette,
+  move: Hand,
+};
+
+export const ART_TOOL_LABELS: Record<ArtTool, string> = {
+  pencil: 'Pencil',
+  fill: 'Fill',
+  eraser: 'Eraser',
+  rectangle: 'Rectangle',
+  ellipse: 'Ellipse',
+  select: 'Select',
+  eyedropper: 'Eyedropper',
+  move: 'Move',
+};
+
+/** Every tool in the order the editor's strip shows them. */
+export const ART_TOOLS: readonly ArtTool[] = [
+  'pencil',
+  'fill',
+  'eraser',
+  'rectangle',
+  'ellipse',
+  'select',
+  'eyedropper',
+  'move',
+];
+
+export interface ToolButtonProps {
+  tool: ArtTool;
+  /** Tooltip / accessible name; defaults to the tool's label. */
+  label?: string;
+  /** Keyboard shortcut shown after the label in the tooltip, e.g. `B`. */
+  shortcut?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  class?: string;
+}
+
+/**
+ * Toolbar button preset for one pixel-editor tool: same glass jewel as
+ * `ToolbarButton`, with the tool's lucide icon and label filled in.
+ */
+export function ToolButton(props: ToolButtonProps) {
+  const label = () => {
+    const base = props.label ?? ART_TOOL_LABELS[props.tool];
+    return props.shortcut ? `${base} (${props.shortcut})` : base;
+  };
+  return (
+    <ToolbarButton
+      label={label()}
+      selected={props.selected}
+      disabled={props.disabled}
+      onClick={props.onClick}
+      class={props.class ? `zylem-tool-btn ${props.class}` : 'zylem-tool-btn'}
+    >
+      <Dynamic component={ART_TOOL_ICONS[props.tool]} class="zylem-icon" data-tool={props.tool} />
+    </ToolbarButton>
+  );
+}

package/src/components/ToolGroup/ToolGroup.css.ts

@@ -0,0 +1,35 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/** Shared uppercase caption used by the art-tool groups and strips. */
+export const artCaption = {
+  fontFamily: vars.typography.fontFamily,
+  fontSize: '11px',
+  fontWeight: 600,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  whiteSpace: 'nowrap',
+} as const;
+
+globalStyle('.zylem-tool-group', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.md,
+  minWidth: 0,
+});
+
+globalStyle('.zylem-tool-group-label', artCaption);
+
+globalStyle('.zylem-tool-group-items', {
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: vars.spacing.sm,
+});
+
+// Tool buttons are square; the label lives in the tooltip.
+globalStyle('.zylem-tool-btn', {
+  width: '34px',
+  padding: 0,
+});

package/src/components/ToolGroup/ToolGroup.tsx

@@ -0,0 +1,29 @@
+import { type JSX, splitProps } from 'solid-js';
+
+export interface ToolGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Caption shown before the controls, e.g. `Tools` or `Palette`. */
+  label: string;
+  children: JSX.Element;
+}
+
+/**
+ * Captioned strip for a row of related controls: `TOOLS` followed by tool
+ * buttons, `PALETTE` followed by swatches. Several groups sit side by side
+ * on one rail.
+ */
+export function ToolGroup(props: ToolGroupProps) {
+  const [local, rest] = splitProps(props, ['label', 'children', 'class']);
+  return (
+    <div
+      role="group"
+      aria-label={local.label}
+      class={local.class ? `zylem-tool-group ${local.class}` : 'zylem-tool-group'}
+      {...rest}
+    >
+      <span class="zylem-tool-group-label" aria-hidden="true">
+        {local.label}
+      </span>
+      <div class="zylem-tool-group-items">{local.children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,131 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import { artCaption } from '../ToolGroup/ToolGroup.css';
+
+/**
+ * Toolbox tile: `.zylem-toolbar-btn` at panel scale. Same border, glass,
+ * press and selected treatment; icon stacked over a label.
+ */
+globalStyle('.zylem-toolbox-btn', {
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: vars.spacing.sm,
+  width: '100%',
+  minHeight: '72px',
+  padding: `${vars.spacing.md} ${vars.spacing.sm}`,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  fontWeight: 600,
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  cursor: 'pointer',
+  userSelect: 'none',
+  borderRadius: vars.radii.button,
+  border: '1px solid rgba(150, 210, 255, 0.5)',
+  background: vars.material.buttonGlass,
+  boxShadow: vars.effects.shadowButton,
+  color: '#E8F4FF',
+  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-toolbox-btn:hover:not([disabled])', {
+  background: vars.material.buttonGlassHover,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
+});
+
+globalStyle('.zylem-toolbox-btn:active:not([disabled])', {
+  transform: 'translateY(1px)',
+  filter: 'brightness(0.92)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
+});
+
+globalStyle('.zylem-toolbox-btn:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-toolbox-btn[data-selected]', {
+  borderColor: 'rgba(20, 255, 60, 0.78)',
+  background: vars.material.buttonGlassActive,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+});
+
+globalStyle('.zylem-toolbox-btn[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-toolbox-btn-icon', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+});
+
+globalStyle('.zylem-toolbox-btn-icon svg', {
+  width: '24px',
+  height: '24px',
+  stroke: 'currentColor',
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.55))',
+});
+
+globalStyle('.zylem-toolbox-btn-label', {
+  display: 'block',
+});
+
+/**
+ * Extra large tiles. A button's own `data-size` wins; otherwise it inherits
+ * the enclosing grid's. `lg` suits three columns, `xl` two.
+ */
+const lg = (suffix = '') =>
+  `.zylem-toolbox-btn[data-size="lg"]${suffix}, .zylem-toolbox-grid[data-size="lg"] .zylem-toolbox-btn:not([data-size])${suffix}`;
+const xl = (suffix = '') =>
+  `.zylem-toolbox-btn[data-size="xl"]${suffix}, .zylem-toolbox-grid[data-size="xl"] .zylem-toolbox-btn:not([data-size])${suffix}`;
+
+globalStyle(lg(), {
+  minHeight: '96px',
+  gap: vars.spacing.md,
+  padding: `${vars.spacing.lg} ${vars.spacing.sm}`,
+  fontSize: `calc(${vars.typography.fontSize} + 1px)`,
+  borderRadius: vars.radii.card,
+});
+
+globalStyle(`${lg(' .zylem-toolbox-btn-icon')}, ${lg(' .zylem-toolbox-btn-icon svg')}`, {
+  width: '32px',
+  height: '32px',
+});
+
+globalStyle(xl(), {
+  minHeight: '120px',
+  gap: vars.spacing.md,
+  padding: `${vars.spacing.xl} ${vars.spacing.md}`,
+  fontSize: `calc(${vars.typography.fontSize} + 2px)`,
+  borderRadius: vars.radii.card,
+});
+
+globalStyle(`${xl(' .zylem-toolbox-btn-icon')}, ${xl(' .zylem-toolbox-btn-icon svg')}`, {
+  width: '40px',
+  height: '40px',
+});
+
+globalStyle('.zylem-toolbox-grid', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.sm,
+  minWidth: 0,
+});
+
+globalStyle('.zylem-toolbox-grid-label', artCaption);
+
+globalStyle('.zylem-toolbox-grid-items', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(var(--zylem-toolbox-columns, 2), minmax(0, 1fr))',
+  gap: vars.spacing.sm,
+});