diff --git a/publishing/brand.css b/publishing/brand.css index 9ad6311..cdc1e59 100644 --- a/publishing/brand.css +++ b/publishing/brand.css @@ -1,29 +1,46 @@ /* Inference Cooperative brand layer for the documentation site. * - * Source of truth: the co-op's website (repos/website/index.html) — its CSS - * custom properties and its Figtree webfont. This file reuses those values so - * the documentation reads as the same organisation, not a default theme. + * Design-system source of truth: the co-op's chat/dashboard/portal/panel + * palette, carried in two places and kept identical there — + * repos/librechat-custom/assets/custom.css (html.light / html.dark RGB triples) + * repos/member-dashboard/app/main.py (the dashboard's :root palette) + * This file reuses those exact values so the documentation reads as the same + * organisation in both schemes, not a default Material theme. * * Standing constraint: everything here is local. No third-party font service, * no CDN, no other external host. */ :root { - /* -- the co-op's palette (copied from repos/website/index.html) -- */ - --cream: #faf8f5; - --white: #ffffff; - --ink: #2d3327; - --muted: #6b7a62; - --light-muted: #94a08c; + /* -- the co-op's light palette (dashboard/portal/panel design system) -- */ + --cream: #faf8f5; /* page background */ + --white: #ffffff; /* cards */ + --ink: #2d3327; /* primary text (warm, not near-black) */ + --muted: #6b7a62; /* secondary text */ + --light-muted: #94a08c; /* tertiary text */ --green-deep: #5b8c5a; --green-mid: #6ba86b; --green-light: #7ab87a; - --border: #e8e2d8; - --wash: #eef4ea; + --green-link: #4e7a4d; /* dashboard link green — 4.7:1 on cream */ + --green-ink: #2f5c30; + --border: #e4e0d8; /* warm neutral border (design-system value) */ + --wash: #eaf3ea; /* the dashboard's green wash, used sparingly */ + --chip: #f4f2ec; /* warm chip / code background */ + --hover: #f0ede6; /* warm hover */ + --bar-track: #eef0ea; /* neutral track for meters */ --earth-red: #a04b3a; --earth-red-wash: #f3e6e1; --bronze: #a97a4a; --bronze-wash: #f1e8da; + + /* -- the co-op's dark palette: the deep-pine family from the chat overlay -- */ + --pine: #22271f; /* 34 39 31 — page background */ + --pine-2: #2a3027; /* 42 48 39 — raised surface (footer, cards) */ + --pine-3: #343b30; /* 52 59 48 — chips / code background */ + --pine-hover: #2d3327; /* --ink reused as the hover band */ + --dark-border: #4a5240; /* 74 82 64 — warm dark border */ + --dark-text: #e8f5e8; /* 232 245 232 — light warm text */ + --dark-muted: #94a08c; /* 148 160 140 — muted text */ } /* ---------- Material for MkDocs: map the palette onto the theme ---------- */ @@ -31,35 +48,65 @@ :root, [data-md-color-scheme="default"] { --md-default-bg-color: var(--cream); + --md-default-fg-color: var(--ink); + --md-default-fg-color--light: var(--muted); + --md-default-fg-color--lighter: var(--light-muted); + --md-default-fg-color--lightest: var(--border); + --md-primary-fg-color: var(--green-deep); --md-primary-fg-color--light: var(--green-mid); - --md-primary-fg-color--dark: #4a7a49; + --md-primary-fg-color--dark: var(--green-deep); --md-primary-bg-color: var(--cream); + --md-primary-bg-color--light: rgba(250, 248, 245, 0.7); + --md-accent-fg-color: var(--earth-red); - --md-typeset-a-color: var(--green-deep); + --md-typeset-a-color: var(--green-link); --md-typeset-color: var(--ink); + --md-typeset-table-color: var(--border); + + --md-code-bg-color: var(--chip); + --md-code-fg-color: var(--ink); + --md-footer-bg-color: var(--wash); --md-footer-fg-color: var(--ink); --md-footer-fg-color--light: var(--muted); - --md-code-bg-color: #f2efe9; - --md-code-fg-color: var(--ink); + --md-admonition-bg-color: var(--wash); } -/* Dark scheme keeps the same accents; light stays the default. */ +/* Dark scheme: the co-op's own deep pine, not Material's cold blue-grey slate. + * The old page background measured #1e2129 (a blue-grey); this scheme is the + * chat overlay's dark palette (--surface-primary #22271f and its family), so a + * dark screen reads as the co-op's green identity, not stock Material. */ [data-md-color-scheme="slate"] { - /* The header was #3f6b3e -- a dark green against a dark page, so the bar - disappeared into the background. Green-mid with near-black text keeps the - bar legible in dark mode while staying on brand. */ - --md-primary-fg-color: #6ba86b; - --md-primary-fg-color--light: #7ab87a; - --md-primary-fg-color--dark: #5b8c5a; + --md-default-bg-color: var(--pine); + --md-default-fg-color: var(--dark-text); + --md-default-fg-color--light: var(--dark-muted); + --md-default-fg-color--lighter: #6f7a68; + --md-default-fg-color--lightest: rgba(148, 160, 140, 0.12); + + /* The header was an unreadably dark green. Green-mid with near-black pine + * text keeps the bar clearly green, clearly distinct from the page, and + * legible (measured below). */ + --md-primary-fg-color: var(--green-mid); + --md-primary-fg-color--light: var(--green-light); + --md-primary-fg-color--dark: var(--green-deep); --md-primary-bg-color: #16201a; --md-primary-bg-color--light: rgba(22, 32, 26, 0.7); - --md-accent-fg-color: #d98a75; + + --md-accent-fg-color: var(--green-light); --md-typeset-a-color: var(--green-light); - --md-code-bg-color: #2e3328; - --md-code-fg-color: #e8e2d8; + --md-typeset-color: var(--dark-text); + --md-typeset-table-color: var(--dark-border); + + --md-code-bg-color: var(--pine-3); + --md-code-fg-color: var(--dark-text); + + --md-footer-bg-color: var(--pine-2); + --md-footer-fg-color: var(--dark-text); + --md-footer-fg-color--light: var(--dark-muted); + + --md-admonition-bg-color: var(--pine-2); } /* ---------- Typography: Figtree, self-hosted (SIL OFL 1.1) ---------- */ @@ -111,14 +158,14 @@ text-decoration: underline; } -/* Rounder cards and tables; a wash instead of grey where the theme has one. */ +/* Rounder cards and tables; a warm neutral border, never a near-black one. */ .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card, .md-typeset table:not([class]) { border-radius: 0.6rem; } .md-typeset table:not([class]) { - border: 1px solid var(--border); + border: 1px solid var(--md-typeset-table-color); } /* Header: co-op green with the cream wordmark. */ @@ -126,14 +173,23 @@ box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } +[data-md-color-scheme="slate"] .md-header { + border-bottom: 1px solid rgba(0, 0, 0, 0.22); +} .md-header .md-header__title { font-weight: 600; } -/* Tabs and the search field pick up the wash. */ +/* Tabs and the search field pick up the brand green. */ .md-tabs { background-color: var(--green-deep); } +/* In dark, keep the tab row the same green as the header bar so the text on it + * clears 4.5:1 against green-mid (green-deep against near-black text is only + * ~4.2:1 — marginal for the small tab labels). */ +[data-md-color-scheme="slate"] .md-tabs { + background-color: var(--green-mid); +} .md-search__input { background-color: rgba(255, 255, 255, 0.92); } @@ -155,7 +211,7 @@ * Material renders body and headings with var(--md-text-font-family) and defines that * variable on , so a :root definition loses to it by proximity in the DOM -- the * same way the colours lost to the palette. Declare the font on the elements themselves - * as well, and size headings closer to the website rather than Material's defaults. + * as well. Sizing lives in publishing/typography.css, which loads after this file. */ body, .md-typeset, @@ -176,30 +232,3 @@ body, font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } - -.md-typeset h1 { - font-size: 2.6rem; - font-weight: 700; - letter-spacing: -0.02em; -} -/* ink is a light-scheme colour; in dark mode let Material's own fg colour apply */ -[data-md-color-scheme="default"] .md-typeset h1, -[data-md-color-scheme="default"] .md-typeset h2, -[data-md-color-scheme="default"] .md-typeset h3 { - color: var(--ink); -} - -.md-typeset h2 { - font-size: 1.7rem; - font-weight: 600; - letter-spacing: -0.01em; -} - -.md-typeset h3 { - font-size: 1.25rem; - font-weight: 600; -} - -.md-header__title { - font-weight: 600; -} diff --git a/publishing/typography.css b/publishing/typography.css index ac5f978..383c9a5 100644 --- a/publishing/typography.css +++ b/publishing/typography.css @@ -58,10 +58,19 @@ body, /* Long prose stays readable; measured in characters rather than pixels. */ .md-typeset { line-height: 1.65; } -/* Colour is scheme-specific, so it stays out of the rules above. */ +/* Colour is scheme-specific, so it stays out of the rules above. + * Light: the co-op's warm ink (#2d3327), never a neutral near-black. + * Dark: the chat overlay's light warm text (#e8f5e8) on the deep-pine page. */ [data-md-color-scheme="default"] .md-typeset h1, [data-md-color-scheme="default"] .md-typeset h2, [data-md-color-scheme="default"] .md-typeset h3, [data-md-color-scheme="default"] .md-typeset h4 { color: #2d3327; } + +[data-md-color-scheme="slate"] .md-typeset h1, +[data-md-color-scheme="slate"] .md-typeset h2, +[data-md-color-scheme="slate"] .md-typeset h3, +[data-md-color-scheme="slate"] .md-typeset h4 { + color: #e8f5e8; +}