/* * Vendored verbatim from the project owner's design system. * * source: https://github.com/88lin/mydesign-system * file: assets/palettes.css * commit: 16dd146 * * Two byte-identical copies live in this repository -- one for the page the * service serves at /app, one for the documentation site -- because the two * surfaces are published by different pipelines and neither can import from * the other at runtime. `tests/test_web.py` asserts they stay identical. * * Do not edit this file to change facetmark's appearance. It is upstream * material; edits belong in `app.css` (the page) or `style.css` (the site), * both of which consume the semantic tokens defined below. Updating it is a * straight file copy plus a bump of the commit line above. * * facetmark pins palette A on . B-J are shipped intact * and remain selectable by anyone who wants them, but only A's contrast has * been verified against this project's text sizes, and only A has a dark * counterpart (see the dark block in `app.css`, which is facetmark's own * extension -- this file defines light palettes only). */ /* * Design System palettes * * A is the original blue / yellow / red system. It is the fallback theme so * existing pages keep their established visual language. B-J are optional * coordinated themes. Components should use semantic roles, never a palette * letter or a raw color value. * * The RGB channels are intentionally comma separated: rgba(var(--*-rgb), a) * is understood by browsers and by the html2canvas version used by cards. */ /* A - Classic: the established product palette */ :root, [data-palette="A"] { --brand: #2B7FD8; --brand-deep: #1E5BA8; --brand-tint: #6FA9E6; --brand-rgb: 43, 127, 216; --highlight: #F4D758; --highlight-soft: #FFF3CD; --highlight-rgb: 244, 215, 88; --pop: #E84A5F; --pop-deep: #C93449; --pop-soft: #FCE8EC; --pop-rgb: 232, 74, 95; --cream: #FEFCF6; --cream-dark: #FAF6EB; --ink: #1A1A2E; --ink-light: #4A4A5A; --ink-faint: #6E6E80; --ink-rgb: 26, 26, 46; --dark-panel: #151821; --card-bg: #FFFFFF; --preview-bg: #FFF8E1; --border: rgba(26, 26, 46, .08); --hairline: rgba(26, 26, 46, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #C9CBD4; } /* B - Ink Blue: restrained blue with cherry accents */ [data-palette="B"] { --brand: #33548A; --brand-deep: #233C68; --brand-tint: #6F95CC; --brand-rgb: 51, 84, 138; --highlight: #F6C9D3; --highlight-soft: #FDEFF2; --highlight-rgb: 246, 201, 211; --pop: #C0395C; --pop-deep: #922B46; --pop-soft: #FBE7EC; --pop-rgb: 192, 57, 92; --cream: #FCFAF7; --cream-dark: #F2EDE9; --ink: #20222F; --ink-light: #4A4E63; --ink-faint: #626878; --ink-rgb: 32, 34, 47; --dark-panel: #181C2A; --card-bg: #FEFCFB; --preview-bg: #F9F2F4; --border: rgba(32, 34, 47, .11); --hairline: rgba(32, 34, 47, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #C9CBD4; } /* C - Mulberry: editorial berry, peach and pine */ [data-palette="C"] { --brand: #7A3560; --brand-deep: #5B2349; --brand-tint: #BD669C; --brand-rgb: 122, 53, 96; --highlight: #F7CDA9; --highlight-soft: #FCEBDC; --highlight-rgb: 247, 205, 169; --pop: #2F6B63; --pop-deep: #21504A; --pop-soft: #E6F2EF; --pop-rgb: 47, 107, 99; --cream: #FDF9F6; --cream-dark: #F6EDE9; --ink: #291C2B; --ink-light: #55414F; --ink-faint: #70606C; --ink-rgb: 41, 28, 43; --dark-panel: #221527; --card-bg: #FEFCFA; --preview-bg: #FBF0E6; --border: rgba(41, 28, 43, .11); --hairline: rgba(41, 28, 43, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #CEC4CF; } /* D - Sage: quiet botanical green with berry punctuation */ [data-palette="D"] { --brand: #41684F; --brand-deep: #2E4E3A; --brand-tint: #6E9B7D; --brand-rgb: 65, 104, 79; --highlight: #F4D793; --highlight-soft: #FBF1DA; --highlight-rgb: 244, 215, 147; --pop: #B44761; --pop-deep: #843448; --pop-soft: #F8E7EC; --pop-rgb: 180, 71, 97; --cream: #FCFBF6; --cream-dark: #F1EEE2; --ink: #1F2A22; --ink-light: #465249; --ink-faint: #5D6861; --ink-rgb: 31, 42, 34; --dark-panel: #16211A; --card-bg: #FEFDFA; --preview-bg: #F7F2DE; --border: rgba(31, 42, 34, .11); --hairline: rgba(31, 42, 34, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #C8CEC9; } /* E - Terracotta: warm clay with a deep green counterpoint */ [data-palette="E"] { --brand: #A8452F; --brand-deep: #83301F; --brand-tint: #CF7059; --brand-rgb: 168, 69, 47; --highlight: #EFCE9A; --highlight-soft: #F8EBD6; --highlight-rgb: 239, 206, 154; --pop: #2F6B5B; --pop-deep: #215044; --pop-soft: #E6F1ED; --pop-rgb: 47, 107, 91; --cream: #FDF8F1; --cream-dark: #F6EBDC; --ink: #2A1D18; --ink-light: #5A463D; --ink-faint: #706158; --ink-rgb: 42, 29, 24; --dark-panel: #241814; --card-bg: #FEFCF8; --preview-bg: #F8EDDA; --border: rgba(42, 29, 24, .11); --hairline: rgba(42, 29, 24, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #D0C4BC; } /* F - Red Bean: soft rose and oat with a violet note */ [data-palette="F"] { --brand: #96545C; --brand-deep: #743E46; --brand-tint: #B3777E; --brand-rgb: 150, 84, 92; --highlight: #EFD3A8; --highlight-soft: #FAF0E2; --highlight-rgb: 239, 211, 168; --pop: #7D5D91; --pop-deep: #5D416D; --pop-soft: #F0EAF4; --pop-rgb: 125, 93, 145; --cream: #FDFAF6; --cream-dark: #F5EDE5; --ink: #2B2124; --ink-light: #584A4D; --ink-faint: #706568; --ink-rgb: 43, 33, 36; --dark-panel: #251C1F; --card-bg: #FEFCFA; --preview-bg: #F8F0E5; --border: rgba(43, 33, 36, .11); --hairline: rgba(43, 33, 36, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #D0C6C8; } /* G - Orchid: orchid and cream gold with a vermilion spark */ [data-palette="G"] { --brand: #8A2F84; --brand-deep: #662061; --brand-tint: #C356BC; --brand-rgb: 138, 47, 132; --highlight: #F7DEA4; --highlight-soft: #FAF1DE; --highlight-rgb: 247, 222, 164; --pop: #BF4436; --pop-deep: #913128; --pop-soft: #FBE9E6; --pop-rgb: 191, 68, 54; --cream: #FDFBF9; --cream-dark: #F7F1EB; --ink: #2D1D2C; --ink-light: #594057; --ink-faint: #746174; --ink-rgb: 45, 29, 44; --dark-panel: #221321; --card-bg: #FEFDFC; --preview-bg: #FAF1DF; --border: rgba(45, 29, 44, .11); --hairline: rgba(45, 29, 44, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #CEC3CE; } /* H - Peacock: clear blue-green tempered by peach */ [data-palette="H"] { --brand: #15697C; --brand-deep: #0C4552; --brand-tint: #4EA2B5; --brand-rgb: 21, 105, 124; --highlight: #F5CDB4; --highlight-soft: #FAE9DE; --highlight-rgb: 245, 205, 180; --pop: #B24935; --pop-deep: #843426; --pop-soft: #F8E8E3; --pop-rgb: 178, 73, 53; --cream: #FDFBF9; --cream-dark: #F7F0EB; --ink: #1D2A2D; --ink-light: #3D5156; --ink-faint: #52666B; --ink-rgb: 29, 42, 45; --dark-panel: #132022; --card-bg: #FEFDFC; --preview-bg: #FAECE3; --border: rgba(29, 42, 45, .11); --hairline: rgba(29, 42, 45, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #C4D0D2; } /* I - Wisteria: muted violet, pale gold and rose */ [data-palette="I"] { --brand: #71519B; --brand-deep: #523776; --brand-tint: #9276B7; --brand-rgb: 113, 81, 155; --highlight: #F6DC8E; --highlight-soft: #FCF3D9; --highlight-rgb: 246, 220, 142; --pop: #B54070; --pop-deep: #873352; --pop-soft: #F9E7EF; --pop-rgb: 181, 64, 112; --cream: #FDFBF7; --cream-dark: #F4F0EA; --ink: #241E2E; --ink-light: #4E4759; --ink-faint: #6B6675; --ink-rgb: 36, 30, 46; --dark-panel: #1B1626; --card-bg: #FEFDFB; --preview-bg: #FCF3DA; --border: rgba(36, 30, 46, .11); --hairline: rgba(36, 30, 46, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #CBC5D2; } /* J - Coral: bright coral, honey and peacock green */ [data-palette="J"] { --brand: #C33D46; --brand-deep: #9E2E38; --brand-tint: #D46E74; --brand-rgb: 195, 61, 70; --highlight: #FBD97C; --highlight-soft: #FEF2D3; --highlight-rgb: 251, 217, 124; --pop: #2C7967; --pop-deep: #1D594B; --pop-soft: #E6F2EE; --pop-rgb: 44, 121, 103; --cream: #FEFAF5; --cream-dark: #F9EEE3; --ink: #2A1C1C; --ink-light: #57433F; --ink-faint: #71625D; --ink-rgb: 42, 28, 28; --dark-panel: #241615; --card-bg: #FEFCFA; --preview-bg: #FEF1D4; --border: rgba(42, 28, 28, .11); --hairline: rgba(42, 28, 28, .06); --on-brand: #FFFFFF; --on-highlight: var(--ink); --on-pop: #FFFFFF; --on-dark: #FFFFFF; --on-dark-dim: #D0C4C0; } /* * Semantic roles stay on the themed element so nested previews and scoped * themes resolve against their own palette instead of inheriting palette A. * B-J already pass AA with their display colors, so only A needs minimally * darkened text/surface variants. */ :root, [data-palette] { /* Semantic aliases shared with newer templates. Keep the original roles above as the source-compatible API while giving new work clearer names. */ --brand-primary: var(--brand); --brand-primary-deep: var(--brand-deep); --brand-primary-soft: var(--info-soft); --brand-primary-rgb: var(--brand-rgb); --brand-accent: var(--highlight); --brand-accent-soft: var(--highlight-soft); --brand-accent-rgb: var(--highlight-rgb); --brand-pop: var(--pop); --brand-pop-deep: var(--pop-deep); --brand-pop-soft: var(--pop-soft); --brand-pop-rgb: var(--pop-rgb); --brand-text: var(--brand); --brand-surface: var(--brand); --brand-border: var(--brand); --brand-on-dark: var(--brand-tint); --pop-text: var(--pop); --pop-surface: var(--pop); --success: #2E7955; --success-soft: #E7F4EC; --warning: #8A6A00; --warning-soft: #FFF4C2; --danger: #E84A5F; --danger-strong: #B4233C; --danger-soft: #FCE8EC; --info: var(--brand-text); --info-soft: rgba(var(--brand-rgb), .10); --border-strong: rgba(var(--ink-rgb), .16); --focus-ring: var(--brand-deep); --highlighter: linear-gradient(transparent 60%, var(--highlight) 60%); /* Legacy aliases: old components remain source-compatible. */ --blue: var(--brand); --blue-deep: var(--brand-deep); --yellow: var(--highlight); --yellow-soft: var(--highlight-soft); --red: var(--pop); --accent: var(--brand); --accent-light: var(--brand-tint); } /* A keeps its display colors; readable roles move only as far as AA needs. */ :root:not([data-palette]), [data-palette="A"] { --brand-text: #2674C5; --brand-surface: #2674C5; --pop-text: #D43A50; --pop-surface: #D43A50; } ::selection { background: var(--highlight); color: var(--on-highlight); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }