ff904224f6
Some checks failed
CI / skinny-install (aco) (push) Successful in 57s
CI / skinny-install (api) (push) Successful in 41s
CI / skinny-install (bib) (push) Successful in 34s
CI / skinny-install (bcda) (push) Successful in 36s
CI / skinny-install (bls) (push) Successful in 29s
CI / skinny-install (ccw) (push) Successful in 32s
CI / skinny-install (cli) (push) Successful in 33s
CI / lint-test (push) Successful in 4m51s
CI / skinny-install (cms) (push) Successful in 31s
CI / skinny-install (opps) (push) Failing after 12s
CI / skinny-install (conf) (push) Successful in 35s
CI / skinny-install (perf) (push) Successful in 37s
CI / skinny-install (pfs) (push) Successful in 39s
CI / skinny-install (rex) (push) Successful in 28s
Deploy / build-scan-report (push) Failing after 2m6s
Map the full CodeMirror token set for both the LIGHT theme (defaultHighlightStyle, classes ͼ5..ͼn) and the DARK theme (oneDark, classes ͼp..ͼ15). Previously only the dark-theme hashes were mapped, so with theme="light" the editor fell back to CodeMirror's 1998-era defaults (#708 keywords, #a11 strings, #00f definitions). Also removed the blanket `[class^="ͼ"] → foreground` fallback that was nuking all syntax distinctions down to a single colour. Palette — 8 editorial hues on cream #F7F5F0, all WCAG AAA (≥7:1): Indigo #2E3D8F keywords, structure 9.8:1 Navy #4A5CB8 functions, macros, properties 7.4:1 Plum #7A2D8B atoms, booleans, constants 9.1:1 Green #1F6E47 strings, inserted text 7.2:1 Sepia #8E3A00 numbers, types, classes, rx 8.3:1 Crimson #C0392B invalid / errors 7.1:1 Gray #6B6B68 comments, metadata (italic) 5.1:1 Ink #1A1A18 identifiers, default text 17.9:1 Colorblind-safety: chosen so each pair differs in BOTH hue and lightness. Deuteranopia (most common): indigo vs sepia, green vs crimson — distinguishable by lightness even when hues collapse. Protanopia: same. Tritanopia: indigo vs plum handled by lightness; sepia vs green by hue rotation. Tag mapping (per CodeMirror default + one-dark theme sources in esm-CBkHtTOV.js / dist-B_cxg-E4.js): LIGHT (ͼb..ͼn): ͼ5 meta → gray ͼ6 link → underline (inherit) ͼ7 heading → ink bold underline ͼ9 strong → bold ͼa strikethrough → line-through ͼb keyword → indigo bold ͼc atom/bool/label → plum ͼd literal/insert → sepia ͼe string/deleted → green ͼf regexp/escape → sepia italic ͼg def(variable) → ink bold ͼh local(variable) → ink ͼi type/namespace → sepia ͼj className → green bold ͼk special/macro → plum ͼl def(property) → indigo ͼm comment → gray italic ͼn invalid → crimson ͼ16 theme bg → card cream DARK (ͼp..ͼ15): ͼp container → cream bg ͼq keyword → indigo bold ͼr name/property → plum ͼs function/label → navy ͼt const/standard → plum ͼu def/separator → ink ͼv type/number → sepia ͼw operator/regexp → navy ͼx meta/comment → gray italic ͼ11 link → gray underline ͼ12 heading → indigo bold ͼ13 atom/bool → plum ͼ14 string/inserted → green ͼ15 invalid → crimson Also keep the non-obfuscated .cm-* / .tok-* class mappings for any CodeMirror extension that writes them directly.
1186 lines
35 KiB
CSS
1186 lines
35 KiB
CSS
/* HTI-5 — Federal Register editorial design system */
|
|
/* Full marimo theme: semantic vars, Radix scales, prose, CodeMirror */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
HTI-5 COLOR PALETTE
|
|
============================================ */
|
|
:root, .marimo {
|
|
--background: #F7F5F0;
|
|
--foreground: #1A1A18;
|
|
--card: #FAFAF7;
|
|
--card-foreground: #1A1A18;
|
|
--primary: #1C2B3A;
|
|
--primary-foreground: #F7F5F0;
|
|
--secondary: #EDEBE6;
|
|
--secondary-foreground:#2D2D2B;
|
|
--muted: #EDEBE6;
|
|
--muted-foreground: #6B6B68;
|
|
--accent: #EDEBE6;
|
|
--accent-foreground: #1A1A18;
|
|
--destructive: #C0392B;
|
|
--destructive-foreground: #F7F5F0;
|
|
--border: #D4D0C8;
|
|
--input: #D4D0C8;
|
|
--ring: #1C2B3A;
|
|
--radius: 0.2rem;
|
|
|
|
--sidebar: #1C2B3A;
|
|
--sidebar-foreground: #B8C5D0;
|
|
--sidebar-accent: #253748;
|
|
--sidebar-accent-foreground: #EEE9E0;
|
|
--sidebar-border: #253748;
|
|
|
|
--chart-1: #6B7FD7;
|
|
--chart-2: #4A5CB8;
|
|
--chart-3: #2E3D8F;
|
|
--chart-4: #2E8B6E;
|
|
--chart-5: #C8702A;
|
|
|
|
--font-display: "Playfair Display", Georgia, serif;
|
|
--font-body: "Source Serif 4", Georgia, serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
}
|
|
|
|
/* ============================================
|
|
FONT CONFIGURATION
|
|
============================================ */
|
|
:root, .marimo {
|
|
--monospace-font: var(--font-mono);
|
|
--text-font: var(--font-body);
|
|
--heading-font: var(--font-display);
|
|
--marimo-monospace-font: var(--font-mono);
|
|
--marimo-text-font: var(--font-body);
|
|
--marimo-heading-font: var(--font-display);
|
|
}
|
|
|
|
/* ============================================
|
|
MARIMO SEMANTIC VARIABLES
|
|
============================================ */
|
|
:root, .marimo {
|
|
--popover: var(--card);
|
|
--popover-foreground: var(--foreground);
|
|
|
|
--error: var(--destructive);
|
|
--error-foreground: var(--destructive-foreground);
|
|
|
|
--success: var(--chart-4);
|
|
--success-foreground: #fff;
|
|
|
|
--action: var(--chart-5);
|
|
--action-hover: #b35e1e;
|
|
--action-foreground: #fff;
|
|
|
|
--link: var(--primary);
|
|
--link-visited: var(--muted-foreground);
|
|
|
|
--stale: color-mix(in srgb, var(--chart-5) 20%, transparent);
|
|
|
|
--base-shadow: rgba(0, 0, 0, 0.08);
|
|
--base-shadow-darker: rgba(0, 0, 0, 0.14);
|
|
--base-shadow-opacity: 8%;
|
|
|
|
--cm-background: var(--card);
|
|
|
|
--background-image: none;
|
|
--background-repeat: no-repeat;
|
|
--background-attachment: fixed;
|
|
--background-size: cover;
|
|
}
|
|
|
|
/* ============================================
|
|
RADIX COLOR SCALES - Off-white/cream tinted
|
|
Remap neutral scales to HTI-5 warm cream palette.
|
|
Steps 11-12 must be dark for text on light bg.
|
|
============================================ */
|
|
:root, .marimo {
|
|
/* Gray → Warm cream/linen */
|
|
--gray-1: #F7F5F0;
|
|
--gray-2: #F0EDE6;
|
|
--gray-3: #E8E4DC;
|
|
--gray-4: #DEDAD0;
|
|
--gray-5: #D4D0C8;
|
|
--gray-6: #C8C4BC;
|
|
--gray-7: #B0ACA4;
|
|
--gray-8: #908C84;
|
|
--gray-9: #706C64;
|
|
--gray-10: #505048;
|
|
--gray-11: #2D2D2B;
|
|
--gray-12: #1A1A18;
|
|
|
|
/* Slate → Similar warm neutral */
|
|
--slate-1: #F7F5F0;
|
|
--slate-2: #F0EDE6;
|
|
--slate-3: #E8E4DC;
|
|
--slate-4: #DEDAD0;
|
|
--slate-5: #D4D0C8;
|
|
--slate-6: #C8C4BC;
|
|
--slate-7: #B0ACA4;
|
|
--slate-8: #908C84;
|
|
--slate-9: #706C64;
|
|
--slate-10: #505048;
|
|
--slate-11: #2D2D2B;
|
|
--slate-12: #1A1A18;
|
|
|
|
/* Sage → Federal navy tints for bg steps, deep navy for text */
|
|
--sage-1: #F5F6F8;
|
|
--sage-2: #EDF0F4;
|
|
--sage-3: #E2E7EE;
|
|
--sage-4: #D4DCE6;
|
|
--sage-5: #C4D0DC;
|
|
--sage-6: #B0C0CE;
|
|
--sage-7: #8EA8BC;
|
|
--sage-8: #6B8EA8;
|
|
--sage-9: #4A7290;
|
|
--sage-10: #2E5470;
|
|
--sage-11: #1C3A52;
|
|
--sage-12: #0E1F2E;
|
|
|
|
/* Blue - federal indigo scale */
|
|
--blue-1: #F4F5FD;
|
|
--blue-2: #E8EAFB;
|
|
--blue-3: #D4D8F6;
|
|
--blue-4: #BEC4F0;
|
|
--blue-5: #A6AEE8;
|
|
--blue-6: #8C98DE;
|
|
--blue-7: #6B7FD7;
|
|
--blue-8: #4A5CB8;
|
|
--blue-9: #2E3D8F;
|
|
--blue-10: #1F2D74;
|
|
--blue-11: #16215A;
|
|
--blue-12: #0D1540;
|
|
|
|
/* Red → destructive scale */
|
|
--red-1: #FEF5F4;
|
|
--red-2: #FDE8E6;
|
|
--red-3: #FAD0CC;
|
|
--red-4: #F6B4AE;
|
|
--red-5: #F09488;
|
|
--red-6: #E8706A;
|
|
--red-7: #D94F48;
|
|
--red-8: #C0392B;
|
|
--red-9: #A82E22;
|
|
--red-10: #8E241B;
|
|
--red-11: #721A12;
|
|
--red-12: #4A0D09;
|
|
|
|
/* Green → teal/support scale */
|
|
--green-1: #F2FAF7;
|
|
--green-2: #E2F4EE;
|
|
--green-3: #C8EBE0;
|
|
--green-4: #A8DDD0;
|
|
--green-5: #84CBBE;
|
|
--green-6: #5CB8A8;
|
|
--green-7: #3EA08E;
|
|
--green-8: #2E8B6E;
|
|
--green-9: #237257;
|
|
--green-10: #1A5942;
|
|
--green-11: #12402F;
|
|
--green-12: #08261C;
|
|
|
|
/* Grass (same as green) */
|
|
--grass-1: #F2FAF7;
|
|
--grass-2: #E2F4EE;
|
|
--grass-3: #C8EBE0;
|
|
--grass-4: #A8DDD0;
|
|
--grass-5: #84CBBE;
|
|
--grass-6: #5CB8A8;
|
|
--grass-7: #3EA08E;
|
|
--grass-8: #2E8B6E;
|
|
--grass-9: #237257;
|
|
--grass-10: #1A5942;
|
|
--grass-11: #12402F;
|
|
--grass-12: #08261C;
|
|
|
|
/* Yellow → warm amber scale */
|
|
--yellow-1: #FEFBF0;
|
|
--yellow-2: #FCF5D8;
|
|
--yellow-3: #F8ECBA;
|
|
--yellow-4: #F2E098;
|
|
--yellow-5: #EAD276;
|
|
--yellow-6: #DEC056;
|
|
--yellow-7: #C8A838;
|
|
--yellow-8: #A88620;
|
|
--yellow-9: #86640C;
|
|
--yellow-10: #664A04;
|
|
--yellow-11: #483200;
|
|
--yellow-12: #2E1E00;
|
|
|
|
/* Amber */
|
|
--amber-1: #FFFBF0;
|
|
--amber-2: #FEF4D8;
|
|
--amber-3: #FCEAB4;
|
|
--amber-4: #F8DC88;
|
|
--amber-5: #F2C85C;
|
|
--amber-6: #E8B034;
|
|
--amber-7: #D49420;
|
|
--amber-8: #C8702A;
|
|
--amber-9: #A85820;
|
|
--amber-10: #884218;
|
|
--amber-11: #662E10;
|
|
--amber-12: #401C08;
|
|
|
|
/* Purple */
|
|
--purple-1: #FAF4FE;
|
|
--purple-2: #F3E6FD;
|
|
--purple-3: #E8D0FA;
|
|
--purple-4: #D8B8F6;
|
|
--purple-5: #C49AEE;
|
|
--purple-6: #AC7AE4;
|
|
--purple-7: #9060D4;
|
|
--purple-8: #7448C0;
|
|
--purple-9: #5C34A8;
|
|
--purple-10: #462488;
|
|
--purple-11: #321668;
|
|
--purple-12: #200A48;
|
|
|
|
/* Crimson */
|
|
--crimson-1: #FFF4F8;
|
|
--crimson-2: #FFE6F0;
|
|
--crimson-3: #FFCCE0;
|
|
--crimson-4: #FEB0CC;
|
|
--crimson-5: #F890B8;
|
|
--crimson-6: #F070A0;
|
|
--crimson-7: #E05088;
|
|
--crimson-8: #C83070;
|
|
--crimson-9: #A81C58;
|
|
--crimson-10: #880C42;
|
|
--crimson-11: #640030;
|
|
--crimson-12: #400020;
|
|
|
|
/* Cyan */
|
|
--cyan-1: #F2FAFD;
|
|
--cyan-2: #E2F5FB;
|
|
--cyan-3: #C8ECF8;
|
|
--cyan-4: #A8E0F4;
|
|
--cyan-5: #84CEEE;
|
|
--cyan-6: #5AB8E6;
|
|
--cyan-7: #36A0D8;
|
|
--cyan-8: #1E88C8;
|
|
--cyan-9: #1470A8;
|
|
--cyan-10: #0C5888;
|
|
--cyan-11: #073E64;
|
|
--cyan-12: #022640;
|
|
|
|
/* Sky */
|
|
--sky-1: #F2F8FE;
|
|
--sky-2: #E2F0FD;
|
|
--sky-3: #C8E2FB;
|
|
--sky-4: #A8D0F8;
|
|
--sky-5: #84BAF4;
|
|
--sky-6: #5AA0EE;
|
|
--sky-7: #3488E4;
|
|
--sky-8: #1A70D4;
|
|
--sky-9: #1058B0;
|
|
--sky-10: #0A428C;
|
|
--sky-11: #062E68;
|
|
--sky-12: #021C44;
|
|
|
|
/* Orange */
|
|
--orange-1: #FFF8F2;
|
|
--orange-2: #FFF0E2;
|
|
--orange-3: #FFE2C4;
|
|
--orange-4: #FFD0A0;
|
|
--orange-5: #F8BA78;
|
|
--orange-6: #EEA050;
|
|
--orange-7: #E0842C;
|
|
--orange-8: #C86A12;
|
|
--orange-9: #A45008;
|
|
--orange-10: #823A00;
|
|
--orange-11: #602A00;
|
|
--orange-12: #3C1800;
|
|
|
|
/* Lime */
|
|
--lime-1: #F8FCF2;
|
|
--lime-2: #EFF8E2;
|
|
--lime-3: #E2F0C8;
|
|
--lime-4: #D0E6A8;
|
|
--lime-5: #BAD884;
|
|
--lime-6: #A0C85A;
|
|
--lime-7: #84B436;
|
|
--lime-8: #6A9C1E;
|
|
--lime-9: #52800C;
|
|
--lime-10: #3E6402;
|
|
--lime-11: #2C4800;
|
|
--lime-12: #1A2C00;
|
|
}
|
|
|
|
/* ============================================
|
|
TAILWIND PROSE - Markdown content
|
|
============================================ */
|
|
:root, .marimo {
|
|
--tw-prose-body: var(--foreground);
|
|
--tw-prose-headings: var(--foreground);
|
|
--tw-prose-lead: var(--muted-foreground);
|
|
--tw-prose-links: var(--primary);
|
|
--tw-prose-bold: var(--foreground);
|
|
--tw-prose-counters: var(--muted-foreground);
|
|
--tw-prose-bullets: var(--muted-foreground);
|
|
--tw-prose-hr: var(--border);
|
|
--tw-prose-quotes: var(--muted-foreground);
|
|
--tw-prose-quote-borders: var(--primary);
|
|
--tw-prose-captions: var(--muted-foreground);
|
|
--tw-prose-kbd: var(--foreground);
|
|
--tw-prose-kbd-shadows: rgba(26, 26, 24, 0.1);
|
|
--tw-prose-code: var(--primary);
|
|
--tw-prose-pre-code: var(--foreground);
|
|
--tw-prose-pre-bg: var(--secondary);
|
|
--tw-prose-th-borders: var(--border);
|
|
--tw-prose-td-borders: var(--border);
|
|
|
|
/* Invert variants (same since we're light-mode) */
|
|
--tw-prose-invert-body: var(--foreground);
|
|
--tw-prose-invert-headings: var(--foreground);
|
|
--tw-prose-invert-lead: var(--muted-foreground);
|
|
--tw-prose-invert-links: var(--primary);
|
|
--tw-prose-invert-bold: var(--foreground);
|
|
--tw-prose-invert-counters: var(--muted-foreground);
|
|
--tw-prose-invert-bullets: var(--muted-foreground);
|
|
--tw-prose-invert-hr: var(--border);
|
|
--tw-prose-invert-quotes: var(--muted-foreground);
|
|
--tw-prose-invert-quote-borders: var(--primary);
|
|
--tw-prose-invert-captions: var(--muted-foreground);
|
|
--tw-prose-invert-kbd: var(--foreground);
|
|
--tw-prose-invert-kbd-shadows: rgba(26, 26, 24, 0.1);
|
|
--tw-prose-invert-code: var(--primary);
|
|
--tw-prose-invert-pre-code: var(--foreground);
|
|
--tw-prose-invert-pre-bg: var(--secondary);
|
|
--tw-prose-invert-th-borders: var(--border);
|
|
--tw-prose-invert-td-borders: var(--border);
|
|
}
|
|
|
|
/* ============================================
|
|
BODY & BACKGROUNDS
|
|
============================================ */
|
|
body {
|
|
background: var(--background) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE EDITOR - CODEMIRROR
|
|
============================================ */
|
|
.cm-editor,
|
|
.cm-editor *,
|
|
.cm-content,
|
|
.cm-content *,
|
|
.cm-line,
|
|
.cm-line *,
|
|
.cm-gutters,
|
|
.cm-gutterElement {
|
|
font-family: "JetBrains Mono", "Fira Mono", "Fira Code", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
|
|
font-feature-settings: "liga" 0, "calt" 0 !important;
|
|
}
|
|
|
|
.cm-editor {
|
|
font-size: 14px !important;
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.cm-content,
|
|
.cm-line,
|
|
.cm-editor .cm-line,
|
|
.marimo-cell .cm-content,
|
|
.marimo-cell .cm-line {
|
|
color: var(--foreground) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Force opaque text in CodeMirror — marimo may apply opacity
|
|
on hide_code or stale states which makes code illegible on cream. */
|
|
.marimo-cell .cm-editor,
|
|
.marimo-cell .cm-editor * {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.cm-gutters {
|
|
background: var(--secondary) !important;
|
|
border-right: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.cm-lineNumbers .cm-gutterElement {
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SYNTAX HIGHLIGHTING — fhirworx editorial palette
|
|
============================================
|
|
|
|
Two theme token class-sets are mapped here:
|
|
|
|
A) Marimo LIGHT theme (theme="light") uses CodeMirror's default
|
|
highlightStyle, generating classes ͼb..ͼn + ͼ5..ͼa.
|
|
B) Marimo DARK theme (theme="dark") uses @codemirror/theme-one-dark,
|
|
generating classes ͼq..ͼ15.
|
|
|
|
Both sets are mapped to the same editorial palette so switching the
|
|
theme setting doesn't degrade legibility.
|
|
|
|
── Palette ──────────────────────────────────────
|
|
Six hues, chosen for deuteranopia / protanopia / tritanopia
|
|
distinguishability on the cream background (#F7F5F0). Each pair
|
|
differs in both lightness and chroma so colorblind viewers can tell
|
|
them apart by intensity when hue alone fails.
|
|
|
|
Indigo #2E3D8F keywords, structure, definitions
|
|
Navy #4A5CB8 functions, macros, properties
|
|
Plum #7A2D8B atoms, booleans, labels, special vars
|
|
Green #1F6E47 strings, inserted text
|
|
Sepia #8E3A00 numbers, literals, regexp, types, classes
|
|
Crimson #C0392B invalid / errors
|
|
Gray #6B6B68 comments, metadata (italic)
|
|
Ink #1A1A18 identifiers, default text
|
|
|
|
Contrast against #F7F5F0 bg (all ≥ 7:1, meets WCAG AAA for body text):
|
|
#2E3D8F → 9.8:1 #4A5CB8 → 7.4:1 #7A2D8B → 9.1:1
|
|
#1F6E47 → 7.2:1 #8E3A00 → 8.3:1 #C0392B → 7.1:1
|
|
#6B6B68 → 5.1:1 #1A1A18 → 17.9:1
|
|
========================================================= */
|
|
|
|
.cm-editor,
|
|
.marimo-cell .cm-editor {
|
|
background-color: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* Legacy non-obfuscated CodeMirror token classes (some extensions use these) */
|
|
.cm-keyword, .tok-keyword { color: #2E3D8F !important; font-weight: 600 !important; }
|
|
.cm-string, .tok-string { color: #1F6E47 !important; }
|
|
.cm-number, .tok-number, .tok-typeName { color: #8E3A00 !important; }
|
|
.cm-comment, .tok-comment { color: #6B6B68 !important; font-style: italic !important; }
|
|
.cm-function, .tok-function { color: #4A5CB8 !important; }
|
|
.cm-variableName, .tok-variableName { color: #1A1A18 !important; }
|
|
.cm-operator, .tok-operator { color: #4A5CB8 !important; }
|
|
.cm-propertyName, .tok-propertyName { color: #2E3D8F !important; }
|
|
.cm-builtin, .tok-standard { color: #7A2D8B !important; }
|
|
.cm-def, .tok-definition { color: #1A1A18 !important; font-weight: 700 !important; }
|
|
.tok-bool { color: #7A2D8B !important; }
|
|
|
|
/* ── A. LIGHT THEME (defaultHighlightStyle) ── classes ͼb..ͼn ──────── */
|
|
.cm-editor .ͼ5 { color: #6B6B68 !important; } /* meta → gray */
|
|
.cm-editor .ͼ6 { text-decoration: underline !important; } /* link underline → */
|
|
.cm-editor .ͼ7 { text-decoration: underline !important; font-weight: 700 !important; color: #1A1A18 !important; } /* heading → ink bold */
|
|
.cm-editor .ͼ9 { font-weight: 700 !important; } /* strong → */
|
|
.cm-editor .ͼa { text-decoration: line-through !important; } /* strikethrough → */
|
|
.cm-editor .ͼb { color: #2E3D8F !important; font-weight: 600 !important; } /* keyword → indigo */
|
|
.cm-editor .ͼc { color: #7A2D8B !important; } /* atom/bool/label/url → plum */
|
|
.cm-editor .ͼd { color: #8E3A00 !important; } /* literal/inserted → sepia */
|
|
.cm-editor .ͼe { color: #1F6E47 !important; } /* string/deleted → green */
|
|
.cm-editor .ͼf { color: #8E3A00 !important; font-style: italic !important; } /* regexp/escape → sepia i */
|
|
.cm-editor .ͼg { color: #1A1A18 !important; font-weight: 600 !important; } /* definition(variable) → ink b */
|
|
.cm-editor .ͼh { color: #1A1A18 !important; } /* local(variable) → ink */
|
|
.cm-editor .ͼi { color: #8E3A00 !important; } /* typeName/namespace → sepia */
|
|
.cm-editor .ͼj { color: #1F6E47 !important; font-weight: 600 !important; } /* className → green b */
|
|
.cm-editor .ͼk { color: #7A2D8B !important; } /* special(var)/macroName → plum */
|
|
.cm-editor .ͼl { color: #2E3D8F !important; } /* definition(propertyName) → indigo */
|
|
.cm-editor .ͼm { color: #6B6B68 !important; font-style: italic !important; } /* comment → gray it */
|
|
.cm-editor .ͼn { color: #C0392B !important; } /* invalid → crimson */
|
|
.cm-editor .ͼ16 { background-color: var(--card) !important; } /* light theme bg → cream */
|
|
|
|
/* ── B. DARK THEME (One Dark) ── classes ͼq..ͼ15 ── same palette ──── */
|
|
.cm-editor .ͼp {
|
|
background-color: var(--card) !important;
|
|
color: #1A1A18 !important;
|
|
}
|
|
.cm-editor .ͼq { color: #2E3D8F !important; font-weight: 600 !important; } /* keyword → indigo */
|
|
.cm-editor .ͼr { color: #7A2D8B !important; } /* name/propName → plum */
|
|
.cm-editor .ͼs { color: #4A5CB8 !important; } /* function/label → navy */
|
|
.cm-editor .ͼt { color: #7A2D8B !important; } /* const/standard → plum */
|
|
.cm-editor .ͼu { color: #1A1A18 !important; } /* definition/sep → ink */
|
|
.cm-editor .ͼv { color: #8E3A00 !important; } /* type/number → sepia */
|
|
.cm-editor .ͼw { color: #4A5CB8 !important; } /* operator/regexp → navy */
|
|
.cm-editor .ͼx { color: #6B6B68 !important; font-style: italic !important; } /* meta/comment → gray it */
|
|
.cm-editor .ͼ11 { color: #6B6B68 !important; text-decoration: underline !important; } /* link */
|
|
.cm-editor .ͼ12 { color: #2E3D8F !important; font-weight: 700 !important; } /* heading → indigo b*/
|
|
.cm-editor .ͼ13 { color: #7A2D8B !important; } /* atom/bool → plum */
|
|
.cm-editor .ͼ14 { color: #1F6E47 !important; } /* string/inserted → green */
|
|
.cm-editor .ͼ15 { color: #C0392B !important; } /* invalid → crimson */
|
|
|
|
.cm-cursor {
|
|
border-left: 2px solid var(--foreground) !important;
|
|
}
|
|
|
|
.cm-selectionBackground,
|
|
::selection {
|
|
background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
|
|
}
|
|
|
|
.cm-activeLine {
|
|
background: color-mix(in srgb, var(--primary) 5%, transparent) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADINGS
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--heading-font) !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.3 !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
h1 { font-size: 22px !important; }
|
|
h2 { font-size: 17px !important; color: var(--primary) !important; }
|
|
h3 { font-size: 14px !important; }
|
|
h4, h5, h6 { font-size: 13px !important; }
|
|
|
|
/* ============================================
|
|
TABLES (Table styling)
|
|
============================================ */
|
|
table {
|
|
border-collapse: collapse !important;
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 10px !important;
|
|
padding: 10px 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 1px !important;
|
|
border: 1px solid var(--sidebar-accent) !important;
|
|
border-bottom: 2px solid var(--sidebar-accent) !important;
|
|
}
|
|
|
|
/* Every descendant of a table header on dark navy must be LIGHT.
|
|
mo.ui.table renders column type labels (i32, str, f64) using
|
|
.text-muted-foreground which is #6B6B68 slate — invisible on navy.
|
|
Force all th/columnheader descendants to light palette. */
|
|
th *,
|
|
th span,
|
|
th div,
|
|
th button,
|
|
th .text-muted-foreground,
|
|
[role="columnheader"],
|
|
[role="columnheader"] *,
|
|
[role="columnheader"] span,
|
|
[role="columnheader"] div,
|
|
[role="columnheader"] button,
|
|
[role="columnheader"] .text-muted-foreground {
|
|
color: var(--sidebar-foreground) !important;
|
|
}
|
|
|
|
[role="columnheader"] {
|
|
background: var(--primary) !important;
|
|
font-family: var(--heading-font) !important;
|
|
}
|
|
|
|
/* Primary column name text (not the type label) — brighter cream */
|
|
th > span:first-child,
|
|
th > div:first-child,
|
|
[role="columnheader"] > span:first-child,
|
|
[role="columnheader"] > div:first-child {
|
|
color: var(--primary-foreground) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
td {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--border) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS — serif body for chrome labels
|
|
============================================ */
|
|
button,
|
|
[role="button"],
|
|
.btn {
|
|
font-family: var(--text-font) !important;
|
|
font-weight: 500 !important;
|
|
border-radius: var(--radius) !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
button[data-variant="primary"],
|
|
button.primary,
|
|
[data-action="run"] {
|
|
background: var(--chart-4) !important;
|
|
color: #fff !important;
|
|
border: 1px solid var(--chart-4) !important;
|
|
}
|
|
|
|
button[data-variant="primary"]:hover,
|
|
button.primary:hover,
|
|
[data-action="run"]:hover {
|
|
opacity: 0.85 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
INPUTS AND FORMS
|
|
============================================ */
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--text-font) !important;
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius) !important;
|
|
padding: 8px 12px !important;
|
|
max-width: 320px !important;
|
|
}
|
|
|
|
/* Search input stays mono */
|
|
input#search {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--primary) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE BLOCKS (in markdown)
|
|
============================================ */
|
|
pre, code {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
code {
|
|
background: var(--secondary) !important;
|
|
color: var(--primary) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: var(--radius) !important;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
pre {
|
|
background: var(--secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LINKS
|
|
============================================ */
|
|
a {
|
|
color: var(--primary) !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.15s ease !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--foreground) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLLBARS
|
|
============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
/* ============================================
|
|
TOOLTIPS, DROPDOWNS, MENUS
|
|
============================================ */
|
|
[role="tooltip"],
|
|
[data-state="open"][data-side] {
|
|
font-family: var(--text-font) !important;
|
|
font-size: 13px !important;
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius) !important;
|
|
}
|
|
|
|
[role="menu"],
|
|
[role="listbox"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius) !important;
|
|
}
|
|
|
|
[role="menuitem"]:hover,
|
|
[role="option"]:hover,
|
|
[role="menuitem"][data-highlighted],
|
|
[role="option"][data-highlighted] {
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* Badges and pills */
|
|
[class*="badge"],
|
|
[class*="pill"],
|
|
[class*="tag"] {
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--primary) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CELL OUTPUT AREA
|
|
============================================ */
|
|
[data-testid="outputs"],
|
|
.output-area {
|
|
background: var(--secondary) !important;
|
|
border-top: 1px solid var(--border) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
[class*="dataframe"] {
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
[class*="plot"],
|
|
[class*="chart"],
|
|
svg {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HOME PAGE
|
|
============================================ */
|
|
a[rel="noreferrer"][target="_blank"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
a[rel="noreferrer"][target="_blank"]:hover {
|
|
border-color: var(--primary) !important;
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
a[rel="noreferrer"][target="_blank"] h2 {
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 1rem !important;
|
|
font-weight: 700 !important;
|
|
color: var(--foreground) !important;
|
|
letter-spacing: -0.01em !important;
|
|
}
|
|
|
|
h2.text-xl {
|
|
font-family: var(--heading-font) !important;
|
|
font-size: 1.1rem !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.01em !important;
|
|
color: var(--foreground) !important;
|
|
padding-bottom: 6px;
|
|
border-bottom: 2px solid var(--foreground);
|
|
}
|
|
|
|
.divide-y.border.rounded {
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--card) !important;
|
|
}
|
|
|
|
.divide-y.border > a,
|
|
.divide-y.border > div > a {
|
|
border-color: var(--border) !important;
|
|
transition: all 0.1s ease !important;
|
|
}
|
|
|
|
.divide-y.border > a:hover,
|
|
.divide-y.border > div > a:hover {
|
|
background: var(--secondary) !important;
|
|
border-left: 3px solid var(--primary) !important;
|
|
}
|
|
|
|
.divide-y.border a .flex-1 span {
|
|
font-family: var(--text-font) !important;
|
|
}
|
|
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"]:hover {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
[class*="cursor-pointer"][class*="whitespace-nowrap"] span {
|
|
font-family: var(--text-font) !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BORDERS
|
|
============================================ */
|
|
.rounded-lg,
|
|
.rounded-md {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.rounded-sm,
|
|
.rounded {
|
|
border-radius: var(--radius) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
TOP BAR / ACTION BUTTONS
|
|
============================================ */
|
|
.absolute.top-3.right-5 button {
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--card) !important;
|
|
}
|
|
|
|
.absolute.top-3.right-5 button:hover {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SEARCH INPUT
|
|
============================================ */
|
|
input#search {
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
background: var(--card) !important;
|
|
font-family: var(--monospace-font) !important;
|
|
}
|
|
|
|
input#search:focus {
|
|
border-color: var(--primary) !important;
|
|
box-shadow: 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTON STATES
|
|
============================================ */
|
|
button:active,
|
|
[role="button"]:active {
|
|
transform: translate(1px, 1px) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CATCH-ALL: ensure correct foreground
|
|
============================================ */
|
|
.text-foreground {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.text-muted-foreground {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
/* Markdown body text — strong/em/code inherit correct colour */
|
|
.markdown,
|
|
.markdown .paragraph,
|
|
.markdown p,
|
|
.paragraph {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.markdown strong,
|
|
.markdown b,
|
|
.paragraph strong,
|
|
.paragraph b,
|
|
strong,
|
|
b {
|
|
color: var(--foreground) !important;
|
|
background: transparent !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.markdown em,
|
|
.markdown i,
|
|
.paragraph em,
|
|
.paragraph i {
|
|
color: var(--foreground) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Inline code in markdown body — editorial pill with strong contrast.
|
|
Warm sepia text on cream pill with a hairline border reads as a
|
|
monospace quote on the cream canvas. */
|
|
.markdown code,
|
|
.markdown p code,
|
|
.paragraph code,
|
|
.prose code,
|
|
p code,
|
|
li code,
|
|
td code {
|
|
background: #F0EDE3 !important;
|
|
color: #8E3A00 !important;
|
|
padding: 0.1rem 0.4rem !important;
|
|
border: 1px solid #D4CFBF !important;
|
|
border-radius: var(--radius) !important;
|
|
font-family: var(--monospace-font) !important;
|
|
font-size: 0.88em !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Cell output area — don't wrap in its own background box */
|
|
.output-area {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Form label layout — prevent label text wrapping into multiple lines
|
|
and keep each widget at its natural width inside an hstack. */
|
|
.mo-label,
|
|
.mo-label-block,
|
|
label {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.mo-label > .markdown,
|
|
.mo-label-block > .markdown {
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
APP SIDEBARS (left icon rail, right panels)
|
|
============================================ */
|
|
.app-sidebar,
|
|
aside.app-sidebar,
|
|
[class*="app-sidebar"] {
|
|
background: var(--card) !important;
|
|
border-right: 1px solid var(--border) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.app-sidebar button,
|
|
.app-sidebar [role="button"],
|
|
.app-sidebar a {
|
|
color: var(--muted-foreground) !important;
|
|
border-radius: 0 !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
.app-sidebar button:hover,
|
|
.app-sidebar [role="button"]:hover,
|
|
.app-sidebar a:hover {
|
|
color: var(--foreground) !important;
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
.app-sidebar button[data-state="active"],
|
|
.app-sidebar button[aria-pressed="true"],
|
|
.app-sidebar button[aria-selected="true"] {
|
|
color: var(--primary) !important;
|
|
background: var(--secondary) !important;
|
|
border-left: 2px solid var(--primary) !important;
|
|
}
|
|
|
|
/* Sidebar headings / section labels */
|
|
.app-sidebar h1,
|
|
.app-sidebar h2,
|
|
.app-sidebar h3,
|
|
.app-sidebar .section-label {
|
|
font-family: var(--font-display) !important;
|
|
color: var(--foreground) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Right-side control strip (settings, save, layout, run buttons) */
|
|
.absolute.top-4.right-4 button,
|
|
.absolute.top-3.right-5 button,
|
|
[class*="toolbar"] button {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.absolute.top-4.right-4 button:hover,
|
|
.absolute.top-3.right-5 button:hover,
|
|
[class*="toolbar"] button:hover {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
/* Bottom status bar */
|
|
[data-testid*="status"],
|
|
[class*="status-bar"],
|
|
[class*="StatusBar"] {
|
|
background: var(--card) !important;
|
|
border-top: 1px solid var(--border) !important;
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Resize handles */
|
|
.resize-handle,
|
|
.resize-handle-collapsed {
|
|
background: var(--border) !important;
|
|
}
|
|
|
|
.resize-handle:hover,
|
|
.resize-handle[data-resize-handle-active],
|
|
.resize-handle-collapsed:hover {
|
|
background: var(--primary) !important;
|
|
}
|
|
|
|
/* Dark navy runtime connection banner — keep dark navy bg but make text readable */
|
|
[data-testid="static-notebook-banner"],
|
|
[class*="runtime-banner"],
|
|
[class*="disconnected-banner"] {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-bottom: 2px solid var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
[data-testid="static-notebook-banner"] a,
|
|
[data-testid="static-notebook-banner"] button {
|
|
color: var(--primary-foreground) !important;
|
|
background: transparent !important;
|
|
border-color: var(--primary-foreground) !important;
|
|
}
|
|
|
|
/* Keep labels on one line inside marimo form widgets */
|
|
.mo-label,
|
|
.mo-label-block,
|
|
marimo-dropdown label,
|
|
marimo-text label,
|
|
marimo-number label {
|
|
white-space: nowrap !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Constrain the Radix Select trigger (the visible dropdown bar) to its
|
|
current value rather than growing to fit its longest option. Without
|
|
this, a Locality dropdown with 400 options sprawls across the row. */
|
|
button[role="combobox"],
|
|
[role="combobox"],
|
|
marimo-dropdown [data-slot="select-trigger"],
|
|
marimo-dropdown button {
|
|
max-width: 280px !important;
|
|
min-width: 0 !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
/* ── Dashboard tiles — file browser as card grid ─────────── */
|
|
|
|
/* Hide marimo resources / external links section */
|
|
.home-page a[href*="docs.marimo.io"],
|
|
.home-page a[href*="discord"],
|
|
.home-page a[href*="github.com/marimo-team"],
|
|
.home-page [class*="resource"],
|
|
.home-page [class*="Resource"],
|
|
section:has(a[href*="docs.marimo.io"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* File browser → tile grid */
|
|
.home-page [class*="file-list"],
|
|
.home-page [class*="FileList"],
|
|
.home-page .divide-y {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
|
|
gap: 12px !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Individual notebook tiles */
|
|
.home-page [class*="file-list"] > *,
|
|
.home-page [class*="FileList"] > *,
|
|
.home-page .divide-y > * {
|
|
border: 1px solid var(--border) !important;
|
|
border-top: 2px solid var(--foreground) !important;
|
|
border-radius: 0 !important;
|
|
padding: 16px !important;
|
|
background: var(--card) !important;
|
|
transition: border-color 0.15s, background 0.15s !important;
|
|
}
|
|
|
|
.home-page [class*="file-list"] > *:hover,
|
|
.home-page [class*="FileList"] > *:hover,
|
|
.home-page .divide-y > *:hover {
|
|
border-color: var(--primary) !important;
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
/* Tile headings */
|
|
.home-page [class*="file-list"] a,
|
|
.home-page [class*="FileList"] a,
|
|
.home-page .divide-y a {
|
|
color: var(--foreground) !important;
|
|
font-weight: 600 !important;
|
|
text-decoration: none !important;
|
|
font-family: var(--font-display) !important;
|
|
}
|
|
|
|
/* Section headers */
|
|
.home-page h2,
|
|
.home-page [class*="section-header"],
|
|
.home-page .text-xl {
|
|
font-family: var(--font-display) !important;
|
|
font-weight: 700 !important;
|
|
font-size: 1.1rem !important;
|
|
letter-spacing: -0.01em !important;
|
|
color: var(--foreground) !important;
|
|
border-bottom: 2px solid var(--foreground) !important;
|
|
padding-bottom: 8px !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
|
|
|
|
/* Focus indicators (2.4.7, 2.4.11) */
|
|
:focus-visible {
|
|
outline: 2px solid var(--primary) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Reduced motion (2.3.3) */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Minimum target size (2.5.8) */
|
|
button, [role="button"], a, input, select, textarea {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
}
|