docs site: gentler colours from the co-op design system, dark mode off Material slate

Light: warm neutrals (#e4e0d8 borders, #f4f2ec code, #6b7a62 muted) instead of
near-blacks; links use the dashboard's #4e7a4d (4.7:1 on cream).

Dark: replace Material's cold blue-grey slate (#1e2129 page) with the chat
overlay's deep-pine palette (#22271f page, #e8f5e8 text, #7ab87a accent), so a
dark screen reads as the co-op's green identity rather than stock Material.
This commit is contained in:
co-op agent authored and inference-bot committed 2026-11-03 21:34:46 +00:00
1 parent 49ce027c5b
commit 1c863ddb95
2 files changed
+95 -57

No files matched your search

+85 -56
View File
@@ -1,29 +1,46 @@
/* Inference Cooperative brand layer for the documentation site. /* Inference Cooperative brand layer for the documentation site.
* *
* Source of truth: the co-op's website (repos/website/index.html) — its CSS * Design-system source of truth: the co-op's chat/dashboard/portal/panel
* custom properties and its Figtree webfont. This file reuses those values so * palette, carried in two places and kept identical there —
* the documentation reads as the same organisation, not a default theme. * 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, * Standing constraint: everything here is local. No third-party font service,
* no CDN, no other external host. * no CDN, no other external host.
*/ */
:root { :root {
/* -- the co-op's palette (copied from repos/website/index.html) -- */ /* -- the co-op's light palette (dashboard/portal/panel design system) -- */
--cream: #faf8f5; --cream: #faf8f5; /* page background */
--white: #ffffff; --white: #ffffff; /* cards */
--ink: #2d3327; --ink: #2d3327; /* primary text (warm, not near-black) */
--muted: #6b7a62; --muted: #6b7a62; /* secondary text */
--light-muted: #94a08c; --light-muted: #94a08c; /* tertiary text */
--green-deep: #5b8c5a; --green-deep: #5b8c5a;
--green-mid: #6ba86b; --green-mid: #6ba86b;
--green-light: #7ab87a; --green-light: #7ab87a;
--border: #e8e2d8; --green-link: #4e7a4d; /* dashboard link green — 4.7:1 on cream */
--wash: #eef4ea; --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: #a04b3a;
--earth-red-wash: #f3e6e1; --earth-red-wash: #f3e6e1;
--bronze: #a97a4a; --bronze: #a97a4a;
--bronze-wash: #f1e8da; --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 ---------- */ /* ---------- Material for MkDocs: map the palette onto the theme ---------- */
@@ -31,35 +48,65 @@
:root, :root,
[data-md-color-scheme="default"] { [data-md-color-scheme="default"] {
--md-default-bg-color: var(--cream); --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: var(--green-deep);
--md-primary-fg-color--light: var(--green-mid); --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: var(--cream);
--md-primary-bg-color--light: rgba(250, 248, 245, 0.7);
--md-accent-fg-color: var(--earth-red); --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-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-bg-color: var(--wash);
--md-footer-fg-color: var(--ink); --md-footer-fg-color: var(--ink);
--md-footer-fg-color--light: var(--muted); --md-footer-fg-color--light: var(--muted);
--md-code-bg-color: #f2efe9;
--md-code-fg-color: var(--ink);
--md-admonition-bg-color: var(--wash); --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"] { [data-md-color-scheme="slate"] {
/* The header was #3f6b3e -- a dark green against a dark page, so the bar --md-default-bg-color: var(--pine);
disappeared into the background. Green-mid with near-black text keeps the --md-default-fg-color: var(--dark-text);
bar legible in dark mode while staying on brand. */ --md-default-fg-color--light: var(--dark-muted);
--md-primary-fg-color: #6ba86b; --md-default-fg-color--lighter: #6f7a68;
--md-primary-fg-color--light: #7ab87a; --md-default-fg-color--lightest: rgba(148, 160, 140, 0.12);
--md-primary-fg-color--dark: #5b8c5a;
/* 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: #16201a;
--md-primary-bg-color--light: rgba(22, 32, 26, 0.7); --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-typeset-a-color: var(--green-light);
--md-code-bg-color: #2e3328; --md-typeset-color: var(--dark-text);
--md-code-fg-color: #e8e2d8; --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) ---------- */ /* ---------- Typography: Figtree, self-hosted (SIL OFL 1.1) ---------- */
@@ -111,14 +158,14 @@
text-decoration: underline; 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.cards > ul > li,
.md-typeset .grid > .card, .md-typeset .grid > .card,
.md-typeset table:not([class]) { .md-typeset table:not([class]) {
border-radius: 0.6rem; border-radius: 0.6rem;
} }
.md-typeset table:not([class]) { .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. */ /* Header: co-op green with the cream wordmark. */
@@ -126,14 +173,23 @@
box-shadow: none; box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25); 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 { .md-header .md-header__title {
font-weight: 600; font-weight: 600;
} }
/* Tabs and the search field pick up the wash. */ /* Tabs and the search field pick up the brand green. */
.md-tabs { .md-tabs {
background-color: var(--green-deep); 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 { .md-search__input {
background-color: rgba(255, 255, 255, 0.92); 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 * Material renders body and headings with var(--md-text-font-family) and defines that
* variable on <body>, so a :root definition loses to it by proximity in the DOM -- the * variable on <body>, 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 * 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, body,
.md-typeset, .md-typeset,
@@ -176,30 +232,3 @@ body,
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif; 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;
}
+10 -1
View File
@@ -58,10 +58,19 @@ body,
/* Long prose stays readable; measured in characters rather than pixels. */ /* Long prose stays readable; measured in characters rather than pixels. */
.md-typeset { line-height: 1.65; } .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 h1,
[data-md-color-scheme="default"] .md-typeset h2, [data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3, [data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4 { [data-md-color-scheme="default"] .md-typeset h4 {
color: #2d3327; 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;
}