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

Align design system with ADS 3.0 and add new components

Browse Source 
Token foundation: fix 16 palette colours to match official ADS_COLORS,
add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign
semantic tokens (primary=navy, info=bright blue), fix border radii to
8px base, add responsive heading typography.

Component migration: swap primary/info references across all existing
components, update Button (44px/semibold), Switch (green/compact),
Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag
(11 colours).

New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider,
RangeSlider, FileInput, DataTable, List, Autocomplete.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-06-03 14:24:23 +10:00
parent f4fd1fc04b
commit d915443b8c
45 changed files with 3029 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/tokens/tokens.css
View File

@@ -27,47 +27,76 @@
/* Blues */
--color-blue-01: #002664;
--color-blue-02: #146CFD;
--color-blue-03: #69B3E7;
--color-blue-03: #8CE0FF;
--color-blue-04: #CBEDFD;
--color-blue-05: #EBF5FF; /* extrapolated: ultra-light background */
/* Reds */
--color-red-01: #3E0014;
--color-red-01: #630019;
--color-red-02: #D7153A;
--color-red-03: #F5C5D0;
--color-red-04: #FDDDE5;
--color-red-05: #FFF5F8; /* extrapolated: ultra-light background */
--color-red-03: #FFB8C1;
--color-red-04: #FFE6EA;
/* Oranges */
--color-orange-01: #7A3300; /* extrapolated: dark */
--color-orange-02: #EC6608;
--color-orange-03: #F5B98A;
--color-orange-04: #FEF0E4; /* extrapolated: light background */
--color-orange-01: #941B00;
--color-orange-02: #F3631B;
--color-orange-03: #FFCE99;
--color-orange-04: #FDEDDF;
/* Greens */
--color-green-01: #005C35; /* extrapolated: dark */
--color-green-02: #00A651;
--color-green-03: #89E5B3;
--color-green-04: #E0F8EA; /* extrapolated: light background */
--color-green-01: #004000;
--color-green-02: #00AA45;
--color-green-03: #A8EDB3;
--color-green-04: #DBFADF;
/* Teals */
--color-teal-01: #0B3F47;
--color-teal-02: #2E808E;
--color-teal-03: #8CDBE5;
--color-teal-04: #D1EEEA;
/* Browns */
--color-brown-01: #523719;
--color-brown-02: #B68D5D;
--color-brown-03: #E8D0B5;
--color-brown-04: #EDE3D7;
/* Purples */
--color-purple-01: #441170;
--color-purple-02: #8055F1;
--color-purple-03: #CEBFFF;
--color-purple-04: #E6E1FD;
/* Fuchsias */
--color-fuchsia-01: #65004D;
--color-fuchsia-02: #D912AE;
--color-fuchsia-03: #F4B5E6;
--color-fuchsia-04: #FDDEF2;
/* Yellows */
--color-yellow-01: #694800;
--color-yellow-02: #FAAF05;
--color-yellow-03: #FDE79A;
--color-yellow-04: #FFF4CF;
/* Greys */
--color-grey-01: #22272B;
--color-grey-02: #6D7278;
--color-grey-03: #C0C0C0;
--color-grey-04: #E0E0E0;
--color-off-white: #F4F4F4;
--color-grey-02: #495054;
--color-grey-03: #CDD3D6;
--color-grey-04: #EBEBEB;
--color-grey-05: #F2F2F2;
--color-white: #FFFFFF;
/* Semantic Aliases */
--color-primary: var(--color-blue-02);
--color-primary-dark: var(--color-blue-01);
--color-primary: var(--color-blue-01);
--color-info: var(--color-blue-02);
--color-secondary: var(--color-blue-04);
--color-error: var(--color-red-02);
--color-success: var(--color-green-02);
--color-warning: var(--color-orange-02);
--color-text: var(--color-grey-01);
--color-text-secondary: var(--color-grey-02);
--color-border: var(--color-grey-04);
--color-bg: var(--color-off-white);
--color-bg: var(--color-grey-05);
--color-surface: var(--color-white);
/* Form Controls */
@@ -80,7 +109,7 @@
--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);
--color-control-bg-readonly: var(--color-grey-05);
/* Button */
--color-button-default: var(--color-blue-01);
@@ -89,6 +118,10 @@
--color-button-subtle-bg: var(--color-blue-04);
--color-button-subtle-text: var(--color-blue-01);
/* Switch */
--color-switch-on: var(--color-success);
--color-switch-on-hover: var(--color-green-01);
/* Badge */
--color-badge-navy: var(--color-blue-01);
--color-badge-info: var(--color-blue-02);
@@ -124,29 +157,53 @@
--color-tag-orange-light: var(--color-orange-04);
--color-tag-grey: var(--color-grey-02);
--color-tag-grey-light: var(--color-grey-04);
--color-tag-teal: var(--color-teal-01);
--color-tag-teal-light: var(--color-teal-04);
--color-tag-brown: var(--color-brown-01);
--color-tag-brown-light: var(--color-brown-04);
--color-tag-purple: var(--color-purple-01);
--color-tag-purple-light: var(--color-purple-04);
--color-tag-fuchsia: var(--color-fuchsia-01);
--color-tag-fuchsia-light: var(--color-fuchsia-04);
--color-tag-yellow: var(--color-yellow-01);
--color-tag-yellow-light: var(--color-yellow-04);
/* Avatar */
--color-avatar: var(--color-blue-04);
--color-avatar-text: var(--color-grey-01);
/* TopBar */
--color-topbar: var(--color-blue-01);
/* SideNav */
--color-nav-bg: var(--color-white);
--color-nav-text: var(--color-grey-01);
--color-nav-icon: var(--color-blue-01);
--color-nav-active: var(--color-info);
--color-nav-divider: var(--color-grey-03);
/* Alert */
--color-alert-info-bg: var(--color-blue-05);
--color-alert-info-bg: var(--color-blue-04);
--color-alert-info-border: var(--color-blue-02);
--color-alert-info-icon: var(--color-blue-02);
--color-alert-warning-bg: var(--color-orange-04);
--color-alert-warning-border: var(--color-orange-02);
--color-alert-warning-icon: var(--color-orange-02);
--color-alert-error-bg: var(--color-red-05);
--color-alert-error-bg: var(--color-red-04);
--color-alert-error-border: var(--color-red-02);
--color-alert-error-icon: var(--color-red-02);
--color-alert-success-bg: var(--color-green-04);
--color-alert-success-border: var(--color-green-02);
--color-alert-success-icon: var(--color-green-02);
--color-alert-neutral-bg: var(--color-off-white);
--color-alert-neutral-bg: var(--color-grey-05);
--color-alert-neutral-border: var(--color-grey-03);
--color-alert-neutral-icon: var(--color-blue-01);
/* Radius */
--radius-sm: 4px;
--radius-default: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-default: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Shadows */