richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d02d64b61caea3c3048922005790d89c0bd23e05
ADS3-Design-System/src/tokens/tokens.css
Richie d915443b8c Align design system with ADS 3.0 and add new components 
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>
2026-06-03 14:24:23 +10:00

213 lines
6.7 KiB
CSS
Raw Blame History

@theme {
/* Typography - Font Family */
--font-sans: 'Public Sans Variable', system-ui, sans-serif;
/* Typography - Font Sizes & Line Heights */
--text-h1: 48px;
--text-h1--line-height: 1.25;
--text-h2: 32px;
--text-h2--line-height: 1.25;
--text-h3: 24px;
--text-h3--line-height: 1.333;
--text-h4: 20px;
--text-h4--line-height: 1.4;
--text-h5: 16px;
--text-h5--line-height: 1.5;
--text-h6: 14px;
--text-h6--line-height: 1.43;
--text-intro: 20px;
--text-intro--line-height: 1.4;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-small: 14px;
--text-small--line-height: 1.357;
--text-caption: 12px;
--text-caption--line-height: 1.5;
/* Blues */
--color-blue-01: #002664;
--color-blue-02: #146CFD;
--color-blue-03: #8CE0FF;
--color-blue-04: #CBEDFD;
/* Reds */
--color-red-01: #630019;
--color-red-02: #D7153A;
--color-red-03: #FFB8C1;
--color-red-04: #FFE6EA;
/* Oranges */
--color-orange-01: #941B00;
--color-orange-02: #F3631B;
--color-orange-03: #FFCE99;
--color-orange-04: #FDEDDF;
/* Greens */
--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: #495054;
--color-grey-03: #CDD3D6;
--color-grey-04: #EBEBEB;
--color-grey-05: #F2F2F2;
--color-white: #FFFFFF;
/* Semantic Aliases */
--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-grey-05);
--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-grey-05);
/* Button */
--color-button-default: var(--color-blue-01);
--color-button-danger: var(--color-red-02);
--color-button-neutral: var(--color-grey-01);
--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);
--color-badge-info-light: var(--color-blue-04);
--color-badge-success: var(--color-green-02);
--color-badge-success-light: var(--color-green-04);
--color-badge-error: var(--color-red-02);
--color-badge-error-light: var(--color-red-04);
--color-badge-warning: var(--color-orange-02);
--color-badge-warning-light: var(--color-orange-04);
--color-badge-neutral: var(--color-grey-04);
--color-badge-on-success-light: var(--color-green-01);
--color-badge-on-error-light: var(--color-red-01);
--color-badge-on-warning-light: var(--color-orange-01);
/* Chip */
--color-chip-border: var(--color-blue-01);
--color-chip-text: var(--color-blue-01);
--color-chip-bg: var(--color-white);
--color-chip-selected-bg: var(--color-blue-01);
--color-chip-selected-text: var(--color-white);
/* Tag */
--color-tag-navy: var(--color-blue-01);
--color-tag-navy-light: color-mix(in srgb, var(--color-blue-01) 10%, transparent);
--color-tag-blue: var(--color-blue-02);
--color-tag-blue-light: var(--color-blue-04);
--color-tag-green: var(--color-green-01);
--color-tag-green-light: var(--color-green-04);
--color-tag-red: var(--color-red-02);
--color-tag-red-light: var(--color-red-04);
--color-tag-orange: var(--color-orange-02);
--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-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-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-grey-05);
--color-alert-neutral-border: var(--color-grey-03);
--color-alert-neutral-icon: var(--color-blue-01);
/* Radius */
--radius-sm: 4px;
--radius-default: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-default: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
Reference in New Issue View Git Blame Copy Permalink