/* =========================================================================== Indigo-Mint LMS — token layer =========================================================================== Ported from Docs/Indigo-Mint LMS Design System/tokens/*.css. This file is the single source of every colour, type step, space, radius, shadow and duration in the app. Nothing below is app logic: if a value here is wrong, it is wrong in the design system, and it gets fixed there first. Three deliberate departures from the shipped source, each noted at its site: 1. Fonts are self-hosted, not imported from the Google Fonts CDN. 2. Dark mode keys on [data-bs-theme="dark"] — the attribute this app's toggle actually sets — with the design system's own [data-theme="dark"] kept as an alias so snippets authored against it work unchanged. 3. A compatibility block at the end maps the previous theme's token names onto these, so ~140 existing views inherit the new look without edits. Load order matters: this file, then lms-components.css, then lms-theme.css. =========================================================================== */ /* --------------------------------------------------------------------------- Fonts Self-hosted rather than @import-ed from fonts.googleapis.com: an external font host is a render-blocking third-party dependency on every page and a privacy leak on a site used by school students. Inter was already local; Cairo and JetBrains Mono were downloaded from Google Fonts and unpacked beside it. The @font-face rules live in each family's own stylesheet, linked from the layouts — only the family variables belong here. --------------------------------------------------------------------------- */ :root { --lms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --lms-font-arabic: 'Cairo', 'Alexandria', 'Inter', -apple-system, sans-serif; --lms-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* Arabic pages swap the sans stack wholesale. Keyed on both dir and lang because the app sets dir="rtl" on and a future partial may only carry lang. */ [dir="rtl"], [lang="ar"] { --lms-font-sans: var(--lms-font-arabic); } /* --------------------------------------------------------------------------- Colour — base palette (literal brand values), then semantic aliases. Components use the semantic names. Reaching past them to a literal is how a palette drifts, and how dark mode silently stops working. --------------------------------------------------------------------------- */ :root { /* Primary brand & accent */ --lms-primary: #533afd; --lms-primary-hover: #432cd4; --lms-primary-press: #2e2b8c; --lms-primary-soft: #665efd; --lms-primary-bg-subdued: rgba(83, 58, 253, 0.08); --lms-primary-bg-subdued-hover: #b9b9f9; --lms-primary-glow: rgba(83, 58, 253, 0.15); /* Channel triplet for rgba() composition in views. The previous theme never defined this while 13 views already used it, so every icon tile written as rgba(var(--lms-primary-rgb), .12) resolved to nothing and rendered flat. */ --lms-primary-rgb: 83, 58, 253; --lms-mint-rgb: 12, 140, 94; /* Mint — completion & progress */ --lms-mint-success: #0c8c5e; --lms-mint-hover: #09704a; --lms-mint-soft: #e6f7f0; --lms-mint-border: #a7f3d0; /* Commercial accent & status */ --lms-orange-cta: #f97316; --lms-orange-cta-hover: #ea580c; --lms-orange-soft: #fff7ed; --lms-amber-warning: #d97706; --lms-amber-soft: #fef3c7; --lms-ruby-danger: #ea2261; --lms-ruby-danger-hover: #c81a52; --lms-ruby-soft: #fdf2f8; --lms-teal-teacher: #0d9488; --lms-teal-soft: #ccfbf1; /* Light neutrals — Mist & Slate */ --lms-ink-primary: #0d253d; --lms-ink-secondary: #273951; --lms-ink-mute: #50617a; --lms-ink-subtle: #839bc8; --lms-on-primary: #ffffff; --lms-canvas: #f8fafd; --lms-canvas-surface: #ffffff; --lms-canvas-surface-alt: #f1f5f9; --lms-canvas-dark: #061b31; --lms-canvas-dark-alt: #0b2544; --lms-border-hairline: #e2e8f0; --lms-border-input: #cbd5e1; --lms-border-focus: #533afd; /* Dark neutrals — Carbon & Void. Raw values; applied by the dark block. */ --lms-dark-canvas: #08090a; --lms-dark-surface: #0f1011; --lms-dark-surface-alt: #161718; --lms-dark-surface-elevated: #1e2022; --lms-dark-ink-primary: #eceaf6; --lms-dark-ink-secondary: #a2a0b0; --lms-dark-ink-mute: #62666d; --lms-dark-border-hairline: #23252a; --lms-dark-border-focus: #8b5cf6; --lms-dark-primary: #8b5cf6; --lms-dark-primary-hover: #7c3aed; --lms-dark-mint: #34d399; --lms-dark-orange: #fb923c; /* ---- Semantic aliases — use these ---- */ --lms-text-heading: var(--lms-ink-primary); --lms-text-body: var(--lms-ink-mute); --lms-text-strong: var(--lms-ink-secondary); --lms-text-subtle: var(--lms-ink-subtle); --lms-text-on-accent: var(--lms-on-primary); --lms-text-link: var(--lms-primary); --lms-text-link-hover: var(--lms-primary-hover); --lms-surface-page: var(--lms-canvas); --lms-surface-card: var(--lms-canvas-surface); --lms-surface-muted: var(--lms-canvas-surface-alt); --lms-surface-inverse: var(--lms-canvas-dark); --lms-surface-inverse-alt: var(--lms-canvas-dark-alt); --lms-surface-accent-soft: var(--lms-primary-bg-subdued); --lms-border-card: var(--lms-border-hairline); --lms-border-field: var(--lms-border-input); --lms-ring-focus: var(--lms-primary); --lms-state-success: var(--lms-mint-success); --lms-state-success-soft: var(--lms-mint-soft); --lms-state-warning: var(--lms-amber-warning); --lms-state-warning-soft: var(--lms-amber-soft); --lms-state-danger: var(--lms-ruby-danger); --lms-state-danger-soft: var(--lms-ruby-soft); --lms-state-info: var(--lms-primary); --lms-state-info-soft: var(--lms-primary-bg-subdued); --lms-scope-teacher: var(--lms-teal-teacher); --lms-scope-teacher-soft: var(--lms-teal-soft); --lms-accent-commerce: var(--lms-orange-cta); --lms-accent-commerce-soft: var(--lms-orange-soft); } /* --------------------------------------------------------------------------- Type scale — size / weight / line-height / tracking per step. --------------------------------------------------------------------------- */ :root { --lms-display-xxl-size: 56px; --lms-display-xxl-weight: 700; --lms-display-xxl-lh: 1.05; --lms-display-xxl-track: -0.025em; --lms-display-xl-size: 44px; --lms-display-xl-weight: 700; --lms-display-xl-lh: 1.1; --lms-display-xl-track: -0.02em; --lms-display-lg-size: 32px; --lms-display-lg-weight: 600; --lms-display-lg-lh: 1.15; --lms-display-lg-track: -0.015em; --lms-heading-lg-size: 24px; --lms-heading-lg-weight: 600; --lms-heading-lg-lh: 1.25; --lms-heading-lg-track: -0.01em; --lms-heading-md-size: 20px; --lms-heading-md-weight: 600; --lms-heading-md-lh: 1.3; --lms-heading-md-track: -0.01em; --lms-heading-sm-size: 18px; --lms-heading-sm-weight: 600; --lms-heading-sm-lh: 1.35; --lms-heading-sm-track: 0; --lms-body-lg-size: 16px; --lms-body-lg-weight: 400; --lms-body-lg-lh: 1.5; --lms-body-lg-track: 0; --lms-body-md-size: 15px; --lms-body-md-weight: 400; --lms-body-md-lh: 1.5; --lms-body-md-track: 0; --lms-body-sm-size: 14px; --lms-body-sm-weight: 400; --lms-body-sm-lh: 1.45; --lms-body-sm-track: 0; --lms-tabular-size: 14px; --lms-tabular-weight: 500; --lms-tabular-lh: 1.4; --lms-tabular-track: -0.01em; --lms-caption-size: 13px; --lms-caption-weight: 500; --lms-caption-lh: 1.4; --lms-caption-track: 0; --lms-micro-size: 11px; --lms-micro-weight: 600; --lms-micro-lh: 1.3; --lms-micro-track: 0.04em; --lms-weight-regular: 400; --lms-weight-medium: 500; --lms-weight-semibold: 600; --lms-weight-bold: 700; --lms-numeric-tabular: "tnum" 1; } /* --------------------------------------------------------------------------- Spacing, radii, shadows, motion --------------------------------------------------------------------------- */ :root { --lms-space-xxs: 2px; --lms-space-xs: 4px; --lms-space-sm: 8px; --lms-space-md: 12px; --lms-space-lg: 16px; --lms-space-xl: 24px; --lms-space-xxl: 32px; --lms-space-huge: 48px; --lms-space-massive: 64px; --lms-pad-card: 24px; --lms-pad-card-compact: 20px; --lms-pad-control: 10px 20px; --lms-pad-field: 10px 14px; --lms-pad-tree-header: 14px 18px; --lms-pad-tree-item: 12px 18px; --lms-gap-grid: 24px; --lms-gap-stack: 16px; --lms-gap-inline: 8px; --lms-container-max: 1240px; --lms-sidebar-w: 280px; --lms-topbar-h: 64px; --lms-radius-xs: 4px; --lms-radius-sm: 6px; --lms-radius-md: 8px; --lms-radius-lg: 12px; --lms-radius-xl: 16px; --lms-radius-xxl: 24px; --lms-radius-pill: 9999px; --lms-radius-control: 8px; --lms-radius-field: 8px; --lms-radius-card: 16px; --lms-radius-panel: 12px; --lms-radius-banner: 24px; --lms-radius-badge: 9999px; --lms-shadow-sm: 0 1px 2px 0 rgba(13, 37, 61, 0.05); --lms-shadow-md: 0 4px 12px -2px rgba(13, 37, 61, 0.08), 0 2px 4px -2px rgba(13, 37, 61, 0.04); --lms-shadow-lg: 0 12px 24px -4px rgba(13, 37, 61, 0.1), 0 4px 8px -2px rgba(13, 37, 61, 0.04); --lms-shadow-dark-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4); --lms-shadow-dark-md: 0 6px 16px -2px rgba(0, 0, 0, 0.6); --lms-shadow-dark-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.8); --lms-elev-1: var(--lms-shadow-sm); --lms-elev-2: var(--lms-shadow-md); --lms-elev-3: var(--lms-shadow-lg); --lms-focus-ring: 0 0 0 3px var(--lms-primary-glow); --lms-focus-outline: 2px solid var(--lms-primary); --lms-focus-offset: 2px; --lms-blur-overlay: blur(12px); --lms-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --lms-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lms-ease-in: cubic-bezier(0.4, 0, 1, 1); --lms-dur-fast: 120ms; --lms-dur-base: 180ms; --lms-dur-slow: 260ms; --lms-lift-hover: translateY(-2px); --lms-press-scale: scale(0.985); --lms-modal-in-scale: 0.98; /* Stacking order. Kept from the previous theme — Bootstrap's own layers sit between these and nothing else in the app competes for them. */ --lms-z-sticky: 1030; --lms-z-dropdown: 1050; --lms-z-toast: 1090; } @media (prefers-reduced-motion: reduce) { :root { --lms-dur-fast: 0ms; --lms-dur-base: 0ms; --lms-dur-slow: 0ms; --lms-lift-hover: none; --lms-press-scale: none; } } /* --------------------------------------------------------------------------- Dark mode The design system ships this block keyed on [data-theme="dark"]. This app's toggle writes [data-bs-theme] on — the same attribute Bootstrap 5.3 reads — so that is the primary selector here and both are honoured. Only the semantic aliases are re-pointed; every component reads through them, so no component needs a dark rule of its own. --------------------------------------------------------------------------- */ [data-bs-theme="dark"], [data-theme="dark"] { --lms-primary: #8b5cf6; --lms-primary-hover: #7c3aed; --lms-primary-rgb: 139, 92, 246; --lms-primary-bg-subdued: rgba(139, 92, 246, 0.12); --lms-primary-bg-subdued-hover: #3b2a63; --lms-primary-glow: rgba(139, 92, 246, 0.25); --lms-mint-success: #34d399; --lms-mint-rgb: 52, 211, 153; --lms-mint-hover: #10b981; --lms-mint-soft: #0d2a22; --lms-mint-border: #1c5344; --lms-orange-cta: #fb923c; --lms-orange-cta-hover: #f97316; --lms-orange-soft: #2a1a0d; --lms-amber-soft: #2a2109; --lms-ruby-soft: #2a0f1a; --lms-teal-soft: #0b2a28; --lms-text-heading: #eceaf6; --lms-text-strong: #c8c6d6; --lms-text-body: #a2a0b0; --lms-text-subtle: #62666d; --lms-surface-page: #08090a; --lms-surface-card: #0f1011; --lms-surface-muted: #161718; --lms-surface-inverse: #1e2022; --lms-surface-inverse-alt: #161718; --lms-surface-accent-soft: rgba(139, 92, 246, 0.12); --lms-border-card: #23252a; --lms-border-field: #2c2f35; --lms-ring-focus: #8b5cf6; --lms-elev-1: var(--lms-shadow-dark-sm); --lms-elev-2: var(--lms-shadow-dark-md); --lms-elev-3: var(--lms-shadow-dark-lg); } /* --------------------------------------------------------------------------- Teacher brand scope DESIGN.md §2.1 reserves teal for teacher-scoped tooling. Applied as a data attribute on so a whole area adopts it without any view opting in. The previous theme spelled this [data-theme="teacher"], which would now collide with the design system's own dark selector — hence data-brand. --------------------------------------------------------------------------- */ [data-brand="teacher"] { --lms-primary: var(--lms-teal-teacher); --lms-primary-hover: #0f766e; --lms-primary-rgb: 13, 148, 136; --lms-primary-bg-subdued: rgba(13, 148, 136, 0.1); --lms-primary-glow: rgba(13, 148, 136, 0.18); --lms-surface-inverse: #134e4a; --lms-surface-inverse-alt: #115e59; } [data-bs-theme="dark"][data-brand="teacher"] { --lms-primary: #2dd4bf; --lms-primary-hover: #14b8a6; --lms-primary-rgb: 45, 212, 191; --lms-primary-bg-subdued: rgba(45, 212, 191, 0.14); --lms-surface-inverse: #0c2b28; --lms-surface-inverse-alt: #103e39; } /* --------------------------------------------------------------------------- Bootstrap 5.3 bridge Bootstrap draws everything from its own custom properties, so re-pointing them is what carries the palette into markup nobody has touched: .btn, .card, .form-control, .table, .nav-tabs, .modal, .dropdown. This is the single highest-leverage block in the file — without it every one of ~140 views would need editing by hand. --------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--lms-surface-page); --bs-body-color: var(--lms-text-body); --bs-emphasis-color: var(--lms-text-heading); --bs-secondary-color: var(--lms-text-subtle); --bs-secondary-bg: var(--lms-surface-muted); --bs-tertiary-bg: var(--lms-surface-muted); --bs-border-color: var(--lms-border-card); --bs-border-color-translucent: var(--lms-border-card); --bs-border-radius: var(--lms-radius-md); --bs-border-radius-sm: var(--lms-radius-sm); --bs-border-radius-lg: var(--lms-radius-lg); --bs-border-radius-xl: var(--lms-radius-xl); --bs-border-radius-2xl: var(--lms-radius-xxl); --bs-border-radius-pill: var(--lms-radius-pill); --bs-body-font-family: var(--lms-font-sans); --bs-body-font-size: var(--lms-body-md-size); --bs-body-line-height: var(--lms-body-md-lh); --bs-font-monospace: var(--lms-font-mono); --bs-primary: var(--lms-primary); --bs-primary-rgb: var(--lms-primary-rgb); --bs-success: var(--lms-mint-success); --bs-success-rgb: var(--lms-mint-rgb); --bs-danger: var(--lms-ruby-danger); --bs-danger-rgb: 234, 34, 97; --bs-warning: var(--lms-amber-warning); --bs-warning-rgb: 217, 119, 6; --bs-info: var(--lms-primary); --bs-info-rgb: var(--lms-primary-rgb); --bs-link-color: var(--lms-text-link); --bs-link-color-rgb: var(--lms-primary-rgb); --bs-link-hover-color: var(--lms-text-link-hover); --bs-link-hover-color-rgb: var(--lms-primary-rgb); --bs-card-bg: var(--lms-surface-card); --bs-card-border-color: var(--lms-border-card); --bs-card-border-radius: var(--lms-radius-card); --bs-heading-color: var(--lms-text-heading); } /* Bootstrap paints .btn-primary from a fixed SASS colour, not from --bs-primary, so the button variants have to be re-pointed one by one. Same for the states, which is what keeps a hover from reverting to the old violet. */ .btn-primary { --bs-btn-bg: var(--lms-primary); --bs-btn-border-color: var(--lms-primary); --bs-btn-color: var(--lms-on-primary); --bs-btn-hover-bg: var(--lms-primary-hover); --bs-btn-hover-border-color: var(--lms-primary-hover); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-bg: var(--lms-primary-press); --bs-btn-active-border-color: var(--lms-primary-press); --bs-btn-disabled-bg: var(--lms-primary); --bs-btn-disabled-border-color: var(--lms-primary); --bs-btn-focus-shadow-rgb: var(--lms-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--lms-primary); --bs-btn-border-color: var(--lms-primary); --bs-btn-hover-bg: var(--lms-primary); --bs-btn-hover-border-color: var(--lms-primary); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-bg: var(--lms-primary-hover); --bs-btn-active-border-color: var(--lms-primary-hover); --bs-btn-disabled-color: var(--lms-primary); --bs-btn-disabled-border-color: var(--lms-primary); --bs-btn-focus-shadow-rgb: var(--lms-primary-rgb); } .btn-success { --bs-btn-bg: var(--lms-mint-success); --bs-btn-border-color: var(--lms-mint-success); --bs-btn-color: var(--lms-on-primary); --bs-btn-hover-bg: var(--lms-mint-hover); --bs-btn-hover-border-color: var(--lms-mint-hover); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-bg: var(--lms-mint-hover); --bs-btn-active-border-color: var(--lms-mint-hover); --bs-btn-disabled-bg: var(--lms-mint-success); --bs-btn-disabled-border-color: var(--lms-mint-success); --bs-btn-focus-shadow-rgb: var(--lms-mint-rgb); } .btn-outline-success { --bs-btn-color: var(--lms-mint-success); --bs-btn-border-color: var(--lms-mint-success); --bs-btn-hover-bg: var(--lms-mint-success); --bs-btn-hover-border-color: var(--lms-mint-success); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-disabled-color: var(--lms-mint-success); --bs-btn-disabled-border-color: var(--lms-mint-success); } .btn-danger { --bs-btn-bg: var(--lms-ruby-danger); --bs-btn-border-color: var(--lms-ruby-danger); --bs-btn-color: var(--lms-on-primary); --bs-btn-hover-bg: var(--lms-ruby-danger-hover); --bs-btn-hover-border-color: var(--lms-ruby-danger-hover); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-bg: var(--lms-ruby-danger-hover); --bs-btn-active-border-color: var(--lms-ruby-danger-hover); --bs-btn-disabled-bg: var(--lms-ruby-danger); --bs-btn-disabled-border-color: var(--lms-ruby-danger); } .btn-outline-danger { --bs-btn-color: var(--lms-ruby-danger); --bs-btn-border-color: var(--lms-ruby-danger); --bs-btn-hover-bg: var(--lms-ruby-danger); --bs-btn-hover-border-color: var(--lms-ruby-danger); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-disabled-color: var(--lms-ruby-danger); --bs-btn-disabled-border-color: var(--lms-ruby-danger); } .btn-warning { --bs-btn-bg: var(--lms-amber-warning); --bs-btn-border-color: var(--lms-amber-warning); --bs-btn-color: var(--lms-on-primary); --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309; --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-color: var(--lms-on-primary); --bs-btn-disabled-bg: var(--lms-amber-warning); --bs-btn-disabled-color: var(--lms-on-primary); } /* The commerce accent has no Bootstrap equivalent — DESIGN.md reserves orange for conversion triggers (Buy now, Redeem PIN), so it arrives as its own class. */ .btn-cta { --bs-btn-bg: var(--lms-orange-cta); --bs-btn-border-color: var(--lms-orange-cta); --bs-btn-color: var(--lms-on-primary); --bs-btn-hover-bg: var(--lms-orange-cta-hover); --bs-btn-hover-border-color: var(--lms-orange-cta-hover); --bs-btn-hover-color: var(--lms-on-primary); --bs-btn-active-bg: var(--lms-orange-cta-hover); --bs-btn-active-border-color: var(--lms-orange-cta-hover); --bs-btn-disabled-bg: var(--lms-orange-cta); --bs-btn-disabled-border-color: var(--lms-orange-cta); --bs-btn-disabled-color: var(--lms-on-primary); } .form-control, .form-select { --bs-body-bg: var(--lms-surface-card); background-color: var(--lms-surface-card); border-color: var(--lms-border-field); border-radius: var(--lms-radius-field); color: var(--lms-text-heading); } .form-control:focus, .form-select:focus { border-color: var(--lms-border-focus); box-shadow: var(--lms-focus-ring); } .form-control::placeholder { color: var(--lms-text-subtle); } .form-check-input:checked { background-color: var(--lms-primary); border-color: var(--lms-primary); } .form-check-input:focus { border-color: var(--lms-border-focus); box-shadow: var(--lms-focus-ring); } .table { --bs-table-color: var(--lms-text-strong); --bs-table-bg: transparent; --bs-table-border-color: var(--lms-border-card); --bs-table-striped-bg: var(--lms-surface-muted); --bs-table-hover-bg: var(--lms-surface-accent-soft); --bs-table-hover-color: var(--lms-text-heading); } .table > thead { --bs-table-bg: var(--lms-surface-muted); --bs-table-color: var(--lms-text-strong); } .nav-tabs { --bs-nav-tabs-border-color: var(--lms-border-card); --bs-nav-tabs-link-active-color: var(--lms-primary); --bs-nav-tabs-link-active-bg: var(--lms-surface-card); --bs-nav-tabs-link-active-border-color: var(--lms-border-card) var(--lms-border-card) var(--lms-surface-card); --bs-nav-link-color: var(--lms-text-body); --bs-nav-link-hover-color: var(--lms-primary); } .nav-pills { --bs-nav-pills-link-active-bg: var(--lms-primary); --bs-nav-pills-border-radius: var(--lms-radius-pill); --bs-nav-link-color: var(--lms-text-body); --bs-nav-link-hover-color: var(--lms-primary); } .dropdown-menu { --bs-dropdown-bg: var(--lms-surface-card); --bs-dropdown-border-color: var(--lms-border-card); --bs-dropdown-border-radius: var(--lms-radius-panel); --bs-dropdown-link-color: var(--lms-text-strong); --bs-dropdown-link-hover-bg: var(--lms-surface-muted); --bs-dropdown-link-hover-color: var(--lms-text-heading); --bs-dropdown-link-active-bg: var(--lms-primary); --bs-dropdown-link-active-color: var(--lms-on-primary); --bs-dropdown-divider-bg: var(--lms-border-card); box-shadow: var(--lms-elev-3); z-index: var(--lms-z-dropdown); } .modal { --bs-modal-bg: var(--lms-surface-card); --bs-modal-border-color: var(--lms-border-card); --bs-modal-border-radius: var(--lms-radius-card); --bs-modal-header-border-color: var(--lms-border-card); --bs-modal-footer-border-color: var(--lms-border-card); --bs-modal-color: var(--lms-text-body); } .offcanvas { --bs-offcanvas-bg: var(--lms-surface-card); --bs-offcanvas-border-color: var(--lms-border-card); --bs-offcanvas-color: var(--lms-text-body); } .pagination { --bs-pagination-color: var(--lms-text-body); --bs-pagination-bg: var(--lms-surface-card); --bs-pagination-border-color: var(--lms-border-card); --bs-pagination-border-radius: var(--lms-radius-md); --bs-pagination-hover-color: var(--lms-primary); --bs-pagination-hover-bg: var(--lms-surface-muted); --bs-pagination-hover-border-color: var(--lms-border-card); --bs-pagination-focus-color: var(--lms-primary); --bs-pagination-focus-bg: var(--lms-surface-muted); --bs-pagination-focus-box-shadow: var(--lms-focus-ring); --bs-pagination-active-bg: var(--lms-primary); --bs-pagination-active-border-color: var(--lms-primary); --bs-pagination-active-color: var(--lms-on-primary); --bs-pagination-disabled-color: var(--lms-text-subtle); --bs-pagination-disabled-bg: var(--lms-surface-muted); --bs-pagination-disabled-border-color: var(--lms-border-card); } .progress { --bs-progress-bg: var(--lms-surface-muted); --bs-progress-bar-bg: var(--lms-primary); --bs-progress-border-radius: var(--lms-radius-pill); } .list-group { --bs-list-group-bg: var(--lms-surface-card); --bs-list-group-border-color: var(--lms-border-card); --bs-list-group-color: var(--lms-text-body); --bs-list-group-border-radius: var(--lms-radius-panel); --bs-list-group-action-hover-bg: var(--lms-surface-muted); --bs-list-group-active-bg: var(--lms-primary); --bs-list-group-active-border-color: var(--lms-primary); } .accordion { --bs-accordion-bg: var(--lms-surface-card); --bs-accordion-border-color: var(--lms-border-card); --bs-accordion-border-radius: var(--lms-radius-panel); --bs-accordion-btn-color: var(--lms-text-heading); --bs-accordion-active-color: var(--lms-primary); --bs-accordion-active-bg: var(--lms-surface-accent-soft); --bs-accordion-btn-focus-box-shadow: var(--lms-focus-ring); } .breadcrumb { --bs-breadcrumb-divider-color: var(--lms-text-subtle); --bs-breadcrumb-item-active-color: var(--lms-text-heading); --bs-breadcrumb-font-size: var(--lms-body-sm-size); } .alert { --bs-alert-border-radius: var(--lms-radius-panel); } /* --------------------------------------------------------------------------- Compatibility aliases Every token the previous theme exposed, re-pointed at its Indigo-Mint equivalent. This is what lets existing markup — `var(--lms-surface)` in a style attribute, `.lms-card` in a view — adopt the new palette with no edit. New work uses the semantic names above; nothing new should reach for these. --------------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { --lms-bg: var(--lms-surface-page); --lms-surface: var(--lms-surface-card); --lms-surface-alt: var(--lms-surface-muted); --lms-surface-dark: var(--lms-surface-inverse); --lms-surface-dark-alt: var(--lms-surface-inverse-alt); --lms-text-main: var(--lms-text-heading); --lms-text-muted: var(--lms-text-body); --lms-text-dark: var(--lms-text-heading); --lms-text-inverse: #f8fafc; --lms-border: var(--lms-border-card); --lms-border-dark: var(--lms-border-card); --lms-primary-light: var(--lms-primary-bg-subdued); --lms-accent: var(--lms-mint-success); --lms-accent-cta: var(--lms-orange-cta); --lms-font-family: var(--lms-font-sans); --lms-radius: var(--lms-radius-card); --lms-transition: all var(--lms-dur-base) var(--lms-ease-standard); } /* Glass surfaces sit on photography and hero gradients, so they stay literal rather than tracking a surface token — a translucent panel has to read against whatever is behind it, not against the page. */ :root { --lms-glass-bg: rgba(255, 255, 255, 0.72); --lms-glass-border: rgba(255, 255, 255, 0.35); } [data-bs-theme="dark"] { --lms-glass-bg: rgba(15, 16, 17, 0.66); --lms-glass-border: rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------------------------- Product bridge — Docs/Indigo-Mint LMS Design System/tokens/product-bridge.css A MAPPING LAYER, not a second palette. The Bootstrap-era names the previous theme exposed (--brand-*, --bg, --surface, --radius, --shadow) are re-pointed at their canonical Indigo-Mint equivalents, so any stylesheet or snippet still reading the old names keeps working instead of resolving to nothing. Nothing in this repo reads these today (verified by grep across *.css, *.cshtml and *.js, 2026-08-29) — it is carried as a safety net for markup authored against the design system package outside the app. Placed after the dark block deliberately: every value here is an indirection into a semantic alias, so it inherits the dark ramp with no dark rule of its own. New work uses the --lms-* semantic names; nothing new reaches for these. Pre-migration literals, kept for reference only: brand 5b21b6 / 7c3aed / a78bfa · bg f6f7fb · surface-2 f1f0fa · text 1e1b2e muted 6b7280 · border ececf3 · radius 18px · shadow 0 8px 30px rgba(28,16,64,.08) dark bg 14121f · dark surface 1d1a2b --------------------------------------------------------------------------- */ :root { --brand-600: var(--lms-primary-press); --brand-500: var(--lms-primary); --brand-400: var(--lms-primary-soft); --accent-500: var(--lms-orange-cta); --ok-500: var(--lms-mint-success); --warn-500: var(--lms-amber-warning); --danger-500: var(--lms-ruby-danger); --bg: var(--lms-surface-page); --surface: var(--lms-surface-card); --surface-2: var(--lms-surface-muted); --text: var(--lms-text-heading); --muted: var(--lms-text-body); --border: var(--lms-border-card); --radius: var(--lms-radius-card); --shadow: var(--lms-elev-1); --glass: rgba(255, 255, 255, .06); }