/* * Herald design tokens. * * Two layers, as the colour guide asks for. The first is the semantic token set: every colour the * system means something by, named for the meaning and not the hue, with a value for each theme. * The second is a bridge to the Metronic theme this application is built on, which draws its * components from variables of its own; answering those with tokens moves the whole palette * without a single page having to change. * * Rules followed from the guide: components consume semantic tokens, never raw colour; light and * dark carry the same token names and differ only in value; status colours are kept for status and * are not reused as decoration or as chart series. * * The dark values apply through the data-theme attribute the layout already sets from the user's * own dark mode setting, so nothing new has to be wired up to switch them. * * Map tokens are deliberately absent: there is no map in the system yet, and the guide says to * introduce a group when the application needs the distinction, not before. */ /* * Foundations. One ramp of neutrals, in the slate family the guide's palette is drawn from, so every * grey in the system comes from the same place. Semantic tokens below name meanings; these name only * values, and nothing outside this file should use them (guide §1.2). * * The triplets exist because the theme writes some of its greys as rgba(), which cannot take a hex. */ :root { --gray-0: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; --gray-50-rgb: 248, 250, 252; --gray-100-rgb: 241, 245, 249; --gray-200-rgb: 226, 232, 240; --gray-300-rgb: 203, 213, 225; --gray-400-rgb: 148, 163, 184; --gray-500-rgb: 100, 116, 139; --gray-600-rgb: 71, 85, 105; --gray-700-rgb: 51, 65, 85; --gray-800-rgb: 30, 41, 59; --gray-900-rgb: 15, 23, 42; /* The brand's own ramp. The semantic tokens below pick their steps from it by theme. */ --amber-100: #FEF3C7; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; --amber-800: #92400E; --amber-950: #451A03; --amber-500-rgb: 245, 158, 11; --amber-600-rgb: 217, 119, 6; } /* * The sidebar can be set dark while the page stays light (Тохиргоо → Aside skin), so it is a surface * of its own rather than a darker version of the page. Its colours are therefore stated once, not per * theme: the surface is dark either way, and text on it has to be light either way. */ :root { --color-sidebar-dark-surface: var(--gray-900); --color-sidebar-dark-border: var(--gray-800); --color-sidebar-dark-hover-surface: var(--gray-800); --color-sidebar-dark-text: var(--gray-400); --color-sidebar-dark-text-strong: var(--gray-50); --color-sidebar-dark-accent: var(--amber-400); --color-sidebar-dark-accent-surface: var(--amber-950); } :root { /* Brand — the product's identity, for primary actions and what is currently chosen. */ --color-brand-primary: var(--amber-600); --color-brand-secondary: var(--amber-800); --color-brand-tertiary: var(--amber-100); --color-brand-foreground: var(--gray-0); /* * The same colours as triplets, because some of what is laid over this palette writes a colour * as rgb() with an alpha of its own and cannot take a hex. */ --color-brand-primary-rgb: var(--amber-600-rgb); --color-success-primary-rgb: 22, 163, 74; --color-warning-primary-rgb: 161, 98, 7; --color-error-primary-rgb: 220, 38, 38; --color-info-primary-rgb: 37, 99, 235; --color-text-secondary-rgb: 51, 65, 85; --color-background-primary-rgb: 248, 250, 252; /* Background — the large regions a page is laid out on. */ --color-background-primary: #F8FAFC; --color-background-secondary: #F1F5F9; --color-background-tertiary: #E2E8F0; --color-background-quaternary: #CBD5E1; /* Surface — what sits on a background: cards, tables, dialogs, popups. */ --color-surface-primary: #FFFFFF; --color-surface-secondary: #F8FAFC; --color-surface-tertiary: #F1F5F9; --color-surface-elevated: #FFFFFF; /* Text — a figure, its label and its metadata are not the same weight of information. */ --color-text-primary: #0F172A; --color-text-secondary: #334155; --color-text-tertiary: #64748B; --color-text-quaternary: #94A3B8; --color-text-disabled: #CBD5E1; /* Icon — its own layer, though most of it follows the text it sits beside. */ --color-icon-primary: var(--color-text-primary); --color-icon-secondary: var(--color-text-secondary); --color-icon-tertiary: var(--color-text-tertiary); --color-icon-disabled: var(--color-text-disabled); --color-icon-brand: var(--color-brand-primary); /* Border — default for inputs, subtle for cards and tables, muted for the quietest lines. */ --color-border-default: #CBD5E1; --color-border-subtle: #E2E8F0; --color-border-muted: #F1F5F9; --color-border-focus: #D97706; /* Error — a fault, a failed save, an operation that destroys something. */ --color-error-primary: #DC2626; --color-error-secondary: #FEF2F2; --color-error-foreground: #FFFFFF; --color-error-on-secondary: #B91C1C; /* * Warning — a threshold crossed, something overdue, fuel running low. Not the brand, and it used * to be exactly that: the same primary, and in the dark theme the same tint the open menu item * carries. It is the yellow the fuel band is named after (business requirements §10.4), a step * further down the ramp than the other families take because a yellow light enough to read as * yellow is too light to read as text. Measured against the brand it now stands 13.4 apart in * the light theme and 15.6 in the dark one, where 2.3 is the point a difference becomes visible. */ --color-warning-primary: #A16207; --color-warning-secondary: #FEFCE8; --color-warning-foreground: #FFFFFF; --color-warning-on-secondary: #854D0E; /* Success — it worked, it is healthy, it is running. */ --color-success-primary: #16A34A; --color-success-secondary: #F0FDF4; --color-success-foreground: #FFFFFF; /* The shade a chip writes on its own tint: the primary is too light to read at that size. */ --color-success-on-secondary: #15803D; /* Info — something worth saying that is neither good nor bad. */ --color-info-primary: #2563EB; --color-info-secondary: #EFF6FF; --color-info-foreground: #FFFFFF; --color-info-on-secondary: #1D4ED8; /* Neutral — unknown, unavailable, not recorded. It must not read as either good or bad. */ --color-neutral-primary: #64748B; --color-neutral-secondary: #F1F5F9; --color-neutral-foreground: #FFFFFF; --color-neutral-on-secondary: #475569; /* Interactive — what the pointer is over, what is being pressed, what is chosen. */ --color-interactive-hover: #F1F5F9; --color-interactive-active: #E2E8F0; --color-interactive-selected: #FFF7ED; --color-interactive-disabled: #F1F5F9; /* Selection — a chosen row, vehicle or filter, and it must not look like hover. */ --color-selection-background: #FFF7ED; --color-selection-foreground: var(--color-text-primary); --color-selection-border: var(--color-brand-primary); /* Focus — the keyboard's position, which is never removed for the sake of a cleaner page. */ --color-focus-ring: rgba(217, 119, 6, 0.30); /* Disabled — still legible, still plainly not available; opacity alone will not do. */ --color-disabled-background: #F1F5F9; --color-disabled-text: var(--color-text-disabled); --color-disabled-border: var(--color-border-subtle); --color-disabled-icon: var(--color-text-disabled); /* Overlay — what a dialog puts between itself and the page. Never opaque black. */ --color-overlay-light: rgba(15, 23, 42, 0.08); --color-overlay-scrim: rgba(15, 23, 42, 0.20); --color-overlay-heavy: rgba(15, 23, 42, 0.60); /* Shadow — a short scale, and used sparingly. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.18); /* Data visualisation — a palette of its own, so a series is never read as success or failure. Nothing in the system charts anything yet; these are here so the first chart has them. */ --color-chart-1: #0EA5E9; --color-chart-2: #8B5CF6; --color-chart-3: #14B8A6; --color-chart-4: #EC4899; --color-chart-5: #6366F1; --color-chart-6: #64748B; --color-chart-7: #06B6D4; --color-chart-8: #A855F7; --color-chart-actual: var(--color-chart-1); --color-chart-target: var(--color-chart-6); --color-chart-forecast: var(--color-chart-2); --color-chart-plan: var(--color-chart-5); --color-chart-average: var(--color-chart-3); --color-chart-benchmark: var(--color-chart-4); /* Fleet — what a truck is doing, as aliases of the families above rather than colours of their own, so the day the warning hue changes the idle truck changes with it. */ --color-fleet-running: var(--color-success-primary); --color-fleet-idle: var(--color-warning-primary); --color-fleet-stopped: var(--color-neutral-primary); --color-fleet-maintenance: var(--color-info-primary); --color-fleet-offline: var(--color-neutral-primary); --color-fleet-fault: var(--color-error-primary); --color-fleet-unknown: var(--color-neutral-primary); } [data-theme="dark"], [data-bs-theme="dark"] { --color-brand-primary: var(--amber-500); --color-brand-secondary: var(--amber-400); --color-brand-tertiary: var(--amber-950); --color-brand-foreground: #1F2937; --color-brand-primary-rgb: var(--amber-500-rgb); --color-success-primary-rgb: 34, 197, 94; --color-warning-primary-rgb: 250, 204, 21; --color-error-primary-rgb: 239, 68, 68; --color-info-primary-rgb: 59, 130, 246; --color-text-secondary-rgb: 203, 213, 225; --color-background-primary-rgb: 11, 17, 32; --color-background-primary: #0B1120; --color-background-secondary: #111827; --color-background-tertiary: #1F2937; --color-background-quaternary: #374151; --color-surface-primary: #111827; --color-surface-secondary: #172033; --color-surface-tertiary: #1F2937; --color-surface-elevated: #243044; --color-text-primary: #F8FAFC; --color-text-secondary: #CBD5E1; --color-text-tertiary: #94A3B8; --color-text-quaternary: #64748B; --color-text-disabled: #475569; --color-border-default: #475569; --color-border-subtle: #334155; --color-border-muted: #1F2937; --color-border-focus: #F59E0B; --color-error-primary: #EF4444; --color-error-secondary: #450A0A; --color-error-foreground: #FFFFFF; --color-error-on-secondary: #FCA5A5; --color-warning-primary: #FACC15; /* A step up the ramp: the -950 yellow sits 3.7 from the brand's own tint, which is no distance at all. This one stands 13.9 from it, in line with every other pair in the dark palette. */ --color-warning-secondary: #713F12; --color-warning-foreground: #1F2937; --color-warning-on-secondary: #FDE047; --color-success-primary: #22C55E; --color-success-secondary: #052E16; --color-success-foreground: #FFFFFF; --color-success-on-secondary: #4ADE80; --color-info-primary: #3B82F6; --color-info-secondary: #172554; --color-info-foreground: #FFFFFF; --color-info-on-secondary: #93C5FD; --color-neutral-primary: #94A3B8; --color-neutral-secondary: #1F2937; --color-neutral-foreground: #0F172A; --color-neutral-on-secondary: #CBD5E1; --color-interactive-hover: #1F2937; --color-interactive-active: #273449; --color-interactive-selected: #451A03; --color-interactive-disabled: #1F2937; --color-selection-background: #451A03; --color-selection-foreground: var(--color-text-primary); --color-selection-border: var(--color-brand-primary); --color-focus-ring: rgba(245, 158, 11, 0.35); --color-disabled-background: #1F2937; --color-disabled-text: var(--color-text-disabled); --color-disabled-border: var(--color-border-subtle); --color-disabled-icon: var(--color-text-disabled); /* Dark mode separates by surface rather than by shadow, so the scale stays shallow. */ --color-overlay-light: rgba(2, 6, 23, 0.20); --color-overlay-scrim: rgba(2, 6, 23, 0.50); --color-overlay-heavy: rgba(2, 6, 23, 0.72); --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.30); --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.36); --shadow-md: 0 4px 12px rgba(2, 6, 23, 0.44); --shadow-lg: 0 12px 28px rgba(2, 6, 23, 0.52); --shadow-xl: 0 24px 48px rgba(2, 6, 23, 0.60); --color-chart-1: #38BDF8; --color-chart-2: #A78BFA; --color-chart-3: #2DD4BF; --color-chart-4: #F472B6; --color-chart-5: #818CF8; --color-chart-6: #94A3B8; --color-chart-7: #22D3EE; --color-chart-8: #C084FC; } /* * The bridge. * * The theme this application is built on draws its components from variables of its own, and it * switches them on the same data-theme attribute as the tokens above. So the bridge is mostly a * mapping: its variable, our token. Every button, chip, alert and accent the theme draws then * follows the design system without a single page having to change. * * Only the handful of utilities that read Bootstrap's comma-separated rgb triplets keep a rule of * their own, because a hex token cannot be carried in that form. Those rules point at a token too. * * What is deliberately left alone: the greys, the page background, the card and border colours. * They are the theme's layout rather than its meaning, and leaving them be is what keeps this a * change of palette rather than a rebuild. */ :root, [data-theme="light"], [data-theme="dark"] { /* The brand, which the theme calls primary: buttons, active navigation, accents. */ --kt-primary: var(--color-brand-primary); --kt-primary-active: var(--color-brand-secondary); --kt-primary-light: var(--color-brand-tertiary); --kt-primary-inverse: var(--color-brand-foreground); /* Status, each family to its own. */ --kt-success: var(--color-success-primary); --kt-success-active: var(--color-success-primary); --kt-success-light: var(--color-success-secondary); --kt-success-inverse: var(--color-success-foreground); --kt-warning: var(--color-warning-primary); --kt-warning-active: var(--color-warning-primary); --kt-warning-light: var(--color-warning-secondary); --kt-warning-inverse: var(--color-warning-foreground); --kt-danger: var(--color-error-primary); --kt-danger-active: var(--color-error-primary); --kt-danger-light: var(--color-error-secondary); --kt-danger-inverse: var(--color-error-foreground); --kt-info: var(--color-info-primary); --kt-info-active: var(--color-info-primary); --kt-info-light: var(--color-info-secondary); --kt-info-inverse: var(--color-info-foreground); /* * The steps that carry text answer to the text tokens, so they invert with the theme by * themselves; the decorative steps are stated per theme just below, because the theme's own * ramp runs light-to-dark in one and dark-to-light in the other. */ --kt-text-gray-600: var(--color-text-tertiary); --kt-text-gray-700: var(--color-neutral-on-secondary); --kt-text-gray-800: var(--color-text-secondary); --kt-text-gray-900: var(--color-text-primary); /* Text, by what it is rather than by how dark it happens to be (guide §7). */ --kt-body-color: var(--color-text-secondary); --kt-headings-color: var(--color-text-primary); --kt-text-dark: var(--color-text-primary); --kt-text-muted: var(--color-text-tertiary); --kt-form-text-color: var(--color-text-tertiary); --kt-input-plaintext-color: var(--color-text-secondary); --kt-input-placeholder-color: var(--color-text-quaternary); --kt-text-white: var(--gray-0); --kt-text-light: var(--gray-50); /* * A blue was left in this theme from an earlier customer, and it is what links, menu hovers, * pagination, accordions and checkboxes have been coloured by — next to an amber brand. One * accent is the point of having a brand, so they all answer to it now. The hover value also * repairs a broken declaration: the theme ships an unresolved Sass call there, which no browser * can read, so hovering a link currently changes nothing. */ --kt-link-color: var(--color-brand-primary); --kt-link-hover-color: var(--color-brand-secondary); --kt-text-primary: var(--color-brand-primary); /* * Each status carries a second name, which is what an icon and the text utilities read. Only the * brand's was answered, so a danger icon stayed the template's pink and an info one a purple * that belongs to no part of this palette. */ --kt-text-success: var(--color-success-primary); --kt-text-warning: var(--color-warning-primary); --kt-text-danger: var(--color-error-primary); --kt-text-info: var(--color-info-primary); --kt-text-secondary: var(--color-text-secondary); --kt-btn-link-color: var(--color-brand-primary); --kt-btn-link-hover-color: var(--color-brand-secondary); --kt-menu-link-color-hover: var(--color-brand-primary); --kt-menu-link-color-show: var(--color-brand-primary); --kt-menu-link-color-here: var(--color-brand-primary); --kt-menu-link-color-active: var(--color-brand-secondary); --kt-menu-link-bg-color-hover: var(--color-interactive-hover); --kt-menu-link-bg-color-show: var(--color-interactive-hover); --kt-menu-link-bg-color-here: var(--color-brand-tertiary); --kt-menu-link-bg-color-active: var(--color-brand-tertiary); /* What "chosen" looks like on a control: the brand, and the page's own text on a hover tint. */ --kt-component-active-color: var(--color-brand-foreground); --kt-component-active-bg: var(--color-brand-primary); --kt-component-hover-color: var(--color-text-primary); --kt-component-hover-bg: var(--color-interactive-hover); --kt-component-checked-color: var(--color-brand-foreground); --kt-component-checked-bg: var(--color-brand-primary); /* A ticked checkbox or radio — "Намайг сана" on sign-in among them — kept the template's blue. */ --kt-form-check-input-checked-color: var(--color-brand-foreground); --kt-form-check-input-checked-bg-color: var(--color-brand-primary); --kt-form-check-input-checked-bg-color-solid: var(--color-brand-primary); --kt-form-check-input-checked-border-color: var(--color-brand-primary); --kt-form-check-input-indeterminate-color: var(--color-brand-foreground); --kt-form-check-input-indeterminate-bg-color: var(--color-brand-primary); --kt-form-check-input-indeterminate-border-color: var(--color-brand-primary); --kt-pagination-hover-color: var(--color-brand-primary); --kt-pagination-active-color: var(--color-brand-foreground); --kt-accordion-button-active-color: var(--color-brand-secondary); --kt-accordion-icon-active-color: var(--color-brand-primary); --kt-dropdown-link-color: var(--color-text-secondary); --kt-dropdown-link-hover-color: var(--color-text-primary); --kt-dropdown-link-hover-bg: var(--color-interactive-hover); --kt-dropdown-link-active-color: var(--color-brand-foreground); --kt-table-hover-colorr: var(--color-text-primary); --kt-table-active-color: var(--color-text-primary); --kt-list-group-action-hover-color: var(--color-text-primary); --kt-list-group-action-active-color: var(--color-text-primary); --kt-list-group-active-color: var(--color-brand-foreground); --kt-scrollbar-color: var(--gray-200); --kt-scrollbar-hover-color: var(--gray-300); /* * Beneath the theme's variables sits Bootstrap's own palette, which nothing had answered. It is * where a plain link still took the old blue, where `info` was a purple that belongs to no part * of this system, and where the link hover held the same unresolved Sass call the theme ships — * a value no browser can read, so hovering a link changed nothing. Its numbers did not even * agree with each other: the brand was one blue and the triplet beside it another. */ --bs-primary: var(--color-brand-primary); --bs-primary-rgb: var(--color-brand-primary-rgb); --bs-link-color: var(--color-brand-primary); --bs-link-color-rgb: var(--color-brand-primary-rgb); --bs-link-hover-color: var(--color-brand-secondary); --bs-success: var(--color-success-primary); --bs-success-rgb: var(--color-success-primary-rgb); --bs-info: var(--color-info-primary); --bs-info-rgb: var(--color-info-primary-rgb); --bs-warning: var(--color-warning-primary); --bs-warning-rgb: var(--color-warning-primary-rgb); --bs-danger: var(--color-error-primary); --bs-danger-rgb: var(--color-error-primary-rgb); --bs-body-color: var(--color-text-secondary); --bs-body-color-rgb: var(--color-text-secondary-rgb); --bs-body-bg: var(--color-background-primary); --bs-body-bg-rgb: var(--color-background-primary-rgb); --bs-border-color: var(--color-border-subtle); --bs-border-color-translucent: var(--color-border-subtle); --bs-card-border-color: var(--color-border-subtle); --bs-code-color: var(--color-brand-secondary); --bs-highlight-bg: var(--color-warning-secondary); /* The page is a canvas and a card is a surface laid on it (guide §5, §6). The theme paints both pure white, which leaves a card visible only by its hairline; separating them is what gives a dense page its structure, and it costs no contrast because the text stays on the surface. */ --kt-body-bg: var(--color-background-primary); --kt-card-bg: var(--color-surface-primary); --kt-card-border-color: var(--color-border-subtle); --kt-border-color: var(--color-border-subtle); --kt-border-dashed-color: var(--color-border-subtle); /* What floats above a card sits one step higher again, so a dialog reads as being on top. */ --kt-modal-content-bg: var(--color-surface-elevated); --kt-dropdown-bg: var(--color-surface-elevated); /* A field is a surface with a line, and a filled field is the quietest surface there is. */ --kt-input-bg: var(--color-surface-primary); --kt-input-solid-bg: var(--color-surface-tertiary); /* A table breathes by the faintest banding, and the row under the pointer is plainly that. */ --kt-table-striped-bg: var(--color-surface-secondary); --kt-table-hover-bg: var(--color-interactive-hover); /* The shell: the sidebar and the header are surfaces, and they separate by a line rather than by a shadow, which is what dark mode needs and light mode does no harm by (guide §17). */ --kt-app-sidebar-light-bg-color: var(--color-surface-primary); --kt-app-sidebar-light-box-shadow: none; --kt-app-sidebar-base-toggle-btn-bg-color: var(--color-surface-primary); --kt-app-sidebar-base-toggle-btn-box-shadow: var(--shadow-sm); --kt-app-header-base-bg-color: var(--color-surface-primary); --kt-app-header-base-bg-color-mobile: var(--color-surface-primary); --kt-app-header-base-box-shadow: none; --kt-app-header-base-box-shadow-mobile: none; } /* * The theme's own neutral ramp, per theme. In light it runs from the palest step to the darkest; in * dark the theme inverts it, so the same names take the steps from the other end. Matching by * lightness rather than by number keeps every border, divider, placeholder and scrollbar at the * weight the theme intended. */ :root, [data-theme="light"] { --kt-gray-100: var(--gray-50); --kt-gray-200: var(--gray-100); --kt-gray-300: var(--gray-200); --kt-gray-400: var(--gray-300); --kt-gray-500: var(--gray-400); --kt-gray-600: var(--gray-500); --kt-gray-700: var(--gray-600); --kt-gray-800: var(--gray-700); --kt-gray-900: var(--gray-900); --kt-gray-100-rgb: var(--gray-50-rgb); --kt-gray-200-rgb: var(--gray-100-rgb); --kt-gray-300-rgb: var(--gray-200-rgb); --kt-gray-400-rgb: var(--gray-300-rgb); --kt-gray-500-rgb: var(--gray-400-rgb); --kt-gray-600-rgb: var(--gray-500-rgb); --kt-gray-700-rgb: var(--gray-600-rgb); --kt-gray-800-rgb: var(--gray-700-rgb); --kt-gray-900-rgb: var(--gray-900-rgb); --kt-text-gray-100: var(--gray-50); --kt-text-gray-200: var(--gray-100); --kt-text-gray-300: var(--gray-200); --kt-text-gray-400: var(--gray-300); --kt-text-gray-500: var(--gray-400); --bs-gray-100: var(--gray-50); --bs-gray-200: var(--gray-100); --bs-gray-300: var(--gray-200); --bs-gray-400: var(--gray-300); --bs-gray-500: var(--gray-400); --bs-gray-600: var(--gray-500); --bs-gray-700: var(--gray-600); --bs-gray-800: var(--gray-700); --bs-gray-900: var(--gray-900); --bs-gray: var(--gray-500); --bs-gray-dark: var(--gray-700); --bs-light: var(--gray-50); --bs-secondary: var(--gray-200); --bs-dark: var(--gray-900); } [data-theme="dark"], [data-bs-theme="dark"] { --kt-gray-100: var(--gray-800); --kt-gray-200: var(--gray-700); --kt-gray-300: var(--gray-600); --kt-gray-400: var(--gray-500); --kt-gray-500: var(--gray-400); --kt-gray-600: var(--gray-300); --kt-gray-700: var(--gray-300); --kt-gray-800: var(--gray-200); --kt-gray-900: var(--gray-50); --kt-gray-100-rgb: var(--gray-800-rgb); --kt-gray-200-rgb: var(--gray-700-rgb); --kt-gray-300-rgb: var(--gray-600-rgb); --kt-gray-400-rgb: var(--gray-500-rgb); --kt-gray-500-rgb: var(--gray-400-rgb); --kt-gray-600-rgb: var(--gray-300-rgb); --kt-gray-700-rgb: var(--gray-300-rgb); --kt-gray-800-rgb: var(--gray-200-rgb); --kt-gray-900-rgb: var(--gray-50-rgb); --kt-text-gray-100: var(--gray-800); --kt-text-gray-200: var(--gray-700); --kt-text-gray-300: var(--gray-600); --kt-text-gray-400: var(--gray-500); --kt-text-gray-500: var(--gray-400); --bs-gray-100: var(--gray-800); --bs-gray-200: var(--gray-700); --bs-gray-300: var(--gray-600); --bs-gray-400: var(--gray-500); --bs-gray-500: var(--gray-400); --bs-gray-600: var(--gray-300); --bs-gray-700: var(--gray-300); --bs-gray-800: var(--gray-200); --bs-gray-900: var(--gray-50); --bs-gray: var(--gray-400); --bs-gray-dark: var(--gray-200); --bs-light: var(--gray-800); --bs-secondary: var(--gray-700); --bs-dark: var(--gray-50); } /* --- Status, wherever a figure or a word carries one --- */ .text-success { color: var(--color-success-primary) !important; } .text-warning { color: var(--color-warning-primary) !important; } .text-danger { color: var(--color-error-primary) !important; } .text-info { color: var(--color-info-primary) !important; } /* A chip states its meaning in its text colour and stays quiet in the background (guide §22). */ .badge-light-success { background-color: var(--color-success-secondary) !important; color: var(--color-success-on-secondary) !important; } .badge-light-warning { background-color: var(--color-warning-secondary) !important; color: var(--color-warning-on-secondary) !important; } .badge-light-danger { background-color: var(--color-error-secondary) !important; color: var(--color-error-on-secondary) !important; } .badge-light-info { background-color: var(--color-info-secondary) !important; color: var(--color-info-on-secondary) !important; } .badge-light-secondary { background-color: var(--color-neutral-secondary) !important; color: var(--color-neutral-on-secondary) !important; } .badge-light-primary { background-color: var(--color-brand-tertiary) !important; color: var(--color-brand-secondary) !important; } /* --- The brand, on what the page is chiefly for --- */ .text-primary { color: var(--color-brand-primary) !important; } /* A disabled button says so in its own right, rather than by fading out (guide §14). */ .btn.btn-primary:disabled, .btn.btn-primary.disabled { background-color: var(--color-disabled-background); border-color: var(--color-disabled-border); color: var(--color-disabled-text); } /* --- The keyboard's position, on every control that takes one --- */ .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* * --- Links that lead somewhere in Herald --- * * A figure that opens its records, and a plate or a name that opens a profile, are the page's * interactive elements, so they carry the brand. The rest of the application's chrome is left * alone: this reaches only the Herald pages and the rows of a data grid. */ #Dashboard a, #VehicleProfile a, #DriverProfile a, .et-datagrid a { color: var(--color-brand-primary); } #Dashboard a:hover, #VehicleProfile a:hover, #DriverProfile a:hover, .et-datagrid a:hover { color: var(--color-brand-secondary); } /* --- Tables, which are most of this application, kept calm (guide §21) --- */ .et-datagrid .et-datagrid-headers { background-color: var(--color-surface-secondary); color: var(--color-text-secondary); } .et-datagrid .et-data-row.et-state-hover > td { background-color: var(--color-interactive-hover) !important; } .et-datagrid .et-data-row.et-selection > td, .et-datagrid .et-data-row.et-row-focused > td { background-color: var(--color-selection-background) !important; color: var(--color-selection-foreground) !important; } /* * --- Form.io's select (Choices.js) in the dark theme --- * * Form.io paints the field, its list and the highlighted option in fixed light greys (#f9f9f9, #fff, * #f2f2f2) and never names the text's colour, so in the dark theme the text takes the page's light * grey and sits on white at 1.3-2.6:1. The field takes an input's surface and the list a dropdown's, * as the theme's own fields and dropdowns already do. */ [data-theme="dark"] .choices__inner, [data-bs-theme="dark"] .choices__inner { background-color: var(--kt-input-bg); border-color: var(--color-border-subtle); color: var(--color-text-primary); } [data-theme="dark"] .choices.is-disabled .choices__inner, [data-bs-theme="dark"] .choices.is-disabled .choices__inner { background-color: var(--color-surface-tertiary); } [data-theme="dark"] .choices__list--dropdown, [data-theme="dark"] .choices__list[aria-expanded], [data-bs-theme="dark"] .choices__list--dropdown, [data-bs-theme="dark"] .choices__list[aria-expanded] { background-color: var(--color-surface-elevated); border-color: var(--color-border-subtle); color: var(--color-text-secondary); } [data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, [data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted, [data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, [data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--color-interactive-hover); color: var(--color-text-primary); } /* The search field inside the list; Form.io's own dark rule gives it a colour from another palette. */ [data-theme="dark"] .choices[data-type*="select-one"] .choices__input, [data-bs-theme="dark"] .choices[data-type*="select-one"] .choices__input { background-color: var(--kt-input-bg); border-color: var(--color-border-subtle); color: var(--color-text-primary); } [data-theme="dark"] .choices__heading, [data-bs-theme="dark"] .choices__heading { border-color: var(--color-border-subtle); color: var(--color-text-tertiary); } /* The select's arrow is drawn in #333, which the dark field would swallow. */ [data-theme="dark"] .choices[data-type*="select-one"]::after, [data-bs-theme="dark"] .choices[data-type*="select-one"]::after { border-color: var(--color-text-secondary) transparent transparent transparent; } [data-theme="dark"] .choices[data-type*="select-one"].is-open::after, [data-bs-theme="dark"] .choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--color-text-secondary) transparent; }