feat(theme): update colors to the new Io design system

[tegan-temporal]

Description & motivation 💭

Linear: FE-203 – Update Colors

Updates the UI color tokens and component styling to the new Io design system, aligned with the current Figma definitions. The migration also introduces a concise property-aware Tailwind API.

Color system

• adds the current primitive, alpha, semantic color, and semantic opacity tokens from Figma
• aligns neutral overlays to the current 5%/10%/15% Figma scale, with overlay.primary used for striped table cells
• defines background, surface, content, border, interactive, actions, and overlay semantic families
• emits semantic CSS variables such as --color-content-primary and --color-surface-primary
• exposes property-aware utilities such as text-primary, bg-surface-primary, border-primary, ring-interactive-primary, and bg-indigo-9
• adds the verified static content tokens, surface.static.neutral, and opacity-disabled
• removes the legacy io-* utility and --color-io-* variable namespace
• removes obsolete surface.table-header, surface.code-block, content.code-block, and content.code-block-accent aliases
• adds a repository-wide audit for removed, legacy, Tailwind-default, and property-invalid color utilities

--color-io-content-primary         → --color-content-primary
text-io-content-primary            → text-primary
bg-io-surface-primary              → bg-surface-primary
border-io-border-primary           → border-primary
ring-io-interactive-primary        → ring-interactive-primary
ring-offset-io-background-primary  → ring-offset-background-primary
bg-io-indigo-9                     → bg-indigo-9

Component styling

Figma-backed color and state updates cover Button, Icon Button, Checkbox, Radio, Toggle Switch, Toggle Button, Menu, Dropdown, Select, Link, Toast, Alert, Progress Bar, Input, Number Input, Textarea, Tabs, Chip, Calendar, Date Picker, Accordion, Tooltip, Card, Badge, Count Badge, Status Badge, Code Block, Markdown Editor, Table, and Primary Navigation items.

Status badges use semantic surfaces, content, and borders; joined status segments omit internal border dividers, running heartbeats stay inside their layout slot, and saved-view task failures use the danger treatment. Alert lead icons follow their intent, count badges use the compact content-sized treatment, shared tables use the Figma overlay.primary stripe, and page-level search fields use surface.primary when rendered directly on the application background.

Buttons use the current primary, secondary, and tertiary interaction-state tokens, including alpha-based secondary and tertiary hover and press treatments.

Divider, Modal, Drawer, and Split Button were audited and already matched their semantic colors or inherit migrated primitives. Components without a structurally matching implementation were left unchanged.

Primary navigation now follows the current Figma design in both themes, using semantic surface, border, content, brand, hover, and pressed tokens. OSS and Cloud navigation shells are theme-aware; Cloud no longer uses the fixed indigo gradient.

Design conventions 🎨

background.primary canvas
└── surface.* opaque component/container body
    └── overlay.* true-alpha nested or composited treatment

• focus rings use interactive semantics with component-appropriate offsets
• validation borders and rings use danger semantics
• hover and pressed treatments use action overlays where specified
• fixed white/black foregrounds remain fixed colors
• categorical visualization, fixed artwork, branding, and operational colors retain primitives where semantic tokens are not appropriate

Figma sources:

• Color tokens: https://www.figma.com/design/4j6ZH2Fvoh74MPz19e3YyC/Io-Design-Library?node-id=1180-2416&m=dev
• Components: https://www.figma.com/design/4j6ZH2Fvoh74MPz19e3YyC/Io-Design-Library?node-id=1096-238&m=dev

Testing 🧪

• repository-wide color audit: passed with no violations
• pnpm check: 0 errors, 118 existing warnings
• pnpm lint: passed with 57 existing warnings
• targeted semantic API, CodeMirror, and component tests: 16 passed
• targeted overlay and catalog table tests: 18 passed
• full test suite: 3,039 passed, 2 skipped
• package build: passed
• Svelte autofixer: passed for all changed Svelte components
• git diff --check: passed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview	Aug 27, 2026 6:21pm