/* Copied verbatim from senseline-chromium 33ec97f shared/tokens.css, plus the
light --InformationBlue and --MouseOverPrimary of senseline-chromium#85 (the
extension's #74 link ink; #99 here), --DangerInk as senseline-chromium#51
adds it, and cyan 1's values for #110 of --DangerAction, --MouseOverDanger
and --InputBorder -- the extension owns these tokens; refresh this copy
rather than editing it. web/test/web-contrast-smoke.js checks every
text/background pair the web app's sheets draw from them. */
/*
The extension's design tokens: fonts, type scale,
shadows, the Light/Dark color themes, and the legacy alias bridge the page
sheets read. See docs/design-tokens.md for the token map and the open
placeholders.
PLACEHOLDERS: the accent (indigo) family and the strong-text ink are
neutral stand-ins until the extension has a real palette. Each one is tagged
`TODO(placeholder): real design from Jon` below; swap the values, keep the
names.
Theme switching: shared/theme-init.js stamps data-theme="light"|"dark"
on from the acrTheme sync key ('light'|'dark'|'system').
Load this BEFORE the page's own stylesheet in every extension
page (popup.html, panel.html, options.html, welcome.html).
*/
/* =============================================================
FONTS — @font-face (files in ./fonts/; Roboto + Roboto Condensed,
google-webfonts-helper builds, cyrillic + latin + latin-ext subset)
============================================================= */
@font-face {
font-display: swap;
font-family: "Roboto";
font-style: normal;
font-weight: 100;
src: url("fonts/roboto-v51-cyrillic_latin_latin-ext-100.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto";
font-style: normal;
font-weight: 300;
src: url("fonts/roboto-v51-cyrillic_latin_latin-ext-300.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: url("fonts/roboto-v51-cyrillic_latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
src: url("fonts/roboto-v51-cyrillic_latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 100;
src: url("fonts/roboto-condensed-v31-cyrillic_latin_latin-ext-100.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 300;
src: url("fonts/roboto-condensed-v31-cyrillic_latin_latin-ext-300.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 400;
src: url("fonts/roboto-condensed-v31-cyrillic_latin_latin-ext-regular.woff2") format("woff2");
}
/* Medium (500): popup.css asks for font-weight 500 on term names; without a
500 face CSS matching falls back to Regular and the term/expansion
contrast never renders. */
@font-face {
font-display: swap;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 500;
src: url("fonts/roboto-condensed-v31-cyrillic_latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 700;
src: url("fonts/roboto-condensed-v31-cyrillic_latin_latin-ext-700.woff2") format("woff2");
}
/* =============================================================
FONT TOKENS
============================================================= */
:root {
/* Font Family */
--default-font: "Roboto Condensed", "Roboto", Arial, sans-serif;
--header-font: "Roboto", Arial, sans-serif;
--font-quote: Georgia, "Times New Roman", serif;
--font-monospace: Consolas, "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
/* Font Weight (for static fonts) */
--font-thin: 100;
--font-light: 300;
--font-normal: 400;
--font-bold: 700;
/* Font Size */
--size-hdrLg: 36px;
--size-hdrMd: 24px;
--size-hdrSm: 18px;
--size-default: 14px;
--size-Sm: 11px;
--size-meta: 14px;
--size-metaSm: 11px;
/* Font Shorthand (size/line-height family) */
--font-hdrLg: var(--size-hdrLg) / var(--lh-hdrLg) var(--header-font);
--font-hdrMd: var(--size-hdrMd) / var(--lh-hdrMd) var(--header-font);
--font-hdrSm: var(--size-hdrSm) / var(--lh-hdrSm) var(--header-font);
--font-default: var(--size-default) / var(--lh-default) var(--default-font);
--font-Sm: var(--size-Sm) / var(--lh-Sm) var(--default-font);
--font-meta: var(--size-meta) / var(--lh-meta) var(--default-font);
--font-metaSm: var(--size-metaSm) / var(--lh-metaSm) var(--default-font);
/* Line Height */
--lh-hdrLg: 40px;
--lh-hdrMd: 30px;
--lh-hdrSm: 22px;
--lh-default: 20px;
--lh-Sm: 14px;
--lh-meta: 14px;
--lh-metaSm: 11px;
}
/* =============================================================
SHADOW TOKENS (centered blur 1/10/20, plus lifted and side-edge
variants)
============================================================= */
:root {
--shadow-none: none;
--shadow-sm: 0 0 1px var(--ShadowElements);
--shadow-md: 0 0 10px var(--ShadowElements);
--shadow-lg: 0 0 20px var(--ShadowElements);
--shadow-heavy: 0 0 20px rgba(0, 0, 0, 0.5);
/* Offset — lifted appearance with y-offset */
--shadow-sm-offset: 0 2px 8px var(--ShadowElements);
--shadow-md-offset: 0 4px 12px var(--ShadowElements);
--shadow-lg-offset: 0 4px 24px var(--ShadowElements);
/* Directional — side-panel edges */
--shadow-left: -2px 0 10px var(--ShadowElements);
}
/* =============================================================
THEMES — Light (default) and Dark. color-scheme per block so
native widgets and scrollbars follow the theme.
============================================================= */
/* ---- Light — also the default ---- */
:root, :root[data-theme="light"] {
color-scheme: light;
/* Foreground Colors */
--ForegroundPrimary: rgba(85, 85, 85, 1);
--ForegroundStrong: rgba(31, 35, 40, 1); /* TODO(placeholder): real design from Jon — strong-text ink */
--ForegroundDisabled: rgba(205, 205, 205, 1);
--ForegroundWatermark: rgba(196, 196, 196, 1);
/* Invert Foreground Colors */
--ForegroundInvertPrimary: rgba(85, 85, 85, 1);
--ForegroundInvertStrong: rgba(31, 35, 40, 1); /* TODO(placeholder): real design from Jon — strong-text ink */
--ForegroundInvertDisabled: rgba(205, 205, 205, 1);
--ForegroundInvertWatermark: rgba(112, 112, 112, 1);
/* Action Foreground Colors */
--ForegroundAction: rgba(79, 70, 229, 1); /* TODO(placeholder): real design from Jon — accent */
/* Background Colors */
--BackgroundPrimary: rgba(245, 245, 245, 1);
--BackgroundStrong: rgba(255, 255, 255, 1);
--BackgroundStrongStepOne: rgba(240, 240, 240, 1);
--BackgroundStepOne: rgba(251, 251, 249, 1);
--BackgroundStepTwo: rgba(246, 246, 246, 1);
--BackgroundOutline: rgba(199, 199, 199, 0);
--BackgroundInput: rgba(255, 255, 255, 1);
--BackgroundInputOutline: rgba(199, 199, 199, 1);
/* Invert Background Colors */
--BackgroundInvertPrimary: rgba(253, 253, 251, 1);
--BackgroundInvertStrong: rgba(243, 243, 243, 1);
--BackgroundInvertStrongStepOne: rgba(255, 255, 255, 1);
--BackgroundInvertStepOne: rgba(255, 255, 253, 1);
--BackgroundInvertStepTwo: rgba(251, 251, 249, 1);
--BackgroundInvertOutline: rgba(199, 199, 199, 1);
--BackgroundInvertInput: rgba(255, 255, 255, 1);
--BackgroundInvertInputOutline: rgba(199, 199, 199, 1);
/* Inner Linework Colors */
--InnerLines: rgba(224, 230, 230, 1);
--InnerLinesInvert: rgba(224, 230, 230, 1);
--InnerLineDividers: rgba(0, 0, 0, 0);
/* Shadow Element Colors */
--ShadowElements: rgba(0, 0, 0, 0.133);
/* MouseOver Colors */
/* #74: a hovered link's text (--accent-hover) — a step darker than the
ink, never lighter: #818CF8 was 2.7:1 on these surfaces, this is >= 6.9. */
--MouseOverPrimary: rgba(67, 56, 202, 1); /* TODO(placeholder): real design from Jon — accent hover */
--MouseOverAction: rgba(67, 56, 202, 1); /* cyan 1 (#44): hover for a solid indigo button under white text */
/* cyan 1 (#110): the danger button, the same in both
themes -- white on #C41E2E, and #A31826 hovered or pressed. */
--DangerAction: rgba(196, 30, 46, 1);
--MouseOverDanger: rgba(163, 24, 38, 1);
/* #110, mirroring the extension's sc#51: danger as text (--danger) -- menu and
nav items, errors, the over-count, the setup result marks. >= 4.5:1 on every
surface, hovered menu items included. */
--DangerInk: rgba(196, 30, 46, 1);
/* #110: a text field's resting border (inputs, textareas, selects) -- its only
boundary, since fields share the page colour: >= 3:1 (WCAG 1.4.11). Dividers
stay --InnerLines; a focused field keeps the accent. */
--InputBorder: rgba(138, 138, 138, 1);
--MouseOverBackground: rgba(233, 233, 233, 1);
--MouseOverInvertBackground: rgba(229, 229, 229, 1);
/* Selection Colors */
--SelectionPrimary: rgba(99, 102, 241, 1); /* TODO(placeholder): real design from Jon — selection */
--SelectionSecondary: rgba(79, 70, 229, 1); /* TODO(placeholder): real design from Jon — selection */
--SelectionForeground: rgba(255, 255, 255, 1);
/* ScrollBar Colors */
--ScrollBarPrimary: rgba(0, 0, 0, 0.3);
/* Information Colors */
/* #74: the link ink (--link) — the light ink #46 set for --ForegroundAction;
#6366F1 was 4.10:1 on --BackgroundPrimary, this is >= 5.5 on every surface. */
--InformationBlue: rgba(79, 70, 229, 1); /* TODO(placeholder): real design from Jon — info / link */
--InformationBlueAlt: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — info / link */
--InformationGreen: rgba(146, 212, 0, 1);
--InformationYellowGreen: rgba(154, 205, 50, 1);
--InformationGreenYellow: rgba(173, 255, 47, 1);
--InformationYellow: rgba(254, 209, 0, 1);
--InformationOrange: rgba(255, 128, 0, 1);
--InformationRed: rgba(230, 35, 51, 1);
--InformationRedAlt: rgba(255, 0, 0, 1);
--InformationPurple: rgba(196, 153, 247, 1);
--InformationForeground: rgba(0, 0, 0, 1);
--InformationBlack: rgba(204, 204, 204, 1);
--InformationGray: rgba(112, 112, 112, 1);
--InformationForegroundAlt: rgba(255, 255, 255, 1);
/* Message Delivery Colors */
--MessageDeliveryIconInfo: rgba(99, 102, 241, 1); /* TODO(placeholder): real design from Jon — info */
--MessageDeliveryIconOk: rgba(146, 212, 0, 1);
--MessageDeliveryIconCritical: rgba(230, 35, 51, 1);
--MessageDeliveryIconWarning: rgba(255, 128, 0, 1);
--MessageDeliveryBackgroundInfo: rgba(224, 231, 255, 1); /* TODO(placeholder): real design from Jon — info wash */
--MessageDeliveryBackgroundOk: rgba(230, 242, 227, 1);
--MessageDeliveryBackgroundCritical: rgba(248, 237, 238, 1);
--MessageDeliveryBackgroundWarning: rgba(255, 239, 223, 1);
--MessageDeliveryForeground: rgba(31, 35, 40, 1); /* TODO(placeholder): real design from Jon — strong-text ink */
}
/* ---- Dark ---- */
:root[data-theme="dark"] {
color-scheme: dark;
/* Foreground Colors */
--ForegroundPrimary: rgba(223, 229, 229, 1);
--ForegroundStrong: rgba(255, 255, 255, 1);
--ForegroundDisabled: rgba(143, 143, 143, 1);
--ForegroundWatermark: rgba(140, 140, 140, 1);
/* Invert Foreground Colors */
--ForegroundInvertPrimary: rgba(223, 229, 229, 1);
--ForegroundInvertStrong: rgba(255, 255, 255, 1);
--ForegroundInvertDisabled: rgba(143, 143, 143, 1);
--ForegroundInvertWatermark: rgba(140, 140, 140, 1);
/* Action Foreground Colors */
--ForegroundAction: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — accent */
/* Background Colors */
--BackgroundPrimary: rgba(28, 28, 28, 1);
--BackgroundStrong: rgba(22, 22, 22, 1);
--BackgroundStrongStepOne: rgba(34, 34, 34, 1);
--BackgroundStepOne: rgba(45, 45, 45, 1);
--BackgroundStepTwo: rgba(32, 32, 32, 1);
--BackgroundOutline: rgba(37, 37, 37, 1);
--BackgroundInput: rgba(37, 37, 37, 1);
--BackgroundInputOutline: rgba(10, 10, 10, 1);
/* Invert Background Colors */
--BackgroundInvertPrimary: rgba(45, 45, 45, 1);
--BackgroundInvertStrong: rgba(10, 10, 10, 1);
--BackgroundInvertStrongStepOne: rgba(47, 47, 47, 1);
--BackgroundInvertStepOne: rgba(47, 47, 47, 1);
--BackgroundInvertStepTwo: rgba(51, 51, 51, 1);
--BackgroundInvertOutline: rgba(51, 51, 51, 0.133);
--BackgroundInvertInput: rgba(17, 17, 17, 1);
--BackgroundInvertInputOutline: rgba(0, 0, 0, 1);
/* Inner Linework Colors */
--InnerLines: rgba(68, 68, 68, 0.6);
--InnerLinesInvert: rgba(68, 68, 68, 0.6);
--InnerLineDividers: rgba(0, 0, 0, 0);
/* Shadow Element Colors */
--ShadowElements: rgba(0, 0, 0, 1);
/* MouseOver Colors */
--MouseOverPrimary: rgba(165, 180, 252, 1); /* TODO(placeholder): real design from Jon — accent hover */
--MouseOverAction: rgba(67, 56, 202, 1); /* cyan 1 (#44): hover for a solid indigo button under white text */
/* cyan 1 (#110): the danger button, the same in both
themes -- white on #C41E2E, and #A31826 hovered or pressed. */
--DangerAction: rgba(196, 30, 46, 1);
--MouseOverDanger: rgba(163, 24, 38, 1);
/* #110, mirroring the extension's sc#51: danger as text (--danger) -- menu and
nav items, errors, the over-count, the setup result marks. >= 4.5:1 on every
surface, hovered menu items included. */
--DangerInk: rgba(248, 113, 113, 1);
/* #110: a text field's resting border (inputs, textareas, selects) -- its only
boundary, since fields share the page colour: >= 3:1 (WCAG 1.4.11). Dividers
stay --InnerLines; a focused field keeps the accent. */
--InputBorder: rgba(110, 110, 110, 1);
--MouseOverBackground: rgba(6, 6, 6, 1);
--MouseOverInvertBackground: rgba(34, 34, 34, 1);
/* Selection Colors */
--SelectionPrimary: rgba(79, 70, 229, 1); /* TODO(placeholder): real design from Jon — selection */
--SelectionSecondary: rgba(99, 102, 241, 1); /* TODO(placeholder): real design from Jon — selection */
--SelectionForeground: rgba(255, 255, 255, 1);
/* ScrollBar Colors */
--ScrollBarPrimary: rgba(223, 229, 229, 0.3);
/* Information Colors */
--InformationBlue: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — info / link */
--InformationBlueAlt: rgba(165, 180, 252, 1); /* TODO(placeholder): real design from Jon — info / link */
--InformationGreen: rgba(146, 212, 0, 1);
--InformationYellow: rgba(254, 209, 0, 1);
--InformationYellowGreen: rgba(154, 205, 50, 1);
--InformationGreenYellow: rgba(173, 255, 47, 1);
--InformationOrange: rgba(255, 128, 0, 1);
--InformationRed: rgba(237, 41, 57, 1);
--InformationRedAlt: rgba(255, 0, 0, 1);
--InformationPurple: rgba(196, 153, 247, 1);
--InformationForeground: rgba(0, 0, 0, 1);
--InformationBlack: rgba(153, 153, 153, 1);
--InformationGray: rgba(169, 169, 169, 1);
--InformationForegroundAlt: rgba(255, 255, 255, 1);
/* Message Delivery Colors */
--MessageDeliveryIconInfo: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — info */
--MessageDeliveryIconOk: rgba(146, 212, 0, 1);
--MessageDeliveryIconCritical: rgba(230, 35, 51, 1);
--MessageDeliveryIconWarning: rgba(255, 128, 0, 1);
--MessageDeliveryBackgroundInfo: rgba(10, 14, 19, 1);
--MessageDeliveryBackgroundOk: rgba(17, 22, 17, 1);
--MessageDeliveryBackgroundCritical: rgba(31, 17, 17, 1);
--MessageDeliveryBackgroundWarning: rgba(37, 25, 11, 1);
--MessageDeliveryForeground: rgba(221, 221, 221, 1);
}
/* =============================================================
ALIAS BRIDGE — the extension's short variable names, remapped
onto the theme tokens so popup.css, options.css, tutorial.css
and welcome.css re-theme together.
============================================================= */
:root {
--bg: var(--BackgroundPrimary);
--accent-bg: var(--BackgroundStrong);
--text: var(--ForegroundPrimary);
--text-strong: var(--ForegroundStrong);
/* Muted text: InformationGray, not ForegroundWatermark — watermark is
placeholder-faint (#C4C4C4 on #F5F5F5) and the popup leans on muted
text for real copy. */
--text-light: var(--InformationGray);
--border: var(--InnerLines);
--accent: var(--ForegroundAction);
--accent-hover: var(--MouseOverPrimary);
--accent-text: var(--SelectionForeground);
--hover-bg: var(--MouseOverBackground);
--danger: var(--DangerInk);
--link: var(--InformationBlue);
--input-bg: var(--BackgroundInput);
--input-border: var(--BackgroundInputOutline);
}
/* =============================================================
TYPOGRAPHY — element defaults; page sheets loaded after this
file still win where they are more specific
============================================================= */
h1 {
font: var(--font-hdrLg);
font-weight: var(--font-thin);
color: var(--ForegroundPrimary);
}
h2 {
font: var(--font-hdrMd);
font-weight: var(--font-light);
color: var(--ForegroundPrimary);
}
h3 {
font: var(--font-hdrSm);
font-weight: var(--font-light);
color: var(--ForegroundPrimary);
}
body {
font: var(--font-default);
font-weight: var(--font-normal);
background-color: var(--BackgroundPrimary);
color: var(--ForegroundPrimary);
text-align: left;
text-overflow: ellipsis;
white-space: normal;
}
small {
font: var(--font-Sm);
font-weight: var(--font-normal);
color: var(--ForegroundPrimary);
display: block;
}
p {
font: var(--size-default) / var(--lh-default) var(--header-font);
font-weight: var(--font-normal);
color: var(--ForegroundPrimary);
white-space: normal;
}
label {
font: var(--font-default);
font-weight: var(--font-normal);
text-align: left;
color: var(--ForegroundPrimary);
}
blockquote {
font: var(--font-default);
font-weight: var(--font-bold);
font-style: italic;
font-family: var(--font-quote);
color: var(--ForegroundPrimary);
margin: 0;
}
/* Scrollbars stay native on purpose — the drawer should match Chrome
itself, and the per-theme color-scheme above keeps them light/dark. */
/* Product wordmark: the brand wherever it appears (no square tile). Pages
use one 
and set only
its height; the dark theme swaps in the white-ink file. The URL resolves
against this sheet, so it works from every page directory. */
img.wordmark { display: block; width: auto; }
:root[data-theme="dark"] img.wordmark { content: url("../icons/wordmark-white.svg"); }