/* ============================================================ Savant — Light theme Applies when . The palette primitives stay fixed; semantic and chrome tokens remap for a compliant, flawless light UI. Loaded last so its selectors win. ============================================================ */ :root[data-theme="light"] { color-scheme: light; /* Surfaces & lines */ --surface-page: #F5F5F8; --surface-raised: #FFFFFF; --surface-inset: #FFFFFF; --border-hairline: #E4E4EA; /* Text (all AA on the light surfaces) */ --text-primary: #17171A; --text-secondary: #55555E; --text-muted: #6C6C76; /* Secondary brand accent, darkened for contrast on white */ --color-accent: var(--teal-700); /* Focus ring */ --focus-ring: rgba(69, 41, 177, 0.40); /* Button — secondary */ --btn-secondary-bg: #ECECEF; --btn-secondary-bg-hover: #E1E1E6; --btn-secondary-bg-active: #D6D6DC; --btn-secondary-text: #17171A; --btn-disabled-bg: #EDEDF0; --btn-disabled-text: #ADADB6; /* Text field */ --field-bg: #FFFFFF; --field-border: #D0D0D7; --field-border-hover: #A6A6AF; --field-text: #17171A; --field-disabled-bg: #F1F1F4; --field-disabled-text: #A6A6AF; } /* ---------- Logo flips to dark on the light surface ---------- */ [data-theme="light"] .sv-brand__mark, [data-theme="light"] .sv-masthead__logo, [data-theme="light"] .sv-topnav__brand .mk, [data-theme="light"] .sv-sitefooter__brand .mk { filter: invert(1); } /* ---------- Purple accents that are too light on white ---------- */ [data-theme="light"] .sv-masthead .sv-eyebrow, [data-theme="light"] .sv-philosophy .sv-eyebrow, [data-theme="light"] .sv-hero__eyebrow, [data-theme="light"] .sv-tenet__n, [data-theme="light"] .sv-404__code, [data-theme="light"] .sv-foot__brand span, [data-theme="light"] .sv-filter__clear, [data-theme="light"] .sv-notifs__action, [data-theme="light"] .sv-nav__group.is-current > .sv-nav__label, [data-theme="light"] .sv-tier__code b { color: var(--purple-600); } /* ---------- Selection controls ---------- */ [data-theme="light"] .sv-check__box, [data-theme="light"] .sv-radio__box { background: #FFFFFF; border-color: #C4C4CC; } [data-theme="light"] .sv-switch__track { background: #DBDBE1; } /* ---------- Badges & tags ---------- */ [data-theme="light"] .sv-badge--primary { color: var(--purple-700); } [data-theme="light"] .sv-badge--success { color: var(--green-700); } [data-theme="light"] .sv-badge--warning { color: var(--amber-800); } [data-theme="light"] .sv-badge--error { color: var(--red-700); } [data-theme="light"] .sv-badge--neutral { background: #EBEBEF; color: var(--text-secondary); } [data-theme="light"] .sv-tag { background: #EFEFF3; border-color: #E1E1E6; } [data-theme="light"] .sv-tag__x { background: #DBDBE1; color: var(--text-secondary); } [data-theme="light"] .sv-tag__x:hover { background: #C4C4CC; color: #17171A; } /* ---------- Avatars ---------- */ [data-theme="light"] .sv-avatar { background: #ECECEF; } [data-theme="light"] .sv-avatar-group__more { background: #E4E4E9; color: var(--text-secondary); } /* ---------- Table ---------- */ [data-theme="light"] .sv-table th { background: #F3F3F6; } [data-theme="light"] .sv-table tbody tr:hover { background: #F5F5F7; } /* ---------- Progress / spinner ---------- */ [data-theme="light"] .sv-progress { background: #E4E4E9; } [data-theme="light"] .sv-spinner { border-color: #E1E1E6; border-top-color: var(--color-primary); } /* ---------- Tooltip stays dark for punch ---------- */ [data-theme="light"] .sv-tooltip__bubble { background: #17171A; color: #FFFFFF; border-color: #17171A; } [data-theme="light"] .sv-tooltip__bubble::after { border-top-color: #17171A; } /* ---------- Hover surfaces ---------- */ [data-theme="light"] .sv-nav__link:hover, [data-theme="light"] .sv-menu__item:hover, [data-theme="light"] .sv-page:hover, [data-theme="light"] .sv-topnav__link:hover, [data-theme="light"] .sv-sidenav__item:hover, [data-theme="light"] .sv-map__item:hover, [data-theme="light"] .sv-calendar__day:hover { background: #EDEDF1; } [data-theme="light"] .sv-cselect__opt:hover, [data-theme="light"] .sv-cselect__opt:focus { background: #EDEDF1; color: #17171A; } /* ---------- Active navigation ---------- */ [data-theme="light"] .sv-nav__link.is-active, [data-theme="light"] .sv-sidenav__item.is-active, [data-theme="light"] .sv-topnav__link[aria-current="page"] { background: rgba(69, 41, 177, .10); color: var(--purple-700); } [data-theme="light"] .sv-sidenav__item.is-active svg { color: var(--purple-600); } [data-theme="light"] .sv-sidenav__item.is-active .sv-sidenav__count { background: var(--color-primary); color: #FFFFFF; } /* ---------- Segmented ---------- */ [data-theme="light"] .sv-segmented { background: #EAEAEE; } [data-theme="light"] .sv-segmented__btn.is-active { background: #FFFFFF; color: #17171A; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } [data-theme="light"] .sv-themeseg { background: #EAEAEE; } [data-theme="light"] .sv-themeseg__opt.is-active { background: #FFFFFF; color: #17171A; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } /* ---------- Misc chrome ---------- */ [data-theme="light"] .sv-sidenav__count { background: #E4E4E9; } [data-theme="light"] .sv-breadcrumb svg { color: #B4B4BC; } [data-theme="light"] .sv-dropzone { background: #FAFAFB; border-color: #C4C4CC; } [data-theme="light"] .sv-dropzone:hover { background: #F2F2F5; border-color: var(--purple-500); } [data-theme="light"] .sv-file__icon { background: #EFEFF3; } [data-theme="light"] .sv-msg--in { background: #EDEDF1; color: #17171A; } [data-theme="light"] .sv-calendar__day--muted { color: #C0C0C8; } [data-theme="light"] .sv-notif--unread { background: rgba(69, 41, 177, .05); } [data-theme="light"] .sw-family__role { background: #EFEFF3; } [data-theme="light"] .sv-radius__box { background: #EDEDF1; border-color: #D4D4DB; } [data-theme="light"] .sv-motion__box { background: #EDEDF1; } [data-theme="light"] .sv-motion__box:hover { background: var(--color-primary); color: #FFFFFF; } [data-theme="light"] .sv-toast { background: #17171A; color: #FFFFFF; border-color: #17171A; } /* ---------- Alerts, a touch more presence on white ---------- */ [data-theme="light"] .sv-alert--info { background: rgba(69, 41, 177, .07); border-color: rgba(69, 41, 177, .22); } [data-theme="light"] .sv-alert--success { background: rgba(45, 156, 91, .09); border-color: rgba(45, 156, 91, .28); } [data-theme="light"] .sv-alert--warning { background: rgba(229, 161, 0, .10); border-color: rgba(229, 161, 0, .30); } [data-theme="light"] .sv-alert--error { background: rgba(209, 67, 67, .08); border-color: rgba(209, 67, 67, .28); }