/** * AffordableBundle Design System — Color Tokens * Generated from design-tokens/color-tokens.md * Material Design 3 token spec * * Usage: import this file once, then use var(--md-sys-color-*) anywhere. */ /* ═══════════════════════════════════════════════════════════════════ PALETTE — raw scale values (use roles below instead where possible) ═══════════════════════════════════════════════════════════════════ */ :root { /* Key */ --md-key-color-primary: hsl(221, 83%, 53%); --md-key-color-secondary: hsl(25, 95%, 53%); --md-key-color-tertiary: hsl(360, 100%, 35%); --md-key-color-neutral: hsl(276, 2%, 54%); --md-key-color-neutral-variant: hsl(260, 0%, 80%); /* Primary palette */ --md-ref-palette-primary0: hsl(0, 0%, 0%); --md-ref-palette-primary10: hsl(222, 100%, 15%); --md-ref-palette-primary20: hsl(219, 100%, 23%); --md-ref-palette-primary30: hsl(218, 100%, 33%); --md-ref-palette-primary40: hsl(217, 100%, 43%); --md-ref-palette-primary50: hsl(222, 92%, 58%); --md-ref-palette-primary60: hsl(224, 100%, 69%); --md-ref-palette-primary70: hsl(225, 100%, 77%); --md-ref-palette-primary80: hsl(226, 100%, 85%); --md-ref-palette-primary87: hsl(228, 100%, 91%); --md-ref-palette-primary90: hsl(230, 100%, 93%); --md-ref-palette-primary92: hsl(231, 100%, 95%); --md-ref-palette-primary94: hsl(234, 100%, 96%); --md-ref-palette-primary95: hsl(233, 100%, 97%); --md-ref-palette-primary96: hsl(235, 100%, 97%); --md-ref-palette-primary98: hsl(257, 100%, 99%); --md-ref-palette-primary99: hsl(285, 100%, 99%); --md-ref-palette-primary100: hsl(0, 0%, 100%); /* Secondary palette */ --md-ref-palette-secondary0: hsl(0, 0%, 0%); --md-ref-palette-secondary10: hsl(20, 100%, 10%); --md-ref-palette-secondary20: hsl(24, 100%, 16%); --md-ref-palette-secondary30: hsl(25, 100%, 23%); --md-ref-palette-secondary40: hsl(26, 100%, 31%); --md-ref-palette-secondary50: hsl(26, 100%, 38%); --md-ref-palette-secondary60: hsl(26, 97%, 47%); --md-ref-palette-secondary70: hsl(22, 100%, 64%); --md-ref-palette-secondary80: hsl(21, 100%, 78%); --md-ref-palette-secondary87: hsl(20, 100%, 86%); --md-ref-palette-secondary90: hsl(19, 100%, 90%); --md-ref-palette-secondary92: hsl(19, 100%, 92%); --md-ref-palette-secondary94: hsl(19, 100%, 94%); --md-ref-palette-secondary95: hsl(17, 100%, 95%); --md-ref-palette-secondary96: hsl(18, 100%, 96%); --md-ref-palette-secondary98: hsl(13, 100%, 98%); --md-ref-palette-secondary99: hsl(300, 100%, 99%); --md-ref-palette-secondary100: hsl(0, 0%, 100%); /* Tertiary palette */ --md-ref-palette-tertiary0: hsl(0, 0%, 0%); --md-ref-palette-tertiary10: hsl(0, 100%, 13%); --md-ref-palette-tertiary20: hsl(0, 100%, 21%); --md-ref-palette-tertiary30: hsl(0, 100%, 29%); --md-ref-palette-tertiary40: hsl(3, 93%, 39%); --md-ref-palette-tertiary50: hsl(5, 77%, 51%); --md-ref-palette-tertiary60: hsl(6, 100%, 63%); --md-ref-palette-tertiary70: hsl(8, 100%, 74%); --md-ref-palette-tertiary80: hsl(8, 100%, 83%); --md-ref-palette-tertiary87: hsl(9, 100%, 89%); --md-ref-palette-tertiary90: hsl(8, 100%, 92%); --md-ref-palette-tertiary92: hsl(9, 100%, 93%); --md-ref-palette-tertiary94: hsl(7, 100%, 95%); --md-ref-palette-tertiary95: hsl(9, 100%, 96%); --md-ref-palette-tertiary96: hsl(7, 100%, 97%); --md-ref-palette-tertiary98: hsl(13, 100%, 98%); --md-ref-palette-tertiary99: hsl(300, 100%, 99%); --md-ref-palette-tertiary100: hsl(0, 0%, 100%); /* Neutral palette */ --md-ref-palette-neutral0: hsl(0, 0%, 0%); --md-ref-palette-neutral10: hsl(255, 7%, 11%); --md-ref-palette-neutral20: hsl(255, 4%, 20%); --md-ref-palette-neutral30: hsl(270, 3%, 28%); --md-ref-palette-neutral40: hsl(276, 3%, 37%); --md-ref-palette-neutral50: hsl(276, 2%, 47%); --md-ref-palette-neutral60: hsl(276, 2%, 57%); --md-ref-palette-neutral70: hsl(276, 3%, 68%); --md-ref-palette-neutral80: hsl(288, 5%, 78%); --md-ref-palette-neutral87: hsl(288, 7%, 86%); --md-ref-palette-neutral90: hsl(300, 9%, 89%); --md-ref-palette-neutral92: hsl(288, 12%, 92%); --md-ref-palette-neutral94: hsl(290, 19%, 94%); --md-ref-palette-neutral95: hsl(290, 23%, 95%); --md-ref-palette-neutral96: hsl(290, 30%, 96%); --md-ref-palette-neutral98: hsl(300, 56%, 98%); --md-ref-palette-neutral99: hsl(300, 100%, 99%); --md-ref-palette-neutral100: hsl(0, 0%, 100%); /* Neutral-Variant palette */ --md-ref-palette-neutral-variant0: hsl(0, 0%, 0%); --md-ref-palette-neutral-variant10: hsl(180, 4%, 11%); --md-ref-palette-neutral-variant20: hsl(180, 2%, 19%); --md-ref-palette-neutral-variant30: hsl(180, 1%, 28%); --md-ref-palette-neutral-variant40: hsl(210, 1%, 37%); --md-ref-palette-neutral-variant50: hsl(180, 0%, 46%); --md-ref-palette-neutral-variant60: hsl(180, 0%, 57%); --md-ref-palette-neutral-variant70: hsl(0, 0%, 67%); --md-ref-palette-neutral-variant80: hsl(0, 0%, 78%); --md-ref-palette-neutral-variant87: hsl(0, 0%, 85%); --md-ref-palette-neutral-variant90: hsl(0, 2%, 89%); --md-ref-palette-neutral-variant92: hsl(0, 0%, 91%); --md-ref-palette-neutral-variant94: hsl(0, 0%, 93%); --md-ref-palette-neutral-variant95: hsl(0, 3%, 94%); --md-ref-palette-neutral-variant96: hsl(0, 4%, 95%); --md-ref-palette-neutral-variant98: hsl(0, 9%, 98%); --md-ref-palette-neutral-variant99: hsl(0, 20%, 99%); --md-ref-palette-neutral-variant100: hsl(0, 0%, 100%); } /* ═══════════════════════════════════════════════════════════════════ LIGHT THEME ROLES (default) ═══════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --md-sys-color-primary: hsl(221, 83%, 53%); --md-sys-color-on-primary: hsl(0, 0%, 100%); --md-sys-color-primary-container: hsl(226, 100%, 85%); --md-sys-color-on-primary-container: hsl(218, 100%, 33%); --md-sys-color-secondary: hsl(26, 100%, 31%); --md-sys-color-on-secondary: hsl(0, 0%, 100%); --md-sys-color-secondary-container: hsl(21, 100%, 78%); --md-sys-color-on-secondary-container: hsl(25, 100%, 23%); --md-sys-color-tertiary: hsl(3, 93%, 39%); --md-sys-color-on-tertiary: hsl(0, 0%, 100%); --md-sys-color-tertiary-container: hsl(8, 100%, 83%); --md-sys-color-on-tertiary-container: hsl(0, 100%, 29%); --md-sys-color-error: hsl(3, 93%, 39%); --md-sys-color-on-error: hsl(0, 0%, 100%); --md-sys-color-error-container: hsl(8, 100%, 83%); --md-sys-color-on-error-container: hsl(0, 100%, 29%); --md-sys-color-background: hsl(220, 20%, 97%); --md-sys-color-on-background: hsl(220, 30%, 15%); --md-sys-color-surface: hsl(0, 0%, 100%); --md-sys-color-on-surface: hsl(220, 30%, 15%); --md-sys-color-surface-variant: hsl(220, 20%, 94%); --md-sys-color-on-surface-variant: hsl(220, 25%, 35%); --md-sys-color-outline: hsl(220, 15%, 65%); --md-sys-color-outline-variant: hsl(220, 20%, 88%); --md-sys-color-inverse-surface: hsl(255, 4%, 20%); --md-sys-color-inverse-on-surface: hsl(290, 23%, 95%); --md-sys-color-inverse-primary: hsl(226, 100%, 85%); --md-sys-color-surface-dim: hsl(220, 20%, 88%); --md-sys-color-surface-bright: hsl(0, 0%, 100%); --md-sys-color-surface-container-lowest: hsl(0, 0%, 100%); --md-sys-color-surface-container-low: hsl(220, 25%, 98%); --md-sys-color-surface-container: hsl(220, 20%, 96%); --md-sys-color-surface-container-high: hsl(220, 20%, 94%); --md-sys-color-surface-container-highest:hsl(220, 20%, 90%); /* Convenience aliases */ --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-bg: var(--md-sys-color-background); --color-on-bg: var(--md-sys-color-on-background); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-outline: var(--md-sys-color-outline); --color-outline-var: var(--md-sys-color-outline-variant); /* Login page styles */ --login-bg-1: var(--md-ref-palette-primary95); --login-bg-2: var(--md-ref-palette-primary90); --login-radial-opacity: 0.05; --login-logo-text: var(--md-sys-color-primary); --login-logo-subtext: var(--md-sys-color-on-surface-variant); } /* ═══════════════════════════════════════════════════════════════════ DARK THEME ROLES ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-sys-color-primary: hsl(221, 83%, 53%); --md-sys-color-on-primary: hsl(219, 100%, 23%); --md-sys-color-primary-container: hsl(218, 100%, 33%); --md-sys-color-on-primary-container: hsl(230, 100%, 93%); --md-sys-color-secondary: hsl(21, 100%, 78%); --md-sys-color-on-secondary: hsl(24, 100%, 16%); --md-sys-color-secondary-container: hsl(25, 100%, 23%); --md-sys-color-on-secondary-container: hsl(19, 100%, 90%); --md-sys-color-tertiary: hsl(8, 100%, 83%); --md-sys-color-on-tertiary: hsl(0, 100%, 21%); --md-sys-color-tertiary-container: hsl(0, 100%, 29%); --md-sys-color-on-tertiary-container: hsl(8, 100%, 92%); --md-sys-color-error: hsl(8, 100%, 83%); --md-sys-color-on-error: hsl(0, 100%, 21%); --md-sys-color-error-container: hsl(0, 100%, 29%); --md-sys-color-on-error-container: hsl(8, 100%, 92%); --md-sys-color-background: hsl(255, 7%, 11%); --md-sys-color-on-background: hsl(300, 9%, 89%); --md-sys-color-surface: hsl(255, 7%, 11%); --md-sys-color-on-surface: hsl(300, 9%, 89%); --md-sys-color-surface-variant: hsl(180, 1%, 28%); --md-sys-color-on-surface-variant: hsl(0, 0%, 78%); --md-sys-color-outline: hsl(180, 0%, 57%); --md-sys-color-outline-variant: hsl(180, 1%, 28%); --md-sys-color-inverse-surface: hsl(300, 9%, 89%); --md-sys-color-inverse-on-surface: hsl(255, 4%, 20%); --md-sys-color-inverse-primary: hsl(217, 100%, 43%); --md-sys-color-surface-dim: hsl(255, 7%, 11%); --md-sys-color-surface-bright: hsl(270, 3%, 28%); --md-sys-color-surface-container-lowest: hsl(255, 7%, 11%); --md-sys-color-surface-container-low: hsl(255, 7%, 11%); --md-sys-color-surface-container: hsl(255, 4%, 20%); --md-sys-color-surface-container-high: hsl(270, 3%, 28%); --md-sys-color-surface-container-highest:hsl(276, 3%, 37%); /* Convenience aliases */ --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-bg: var(--md-sys-color-background); --color-on-bg: var(--md-sys-color-on-background); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-outline: var(--md-sys-color-outline); --color-outline-var: var(--md-sys-color-outline-variant); /* Login page styles */ --login-bg-1: var(--md-ref-palette-primary10); --login-bg-2: var(--md-ref-palette-primary20); --login-radial-opacity: 0.15; --login-logo-text: #ffffff; --login-logo-subtext: rgba(255, 255, 255, 0.8); } } [data-theme="dark"] { --md-sys-color-primary: hsl(221, 83%, 53%); --md-sys-color-on-primary: hsl(219, 100%, 23%); --md-sys-color-primary-container: hsl(218, 100%, 33%); --md-sys-color-on-primary-container: hsl(230, 100%, 93%); --md-sys-color-secondary: hsl(21, 100%, 78%); --md-sys-color-on-secondary: hsl(24, 100%, 16%); --md-sys-color-secondary-container: hsl(25, 100%, 23%); --md-sys-color-on-secondary-container: hsl(19, 100%, 90%); --md-sys-color-tertiary: hsl(8, 100%, 83%); --md-sys-color-on-tertiary: hsl(0, 100%, 21%); --md-sys-color-tertiary-container: hsl(0, 100%, 29%); --md-sys-color-on-tertiary-container: hsl(8, 100%, 92%); --md-sys-color-error: hsl(8, 100%, 83%); --md-sys-color-on-error: hsl(0, 100%, 21%); --md-sys-color-error-container: hsl(0, 100%, 29%); --md-sys-color-on-error-container: hsl(8, 100%, 92%); --md-sys-color-background: hsl(255, 7%, 11%); --md-sys-color-on-background: hsl(300, 9%, 89%); --md-sys-color-surface: hsl(255, 7%, 11%); --md-sys-color-on-surface: hsl(300, 9%, 89%); --md-sys-color-surface-variant: hsl(180, 1%, 28%); --md-sys-color-on-surface-variant: hsl(0, 0%, 78%); --md-sys-color-outline: hsl(180, 0%, 57%); --md-sys-color-outline-variant: hsl(180, 1%, 28%); --md-sys-color-inverse-surface: hsl(300, 9%, 89%); --md-sys-color-inverse-on-surface: hsl(255, 4%, 20%); --md-sys-color-inverse-primary: hsl(217, 100%, 43%); --md-sys-color-surface-dim: hsl(255, 7%, 11%); --md-sys-color-surface-bright: hsl(270, 3%, 28%); --md-sys-color-surface-container-lowest: hsl(255, 7%, 11%); --md-sys-color-surface-container-low: hsl(255, 7%, 11%); --md-sys-color-surface-container: hsl(255, 4%, 20%); --md-sys-color-surface-container-high: hsl(270, 3%, 28%); --md-sys-color-surface-container-highest:hsl(276, 3%, 37%); /* Convenience aliases */ --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-bg: var(--md-sys-color-background); --color-on-bg: var(--md-sys-color-on-background); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-outline: var(--md-sys-color-outline); --color-outline-var: var(--md-sys-color-outline-variant); /* Login page styles */ --login-bg-1: var(--md-ref-palette-primary10); --login-bg-2: var(--md-ref-palette-primary20); --login-radial-opacity: 0.15; --login-logo-text: #ffffff; --login-logo-subtext: rgba(255, 255, 255, 0.8); }