richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Input, Checkbox, Radio, and Switch form components with semantic token layer

Browse Source 
Build four form primitives from Figma references with brand-aligned creative
decisions: restrained press states (scale-95 instead of highlight splashes),
clean iconless Switch, and consistent error states with inline warning icons.

Introduce form-control semantic tokens (--color-control-*) in tokens.css so
all form components share a single source for borders, checked states, focus
rings, labels, and errors. Retrofit Input to use these tokens instead of
direct palette references.

Update CLAUDE.md and ARCHITECTURE.md with token layer documentation, token
discipline rule (no palette references in components), and component tier
decision criteria.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-21 14:00:56 +10:00
parent 0e1b06b376
commit 07be9d7314
18 changed files with 1523 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/tokens/tokens.css
View File

@@ -70,6 +70,18 @@
--color-bg: var(--color-off-white);
--color-surface: var(--color-white);
/* Form Controls */
--color-control-border: var(--color-grey-03);
--color-control-border-hover: var(--color-grey-01);
--color-control-checked: var(--color-blue-01);
--color-control-checked-hover: var(--color-blue-02);
--color-control-focus-ring: var(--color-blue-04);
--color-control-label: var(--color-blue-01);
--color-control-description: var(--color-grey-02);
--color-control-error: var(--color-red-02);
--color-control-bg: var(--color-white);
--color-control-bg-readonly: var(--color-off-white);
/* Radius */
--radius-sm: 4px;
--radius-default: 6px;