@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap'); /* ========================================================================== LocalTeams — Syncfusion theme (built on the Tailwind 3 theme skeleton) Load order in : 1. syncfusion/tailwind3.css the vendor theme (structure + layout) 2. syncfusion/localteams-syncfusion.css THIS FILE (palette + type + shape) This file re-declares every token the vendor theme reads, so nothing here depends on !important and no vendor rule is duplicated. Regenerating the vendor theme from Theme Studio (see theme-studio-settings.json) does not invalidate this sheet. Source of truth for values: tokens/colors.css + readme.md in this project. Colors are hex conversions of the oklch brand primitives so that the sheet is safe inside Syncfusion's rgba()/color-mix() composites. ========================================================================== */ :root { /* --- LocalTeams brand primitives (edit ONLY this block to rebrand) ----- */ --lt-ink-1: #0e171e; --lt-ink-2: #252f37; --lt-ink-3: #313c44; --lt-ink-4: #4e5a62; --lt-ink-5: #7f878e; --lt-ink-disabled: #9ea6ab; --lt-canvas: #f1f6f9; --lt-surface: #fafcfd; --lt-surface-sunken: #eaeff3; --lt-surface-white: #ffffff; --lt-line: #cfd9df; --lt-line-strong: #c5cfd6; --lt-line-soft: #d7dfe5; --lt-line-faint: #dee6ea; --lt-accent: #006dbe; --lt-accent-hover: #005aaa; --lt-accent-active: #004f98; --lt-accent-ink: #004992; --lt-accent-tint: #d9eeff; --lt-accent-line: #bed0e1; --lt-trust: #0a924b; --lt-trust-hover: #007f3d; --lt-trust-active: #036a34; --lt-trust-ink: #005b1b; --lt-trust-tint: #d3f5db; --lt-trust-tint-soft: #e9faed; --lt-trust-line: #b1dabb; --lt-trust-disabled: #9dd4ab; --lt-warn: #da950b; --lt-warn-hover: #bd7d00; --lt-warn-active: #a06700; --lt-warn-ink: #874f00; --lt-warn-tint: #feedc9; --lt-warn-tint-soft: #fff8ea; --lt-warn-line: #e6c99a; --lt-warn-disabled: #f4d29b; --lt-danger: #c53637; --lt-danger-hover: #a92227; --lt-danger-active: #8d1a1e; --lt-danger-tint: #ffe7e4; --lt-danger-tint-soft: #fff1f0; --lt-danger-line: #e2afaa; --lt-danger-disabled: #f2a7a1; --lt-info: #007798; --lt-info-hover: #006586; --lt-info-ink: #00536c; --lt-info-tint: #d6f0f9; --lt-info-tint-soft: #ebf8fc; --lt-info-line: #b2d4e0; --lt-info-disabled: #99cedf; --lt-platform: #794db6; --lt-navy: #003057; /* --- Vendor ramps ----------------------------------------------------- */ /* Tailwind3 reads --primary-400 as the base, 500 as hover, 700 as pressed, 200 as disabled, 100 as the soft tint. */ --primary-100: #d9eeff; --primary-200: #b2ddff; --primary-300: #69b5f5; --primary-400: #006dbe; --primary-500: #005aaa; --primary-600: #004f98; --primary-700: #004992; --primary-800: #00346b; --primary-900: #00254c; /* Greys are cooled to the LocalTeams line/ink ramp (hue 235-240). */ --grey-100: #ffffff; --grey-200: #f1f6f9; --grey-300: #eaeff3; --grey-400: #dee6ea; --grey-500: #c5cfd6; --grey-600: #b7bfc4; --grey-700: #a4acb1; --grey-800: #909aa0; --grey-900: #7f878e; /* --- Surfaces --------------------------------------------------------- */ --color-sf-content-bg-color: var(--lt-surface); --color-sf-content-bg-color-alt1: var(--lt-canvas); --color-sf-content-bg-color-alt2: var(--lt-surface-sunken); --color-sf-content-bg-color-alt3: var(--lt-line-faint); --color-sf-content-bg-color-alt4: var(--lt-ink-disabled); --color-sf-content-bg-color-alt5: var(--lt-ink-5); --color-sf-content-bg-color-hover: var(--lt-canvas); --color-sf-content-bg-color-pressed: var(--lt-surface-sunken); --color-sf-content-bg-color-focus: var(--lt-canvas); --color-sf-content-bg-color-selected: var(--lt-accent-tint); --color-sf-content-bg-color-dragged: var(--lt-surface-sunken); --color-sf-content-bg-color-disabled: var(--lt-surface); --color-sf-flyout-bg-color: var(--lt-surface-white); --color-sf-flyout-bg-color-hover: var(--lt-canvas); --color-sf-flyout-bg-color-pressed: var(--lt-surface-sunken); --color-sf-flyout-bg-color-focus: var(--lt-canvas); --color-sf-flyout-bg-color-selected: var(--lt-accent-tint); --color-sf-flyout-bg-color-disabled: var(--lt-surface); --color-sf-overlay-bg-color: rgba(14, 23, 30, .48); --color-sf-table-bg-color-hover: var(--lt-canvas); --color-sf-table-bg-color-pressed: var(--lt-surface-sunken); --color-sf-table-bg-color-selected: var(--lt-accent-tint); --color-sf-text-input-bg-color: var(--lt-surface-white); --color-sf-treeview-item-active-hover-bg: var(--lt-accent-tint); /* --- Ink -------------------------------------------------------------- */ --color-sf-content-text-color: var(--lt-ink-1); --color-sf-content-text-color-alt1: var(--lt-ink-3); --color-sf-content-text-color-alt2: var(--lt-ink-4); --color-sf-content-text-color-alt3: var(--lt-ink-5); --color-sf-content-text-color-alt4: var(--lt-ink-disabled); --color-sf-content-text-color-hover: var(--lt-ink-1); --color-sf-content-text-color-pressed: var(--lt-ink-1); --color-sf-content-text-color-focus: var(--lt-ink-1); --color-sf-content-text-color-selected: var(--lt-accent-ink); --color-sf-content-text-color-dragged: var(--lt-ink-1); --color-sf-content-text-color-disabled: var(--lt-ink-disabled); --color-sf-placeholder-text-color: var(--lt-ink-5); --color-sf-flyout-text-color: var(--lt-ink-2); --color-sf-flyout-text-color-hover: var(--lt-ink-1); --color-sf-flyout-text-color-pressed: var(--lt-ink-1); --color-sf-flyout-text-color-focus: var(--lt-ink-1); --color-sf-flyout-text-color-selected: var(--lt-accent-ink); --color-sf-flyout-text-color-disabled: var(--lt-ink-disabled); --color-sf-table-text-color-hover: var(--lt-ink-1); --color-sf-table-text-color-pressed: var(--lt-ink-1); --color-sf-table-text-color-selected: var(--lt-accent-ink); /* --- Icons ------------------------------------------------------------ */ --color-sf-icon-color: var(--lt-ink-4); --color-sf-icon-color-hover: var(--lt-ink-2); --color-sf-icon-color-pressed: var(--lt-accent); --color-sf-icon-color-disabled: var(--lt-ink-disabled); --color-sf-close-icon-color: var(--lt-ink-5); --color-sf-close-icon-color-hover: var(--lt-ink-2); --color-sf-close-icon-color-pressed: var(--lt-ink-2); --color-sf-close-icon-color-disabled: var(--lt-ink-disabled); /* --- Lines ------------------------------------------------------------ */ --color-sf-border-light: var(--lt-line-faint); --color-sf-border: var(--lt-line-strong); --color-sf-border-dark: var(--lt-ink-disabled); --color-sf-border-hover: var(--lt-line-strong); --color-sf-border-pressed: var(--lt-accent); --color-sf-border-focus: var(--lt-accent); --color-sf-border-selected: var(--lt-accent); --color-sf-border-dragged: var(--lt-line); --color-sf-border-disabled: var(--lt-line-faint); --color-sf-border-warning: var(--lt-warn); --color-sf-border-error: var(--lt-danger); --color-sf-border-success: var(--lt-trust); --color-sf-spreadsheet-gridline: var(--lt-line-faint); --color-sf-flyout-border: var(--lt-line); --color-sf-dialog-border: var(--lt-line); /* --- Semantic hues ---------------------------------------------------- */ --color-sf-primary: var(--lt-accent); --color-sf-primary-text-color: #ffffff; --color-sf-primary-light: var(--lt-accent-tint); --color-sf-primary-lighter: var(--lt-accent-tint); --color-sf-primary-dark: var(--lt-accent-hover); --color-sf-primary-darker: var(--lt-accent-active); --color-sf-secondary: var(--lt-surface); --color-sf-success: var(--lt-trust); --color-sf-info: var(--lt-info); /* Amber is a FILL token in the vendor sheet (badges, e-warning surfaces). Keep it the amber; the dark ink lives on the label tokens only. */ --color-sf-warning: var(--lt-warn); --color-sf-danger: var(--lt-danger); --color-sf-success-light: var(--lt-trust-tint); --color-sf-info-light: var(--lt-info-tint); --color-sf-warning-light: var(--lt-warn-tint); --color-sf-danger-light: var(--lt-danger-tint); --color-sf-success-dark: var(--lt-trust-ink); --color-sf-info-dark: var(--lt-info-ink); --color-sf-warning-dark: var(--lt-warn-ink); --color-sf-danger-dark: var(--lt-danger-hover); --color-sf-success-lighter: var(--lt-trust-tint-soft); --color-sf-info-lighter: var(--lt-info-tint-soft); --color-sf-warning-lighter: var(--lt-warn-tint-soft); --color-sf-danger-lighter: var(--lt-danger-tint-soft); --color-sf-black: 14, 23, 30; --color-sf-white: 255, 255, 255; --color-sf-transparent: rgba(255, 255, 255, 0); /* --- Primary button (Field Blue — one per page) ------------------------ */ --color-sf-primary-bg-color: var(--lt-accent); --color-sf-primary-border-color: var(--lt-accent); --color-sf-primary-text: #ffffff; --color-sf-primary-bg-color-hover: var(--lt-accent-hover); --color-sf-primary-border-color-hover: var(--lt-accent-hover); --color-sf-primary-text-hover: #ffffff; --color-sf-primary-bg-color-pressed: var(--lt-accent-active); --color-sf-primary-border-color-pressed: var(--lt-accent-active); --color-sf-primary-text-pressed: #ffffff; --color-sf-primary-bg-color-focus: var(--lt-accent-hover); --color-sf-primary-border-color-focus: var(--lt-accent-hover); --color-sf-primary-text-focus: #ffffff; --color-sf-primary-bg-color-disabled: var(--primary-200); --color-sf-primary-border-color-disabled: var(--primary-200); --color-sf-primary-text-disabled: #ffffff; /* --- Secondary button (ghost on the LocalTeams line) ------------------ */ --color-sf-secondary-bg-color: var(--lt-surface); --color-sf-secondary-border-color: var(--lt-line-strong); --color-sf-secondary-text-color: var(--lt-ink-2); --color-sf-secondary-bg-color-hover: var(--lt-canvas); --color-sf-secondary-border-color-hover: var(--lt-line-strong); --color-sf-secondary-text-color-hover: var(--lt-ink-1); --color-sf-secondary-bg-color-pressed: var(--lt-surface-sunken); --color-sf-secondary-border-color-pressed: var(--lt-line-strong); --color-sf-secondary-text-color-pressed: var(--lt-ink-1); --color-sf-secondary-bg-color-focus: var(--lt-canvas); --color-sf-secondary-border-color-focus: var(--lt-line-strong); --color-sf-secondary-text-color-focus: var(--lt-ink-1); --color-sf-secondary-bg-color-disabled: var(--lt-surface); --color-sf-secondary-border-color-disabled: var(--lt-line-faint); --color-sf-secondary-text-color-disabled: var(--lt-ink-disabled); /* --- Success button = Trust Green. This is the PUBLIC-SITE CTA. -------- */ --color-sf-success-bg-color: var(--lt-trust); --color-sf-success-border-color: var(--lt-trust); --color-sf-success-text: #ffffff; --color-sf-success-bg-color-hover: var(--lt-trust-hover); --color-sf-success-border-color-hover: var(--lt-trust-hover); --color-sf-success-text-hover: #ffffff; --color-sf-success-bg-color-pressed: var(--lt-trust-active); --color-sf-success-border-color-pressed: var(--lt-trust-active); --color-sf-success-text-pressed: #ffffff; --color-sf-success-bg-color-focus: var(--lt-trust-hover); --color-sf-success-border-color-focus: var(--lt-trust-hover); --color-sf-success-text-focus: #ffffff; --color-sf-success-bg-color-disabled: var(--lt-trust-disabled); --color-sf-success-border-color-disabled: var(--lt-trust-disabled); --color-sf-success-text-disabled: #ffffff; /* --- Warning button (amber never blocks; label ink, not white) -------- */ --color-sf-warning-bg-color: var(--lt-warn); --color-sf-warning-border-color: var(--lt-warn); --color-sf-warning-text: var(--lt-warn-ink); --color-sf-warning-bg-color-hover: var(--lt-warn-hover); --color-sf-warning-border-color-hover: var(--lt-warn-hover); --color-sf-warning-text-hover: #ffffff; --color-sf-warning-bg-color-pressed: var(--lt-warn-active); --color-sf-warning-border-color-pressed: var(--lt-warn-active); --color-sf-warning-text-pressed: #ffffff; --color-sf-warning-bg-color-focus: var(--lt-warn-hover); --color-sf-warning-border-color-focus: var(--lt-warn-hover); --color-sf-warning-text-focus: #ffffff; --color-sf-warning-bg-color-disabled: var(--lt-warn-disabled); --color-sf-warning-border-color-disabled: var(--lt-warn-disabled); --color-sf-warning-text-disabled: #ffffff; /* --- Info button ------------------------------------------------------ */ --color-sf-info-bg-color: var(--lt-info); --color-sf-info-border-color: var(--lt-info); --color-sf-info-text: #ffffff; --color-sf-info-bg-color-hover: var(--lt-info-hover); --color-sf-info-border-color-hover: var(--lt-info-hover); --color-sf-info-text-hover: #ffffff; --color-sf-info-bg-color-pressed: var(--lt-info-ink); --color-sf-info-border-color-pressed: var(--lt-info-ink); --color-sf-info-text-pressed: #ffffff; --color-sf-info-bg-color-focus: var(--lt-info-hover); --color-sf-info-border-color-focus: var(--lt-info-hover); --color-sf-info-text-focus: #ffffff; --color-sf-info-bg-color-disabled: var(--lt-info-disabled); --color-sf-info-border-color-disabled: var(--lt-info-disabled); --color-sf-info-text-disabled: #ffffff; /* --- Danger button. LocalTeams uses OUTLINE danger only; the filled tokens exist so a stray e-danger still lands in-palette. --------- */ --color-sf-danger-bg-color: var(--lt-danger); --color-sf-danger-border-color: var(--lt-danger); --color-sf-danger-text: #ffffff; --color-sf-danger-bg-color-hover: var(--lt-danger-hover); --color-sf-danger-border-color-hover: var(--lt-danger-hover); --color-sf-danger-text-hover: #ffffff; --color-sf-danger-bg-color-pressed: var(--lt-danger-active); --color-sf-danger-border-color-pressed: var(--lt-danger-active); --color-sf-danger-text-pressed: #ffffff; --color-sf-danger-bg-color-focus: var(--lt-danger-hover); --color-sf-danger-border-color-focus: var(--lt-danger-hover); --color-sf-danger-text-focus: #ffffff; --color-sf-danger-bg-color-disabled: var(--lt-danger-disabled); --color-sf-danger-border-color-disabled: var(--lt-danger-disabled); --color-sf-danger-text-disabled: #ffffff; /* --- Outline buttons -------------------------------------------------- */ --color-sf-primary-outline: var(--lt-accent); --color-sf-secondary-outline: var(--lt-line-strong); --color-sf-warning-outline: var(--lt-warn-ink); --color-sf-danger-outline: var(--lt-danger); --color-sf-success-outline: var(--lt-trust); --color-sf-info-outline: var(--lt-info); /* --- Tooltip (navy, not black) ---------------------------------------- */ --color-sf-tooltip-bg-color: var(--lt-navy); --color-sf-tooltip-border: var(--lt-navy); --color-sf-tooltip-text-color: #ffffff; /* --- AppBar: alt1 = light chrome, alt2 = the navy product header ------ */ --color-sf-appbar-bg-color-alt1: var(--lt-surface); --color-sf-appbar-color-alt1: var(--lt-ink-1); --color-sf-appbar-border-color-alt1: var(--lt-line); --color-sf-appbar-hover-bg-color-alt1: var(--lt-canvas); --color-sf-appbar-bg-color-alt2: var(--lt-navy); --color-sf-appbar-color-alt2: #ffffff; --color-sf-appbar-border-color-alt2: var(--lt-navy); --color-sf-appbar-hover-bg-color-alt2: rgba(255, 255, 255, .12); /* --- Rating ----------------------------------------------------------- */ --color-sf-rating-selected-color: var(--lt-warn); --color-sf-rating-unrated-color: var(--lt-line-faint); --color-sf-rating-selected-disabled-color: var(--lt-ink-disabled); --color-sf-rating-unrated-disabled-color: var(--lt-line-faint); --color-sf-rating-selected-hover-color: var(--lt-warn-hover); --color-sf-rating-unrated-hover-color: var(--lt-ink-4); --color-sf-rating-pressed-color: var(--lt-warn-active); /* --- Messages: tint + line + ink, matching the admin alert blocks ----- */ --color-sf-msg-color: var(--lt-ink-3); --color-sf-msg-bg-color: var(--lt-canvas); --color-sf-msg-border-color: var(--lt-line); --color-sf-msg-color-alt1: var(--lt-ink-1); --color-sf-msg-bg-color-alt1: rgba(255, 255, 255, .01); --color-sf-msg-border-color-alt1: var(--lt-line); --color-sf-msg-color-alt2: var(--lt-ink-3); --color-sf-msg-bg-color-alt2: var(--lt-canvas); --color-sf-msg-border-color-alt2: var(--lt-canvas); --color-sf-msg-icon-color: var(--lt-ink-4); --color-sf-msg-icon-color-alt1: var(--lt-ink-2); --color-sf-msg-icon-color-alt2: var(--lt-ink-5); --color-sf-msg-close-icon-color: var(--lt-ink-4); --color-sf-msg-close-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-close-icon-color-alt2: var(--lt-ink-4); --color-sf-msg-danger-color: var(--lt-danger-hover); --color-sf-msg-danger-bg-color: var(--lt-danger-tint-soft); --color-sf-msg-danger-border-color: var(--lt-danger-line); --color-sf-msg-danger-color-alt1: var(--lt-danger); --color-sf-msg-danger-bg-color-alt1: rgba(255, 255, 255, .01); --color-sf-msg-danger-border-color-alt1: var(--lt-danger-line); --color-sf-msg-danger-color-alt2: var(--lt-danger); --color-sf-msg-danger-bg-color-alt2: var(--lt-danger-tint-soft); --color-sf-msg-danger-border-color-alt2: var(--lt-danger-tint-soft); --color-sf-msg-danger-icon-color: var(--lt-danger); --color-sf-msg-danger-icon-color-alt1: var(--lt-danger); --color-sf-msg-danger-icon-color-alt2: var(--lt-danger); --color-sf-msg-danger-close-icon-color: var(--lt-danger-hover); --color-sf-msg-danger-close-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-danger-close-icon-color-alt2: var(--lt-ink-5); --color-sf-msg-success-color: var(--lt-trust-ink); --color-sf-msg-success-bg-color: var(--lt-trust-tint); --color-sf-msg-success-border-color: var(--lt-trust-line); --color-sf-msg-success-color-alt1: var(--lt-trust-ink); --color-sf-msg-success-bg-color-alt1: rgba(255, 255, 255, .01); --color-sf-msg-success-border-color-alt1: var(--lt-trust-line); --color-sf-msg-success-color-alt2: var(--lt-trust-ink); --color-sf-msg-success-bg-color-alt2: var(--lt-trust-tint-soft); --color-sf-msg-success-border-color-alt2: var(--lt-trust-tint-soft); --color-sf-msg-success-icon-color: var(--lt-trust); --color-sf-msg-success-icon-color-alt1: var(--lt-trust); --color-sf-msg-success-icon-color-alt2: var(--lt-trust); --color-sf-msg-success-close-icon-color: var(--lt-trust-ink); --color-sf-msg-success-close-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-success-close-icon-color-alt2: var(--lt-ink-5); --color-sf-msg-warning-color: var(--lt-warn-ink); --color-sf-msg-warning-bg-color: var(--lt-warn-tint); --color-sf-msg-warning-border-color: var(--lt-warn-line); --color-sf-msg-warning-color-alt1: var(--lt-warn-ink); --color-sf-msg-warning-bg-color-alt1: rgba(255, 255, 255, .01); --color-sf-msg-warning-border-color-alt1: var(--lt-warn-line); --color-sf-msg-warning-color-alt2: var(--lt-warn-ink); --color-sf-msg-warning-bg-color-alt2: var(--lt-warn-tint-soft); --color-sf-msg-warning-border-color-alt2: var(--lt-warn-tint-soft); --color-sf-msg-warning-icon-color: var(--lt-warn-ink); --color-sf-msg-warning-icon-color-alt1: var(--lt-warn-ink); --color-sf-msg-warning-icon-color-alt2: var(--lt-warn-ink); --color-sf-msg-warning-close-icon-color: var(--lt-warn-ink); --color-sf-msg-warning-close-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-warning-close-icon-color-alt2: var(--lt-ink-5); --color-sf-msg-info-color: var(--lt-accent-ink); --color-sf-msg-info-bg-color: var(--lt-accent-tint); --color-sf-msg-info-border-color: var(--lt-accent-line); --color-sf-msg-info-color-alt1: var(--lt-accent-ink); --color-sf-msg-info-bg-color-alt1: rgba(255, 255, 255, .01); --color-sf-msg-info-border-color-alt1: var(--lt-accent-line); --color-sf-msg-info-color-alt2: var(--lt-accent-ink); --color-sf-msg-info-bg-color-alt2: var(--lt-accent-tint); --color-sf-msg-info-border-color-alt2: var(--lt-accent-tint); --color-sf-msg-info-icon-color: var(--lt-accent); --color-sf-msg-info-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-info-icon-color-alt2: var(--lt-accent); --color-sf-msg-info-close-icon-color: var(--lt-accent-ink); --color-sf-msg-info-close-icon-color-alt1: var(--lt-ink-5); --color-sf-msg-info-close-icon-color-alt2: var(--lt-ink-5); /* --- Badge / tab / stepper / breadcrumb ------------------------------- */ --color-sf-badge-light-bg-color: var(--lt-surface-sunken); --color-sf-badge-light-border-color: var(--lt-surface-sunken); --color-sf-badge-light-text-color: var(--lt-ink-3); --color-sf-badge-dark-bg-color: var(--lt-navy); --color-sf-badge-dark-border-color: var(--lt-navy); --color-sf-badge-dark-text-color: #ffffff; --color-sf-tab-border: var(--lt-line); --color-sf-stepper: var(--lt-surface); --color-sf-shadow-color: var(--lt-surface); --color-sf-breadcrumb-item-hover-color: var(--lt-accent-hover); --color-sf-breadcrumb-item-active-color: var(--lt-ink-4); /* --- Chips = LocalTeams status pills --------------------------------- */ --color-sf-chip-primary-bg-color: var(--lt-accent-tint); --color-sf-chip-primary-icon-color: var(--lt-accent); --color-sf-chip-primary-border-color: var(--lt-accent-line); --color-sf-chip-primary-text: var(--lt-accent-ink); --color-sf-chip-primary-icon-color-hover: var(--lt-accent-ink); --color-sf-chip-primary-icon-color-pressed: #ffffff; --color-sf-chip-primary-bg-color-hover: var(--primary-200); --color-sf-chip-primary-border-color-hover: var(--primary-200); --color-sf-chip-primary-text-hover: var(--lt-accent-ink); --color-sf-chip-primary-bg-color-pressed: var(--lt-accent); --color-sf-chip-primary-icon-bg-color-pressed: var(--lt-accent); --color-sf-chip-primary-icon-bg-color-hover: var(--primary-200); --color-sf-chip-primary-border-color-pressed: var(--lt-accent); --color-sf-chip-primary-text-pressed: #ffffff; --color-sf-chip-primary-bg-color-disabled: var(--lt-accent-tint); --color-sf-chip-primary-border-color-disabled: var(--lt-accent-tint); --color-sf-chip-primary-text-disabled: var(--lt-ink-disabled); --color-sf-chip-secondary-bg-color: var(--lt-surface-sunken); --color-sf-chip-secondary-icon-color: var(--lt-ink-4); --color-sf-chip-secondary-border-color: var(--lt-line); --color-sf-chip-secondary-text-color: var(--lt-ink-3); --color-sf-chip-secondary-icon-color-hover: var(--lt-ink-2); --color-sf-chip-secondary-icon-color-pressed: var(--lt-ink-2); --color-sf-chip-secondary-bg-color-hover: var(--lt-line-faint); --color-sf-chip-secondary-border-color-hover: var(--lt-line); --color-sf-chip-secondary-text-color-hover: var(--lt-ink-1); --color-sf-chip-secondary-bg-color-pressed: var(--lt-line); --color-sf-chip-secondary-icon-bg-color-pressed: var(--lt-line); --color-sf-chip-secondary-icon-bg-color-hover: var(--lt-line-faint); --color-sf-chip-secondary-border-color-pressed: var(--lt-line-strong); --color-sf-chip-secondary-text-color-pressed: var(--lt-ink-1); --color-sf-chip-secondary-bg-color-disabled: var(--lt-surface-sunken); --color-sf-chip-secondary-border-color-disabled: var(--lt-line-faint); --color-sf-chip-secondary-text-color-disabled: var(--lt-ink-disabled); --color-sf-chip-success-bg-color: var(--lt-trust-tint); --color-sf-chip-success-icon-color: var(--lt-trust); --color-sf-chip-success-border-color: var(--lt-trust-line); --color-sf-chip-success-text: var(--lt-trust-ink); --color-sf-chip-success-icon-color-hover: var(--lt-trust-ink); --color-sf-chip-success-icon-color-pressed: var(--lt-trust-ink); --color-sf-chip-success-bg-color-hover: var(--lt-trust-tint); --color-sf-chip-success-border-color-hover: var(--lt-trust); --color-sf-chip-success-text-hover: var(--lt-trust-ink); --color-sf-chip-success-bg-color-pressed: var(--lt-trust-line); --color-sf-chip-success-icon-bg-color-pressed: var(--lt-trust-line); --color-sf-chip-success-icon-bg-color-hover: var(--lt-trust-line); --color-sf-chip-success-border-color-pressed: var(--lt-trust); --color-sf-chip-success-text-pressed: var(--lt-trust-ink); --color-sf-chip-success-bg-color-disabled: var(--lt-trust-tint-soft); --color-sf-chip-success-border-color-disabled: var(--lt-trust-line); --color-sf-chip-success-text-disabled: var(--lt-trust-disabled); --color-sf-chip-warning-bg-color: var(--lt-warn-tint); --color-sf-chip-warning-icon-color: var(--lt-warn-ink); --color-sf-chip-warning-border-color: var(--lt-warn-line); --color-sf-chip-warning-text: var(--lt-warn-ink); --color-sf-chip-warning-icon-color-hover: var(--lt-warn-ink); --color-sf-chip-warning-icon-color-pressed: var(--lt-warn-ink); --color-sf-chip-warning-bg-color-hover: var(--lt-warn-tint); --color-sf-chip-warning-border-color-hover: var(--lt-warn); --color-sf-chip-warning-text-hover: var(--lt-warn-ink); --color-sf-chip-warning-bg-color-pressed: var(--lt-warn-line); --color-sf-chip-warning-icon-bg-color-pressed: var(--lt-warn-line); --color-sf-chip-warning-icon-bg-color-hover: var(--lt-warn-line); --color-sf-chip-warning-border-color-pressed: var(--lt-warn); --color-sf-chip-warning-text-pressed: var(--lt-warn-ink); --color-sf-chip-warning-bg-color-disabled: var(--lt-warn-tint-soft); --color-sf-chip-warning-border-color-disabled: var(--lt-warn-line); --color-sf-chip-warning-text-disabled: var(--lt-warn-disabled); --color-sf-chip-danger-bg-color: var(--lt-danger-tint); --color-sf-chip-danger-icon-color: var(--lt-danger); --color-sf-chip-danger-border-color: var(--lt-danger-line); --color-sf-chip-danger-text: var(--lt-danger-hover); --color-sf-chip-danger-icon-color-hover: var(--lt-danger-hover); --color-sf-chip-danger-icon-color-pressed: var(--lt-danger-hover); --color-sf-chip-danger-bg-color-hover: var(--lt-danger-tint); --color-sf-chip-danger-border-color-hover: var(--lt-danger); --color-sf-chip-danger-text-hover: var(--lt-danger-hover); --color-sf-chip-danger-bg-color-pressed: var(--lt-danger-line); --color-sf-chip-danger-icon-bg-color-pressed: var(--lt-danger-line); --color-sf-chip-danger-icon-bg-color-hover: var(--lt-danger-line); --color-sf-chip-danger-border-color-pressed: var(--lt-danger); --color-sf-chip-danger-text-pressed: var(--lt-danger-active); --color-sf-chip-danger-bg-color-disabled: var(--lt-danger-tint-soft); --color-sf-chip-danger-border-color-disabled: var(--lt-danger-line); --color-sf-chip-danger-text-disabled: var(--lt-danger-disabled); --color-sf-chip-info-bg-color: var(--lt-info-tint); --color-sf-chip-info-icon-color: var(--lt-info); --color-sf-chip-info-border-color: var(--lt-info-line); --color-sf-chip-info-text: var(--lt-info-ink); --color-sf-chip-info-icon-color-hover: var(--lt-info-ink); --color-sf-chip-info-icon-color-pressed: var(--lt-info-ink); --color-sf-chip-info-bg-color-hover: var(--lt-info-tint); --color-sf-chip-info-border-color-hover: var(--lt-info); --color-sf-chip-info-text-hover: var(--lt-info-ink); --color-sf-chip-info-bg-color-pressed: var(--lt-info-line); --color-sf-chip-info-icon-bg-color-pressed: var(--lt-info-line); --color-sf-chip-info-icon-bg-color-hover: var(--lt-info-line); --color-sf-chip-info-border-color-pressed: var(--lt-info); --color-sf-chip-info-text-pressed: var(--lt-info-ink); --color-sf-chip-info-bg-color-disabled: var(--lt-info-tint-soft); --color-sf-chip-info-border-color-disabled: var(--lt-info-line); --color-sf-chip-info-text-disabled: var(--lt-info-disabled); } /* -------------------------------------------------------------------------- TYPE + SHAPE --e-radius is the vendor's single shape seed: the theme derives radii as calc(--e-radius * 0.25 | 0.375 | 1.25). 32px lands the LocalTeams scale exactly — 8px controls, 12px cards/messages, 40px pills. -------------------------------------------------------------------------- */ :root, .e-dark-mode { --e-font-name: 'Public Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', arial, sans-serif; --e-display-font-name: 'Manrope', var(--e-font-name); --e-serif-font-name: 'Public Sans'; --e-mono-font-name: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --e-radius: 32px; --e-border: 32px; --e-font-sans: sans-serif; --e-font-serif: serif; --e-font-mono: monospace; /* LocalTeams shadows — the only three in the system. */ --lt-shadow-card: 0 1px 3px rgba(14, 23, 30, .04); --lt-shadow-raised: 0 1px 3px rgba(14, 23, 30, .08); --lt-shadow-float: 0 4px 12px rgba(14, 23, 30, .18); } /* Every button label is Manrope 700 (13px controls / sentence case). */ .e-btn, .e-css.e-btn, .e-chip, .e-tab .e-tab-header .e-item .e-tab-text, .e-stepper .e-step-text-container .e-step-label, .e-dlg-header, .e-card .e-card-title, .e-grid .e-groupdroparea { font-family: var(--e-display-font-name); font-weight: 700; letter-spacing: -0.002em; } .e-btn, .e-css.e-btn { font-size: 13px; box-shadow: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; } .e-btn:focus-visible, .e-css.e-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-accent-tint); outline: none; } /* Destructive is outline-only in this system. */ .e-btn.e-danger:not(.e-outline):not(.e-flat) { background: transparent; border-color: var(--lt-danger-line); color: var(--lt-danger); } .e-btn.e-danger:not(.e-outline):not(.e-flat):hover { background: var(--lt-danger-tint-soft); border-color: var(--lt-danger); color: var(--lt-danger-hover); } /* -------------------------------------------------------------------------- FORM CONTROLS — 8px radius, cool line, 3px accent focus ring instead of the vendor's doubled 1px box-shadow. -------------------------------------------------------------------------- */ .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper { border-color: var(--lt-line-strong); border-radius: 8px; transition: border-color 140ms ease, box-shadow 140ms ease; } .e-input-group:not(.e-disabled):hover, .e-input-group.e-control-wrapper:not(.e-disabled):hover { border-color: var(--lt-ink-disabled); } .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { border-color: var(--lt-accent); border-radius: 8px; box-shadow: 0 0 0 3px var(--lt-accent-tint); } .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-float-input input, .e-input-group textarea.e-input { font-size: 13px; color: var(--lt-ink-1); } /* Uppercase micro-label — the product's signature form eyebrow. */ .lt-field-label, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text { font-family: var(--e-font-name); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-ink-5); } /* Checkbox / radio / switch */ .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--lt-accent); border-color: var(--lt-accent); } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { border-radius: 4px; border-color: var(--lt-line-strong); } .e-checkbox-wrapper .e-label, .e-radio + label .e-label, .e-switch-wrapper + label { font-size: 13px; color: var(--lt-ink-3); } .e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active { background-color: var(--lt-trust); border-color: var(--lt-trust); } /* -------------------------------------------------------------------------- DATA GRID — sunken uppercase head, hairline row dividers, tinted selection, no vertical gridlines. Grid sits inside a card, so it owns the 12px corner. -------------------------------------------------------------------------- */ .e-grid { border-color: var(--lt-line); border-radius: 12px; overflow: hidden; font-family: var(--e-font-name); } .e-grid .e-gridheader { background: var(--lt-surface-sunken); border-color: var(--lt-line); } .e-grid .e-headercell, .e-grid .e-detailheadercell, .e-grid .e-columnheader .e-headercelldiv { background: transparent; color: var(--lt-ink-5); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .e-grid .e-rowcell { font-size: 13.5px; color: var(--lt-ink-3); border-color: var(--lt-line-faint); padding: 11px 14px; } .e-grid .e-row:hover .e-rowcell { background: var(--lt-canvas); } .e-grid .e-row .e-rowcell.e-selectionbackground, .e-grid .e-row.e-selectionbackground .e-rowcell { background: var(--lt-accent-tint); color: var(--lt-accent-ink); } .e-grid .e-altrow .e-rowcell { background: transparent; } .e-grid .e-gridpager, .e-pager { background: var(--lt-surface); border-color: var(--lt-line); color: var(--lt-ink-4); font-size: 12.5px; } .e-pager .e-numericitem { color: var(--lt-ink-4); } .e-pager .e-currentitem, .e-pager .e-currentitem:hover { background: var(--lt-accent); border-radius: 8px; color: #ffffff; font-weight: 700; } /* -------------------------------------------------------------------------- CALENDAR / DATE PICKERS — today ring in accent, selected day a filled accent square with the 8px corner, weekend never red. -------------------------------------------------------------------------- */ .e-calendar, .e-bigger.e-small .e-calendar { background: var(--lt-surface-white); border: 1px solid var(--lt-line); border-radius: 12px; box-shadow: var(--lt-shadow-card); font-family: var(--e-font-name); } .e-calendar .e-header .e-title { font-family: var(--e-display-font-name); font-weight: 700; font-size: 14px; color: var(--lt-ink-1); } .e-calendar .e-content th { color: var(--lt-ink-5); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .e-calendar .e-content td.e-other-month > span.e-day, .e-calendar .e-content td.e-weekend span.e-day { color: var(--lt-ink-disabled); } .e-calendar .e-content td span.e-day { border-radius: 8px; font-size: 13px; } .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day { border: 1px solid var(--lt-accent); color: var(--lt-accent); } .e-calendar .e-content td.e-selected span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day { background: var(--lt-accent); border-color: var(--lt-accent); color: #ffffff; } .e-calendar .e-content td:hover span.e-day { background: var(--lt-accent-tint); color: var(--lt-accent-ink); } /* -------------------------------------------------------------------------- FLYOUTS, DIALOGS, CARDS, TOASTS — exactly three shadows, nothing else. -------------------------------------------------------------------------- */ .e-popup.e-ddl, .e-popup.e-popup-open, .e-dropdown-popup .e-ul, .e-contextmenu-wrapper ul, .e-menu-wrapper ul.e-menu .e-menu-item .e-menu-icon { box-shadow: var(--lt-shadow-float); } .e-popup.e-ddl, .e-dropdown-popup .e-ul, .e-contextmenu-wrapper ul { border: 1px solid var(--lt-line); border-radius: 8px; } .e-dropdownbase .e-list-item { font-size: 13px; color: var(--lt-ink-3); } .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover { background: var(--lt-accent-tint); color: var(--lt-accent-ink); font-weight: 600; } .e-dialog { border: 1px solid var(--lt-line); border-radius: 12px; box-shadow: var(--lt-shadow-float); } .e-dialog .e-dlg-header-content { background: var(--lt-surface); border-bottom: 1px solid var(--lt-line-faint); border-radius: 12px 12px 0 0; } .e-dialog .e-dlg-header { font-size: 17px; color: var(--lt-ink-1); } .e-dialog .e-footer-content { background: var(--lt-surface); border-top: 1px solid var(--lt-line-faint); border-radius: 0 0 12px 12px; } .e-card { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: 12px; box-shadow: var(--lt-shadow-card); } .e-card .e-card-title { font-size: 15px; color: var(--lt-ink-1); } .e-card .e-card-sub-title, .e-card .e-card-content { font-size: 13.5px; color: var(--lt-ink-4); } .e-toast { border-radius: 12px; box-shadow: var(--lt-shadow-float); } .e-tooltip-wrap .e-tip-content { font-size: 12.5px; } /* -------------------------------------------------------------------------- NAV CHROME — tabs, toolbar, breadcrumb, appbar -------------------------------------------------------------------------- */ .e-tab .e-tab-header { background: transparent; border-bottom: 1px solid var(--lt-line); } .e-tab .e-tab-header .e-item .e-tab-text { font-size: 13px; text-transform: none; } .e-tab .e-tab-header .e-indicator { background: var(--lt-accent); display: block; opacity: 1; } /* Amber badges keep the ink label on the amber fill. */ .e-badge.e-badge-warning { color: var(--lt-warn-ink); } .e-tab .e-tab-header .e-item.e-active .e-tab-text { color: var(--lt-accent); } .e-toolbar { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: 12px; } .e-toolbar .e-toolbar-item .e-tbar-btn { border-radius: 8px; } .e-breadcrumb { font-size: 12.5px; } .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text { color: var(--lt-ink-4); } .e-breadcrumb .e-breadcrumb-item:last-child .e-breadcrumb-text { color: var(--lt-ink-1); font-weight: 600; } .e-appbar.e-prominent, .e-appbar { font-family: var(--e-font-name); } /* Public-site header: navy bar, per the locked logo treatment. */ .e-appbar.e-lt-brand { background: var(--lt-navy); border-color: var(--lt-navy); color: #ffffff; } .e-appbar.e-lt-brand .e-btn.e-flat { color: rgba(255, 255, 255, .86); } /* -------------------------------------------------------------------------- LOCALTEAMS-SPECIFIC HOOKS -------------------------------------------------------------------------- */ /* The public CTA. Green means live / verified / safe — never decoration. */ .e-btn.e-lt-cta { background: var(--lt-trust); border-color: var(--lt-trust); color: #ffffff; font-size: 14px; padding: 11px 20px; } .e-btn.e-lt-cta:hover { background: var(--lt-trust-hover); border-color: var(--lt-trust-hover); color: #ffffff; } /* Status pills: Published / Draft / Invite pending. Title case, never a dot. */ .e-chip-list .e-chip.e-lt-status, .e-chip.e-lt-status { border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; height: 24px; padding: 0 11px; } /* Section eyebrow above any Syncfusion block. */ .lt-eyebrow { font-family: var(--e-font-name); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lt-ink-5); } /* -------------------------------------------------------------------------- PLATFORM ADMIN CONTEXT — put .lt-context-platform on . Violet and blue never share a screen. -------------------------------------------------------------------------- */ .lt-context-platform { --lt-accent: #794db6; --lt-accent-hover: #673ba2; --lt-accent-active: #5b3291; --lt-accent-ink: #562c8b; --lt-accent-tint: #eee7fd; --lt-accent-line: #ddcffa; --primary-100: #eee7fd; --primary-200: #ddcffa; --primary-400: #794db6; --primary-500: #673ba2; --primary-600: #5b3291; --primary-700: #4f2980; --primary-800: #3e1e65; /* Vendor tokens that resolved against :root must be re-declared here. */ --color-sf-primary: var(--lt-accent); --color-sf-primary-bg-color: var(--lt-accent); --color-sf-primary-border-color: var(--lt-accent); --color-sf-primary-bg-color-hover: var(--lt-accent-hover); --color-sf-primary-border-color-hover: var(--lt-accent-hover); --color-sf-primary-bg-color-pressed: var(--lt-accent-active); --color-sf-primary-border-color-pressed: var(--lt-accent-active); --color-sf-primary-outline: var(--lt-accent); --color-sf-content-bg-color-selected: var(--lt-accent-tint); --color-sf-table-bg-color-selected: var(--lt-accent-tint); --color-sf-flyout-bg-color-selected: var(--lt-accent-tint); --color-sf-chip-primary-bg-color: var(--lt-accent-tint); --color-sf-chip-primary-border-color: var(--lt-accent-line); --color-sf-chip-primary-text: var(--lt-accent-ink); --color-sf-msg-info-bg-color: var(--lt-accent-tint); --color-sf-msg-info-border-color: var(--lt-accent-line); --color-sf-msg-info-color: var(--lt-accent-ink); --color-sf-msg-info-icon-color: var(--lt-accent); }