@zylem/ui 0.1.0 → 0.2.0

package/src/components/TitleBar/TitleBar.tsx

@@ -0,0 +1,60 @@
+import { Show, splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { WindowControls, type WindowControlsProps } from '../WindowControls/WindowControls';
+
+export interface TitleBarProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title' | 'onClose'>,
+    WindowControlsProps {
+  title?: JSX.Element;
+  /** Smaller 32px bar for panel headers. */
+  compact?: boolean;
+  /** Show grab cursor for draggable bars. */
+  draggable?: boolean;
+  /** Extra content placed between the title and window controls. */
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass title bar: glossy molded glass strip with a title, optional
+ * extra chrome, and shared glass window controls.
+ */
+export function TitleBar(props: TitleBarProps) {
+  const [local, rest] = splitProps(props, [
+    'title',
+    'compact',
+    'draggable',
+    'children',
+    'onClose',
+    'onCollapse',
+    'collapsed',
+    'closeLabel',
+    'closeTestId',
+    'class',
+  ]);
+
+  const classes = () =>
+    [
+      'zylem-titlebar',
+      local.compact ? 'zylem-titlebar--compact' : '',
+      local.draggable ? 'zylem-titlebar--draggable' : '',
+      local.class ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+  return (
+    <div class={classes()} {...rest}>
+      <Show when={local.title}>
+        <span class="zylem-titlebar-title">{local.title}</span>
+      </Show>
+      {local.children}
+      <WindowControls
+        onClose={local.onClose}
+        onCollapse={local.onCollapse}
+        collapsed={local.collapsed}
+        closeLabel={local.closeLabel}
+        closeTestId={local.closeTestId}
+      />
+    </div>
+  );
+}

package/src/components/Toolbar/Toolbar.css.ts

@@ -0,0 +1,29 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Molded command strip: a glossy horizontal rail that toolbar buttons sit in.
+ * Owns the `.zylem-toolbar` class used by the editor.
+ */
+globalStyle('.zylem-toolbar', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  padding: vars.spacing.sm,
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.3)',
+  background:
+    'linear-gradient(180deg, rgba(130, 180, 230, 0.2), rgba(30, 60, 95, 0.28) 50%, rgba(8, 22, 38, 0.4))',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.35)',
+});
+
+globalStyle('.zylem-toolbar--vertical', {
+  flexDirection: 'column',
+});
+
+// Legacy hook: editor uses `.zylem-toolbar.separator` for a bottom rule.
+globalStyle('.zylem-toolbar.separator', {
+  borderBottom: '1px solid rgba(97, 166, 232, 0.4)',
+});

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,30 @@
+import { splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface ToolbarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass toolbar: molded glass command strip. Compose with
+ * `ToolbarButton` (and `Separator orientation="vertical"` between groups).
+ */
+export function Toolbar(props: ToolbarProps) {
+  const [local, rest] = splitProps(props, ['orientation', 'children', 'class']);
+
+  const classes = () =>
+    [
+      'zylem-toolbar',
+      local.orientation === 'vertical' ? 'zylem-toolbar--vertical' : '',
+      local.class ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+  return (
+    <div role="toolbar" class={classes()} {...rest}>
+      {local.children}
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Square glass icon button for toolbars — owns the `.zylem-toolbar-btn`
+ * class the editor already uses. Selected state uses the live-green jewel
+ * treatment.
+ */
+globalStyle('.zylem-toolbar-btn', {
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: vars.spacing.xs,
+  minWidth: '34px',
+  height: '34px',
+  padding: `0 ${vars.spacing.sm}`,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  cursor: 'pointer',
+  borderRadius: vars.radii.control,
+  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-toolbar-btn:hover', {
+  background: vars.material.buttonGlassHover,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
+});
+
+globalStyle('.zylem-toolbar-btn:active', {
+  transform: 'translateY(1px)',
+  filter: 'brightness(0.92)',
+  // CodePen-inspired press: compressed drop shadow + bright bottom rim flash.
+  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-toolbar-btn:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-toolbar-btn[data-selected], .zylem-toolbar-btn.selected', {
+  borderColor: 'rgba(20, 255, 60, 0.78)',
+  background: vars.material.buttonGlassActive,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+});
+
+globalStyle('.zylem-toolbar-btn[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-toolbar-btn svg', {
+  width: '18px',
+  height: '18px',
+  stroke: 'currentColor',
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.55))',
+});

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -0,0 +1,42 @@
+import { Button as KButton, Tooltip as KTooltip } from '@kobalte/core';
+import type { JSX } from 'solid-js';
+
+export interface ToolbarButtonProps {
+  label: string;
+  onClick?: (event: MouseEvent) => void;
+  selected?: boolean;
+  disabled?: boolean;
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * HyperGlass toolbar button: square glass icon button with a tooltip.
+ * Selected state renders as a live-green jewel.
+ */
+export function ToolbarButton(props: ToolbarButtonProps) {
+  return (
+    <KTooltip.Root openDelay={400}>
+      <KTooltip.Trigger as="span">
+        <KButton.Root
+          aria-label={props.label}
+          onClick={props.onClick}
+          disabled={props.disabled}
+          class={
+            props.class
+              ? `zylem-toolbar-btn ${props.class}`
+              : 'zylem-toolbar-btn'
+          }
+          data-selected={props.selected ? '' : undefined}
+        >
+          {props.children}
+        </KButton.Root>
+      </KTooltip.Trigger>
+      <KTooltip.Portal>
+        <KTooltip.Content class="zylem-tooltip">
+          {props.label}
+        </KTooltip.Content>
+      </KTooltip.Portal>
+    </KTooltip.Root>
+  );
+}

package/src/components/Tooltip/Tooltip.css.ts

@@ -0,0 +1,35 @@
+import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const enter = keyframes({
+  from: { opacity: 0, transform: 'translateY(4px)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
+
+globalStyle('.zylem-tooltip', {
+  position: 'relative',
+  zIndex: 10050,
+  maxWidth: '260px',
+  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.45)',
+  background: vars.material.glassPanelDark,
+  boxShadow:
+    '0 8px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12)',
+  backdropFilter: `blur(${vars.effects.blurSm}) saturate(1.15)`,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  letterSpacing: '0.02em',
+  pointerEvents: 'none',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.zylem-tooltip[data-enter]', {
+  animation: `${enter} 0.15s ${vars.motion.easeOut}`,
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,33 @@
+import { Tooltip as KTooltip } from '@kobalte/core';
+import type { JSX } from 'solid-js';
+
+export interface TooltipProps {
+  /** Tooltip body. */
+  content: JSX.Element;
+  /** Trigger element(s). */
+  children: JSX.Element;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  openDelay?: number;
+}
+
+/**
+ * HyperGlass tooltip: small floating glass sheet, portaled above page chrome
+ * so it is not trapped by local stacking contexts (grids, panels, etc.).
+ */
+export function Tooltip(props: TooltipProps) {
+  return (
+    <KTooltip.Root placement={props.placement} openDelay={props.openDelay ?? 400}>
+      <KTooltip.Trigger
+        as="span"
+        style={{ display: 'flex', width: '100%', height: '100%', 'min-width': 0 }}
+      >
+        {props.children}
+      </KTooltip.Trigger>
+      <KTooltip.Portal>
+        <KTooltip.Content class="zylem-tooltip">
+          {props.content}
+        </KTooltip.Content>
+      </KTooltip.Portal>
+    </KTooltip.Root>
+  );
+}

package/src/components/WindowControls/WindowControls.css.ts

@@ -0,0 +1,59 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-window-controls', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '7px',
+});
+
+/**
+ * Shared glass icon button used for all panel chrome: window controls,
+ * floating panels, and detached panels. `.floating-panel-button` is kept as
+ * an alias so existing panel markup shares this single definition.
+ */
+globalStyle('.zylem-window-control, .floating-panel-button', {
+  all: 'unset',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  minWidth: '18px',
+  height: '18px',
+  padding: '0 4px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '10px',
+  lineHeight: 1,
+  color: '#F4FAFF',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(255,255,255,0.38)',
+  background: vars.material.buttonGlass,
+  boxShadow:
+    'inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.4)',
+  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-window-control:hover, .floating-panel-button:hover', {
+  filter: 'brightness(1.2)',
+  transform: 'translateY(-1px)',
+});
+
+globalStyle('.zylem-window-control:active, .floating-panel-button:active', {
+  filter: 'brightness(0.9)',
+  transform: 'translateY(1px)',
+});
+
+globalStyle(
+  '.zylem-window-control:focus-visible, .floating-panel-button:focus-visible',
+  {
+    boxShadow: `inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.4), ${vars.effects.focusRing}`,
+  },
+);
+
+/** Close is neutral glass at rest and only turns accent on hover. */
+globalStyle('.zylem-window-control--close:hover', {
+  background: vars.colors.accent,
+  borderColor: 'rgba(255, 160, 150, 0.75)',
+  boxShadow: `inset 1px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 0 rgba(0,0,0,0.4), ${vars.effects.glowDanger}`,
+});

package/src/components/WindowControls/WindowControls.tsx

@@ -0,0 +1,51 @@
+import { Show } from 'solid-js';
+import PanelBottomClose from 'lucide-solid/icons/panel-bottom-close';
+import PanelBottomOpen from 'lucide-solid/icons/panel-bottom-open';
+import X from 'lucide-solid/icons/x';
+
+export interface WindowControlsProps {
+  onClose?: () => void;
+  onCollapse?: () => void;
+  /** Show the "expand" collapse icon when the panel is collapsed. */
+  collapsed?: boolean;
+  /** Accessible label/title for the close button (default "Close panel"). */
+  closeLabel?: string;
+  /** Forwarded as data-testid on the close button. */
+  closeTestId?: string;
+}
+
+/**
+ * Shared glass window controls: the same icon buttons used by floating and
+ * detached panels. Only controls with a handler are rendered.
+ */
+export function WindowControls(props: WindowControlsProps) {
+  return (
+    <Show when={props.onClose || props.onCollapse}>
+      <div class="zylem-window-controls" aria-label="Window controls">
+        <Show when={props.onCollapse}>
+          <button
+            type="button"
+            class="zylem-window-control zylem-window-control--collapse"
+            aria-label={props.collapsed ? 'Expand panel' : 'Collapse panel'}
+            title={props.collapsed ? 'Expand panel' : 'Collapse panel'}
+            onClick={() => props.onCollapse?.()}
+          >
+            {props.collapsed ? <PanelBottomOpen size={12} /> : <PanelBottomClose size={12} />}
+          </button>
+        </Show>
+        <Show when={props.onClose}>
+          <button
+            type="button"
+            class="zylem-window-control zylem-window-control--close"
+            aria-label={props.closeLabel ?? 'Close panel'}
+            title={props.closeLabel ?? 'Close panel'}
+            data-testid={props.closeTestId}
+            onClick={() => props.onClose?.()}
+          >
+            <X size={12} />
+          </button>
+        </Show>
+      </div>
+    </Show>
+  );
+}

package/src/components/index.ts

@@ -1,9 +1,70 @@
 /**
- * Solid component library surface for `@zylem/ui`.
+ * @zylem/ui component library — HyperGlass Solid components.
  *
- * Exposed as source via the `./components` subpath export so consumers
- * (editor, showcase, zylem-creator) compile the Solid JSX with their own
- * bundler (vite-plugin-solid). Requires the `@zylem/ui/styles.css`
- * bundle (or the `src/styles` barrel in dev) to be loaded for styling.
+ * Behavior comes from Kobalte primitives where available; visuals come from
+ * vanilla-extract recipes/styles driven by the Zylem token system.
  */
-export { Button, type ButtonProps } from './Button';
+
+// Primitives
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
+export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
+export { TextField, type TextFieldProps } from './TextField/TextField';
+export { NumberField, type NumberFieldProps } from './NumberField/NumberField';
+export { Select, type SelectProps, type SelectOption } from './Select/Select';
+export { Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
+export { Switch, type SwitchProps } from './Switch/Switch';
+export { Slider, type SliderProps } from './Slider/Slider';
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+} from './Tabs/Tabs';
+export {
+  Accordion,
+  type AccordionProps,
+  type AccordionItemConfig,
+} from './Accordion/Accordion';
+export { Tooltip, type TooltipProps } from './Tooltip/Tooltip';
+export {
+  DropdownMenu,
+  type DropdownMenuProps,
+  type DropdownMenuItemConfig,
+} from './DropdownMenu/DropdownMenu';
+export {
+  Dialog,
+  ConfirmDialog,
+  type DialogProps,
+  type ConfirmDialogProps,
+} from './Dialog/Dialog';
+export { Progress, type ProgressProps } from './Progress/Progress';
+export { Badge, type BadgeProps, type BadgeTone } from './Badge/Badge';
+export { Separator, type SeparatorProps } from './Separator/Separator';
+
+// Composites
+export { WindowControls, type WindowControlsProps } from './WindowControls/WindowControls';
+export { TitleBar, type TitleBarProps } from './TitleBar/TitleBar';
+export { Panel, type PanelProps } from './Panel/Panel';
+export { Toolbar, type ToolbarProps } from './Toolbar/Toolbar';
+export {
+  PropertyList,
+  PropertyRow,
+  type PropertyListProps,
+  type PropertyRowProps,
+} from './Property/Property';
+export { Console, type ConsoleProps } from './Console/Console';
+export {
+  Sidebar,
+  SidebarSection,
+  SidebarItem,
+  sidebarItemClass,
+  type SidebarProps,
+  type SidebarSectionProps,
+  type SidebarItemProps,
+} from './Sidebar/Sidebar';
+export { Card, type CardProps } from './Card/Card';
+export { SearchInput, type SearchInputProps } from './SearchInput/SearchInput';
+export { EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea/ScrollArea';
+export { Kbd, type KbdProps } from './Kbd/Kbd';

package/src/components/shared/field.css.ts

@@ -0,0 +1,60 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Shared HyperGlass "field" surface — the low-gloss inset glass used by
+ * text inputs, number fields, select triggers, and textareas.
+ */
+
+globalStyle('.zylem-field', {
+  boxSizing: 'border-box',
+  minHeight: '28px',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.32)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  padding: `0 ${vars.spacing.sm}`,
+  outline: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-field:focus, .zylem-field:focus-within', {
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+  borderColor: 'rgba(97, 166, 232, 0.6)',
+});
+
+globalStyle('.zylem-field::placeholder', {
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-field[disabled], .zylem-field[data-disabled]', {
+  opacity: 0.5,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-field-label', {
+  display: 'block',
+  fontSize: '11px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  marginBottom: vars.spacing.xxs,
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-field-error', {
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: vars.colors.accent,
+  fontFamily: vars.typography.fontFamily,
+  marginTop: vars.spacing.xxs,
+});
+
+globalStyle('.zylem-field-root', {
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 0,
+});

package/src/global/accordion.css.ts

@@ -1,8 +1,13 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
+/**
+ * HyperGlass accordion: flat minimal section headers over glass content
+ * regions. Shared by the editor's AccordionMenu markup and the library's
+ * Accordion component.
+ */
 globalStyle('.zylem-accordion', {
-  color: vars.colors.primary,
+  color: vars.colors.text,
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
@@ -13,16 +18,12 @@ globalStyle('.accordion-header', {
   position: 'sticky',
   top: 0,
   zIndex: 1,
-  transition: 'background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',
-});
-
-globalStyle('.accordion-header[data-expanded]', {
-  backgroundColor: vars.colors.primaryActive,
+  display: 'flex',
 });
 
 globalStyle('.accordion-item', {
   position: 'relative',
-  borderBottom: `1px solid ${vars.colors.primary}`,
+  borderBottom: '1px solid rgba(97, 166, 232, 0.22)',
   display: 'flex',
   flexDirection: 'column',
   minHeight: 0,
@@ -40,24 +41,37 @@ globalStyle('.accordion-item[data-expanded]', {
 });
 
 globalStyle('.accordion-trigger', {
+  boxSizing: 'border-box',
   width: '100%',
-  padding: vars.spacing.md,
+  flex: 1,
+  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: 'none',
+  gap: vars.spacing.sm,
   border: 'none',
-  color: vars.colors.primary,
+  background: 'transparent',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  fontWeight: 600,
+  letterSpacing: '0.03em',
   cursor: 'pointer',
-  transition: 'background-color 0.2s ease',
+  outline: 'none',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.accordion-trigger:hover', {
-  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  background: 'rgba(97, 166, 232, 0.08)',
 });
 
 globalStyle('.accordion-trigger[data-expanded]', {
-  backgroundColor: 'rgba(255, 255, 255, 0.05)',
+  background: 'rgba(97, 166, 232, 0.12)',
+  color: '#F4FAFF',
+});
+
+globalStyle('.accordion-trigger:focus-visible', {
+  boxShadow: vars.effects.focusRing,
 });
 
 globalStyle('.accordion-content', {
@@ -69,15 +83,15 @@ globalStyle('.accordion-content', {
 
 globalStyle('.accordion-trigger::after', {
   content: "'\\25BC'",
-  right: vars.spacing.lg,
   position: 'relative',
-  color: vars.colors.primary,
-  fontSize: '12px',
-  transition: 'transform 0.3s ease',
+  color: vars.colors.textSecondary,
+  fontSize: '10px',
+  transition: `transform ${vars.motion.normal} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.accordion-trigger[data-expanded]::after', {
   transform: 'rotate(180deg)',
+  color: '#F4FAFF',
 });
 
 globalStyle('.panel-content', {
@@ -85,5 +99,5 @@ globalStyle('.panel-content', {
   flexDirection: 'column',
   gap: vars.spacing.md,
   padding: vars.spacing.md,
-  color: vars.colors.primary,
+  color: vars.colors.text,
 });