@plus234feed/ds 0.0.0-stage → 0.3.0

package/README.md

@@ -1,3 +1,169 @@
-# Temporary Holding Version
+# Plus234Feed Design System
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Editorial tokens, a named type scale and the components a news intelligence
+platform needs. Plain CSS on top of design tokens, no framework, no build step
+for consumers.
+
+Documentation site: `docs/index.html`, generated from `site/pages/`. Deploy the
+`docs/` folder; `vercel.json` already points at it.
+
+27 pages: get started, foundations, one page per component, patterns and the
+rules. Each component page says what it is, when to use it, when not to, live
+examples with copyable HTML, and the tokens it reads.
+
+## Why this exists
+
+The frontend had 252 component files and 40,638 lines of TSX, but only 25
+shared components. Measured on 2026-11-04:
+
+| Symptom | Count |
+| --- | --- |
+| `page.tsx` files not using `PageLayout` | 92 (16 do) |
+| Files re-implementing an article card | 47 |
+| `rounded-*` variants in use | 11 |
+| Ad-hoc text sizes in use | 9, dominated by `text-sm` (1,019) and `text-xs` (720) |
+| Hardcoded uses of a single green | 27 |
+| Variables used but defined nowhere | 5 |
+
+That last row was a live bug, not a matter of taste. `--text-muted` (42 uses),
+`--border` (36), `--bg-elevated` (13), `--bg-secondary` and `--bg-hover` were
+referenced with no fallback and declared in no stylesheet, concentrated in
+`components/prices/` and the cost of living pages.
+
+Reader behaviour pointed the same way. Almost every visitor is new, and
+almost nobody opens a second page. Readers arriving from search spend real
+time on the article, finish it, and leave: the problem is not that they are
+bored, it is that the page offers them nothing to do next.
+
+## Install
+
+```bash
+npm install
+npm run build     # tokens + gallery
+npm test          # 13 checks
+```
+
+```
+npm run build:tokens   tokens/*.json -> build/*.css, build/tokens.json
+npm run build:docs     site/pages/** -> docs/**
+npm run check          build + test, what CI runs
+```
+
+### Authoring a docs page
+
+A page is an HTML fragment with a JSON comment at the top, wrapped by
+`site/layout.html`. Four authoring elements expand at build time:
+
+```html
+<!-- { "title": "Story", "section": "components", "order": 10, "description": "..." } -->
+
+<docs-example label="...">markup</docs-example>   preview plus copyable HTML
+<docs-tokens names="ink,ink-muted">               generated swatches, both themes
+<docs-type roles="display-1,headline">            generated specimens
+<docs-scale group="space">                        generated scale table
+<docs-uses>--p234-color-ink, ...</docs-uses>      the tokens a component reads
+```
+
+Navigation and the section sidebar are derived from the front matter, so a new
+page appears in both by existing.
+
+## Use it
+
+```css
+@import "@plus234feed/ds/fonts.css";    /* Charter, self-hosted, 64KB */
+@import "@plus234feed/ds/tokens.css";   /* theme driven by a .dark class */
+@import "@plus234feed/ds/type.css";     /* .p234-headline and friends */
+@import "@plus234feed/ds/components.css";
+```
+
+Use `tokens-auto.css` instead of `tokens.css` only on standalone pages that
+have no theme toggle. It adds an OS-preference block. The app must not use it:
+a reader who picked light has to get light on a dark laptop.
+
+```html
+<a class="p234-story p234-story--lead" href="...">
+  <span class="p234-kicker" data-section="markets">Market intelligence</span>
+  <h3 class="p234-story__headline">Pump prices are running 25 per cent above the last official figure</h3>
+  <p class="p234-story__standfirst">NBS puts Lagos petrol at 1,077 naira in May.</p>
+  <div class="p234-meta">
+    <span class="p234-meta__source">Plus234Feed</span>
+    <span class="p234-meta__dot">&middot;</span>
+    <span>2 hours ago</span>
+    <span class="p234-coverage">6 sources</span>
+  </div>
+</a>
+```
+
+## How it is built
+
+```
+tokens/core.tokens.json        light theme, type, space, radius, layout
+tokens/themes/dark.tokens.json colour overrides only, enforced
+scripts/color.mjs              WCAG luminance and contrast maths
+scripts/tokens.mjs             loading, flattening, alias resolution, the contrast table
+scripts/build-tokens.mjs       writes build/, fails on any unreadable pair
+scripts/build-site.mjs         writes the gallery from the built tokens
+src/components.css             editorial components, every rule reads a token
+```
+
+Token format follows the W3C Design Tokens Community Group draft. Values become
+CSS custom properties prefixed `--p234-`.
+
+### The contrast gate
+
+44 colour pairs are checked in every theme, 88 checks in all, and the build
+exits non-zero on any failure. This is the point of the pipeline: a combination
+nobody can read cannot reach the site. The first run caught three real
+problems, two of which were dark-theme only.
+
+The focus ring is checked differently. It is two colours, `focus` with
+`focus-outer` drawn around it, and neither half clears 3:1 alone. The amber is
+1.64:1 on white and relies on the dark outer ring there; on a dark page the
+outer ring recedes and the amber carries it. So the rule is that at least one
+half must clear 3:1 on every surface. See `checkFocus`.
+
+## Rules the tokens cannot enforce
+
+1. **Two ad slots on an article, maximum, and no mobile sticky.** The current
+   template carries six plus a sticky around a 147-word summary. Mobile is 64
+   per cent of search traffic.
+2. **Every article ends with a next step that matches why the reader came.** A
+   visa reader gets visa stories, not the general feed. This is the module the
+   near-total absence of second pages is asking for.
+3. **No raw hex.** If a colour is missing, add a token.
+4. **No undefined tokens.** A prebuild check fails on any `--p234-` variable
+   this package does not declare.
+5. **Pick a type role, never a font size.** Seventeen roles cover the site.
+   Reaching past them means a role is missing, which is a conversation.
+6. **Direction is never colour alone.** Gainers and decliners carry an arrow.
+7. **One lead per page.** If two stories both look like the lead, neither is.
+
+## Type
+
+Roles, not t-shirt sizes. Serif for what a reader reads, sans for what a reader
+operates, tabular sans for every figure.
+
+The serif is **Charter**, self-hosted from `src/fonts/`, 64KB for four faces,
+`font-display: swap`. Charter is the face macOS and iOS already carry, which is
+why the gallery looked right before a single font was loaded. Shipping it is
+what gives Android readers, who are most of the audience, the same page
+instead of a Noto Serif fallback.
+
+Bitstream contributed Charter to the X Consortium in 1992 with permission to
+use, copy, modify, sublicense, sell and redistribute, provided the notice stays
+intact. That notice is `src/fonts/LICENSE.charter.txt` and ships with the
+files. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.
+
+The sans is still the system stack headed by Inter, which the Next app already
+loads. On a machine without Inter it resolves to San Francisco or Roboto. If
+that drift matters it should be self-hosted the same way.
+
+Running text never drops below 16px. `caption` and `kicker` are the only roles
+allowed at 12px, and the tests enforce both floors.
+
+## Scope
+
+Phase 1 is this package plus the site chrome and the article template:
+almost every session starts on an article, and the masthead and footer appear
+on every page, so those are what make the site stop looking like two sites.
+Fronts, data pages, account and forms follow.

package/build/tokens-auto.css

@@ -0,0 +1,68 @@
+/* Generated from tokens/. Do not edit by hand: run `npm run build:tokens`. */
+@import "./tokens.css";
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme="light"]) {
+    --p234-color-ink: #f2f0ea;
+    --p234-color-ink-muted: #b0aca2;
+    --p234-color-ink-subtle: #9b978d;
+    --p234-color-ink-inverse: #f2f0ea;
+    --p234-color-paper: #141413;
+    --p234-color-paper-alt: #1c1c1a;
+    --p234-color-paper-sunk: #242421;
+    --p234-color-paper-dark: #0d0d0c;
+    --p234-color-rule: #32312d;
+    --p234-color-rule-strong: #6b685f;
+    --p234-color-brand: #8cc48c;
+    --p234-color-brand-hover: #a4d2a4;
+    --p234-color-on-brand: #141413;
+    --p234-color-brand-tint: #1e2a1e;
+    --p234-color-link: #8cc48c;
+    --p234-color-link-hover: #a4d2a4;
+    --p234-color-link-visited: #cbb0ea;
+    --p234-color-focus: #ffbf47;
+    --p234-color-focus-outer: #0d0d0c;
+    --p234-color-section-politics: #eb9494;
+    --p234-color-section-business: #8fbce8;
+    --p234-color-section-markets: #e5bc6a;
+    --p234-color-section-world: #c9a9ee;
+    --p234-color-section-sport: #63c9b0;
+    --p234-color-data-up: #5cc184;
+    --p234-color-data-down: #ef8288;
+    --p234-color-data-flat: #b0aca2;
+    --p234-color-chart-series-1: #4A90D9;
+    --p234-color-chart-series-2: #AD8B2A;
+    --p234-color-chart-series-3: #D16A9A;
+    --p234-color-chart-series-4: #2F9463;
+    --p234-color-chart-series-5: #9B7ED9;
+    --p234-color-chart-axis: #6b685f;
+    --p234-color-chart-grid: #282722;
+    --p234-color-chart-reference: #9b978d;
+    --p234-color-chart-tooltip-bg: #2a2a26;
+    --p234-color-chart-tooltip-ink: #f2f0ea;
+    --p234-color-chart-tooltip-border: #4a4840;
+    --p234-color-chart-seq-1: #36618C;
+    --p234-color-chart-seq-2: #4A7FB0;
+    --p234-color-chart-seq-3: #5E9CD1;
+    --p234-color-chart-seq-4: #86B9E3;
+    --p234-color-chart-seq-5: #B3D6F2;
+    --p234-color-chart-div-1: #AD8B2A;
+    --p234-color-chart-div-2: #7E6A32;
+    --p234-color-chart-div-3: #34322E;
+    --p234-color-chart-div-4: #3E6B96;
+    --p234-color-chart-div-5: #86B9E3;
+    --p234-color-field-bg: #1c1c1a;
+    --p234-color-field-border: #6b685f;
+    --p234-color-field-border-hover: #9b978d;
+    --p234-color-field-ink-placeholder: #9b978d;
+    --p234-color-field-bg-disabled: #242421;
+    --p234-color-success: #5cc184;
+    --p234-color-success-tint: #15251b;
+    --p234-color-warning: #e5bc6a;
+    --p234-color-warning-tint: #272015;
+    --p234-color-error: #ef8288;
+    --p234-color-error-tint: #2a1719;
+    --p234-color-info: #8fbce8;
+    --p234-color-info-tint: #151f28;
+  }
+}

package/build/tokens.css

@@ -0,0 +1,283 @@
+/* Generated from tokens/. Do not edit by hand: run `npm run build:tokens`. */
+
+:root {
+  --p234-color-ink: #1a1a18;
+  --p234-color-ink-muted: #5b584f;
+  --p234-color-ink-subtle: #6e6b62;
+  --p234-color-ink-inverse: #ffffff;
+  --p234-color-paper: #ffffff;
+  --p234-color-paper-alt: #faf8f4;
+  --p234-color-paper-sunk: #f1eee7;
+  --p234-color-paper-dark: #1a1a18;
+  --p234-color-rule: #e3dfd6;
+  --p234-color-rule-strong: #8c887e;
+  --p234-color-brand: #417742;
+  --p234-color-brand-hover: #356136;
+  --p234-color-on-brand: #ffffff;
+  --p234-color-brand-tint: #eaf1e8;
+  --p234-color-link: #417742;
+  --p234-color-link-hover: #356136;
+  --p234-color-link-visited: #5b2a86;
+  --p234-color-focus: #ffbf47;
+  --p234-color-focus-outer: #1a1a18;
+  --p234-color-section-politics: #9b2c2c;
+  --p234-color-section-business: #1f4e79;
+  --p234-color-section-markets: #8a5700;
+  --p234-color-section-world: #5b2a86;
+  --p234-color-section-sport: #0f6e5c;
+  --p234-color-data-up: #15683b;
+  --p234-color-data-down: #b4232a;
+  --p234-color-data-flat: #5b584f;
+  --p234-color-chart-series-1: #1565C0;
+  --p234-color-chart-series-2: #B08500;
+  --p234-color-chart-series-3: #B5537F;
+  --p234-color-chart-series-4: #2E7D32;
+  --p234-color-chart-series-5: #6A4FA3;
+  --p234-color-chart-axis: #8c887e;
+  --p234-color-chart-grid: #ebe8e1;
+  --p234-color-chart-reference: #6e6b62;
+  --p234-color-chart-tooltip-bg: #1a1a18;
+  --p234-color-chart-tooltip-ink: #ffffff;
+  --p234-color-chart-tooltip-border: #3f3d38;
+  --p234-color-chart-seq-1: #8CB2DD;
+  --p234-color-chart-seq-2: #5F8FC4;
+  --p234-color-chart-seq-3: #3F6EA8;
+  --p234-color-chart-seq-4: #27507F;
+  --p234-color-chart-seq-5: #123455;
+  --p234-color-chart-div-1: #8A6D00;
+  --p234-color-chart-div-2: #C9AE6E;
+  --p234-color-chart-div-3: #EDEBE6;
+  --p234-color-chart-div-4: #6E9FD4;
+  --p234-color-chart-div-5: #1D4F85;
+  --p234-color-field-bg: #ffffff;
+  --p234-color-field-border: #8c887e;
+  --p234-color-field-border-hover: #5b584f;
+  --p234-color-field-ink-placeholder: #6e6b62;
+  --p234-color-field-bg-disabled: #f1eee7;
+  --p234-color-success: #00703c;
+  --p234-color-success-tint: #e6f2ec;
+  --p234-color-warning: #8a5700;
+  --p234-color-warning-tint: #fdf3e1;
+  --p234-color-error: #b00020;
+  --p234-color-error-tint: #fbe9ec;
+  --p234-color-info: #1d70b8;
+  --p234-color-info-tint: #e8f1f8;
+  --p234-font-family-display: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-font-family-text: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --p234-type-display-1-size: clamp(2.25rem, 1.30rem + 4.2vw, 3.25rem);
+  --p234-type-display-1-leading: 1.04;
+  --p234-type-display-1-weight: 700;
+  --p234-type-display-1-tracking: -0.022em;
+  --p234-type-display-1-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-display-2-size: clamp(1.75rem, 1.18rem + 2.5vw, 2.5rem);
+  --p234-type-display-2-leading: 1.07;
+  --p234-type-display-2-weight: 700;
+  --p234-type-display-2-tracking: -0.02em;
+  --p234-type-display-2-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-headline-size: 1.625rem;
+  --p234-type-headline-leading: 1.18;
+  --p234-type-headline-weight: 700;
+  --p234-type-headline-tracking: -0.015em;
+  --p234-type-headline-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-headline-sm-size: 1.3125rem;
+  --p234-type-headline-sm-leading: 1.24;
+  --p234-type-headline-sm-weight: 700;
+  --p234-type-headline-sm-tracking: -0.01em;
+  --p234-type-headline-sm-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-headline-xs-size: 1.125rem;
+  --p234-type-headline-xs-leading: 1.3;
+  --p234-type-headline-xs-weight: 700;
+  --p234-type-headline-xs-tracking: -0.005em;
+  --p234-type-headline-xs-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-standfirst-size: 1.1875rem;
+  --p234-type-standfirst-leading: 1.5;
+  --p234-type-standfirst-weight: 400;
+  --p234-type-standfirst-tracking: 0;
+  --p234-type-standfirst-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-body-size: 1.125rem;
+  --p234-type-body-leading: 1.68;
+  --p234-type-body-weight: 400;
+  --p234-type-body-tracking: 0;
+  --p234-type-body-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-body-sm-size: 1rem;
+  --p234-type-body-sm-leading: 1.6;
+  --p234-type-body-sm-weight: 400;
+  --p234-type-body-sm-tracking: 0;
+  --p234-type-body-sm-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-type-ui-size: 0.9375rem;
+  --p234-type-ui-leading: 1.45;
+  --p234-type-ui-weight: 500;
+  --p234-type-ui-tracking: 0;
+  --p234-type-ui-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-ui-sm-size: 0.8125rem;
+  --p234-type-ui-sm-leading: 1.4;
+  --p234-type-ui-sm-weight: 500;
+  --p234-type-ui-sm-tracking: 0;
+  --p234-type-ui-sm-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-kicker-size: 0.75rem;
+  --p234-type-kicker-leading: 1.2;
+  --p234-type-kicker-weight: 700;
+  --p234-type-kicker-tracking: 0.08em;
+  --p234-type-kicker-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-kicker-case: uppercase;
+  --p234-type-meta-size: 0.8125rem;
+  --p234-type-meta-leading: 1.4;
+  --p234-type-meta-weight: 400;
+  --p234-type-meta-tracking: 0;
+  --p234-type-meta-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-caption-size: 0.75rem;
+  --p234-type-caption-leading: 1.45;
+  --p234-type-caption-weight: 400;
+  --p234-type-caption-tracking: 0;
+  --p234-type-caption-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-data-lg-size: 2rem;
+  --p234-type-data-lg-leading: 1.1;
+  --p234-type-data-lg-weight: 600;
+  --p234-type-data-lg-tracking: -0.01em;
+  --p234-type-data-lg-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-data-lg-numeric: tabular-nums;
+  --p234-type-data-size: 1.125rem;
+  --p234-type-data-leading: 1.2;
+  --p234-type-data-weight: 600;
+  --p234-type-data-tracking: 0;
+  --p234-type-data-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-data-numeric: tabular-nums;
+  --p234-type-data-sm-size: 0.875rem;
+  --p234-type-data-sm-leading: 1.2;
+  --p234-type-data-sm-weight: 500;
+  --p234-type-data-sm-tracking: 0;
+  --p234-type-data-sm-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --p234-type-data-sm-numeric: tabular-nums;
+  --p234-type-quote-size: 1.375rem;
+  --p234-type-quote-leading: 1.45;
+  --p234-type-quote-weight: 400;
+  --p234-type-quote-tracking: -0.01em;
+  --p234-type-quote-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
+  --p234-space-0: 0;
+  --p234-space-1: 0.125rem;
+  --p234-space-2: 0.25rem;
+  --p234-space-3: 0.5rem;
+  --p234-space-4: 0.75rem;
+  --p234-space-5: 1rem;
+  --p234-space-6: 1.5rem;
+  --p234-space-7: 2rem;
+  --p234-space-8: 3rem;
+  --p234-space-9: 4rem;
+  --p234-space-10: 6rem;
+  --p234-measure-narrow: 46ch;
+  --p234-measure-text: 66ch;
+  --p234-measure-wide: 78ch;
+  --p234-radius-none: 0;
+  --p234-radius-sm: 2px;
+  --p234-radius-md: 4px;
+  --p234-radius-pill: 999px;
+  --p234-border-hairline: 1px;
+  --p234-border-thick: 2px;
+  --p234-border-heavy: 4px;
+  --p234-shadow-none: none;
+  --p234-shadow-raise: 0 1px 2px rgba(26, 26, 24, 0.06);
+  --p234-shadow-overlay: 0 8px 24px rgba(26, 26, 24, 0.16);
+  --p234-layout-gutter: 1rem;
+  --p234-layout-gutter-lg: 2rem;
+  --p234-layout-column-gap: 2rem;
+  --p234-layout-container: 1280px;
+  --p234-layout-container-text: 720px;
+  --p234-chart-line-width: 2px;
+  --p234-chart-grid-width: 1px;
+  --p234-chart-marker-size: 8px;
+  --p234-chart-area-opacity: 0.14;
+  --p234-chart-mark-gap: 2px;
+  --p234-chart-radius-end: 4px;
+  --p234-field-height: 2.75rem;
+  --p234-field-padding-x: 0.75rem;
+  --p234-field-radius: 4px;
+  --p234-field-border-width: 1px;
+  --p234-field-border-width-invalid: 2px;
+  --p234-figure-ratio: 16 / 9;
+  --p234-figure-ratio-portrait: 3 / 4;
+  --p234-figure-ratio-square: 1 / 1;
+  --p234-figure-hero-max-height: 31.25rem;
+  --p234-figure-inset-width: 45%;
+  --p234-z-base: 0;
+  --p234-z-raised: 10;
+  --p234-z-sticky: 20;
+  --p234-z-dropdown: 30;
+  --p234-z-overlay: 40;
+  --p234-z-toast: 50;
+  --p234-breakpoint-sm: 30rem;
+  --p234-breakpoint-md: 48rem;
+  --p234-breakpoint-lg: 62rem;
+  --p234-breakpoint-xl: 80rem;
+  --p234-icon-size-sm: 16px;
+  --p234-icon-size-md: 20px;
+  --p234-icon-size-lg: 24px;
+  --p234-icon-stroke: 1.75;
+  --p234-motion-duration-fast: 120ms;
+  --p234-motion-duration-base: 180ms;
+  --p234-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+}
+
+.dark, [data-theme="dark"] {
+  --p234-color-ink: #f2f0ea;
+  --p234-color-ink-muted: #b0aca2;
+  --p234-color-ink-subtle: #9b978d;
+  --p234-color-ink-inverse: #f2f0ea;
+  --p234-color-paper: #141413;
+  --p234-color-paper-alt: #1c1c1a;
+  --p234-color-paper-sunk: #242421;
+  --p234-color-paper-dark: #0d0d0c;
+  --p234-color-rule: #32312d;
+  --p234-color-rule-strong: #6b685f;
+  --p234-color-brand: #8cc48c;
+  --p234-color-brand-hover: #a4d2a4;
+  --p234-color-on-brand: #141413;
+  --p234-color-brand-tint: #1e2a1e;
+  --p234-color-link: #8cc48c;
+  --p234-color-link-hover: #a4d2a4;
+  --p234-color-link-visited: #cbb0ea;
+  --p234-color-focus: #ffbf47;
+  --p234-color-focus-outer: #0d0d0c;
+  --p234-color-section-politics: #eb9494;
+  --p234-color-section-business: #8fbce8;
+  --p234-color-section-markets: #e5bc6a;
+  --p234-color-section-world: #c9a9ee;
+  --p234-color-section-sport: #63c9b0;
+  --p234-color-data-up: #5cc184;
+  --p234-color-data-down: #ef8288;
+  --p234-color-data-flat: #b0aca2;
+  --p234-color-chart-series-1: #4A90D9;
+  --p234-color-chart-series-2: #AD8B2A;
+  --p234-color-chart-series-3: #D16A9A;
+  --p234-color-chart-series-4: #2F9463;
+  --p234-color-chart-series-5: #9B7ED9;
+  --p234-color-chart-axis: #6b685f;
+  --p234-color-chart-grid: #282722;
+  --p234-color-chart-reference: #9b978d;
+  --p234-color-chart-tooltip-bg: #2a2a26;
+  --p234-color-chart-tooltip-ink: #f2f0ea;
+  --p234-color-chart-tooltip-border: #4a4840;
+  --p234-color-chart-seq-1: #36618C;
+  --p234-color-chart-seq-2: #4A7FB0;
+  --p234-color-chart-seq-3: #5E9CD1;
+  --p234-color-chart-seq-4: #86B9E3;
+  --p234-color-chart-seq-5: #B3D6F2;
+  --p234-color-chart-div-1: #AD8B2A;
+  --p234-color-chart-div-2: #7E6A32;
+  --p234-color-chart-div-3: #34322E;
+  --p234-color-chart-div-4: #3E6B96;
+  --p234-color-chart-div-5: #86B9E3;
+  --p234-color-field-bg: #1c1c1a;
+  --p234-color-field-border: #6b685f;
+  --p234-color-field-border-hover: #9b978d;
+  --p234-color-field-ink-placeholder: #9b978d;
+  --p234-color-field-bg-disabled: #242421;
+  --p234-color-success: #5cc184;
+  --p234-color-success-tint: #15251b;
+  --p234-color-warning: #e5bc6a;
+  --p234-color-warning-tint: #272015;
+  --p234-color-error: #ef8288;
+  --p234-color-error-tint: #2a1719;
+  --p234-color-info: #8fbce8;
+  --p234-color-info-tint: #151f28;
+}