/* ========================================================================== COLORS — IBM Carbon Design System -------------------------------------------------------------------------- Two layers: 1. PALETTE — the raw IBM Color swatches (--blue-60, --gray-100, …). These are the literal hex values; never hard-code a hex in a design, reference these instead. 2. SEMANTIC — Carbon's role-based tokens (--cds-text-primary, --cds-layer-01…). These are what you actually build with. They re-map per theme. Default theme on :root is g10 (White / light). Switch to dark by setting data-carbon-theme="g100" (or g90) on a wrapper element or . ========================================================================== */ :root { /* ---- PALETTE: Blue (the IBM signature) ---- */ --blue-10: #edf5ff; --blue-20: #d0e2ff; --blue-30: #a6c8ff; --blue-40: #78a9ff; --blue-50: #4589ff; --blue-60: #0f62fe; /* IBM Blue — the brand anchor */ --blue-70: #0043ce; --blue-80: #002d9c; --blue-90: #001d6c; --blue-100: #001141; /* ---- PALETTE: Gray (neutral) ---- */ --gray-10: #f4f4f4; --gray-20: #e0e0e0; --gray-30: #c6c6c6; --gray-40: #a8a8a8; --gray-50: #8d8d8d; --gray-60: #6f6f6f; --gray-70: #525252; --gray-80: #393939; --gray-90: #262626; --gray-100: #161616; /* Carbon's near-black UI background */ /* ---- PALETTE: Cool Gray ---- */ --cool-gray-10: #f2f4f8; --cool-gray-20: #dde1e6; --cool-gray-30: #c1c7cd; --cool-gray-40: #a2a9b0; --cool-gray-50: #878d96; --cool-gray-60: #697077; --cool-gray-70: #4d5358; --cool-gray-80: #343a3f; --cool-gray-90: #21272a; --cool-gray-100: #121619; /* ---- PALETTE: Warm Gray ---- */ --warm-gray-10: #f7f3f2; --warm-gray-50: #8f8b8b; --warm-gray-100: #171414; /* ---- PALETTE: Support hues ---- */ --red-10: #fff1f1; --red-30: #ffb3b8; --red-40: #ff8389; --red-50: #fa4d56; --red-60: #da1e28; --red-70: #a2191f; --red-80: #750e13; --magenta-30: #ffafd2; --magenta-50: #ee5396; --magenta-60: #d02670; --magenta-70: #9f1853; --purple-30: #d4bbff; --purple-40: #be95ff; --purple-50: #a56eff; --purple-60: #8a3ffc; --purple-70: #6929c4; --cyan-30: #82cfff; --cyan-40: #33b1ff; --cyan-50: #1192e8; --cyan-60: #0072c3; --cyan-70: #00539a; --teal-30: #3ddbd9; --teal-40: #08bdba; --teal-50: #009d9a; --teal-60: #007d79; --teal-70: #005d5d; --green-20: #a7f0ba; --green-30: #6fdc8c; --green-40: #42be65; --green-50: #24a148; --green-60: #198038; --green-70: #0e6027; --yellow-20: #fddc69; --yellow-30: #f1c21b; --yellow-40: #d2a106; --orange-30: #ffb784; --orange-40: #ff832b; --orange-50: #eb6200; --orange-60: #ba4e00; /* ---- Constants ---- */ --black: #000000; --white: #ffffff; /* ===================================================================== SEMANTIC TOKENS — g10 (White / light theme) — DEFAULT ===================================================================== */ /* Background */ --cds-background: #f4f4f4; --cds-background-inverse: #393939; --cds-background-brand: #0f62fe; --cds-background-hover: rgba(141, 141, 141, 0.12); --cds-background-active: rgba(141, 141, 141, 0.5); --cds-background-selected: rgba(141, 141, 141, 0.2); --cds-background-selected-hover: rgba(141, 141, 141, 0.32); /* Layer — stacked surfaces (cards, modals, nested panels) */ --cds-layer-01: #ffffff; --cds-layer-02: #f4f4f4; --cds-layer-03: #ffffff; --cds-layer-hover-01: #e8e8e8; --cds-layer-hover-02: #e8e8e8; --cds-layer-selected-01: #e0e0e0; --cds-layer-active-01: #c6c6c6; --cds-layer-accent-01: #e0e0e0; --cds-layer-accent-hover-01: #d1d1d1; /* Field — input backgrounds */ --cds-field-01: #ffffff; --cds-field-02: #f4f4f4; --cds-field-hover-01: #e8e8e8; /* Border */ --cds-border-subtle-00: #c6c6c6; --cds-border-subtle-01: #e0e0e0; --cds-border-subtle-02: #c6c6c6; --cds-border-strong-01: #8d8d8d; --cds-border-strong-02: #8d8d8d; --cds-border-inverse: #161616; --cds-border-interactive: #0f62fe; --cds-border-disabled: #c6c6c6; --cds-border-tile-01: #a8a8a8; /* Text */ --cds-text-primary: #161616; --cds-text-secondary: #525252; --cds-text-placeholder: rgba(22, 22, 22, 0.4); --cds-text-helper: #6f6f6f; --cds-text-error: #da1e28; --cds-text-inverse: #ffffff; --cds-text-on-color: #ffffff; --cds-text-on-color-disabled: #8d8d8d; --cds-text-disabled: rgba(22, 22, 22, 0.25); /* Link */ --cds-link-primary: #0f62fe; --cds-link-primary-hover: #0043ce; --cds-link-secondary: #0043ce; --cds-link-visited: #8a3ffc; --cds-link-inverse: #78a9ff; /* Icon */ --cds-icon-primary: #161616; --cds-icon-secondary: #525252; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #ffffff; --cds-icon-interactive: #0f62fe; --cds-icon-disabled: rgba(22, 22, 22, 0.25); /* Support / status */ --cds-support-error: #da1e28; --cds-support-success: #24a148; --cds-support-warning: #f1c21b; --cds-support-info: #0043ce; --cds-support-caution-major: #ff832b; /* Interactive & misc */ --cds-interactive: #0f62fe; --cds-highlight: #d0e2ff; --cds-focus: #0f62fe; --cds-focus-inset: #ffffff; --cds-overlay: rgba(0, 0, 0, 0.5); --cds-toggle-off: #8d8d8d; --cds-skeleton-background: #e8e8e8; --cds-skeleton-element: #c6c6c6; /* Button-specific (Carbon component tokens) */ --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0050e6; --cds-button-primary-active: #002d9c; --cds-button-secondary: #393939; --cds-button-secondary-hover: #474747; --cds-button-secondary-active: #6f6f6f; --cds-button-tertiary: #0f62fe; --cds-button-tertiary-hover: #0050e6; --cds-button-danger: #da1e28; --cds-button-danger-hover: #b81922; --cds-button-danger-active: #750e13; --cds-button-disabled: #c6c6c6; --cds-button-separator: #e0e0e0; } /* ===================================================================== SEMANTIC TOKENS — g100 (Dark theme — the canonical Carbon dark) Apply with data-carbon-theme="g100" ===================================================================== */ [data-carbon-theme='g100'] { --cds-background: #161616; --cds-background-inverse: #f4f4f4; --cds-background-brand: #0f62fe; --cds-background-hover: rgba(141, 141, 141, 0.16); --cds-background-active: rgba(141, 141, 141, 0.4); --cds-background-selected: rgba(141, 141, 141, 0.24); --cds-background-selected-hover: rgba(141, 141, 141, 0.32); --cds-layer-01: #262626; --cds-layer-02: #393939; --cds-layer-03: #525252; --cds-layer-hover-01: #333333; --cds-layer-hover-02: #474747; --cds-layer-selected-01: #393939; --cds-layer-active-01: #525252; --cds-layer-accent-01: #393939; --cds-layer-accent-hover-01: #474747; --cds-field-01: #262626; --cds-field-02: #393939; --cds-field-hover-01: #333333; --cds-border-subtle-00: #393939; --cds-border-subtle-01: #525252; --cds-border-subtle-02: #6f6f6f; --cds-border-strong-01: #6f6f6f; --cds-border-strong-02: #8d8d8d; --cds-border-inverse: #f4f4f4; --cds-border-interactive: #4589ff; --cds-border-disabled: rgba(141, 141, 141, 0.5); --cds-border-tile-01: #525252; --cds-text-primary: #f4f4f4; --cds-text-secondary: #c6c6c6; --cds-text-placeholder: rgba(244, 244, 244, 0.4); --cds-text-helper: #a8a8a8; --cds-text-error: #ff8389; --cds-text-inverse: #161616; --cds-text-on-color: #ffffff; --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25); --cds-text-disabled: rgba(244, 244, 244, 0.25); --cds-link-primary: #78a9ff; --cds-link-primary-hover: #a6c8ff; --cds-link-secondary: #a6c8ff; --cds-link-visited: #be95ff; --cds-link-inverse: #0f62fe; --cds-icon-primary: #f4f4f4; --cds-icon-secondary: #c6c6c6; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #161616; --cds-icon-interactive: #ffffff; --cds-icon-disabled: rgba(244, 244, 244, 0.25); --cds-support-error: #fa4d56; --cds-support-success: #42be65; --cds-support-warning: #f1c21b; --cds-support-info: #4589ff; --cds-support-caution-major: #ff832b; --cds-interactive: #4589ff; --cds-highlight: #001d6c; --cds-focus: #ffffff; --cds-focus-inset: #161616; --cds-overlay: rgba(0, 0, 0, 0.6); --cds-toggle-off: #6f6f6f; --cds-skeleton-background: #292929; --cds-skeleton-element: #393939; --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0353e9; --cds-button-primary-active: #002d9c; --cds-button-secondary: #6f6f6f; --cds-button-secondary-hover: #5e5e5e; --cds-button-secondary-active: #393939; --cds-button-tertiary: #ffffff; --cds-button-tertiary-hover: #f4f4f4; --cds-button-danger: #da1e28; --cds-button-danger-hover: #b81922; --cds-button-danger-active: #750e13; --cds-button-disabled: rgba(141, 141, 141, 0.5); --cds-button-separator: #161616; }