@plus234feed/ds 0.0.0-stage → 0.3.0

package/src/fonts/LICENSE.charter.txt

@@ -0,0 +1,10 @@
+This is a copy of the Charter fonts which Bitstream contributed to the X
+consortium. This is the original notice included with the fonts:
+
+(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted
+permission under all Bitstream propriety rights to use, copy, modify, sublicense,
+sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the
+4 Courier Type 1 outline fonts for any purpose and without restriction; provided,
+that this notice is left intact on all copies of such fonts and that Bitstream's
+trademark is acknowledged as shown below on all unmodified copies of the 4 Charter
+Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.

package/src/fonts.css

@@ -0,0 +1,45 @@
+/* Charter, self-hosted. 64KB for four faces, no CDN request, no Google Fonts.
+ *
+ * Bitstream contributed Charter to the X Consortium in 1992 with permission to
+ * use, copy, modify, sublicense, sell and redistribute, provided the notice
+ * stays intact. src/fonts/LICENSE.charter.txt is that notice and ships with the
+ * files. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.
+ *
+ * This is the typeface macOS and iOS already carry, which is why the design
+ * looked right before anything was loaded. Shipping it is what makes the other
+ * 64 per cent of readers, who are on Android, see the same page.
+ *
+ * font-display: swap, because a reader arriving from search should see the
+ * headline in a fallback immediately rather than stare at nothing. */
+
+@font-face {
+  font-family: "Charter";
+  src: url("./fonts/charter_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Charter";
+  src: url("./fonts/charter_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Charter";
+  src: url("./fonts/charter_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Charter";
+  src: url("./fonts/charter_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}

package/tokens/core.tokens.json

@@ -0,0 +1,364 @@
+{
+  "$description": "Plus234Feed design system core tokens. Light theme values live here; tokens/themes/dark.tokens.json overrides the colour group. Format follows the W3C Design Tokens Community Group draft. Values become CSS custom properties prefixed --p234-.",
+
+  "color": {
+    "$type": "color",
+
+    "ink": { "$value": "#1a1a18", "$description": "Body and headline text. Warm near-black, not pure black, so long serif copy does not vibrate." },
+    "ink-muted": { "$value": "#5b584f", "$description": "Bylines, timestamps, source names, captions. Must stay 4.5:1 on paper and paper-alt." },
+    "ink-subtle": { "$value": "#6e6b62", "$description": "The lightest text allowed anywhere. Still passes 4.5:1. Below this, use ink-muted." },
+    "ink-inverse": { "$value": "#ffffff", "$description": "Text on paper-dark and on brand." },
+
+    "paper": { "$value": "#ffffff", "$description": "Page background." },
+    "paper-alt": { "$value": "#faf8f4", "$description": "Warm newsprint tint for section bands and pull panels. Subtle on purpose: this is not a cream site." },
+    "paper-sunk": { "$value": "#f1eee7", "$description": "Recessed blocks: data tables, quote blocks, the ad slot frame." },
+    "paper-dark": { "$value": "#1a1a18", "$description": "Footer, masthead inverse, section dividers on dark." },
+
+    "rule": { "$value": "#e3dfd6", "$description": "The hairline that does the layout work. Editorial pages separate with rules, not shadows or cards." },
+    "rule-strong": { "$value": "#8c887e", "$description": "Section rules and form control borders. Non-text, needs 3:1." },
+
+    "brand": { "$value": "#417742", "$description": "Plus234Feed green. Kickers, links, the masthead plus. Carried over from the existing identity." },
+    "brand-hover": { "$value": "#356136" },
+    "on-brand": { "$value": "#ffffff", "$description": "Text on a brand background. Build verifies 4.5:1." },
+    "brand-tint": { "$value": "#eaf1e8", "$description": "Selected rows, followed-topic chips, the live band." },
+
+    "link": { "$value": "{color.brand}" },
+    "link-hover": { "$value": "{color.brand-hover}" },
+    "link-visited": { "$value": "#5b2a86", "$description": "Real news readers revisit. Visited state is not optional on an archive this size." },
+
+    "focus": { "$value": "#ffbf47", "$description": "Focus ring. Always drawn with focus-outer behind it so it survives any background." },
+    "focus-outer": { "$value": "#1a1a18", "$description": "The ring drawn outside the focus colour. Dark on light pages, so the amber reads; in dark it recedes and the amber does the work alone." },
+
+    "section-politics": { "$value": "#9b2c2c", "$description": "Kicker text and section rule only. Never a background." },
+    "section-business": { "$value": "#1f4e79" },
+    "section-markets": { "$value": "#8a5700" },
+    "section-world": { "$value": "#5b2a86" },
+    "section-sport": { "$value": "#0f6e5c" },
+
+    "data-up": { "$value": "#15683b", "$description": "Gainers. Paired with an arrow glyph, never colour alone. Dark enough to clear 4.5:1 inside a sunk data table, which the first draft missed." },
+    "data-down": { "$value": "#b4232a", "$description": "Decliners. Paired with an arrow glyph, never colour alone." },
+    "data-flat": { "$value": "{color.ink-muted}" },
+
+    "chart-series-1": { "$value": "#1565C0", "$description": "Blue. Series are assigned in this fixed order and never cycled: colour follows the entity, so a filter that drops a series must not repaint the survivors." },
+    "chart-series-2": { "$value": "#B08500", "$description": "Ochre." },
+    "chart-series-3": { "$value": "#B5537F", "$description": "Magenta. The first three are the mutually distinct set, safe when series are compared through a legend rather than side by side." },
+    "chart-series-4": { "$value": "#2E7D32", "$description": "Green. From here on only ADJACENT separation is guaranteed, so four or more series need direct labels or faceting." },
+    "chart-series-5": { "$value": "#6A4FA3", "$description": "Purple. The last slot. A sixth series folds into Other, or the chart becomes small multiples." },
+
+    "chart-axis": { "$value": "#8c887e", "$description": "Axis line and ticks. Non-text, needs 3:1." },
+    "chart-grid": { "$value": "#ebe8e1", "$description": "Grid lines, deliberately recessive. Not gated at 3:1 because a grid that competes with the data is a worse chart." },
+    "chart-reference": { "$value": "#6e6b62", "$description": "Dashed reference lines: a target, an official figure, a prior period." },
+    "chart-tooltip-bg": { "$value": "#1a1a18" },
+    "chart-tooltip-ink": { "$value": "#ffffff" },
+    "chart-tooltip-border": { "$value": "#3f3d38" },
+
+    "chart-seq-1": { "$value": "#8CB2DD", "$description": "Sequential ramp for magnitude, one hue light to dark. This is what the Nigeria choropleth reads. Never a rainbow." },
+    "chart-seq-2": { "$value": "#5F8FC4" },
+    "chart-seq-3": { "$value": "#3F6EA8" },
+    "chart-seq-4": { "$value": "#27507F" },
+    "chart-seq-5": { "$value": "#123455" },
+
+    "chart-div-1": { "$value": "#8A6D00", "$description": "Diverging ramp for polarity: warm pole, neutral midpoint, cool pole. For swings and margins, where the sign matters as much as the size." },
+    "chart-div-2": { "$value": "#C9AE6E" },
+    "chart-div-3": { "$value": "#EDEBE6", "$description": "The neutral midpoint. Never a hue: a coloured midpoint invents a category that is not in the data." },
+    "chart-div-4": { "$value": "#6E9FD4" },
+    "chart-div-5": { "$value": "#1D4F85" },
+
+    "field-bg": { "$value": "#ffffff", "$description": "Input, select and textarea background." },
+    "field-border": { "$value": "#8c887e", "$description": "Resting border. Non-text, needs 3:1, which is what makes the control visible at all." },
+    "field-border-hover": { "$value": "#5b584f" },
+    "field-ink-placeholder": { "$value": "#6e6b62", "$description": "Placeholder text. Still 4.5:1, because a placeholder nobody can read is not a hint." },
+    "field-bg-disabled": { "$value": "#f1eee7" },
+
+    "success": { "$value": "#00703c" },
+    "success-tint": { "$value": "#e6f2ec" },
+    "warning": { "$value": "#8a5700" },
+    "warning-tint": { "$value": "#fdf3e1" },
+    "error": { "$value": "#b00020" },
+    "error-tint": { "$value": "#fbe9ec" },
+    "info": { "$value": "#1d70b8" },
+    "info-tint": { "$value": "#e8f1f8" }
+  },
+
+  "font": {
+    "family-display": {
+      "$type": "fontFamily",
+      "$value": ["Charter", "Charis SIL", "Iowan Old Style", "Georgia", "serif"],
+      "$description": "Headlines, standfirsts and article body. Charter, shipped by src/fonts.css at 64KB for four faces. It is the face macOS and iOS already carry, so the design looked right before anything was loaded; self-hosting it is what gives Android readers, who are 64 per cent of search traffic, the same page."
+    },
+    "family-text": {
+      "$type": "fontFamily",
+      "$value": ["Inter", "ui-sans-serif", "system-ui", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif"],
+      "$description": "Interface, navigation, kickers, metadata and all figures. Already loaded site-wide and used by the wordmark."
+    },
+    "family-mono": {
+      "$type": "fontFamily",
+      "$value": ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"],
+      "$description": "API documentation and code samples only. Figures use family-text with tabular numerals."
+    }
+  },
+
+  "type": {
+    "$description": "Named editorial roles, not t-shirt sizes. Each role is one decision. Picking a raw font-size in a component is the thing this system exists to stop.",
+
+    "display-1": {
+      "size": { "$type": "dimension", "$value": "clamp(2.25rem, 1.30rem + 4.2vw, 3.25rem)" },
+      "leading": { "$type": "number", "$value": 1.04 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "-0.022em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "The one dominant story. One per page, never two."
+    },
+    "display-2": {
+      "size": { "$type": "dimension", "$value": "clamp(1.75rem, 1.18rem + 2.5vw, 2.5rem)" },
+      "leading": { "$type": "number", "$value": 1.07 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "-0.02em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Article H1, secondary lead."
+    },
+    "headline": {
+      "size": { "$type": "dimension", "$value": "1.625rem" },
+      "leading": { "$type": "number", "$value": 1.18 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "-0.015em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Strong secondary story in a grid."
+    },
+    "headline-sm": {
+      "size": { "$type": "dimension", "$value": "1.3125rem" },
+      "leading": { "$type": "number", "$value": 1.24 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "-0.01em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Card headline, sidebar lead."
+    },
+    "headline-xs": {
+      "size": { "$type": "dimension", "$value": "1.125rem" },
+      "leading": { "$type": "number", "$value": 1.3 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "-0.005em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Compact supporting headline, the stacked list items."
+    },
+    "standfirst": {
+      "size": { "$type": "dimension", "$value": "1.1875rem" },
+      "leading": { "$type": "number", "$value": 1.5 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "The deck under a headline. One sentence that says why the story matters."
+    },
+    "body": {
+      "size": { "$type": "dimension", "$value": "1.125rem" },
+      "leading": { "$type": "number", "$value": 1.68 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Article copy. 18px serif. The floor for running text is 16px anywhere on the site."
+    },
+    "body-sm": {
+      "size": { "$type": "dimension", "$value": "1rem" },
+      "leading": { "$type": "number", "$value": 1.6 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Summary text in cards and rails. 16px, the minimum for running text."
+    },
+    "ui": {
+      "size": { "$type": "dimension", "$value": "0.9375rem" },
+      "leading": { "$type": "number", "$value": 1.45 },
+      "weight": { "$type": "fontWeight", "$value": 500 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "$description": "Navigation, buttons, tabs, form labels."
+    },
+    "ui-sm": {
+      "size": { "$type": "dimension", "$value": "0.8125rem" },
+      "leading": { "$type": "number", "$value": 1.4 },
+      "weight": { "$type": "fontWeight", "$value": 500 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "$description": "Dense controls, filter chips, table headers."
+    },
+    "kicker": {
+      "size": { "$type": "dimension", "$value": "0.75rem" },
+      "leading": { "$type": "number", "$value": 1.2 },
+      "weight": { "$type": "fontWeight", "$value": 700 },
+      "tracking": { "$type": "dimension", "$value": "0.08em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "case": { "$type": "string", "$value": "uppercase" },
+      "$description": "The section label above a headline. Carries the section colour."
+    },
+    "meta": {
+      "size": { "$type": "dimension", "$value": "0.8125rem" },
+      "leading": { "$type": "number", "$value": 1.4 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "$description": "Source, timestamp, coverage count. Always ink-muted."
+    },
+    "caption": {
+      "size": { "$type": "dimension", "$value": "0.75rem" },
+      "leading": { "$type": "number", "$value": 1.45 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "$description": "Photo credits and footnotes. The only role allowed below 13px."
+    },
+    "data-lg": {
+      "size": { "$type": "dimension", "$value": "2rem" },
+      "leading": { "$type": "number", "$value": 1.1 },
+      "weight": { "$type": "fontWeight", "$value": 600 },
+      "tracking": { "$type": "dimension", "$value": "-0.01em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "numeric": { "$type": "string", "$value": "tabular-nums" },
+      "$description": "The headline figure on a price or market page."
+    },
+    "data": {
+      "size": { "$type": "dimension", "$value": "1.125rem" },
+      "leading": { "$type": "number", "$value": 1.2 },
+      "weight": { "$type": "fontWeight", "$value": 600 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "numeric": { "$type": "string", "$value": "tabular-nums" },
+      "$description": "Figures in tables and tiles. Tabular so columns align."
+    },
+    "data-sm": {
+      "size": { "$type": "dimension", "$value": "0.875rem" },
+      "leading": { "$type": "number", "$value": 1.2 },
+      "weight": { "$type": "fontWeight", "$value": 500 },
+      "tracking": { "$type": "dimension", "$value": "0" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-text}" },
+      "numeric": { "$type": "string", "$value": "tabular-nums" },
+      "$description": "Deltas and units beside a figure."
+    },
+    "quote": {
+      "size": { "$type": "dimension", "$value": "1.375rem" },
+      "leading": { "$type": "number", "$value": 1.45 },
+      "weight": { "$type": "fontWeight", "$value": 400 },
+      "tracking": { "$type": "dimension", "$value": "-0.01em" },
+      "family": { "$type": "fontFamily", "$value": "{font.family-display}" },
+      "$description": "Pull quotes and the lead sentence of a brief."
+    }
+  },
+
+  "space": {
+    "$type": "dimension",
+    "$description": "4px base. Editorial spacing is mostly vertical rhythm between rules.",
+    "0": { "$value": "0" },
+    "1": { "$value": "0.125rem" },
+    "2": { "$value": "0.25rem" },
+    "3": { "$value": "0.5rem" },
+    "4": { "$value": "0.75rem" },
+    "5": { "$value": "1rem" },
+    "6": { "$value": "1.5rem" },
+    "7": { "$value": "2rem" },
+    "8": { "$value": "3rem" },
+    "9": { "$value": "4rem" },
+    "10": { "$value": "6rem" }
+  },
+
+  "measure": {
+    "$type": "dimension",
+    "narrow": { "$value": "46ch", "$description": "Sidebar and rail copy." },
+    "text": { "$value": "66ch", "$description": "Article body. The reason the article column is capped, not full width." },
+    "wide": { "$value": "78ch", "$description": "Data tables and wide standfirsts." }
+  },
+
+  "radius": {
+    "$type": "dimension",
+    "$description": "Editorial restraint. The current site uses rounded-xl 354 times; nothing here goes past 4px except pill, which is for tags and chips only.",
+    "none": { "$value": "0" },
+    "sm": { "$value": "2px" },
+    "md": { "$value": "4px" },
+    "pill": { "$value": "999px" }
+  },
+
+  "border": {
+    "$type": "dimension",
+    "hairline": { "$value": "1px", "$description": "Default rule between stories." },
+    "thick": { "$value": "2px", "$description": "Section heading underline." },
+    "heavy": { "$value": "4px", "$description": "Masthead rule and the live band." }
+  },
+
+  "shadow": {
+    "$type": "shadow",
+    "$description": "Three only. An editorial page separates with rules; shadows are for things that genuinely float.",
+    "none": { "$value": "none" },
+    "raise": { "$value": "0 1px 2px rgba(26, 26, 24, 0.06)", "$description": "Sticky masthead once the page scrolls." },
+    "overlay": { "$value": "0 8px 24px rgba(26, 26, 24, 0.16)", "$description": "Menus, dialogs, the search panel." }
+  },
+
+  "layout": {
+    "$type": "dimension",
+    "gutter": { "$value": "1rem", "$description": "Page side gutter on phones." },
+    "gutter-lg": { "$value": "2rem" },
+    "column-gap": { "$value": "2rem", "$description": "Gap between editorial columns, wide enough for the rule to read." },
+    "container": { "$value": "1280px" },
+    "container-text": { "$value": "720px", "$description": "Article shell." }
+  },
+
+  "chart": {
+    "$description": "Mark specs. Thin marks, recessive grid, and a gap between adjacent fills so stacked segments read as separate.",
+    "line-width": { "$type": "dimension", "$value": "2px" },
+    "grid-width": { "$type": "dimension", "$value": "1px" },
+    "marker-size": { "$type": "dimension", "$value": "8px", "$description": "Minimum hit and read size for a point marker." },
+    "area-opacity": { "$type": "number", "$value": 0.14, "$description": "Fill under a line. Low enough that an overlapping pair stays legible." },
+    "mark-gap": { "$type": "dimension", "$value": "2px", "$description": "Surface-coloured gap between adjacent bars and stacked segments." },
+    "radius-end": { "$type": "dimension", "$value": "4px", "$description": "Rounded data end on a bar, anchored to the baseline. The baseline end stays square." }
+  },
+
+  "field": {
+    "$type": "dimension",
+    "height": { "$value": "2.75rem", "$description": "44px, the touch target floor. Most readers are on a phone." },
+    "padding-x": { "$value": "0.75rem" },
+    "radius": { "$value": "4px", "$description": "radius.md. Form controls are the one place a visible radius helps, because it separates the control from the rule grid." },
+    "border-width": { "$value": "1px" },
+    "border-width-invalid": { "$value": "2px", "$description": "An invalid field thickens its border as well as changing colour, so the state is not carried by colour alone." }
+  },
+
+  "figure": {
+    "$description": "Image shapes. The image service resizes to 16:9 at a requested width, so 16:9 is the shape the system is built around and anything else is a deliberate exception.",
+    "ratio": { "$type": "string", "$value": "16 / 9", "$description": "The default, and what img.plus234feed.com returns." },
+    "ratio-portrait": { "$type": "string", "$value": "3 / 4", "$description": "People. A politician's photograph cropped to 16:9 loses the face." },
+    "ratio-square": { "$type": "string", "$value": "1 / 1", "$description": "Logos and avatars." },
+    "hero-max-height": { "$type": "dimension", "$value": "31.25rem", "$description": "500px. A hero taller than this pushes the first paragraph off a laptop screen." },
+    "inset-width": { "$type": "dimension", "$value": "45%", "$description": "An image set beside the text on wide screens." }
+  },
+
+  "z": {
+    "$type": "number",
+    "$description": "One scale for everything that stacks. Before this, the masthead, dropdowns, the search overlay and toasts each picked their own number.",
+    "base": { "$value": 0 },
+    "raised": { "$value": 10, "$description": "A mark lifted above its siblings." },
+    "sticky": { "$value": 20, "$description": "The masthead and any sticky section rule." },
+    "dropdown": { "$value": 30, "$description": "Nav menus, the account menu, select popovers." },
+    "overlay": { "$value": 40, "$description": "Search overlay, dialogs, the mobile menu." },
+    "toast": { "$value": 50, "$description": "Always on top. Nothing goes above a message about what just happened." }
+  },
+
+  "breakpoint": {
+    "$type": "dimension",
+    "$description": "Custom properties cannot be used in a media query, so these are the agreed values rather than something a stylesheet reads. They are exported in build/tokens.json for JavaScript, and every media query in the system uses one of them literally.",
+    "sm": { "$value": "30rem", "$description": "480px. Large phone." },
+    "md": { "$value": "48rem", "$description": "768px. Tablet, and where the article column stops being full bleed." },
+    "lg": { "$value": "62rem", "$description": "992px. Where a sidebar becomes worth having." },
+    "xl": { "$value": "80rem", "$description": "1280px. Full container." }
+  },
+
+  "icon": {
+    "$type": "dimension",
+    "$description": "lucide-react, sized from this scale. An icon never appears without a label or an aria-label.",
+    "size-sm": { "$value": "16px", "$description": "Inline with ui-sm and meta text." },
+    "size-md": { "$value": "20px", "$description": "Default: buttons, nav, controls." },
+    "size-lg": { "$value": "24px", "$description": "Section headers and empty states." },
+    "stroke": { "$type": "number", "$value": 1.75, "$description": "Slightly lighter than lucide's default 2, to sit with the serif rather than shout over it." }
+  },
+
+  "motion": {
+    "duration-fast": { "$type": "duration", "$value": "120ms" },
+    "duration-base": { "$type": "duration", "$value": "180ms" },
+    "easing-standard": { "$type": "cubicBezier", "$value": "cubic-bezier(0.2, 0, 0, 1)" }
+  }
+}

package/tokens/themes/dark.tokens.json

@@ -0,0 +1,82 @@
+{
+  "$description": "Dark theme. Overrides the colour group only; type, space and layout are shared with core. Every pair in CONTRAST_PAIRS is checked against these values too, so a dark-only regression fails the build.",
+
+  "color": {
+    "$type": "color",
+
+    "ink": { "$value": "#f2f0ea", "$description": "Warm off-white. Pure white on a dark ground glares under serif copy." },
+    "ink-muted": { "$value": "#b0aca2" },
+    "ink-subtle": { "$value": "#9b978d" },
+    "ink-inverse": { "$value": "#f2f0ea", "$description": "In dark the footer is still a dark surface, so text on it stays light. Text on the brand colour is on-brand, which is the dark value." },
+
+    "paper": { "$value": "#141413" },
+    "paper-alt": { "$value": "#1c1c1a" },
+    "paper-sunk": { "$value": "#242421" },
+    "paper-dark": { "$value": "#0d0d0c" },
+
+    "rule": { "$value": "#32312d" },
+    "rule-strong": { "$value": "#6b685f" },
+
+    "brand": { "$value": "#8cc48c", "$description": "The light-theme green fails on a dark ground, so dark gets a lifted tint of the same hue." },
+    "brand-hover": { "$value": "#a4d2a4" },
+    "on-brand": { "$value": "#141413" },
+    "brand-tint": { "$value": "#1e2a1e" },
+
+    "link": { "$value": "{color.brand}" },
+    "link-hover": { "$value": "{color.brand-hover}" },
+    "link-visited": { "$value": "#cbb0ea" },
+
+    "focus": { "$value": "#ffbf47" },
+    "focus-outer": { "$value": "#0d0d0c", "$description": "On a dark page the outer ring recedes and the amber carries the focus state on its own." },
+
+    "section-politics": { "$value": "#eb9494" },
+    "section-business": { "$value": "#8fbce8" },
+    "section-markets": { "$value": "#e5bc6a" },
+    "section-world": { "$value": "#c9a9ee" },
+    "section-sport": { "$value": "#63c9b0" },
+
+    "data-up": { "$value": "#5cc184" },
+    "data-down": { "$value": "#ef8288" },
+    "data-flat": { "$value": "{color.ink-muted}" },
+
+    "chart-series-1": { "$value": "#4A90D9", "$description": "Dark is a selected palette, not an automatic flip: each step was re-chosen against the dark surface and re-validated." },
+    "chart-series-2": { "$value": "#AD8B2A" },
+    "chart-series-3": { "$value": "#D16A9A" },
+    "chart-series-4": { "$value": "#2F9463" },
+    "chart-series-5": { "$value": "#9B7ED9" },
+
+    "chart-axis": { "$value": "#6b685f" },
+    "chart-grid": { "$value": "#282722" },
+    "chart-reference": { "$value": "#9b978d" },
+    "chart-tooltip-bg": { "$value": "#2a2a26" },
+    "chart-tooltip-ink": { "$value": "#f2f0ea" },
+    "chart-tooltip-border": { "$value": "#4a4840" },
+
+    "chart-seq-1": { "$value": "#36618C" },
+    "chart-seq-2": { "$value": "#4A7FB0" },
+    "chart-seq-3": { "$value": "#5E9CD1" },
+    "chart-seq-4": { "$value": "#86B9E3" },
+    "chart-seq-5": { "$value": "#B3D6F2" },
+
+    "chart-div-1": { "$value": "#AD8B2A" },
+    "chart-div-2": { "$value": "#7E6A32" },
+    "chart-div-3": { "$value": "#34322E" },
+    "chart-div-4": { "$value": "#3E6B96" },
+    "chart-div-5": { "$value": "#86B9E3" },
+
+    "field-bg": { "$value": "#1c1c1a" },
+    "field-border": { "$value": "#6b685f" },
+    "field-border-hover": { "$value": "#9b978d" },
+    "field-ink-placeholder": { "$value": "#9b978d" },
+    "field-bg-disabled": { "$value": "#242421" },
+
+    "success": { "$value": "#5cc184" },
+    "success-tint": { "$value": "#15251b" },
+    "warning": { "$value": "#e5bc6a" },
+    "warning-tint": { "$value": "#272015" },
+    "error": { "$value": "#ef8288" },
+    "error-tint": { "$value": "#2a1719" },
+    "info": { "$value": "#8fbce8" },
+    "info-tint": { "$value": "#151f28" }
+  }
+}