@cloudgrid-io/ui 0.32.4 → 0.34.0

package/dist/docs.css

@@ -0,0 +1,466 @@
+/*
+  A PRODUCT PRESET for the docs site (docs.cloudgrid.io, Astro Starlight). ui#341.
+
+  It styles Starlight entirely from this package's tokens, so the docs repo
+  keeps an import and its config and nothing else: no hex, no font stack, no
+  second copy of the brand.
+
+  HOW. Starlight paints almost everything from about sixty `--sl-*` custom
+  properties. Part one of this file maps them onto `--cg-*` tokens. Part two is
+  a short list of targeted rules, only where Starlight hard-wires a pairing the
+  brand does not want or has no variable at all. Every value is a token; a test
+  (test/docs-preset.test.mjs) holds the file to that.
+
+  LIGHT ONLY (founder, 2026-10-19). This package has no dark mode: dark is a
+  container concern (`data-cg-surface='ink'`), never a page mode. So the dark
+  scope is not styled here at all. The consumer forces `data-theme='light'` and
+  removes the theme picker; without that, a dark-OS reader would get this
+  palette's light values under Starlight's own dark logo and code theme.
+
+  IMPORT ORDER. After tokens.css, which is what every var() below reads:
+
+      customCss: [
+        '@cloudgrid-io/ui/fonts.css',
+        '@cloudgrid-io/ui/tokens.css',
+        '@cloudgrid-io/ui/docs.css',
+      ]
+
+  UNLAYERED ON PURPOSE. Starlight puts its own rules in `@layer starlight.*`,
+  and an unlayered rule beats any layered one whatever the specificity or the
+  order. That is why the targeted rules below can be plain class selectors.
+
+  SAME ELEMENT, SAME RESOLUTION. Rule 2 of this library: a custom property that
+  references another resolves where it is declared. Starlight declares its
+  derived variables (`--sl-color-text: var(--sl-color-gray-2)`) on :root, and
+  this file remaps the ramp on :root too, so both resolve on the same element.
+  Do not flip tokens per container inside the docs; it would not follow.
+
+  PROSE PARITY. prose.css cannot be applied to Starlight's markup (it is scoped
+  to `.prose`, and adding that class means overriding MarkdownContent and then
+  fighting `.prose pre` on Expressive Code). The few element rules are mirrored
+  here against `.sl-markdown-content`, with the same tokens, and
+  test/docs-preset.test.mjs fails if the two drift.
+
+  STARLIGHT COUPLING. Measured against @astrojs/starlight 0.42.6. Part one uses
+  the documented `--sl-*` contract. Part two depends on a handful of internal
+  selectors (`#_top`, `.sidebar-content`, `.sl-link-button`, `.card`,
+  `.sl-link-card`, `.pagination-links`, `button[data-open-modal] > kbd`,
+  `#starlight__search`). A Starlight upgrade can rename one silently; take
+  upgrades with a screenshot check.
+
+  NOT IN THIS FILE. Icons stay Starlight's own until the Phosphor follow-up.
+  Code blocks are styled by the Expressive Code export,
+  `@cloudgrid-io/ui/expressive-code`, plus the one rule below that Expressive
+  Code has no setting for.
+*/
+
+/* ---- part one: Starlight's variables, onto the tokens ---------------------- */
+
+/* `::backdrop` because Starlight declares its colours there too: the search
+   dialog's backdrop reads --sl-color-backdrop-overlay from it. */
+:root,
+::backdrop {
+  /* The neutral ramp. Starlight's `white` is its highest-contrast ink and its
+     `black` is the page, so the ramp runs from text-primary to the ground. */
+  --sl-color-white: var(--cg-text-primary);
+  --sl-color-gray-1: var(--cg-text-primary);
+  /* Body text. prose.css sets `p, li` in text-secondary and `strong` in
+     text-primary, and so does this. */
+  --sl-color-gray-2: var(--cg-text-secondary);
+  --sl-color-gray-3: var(--cg-text-muted-strong);
+  --sl-color-gray-4: var(--cg-text-muted);
+  /* Structural borders: the search control, table rules, cards. */
+  --sl-color-gray-5: var(--cg-border-control);
+  --sl-color-gray-6: var(--cg-border-hairline);
+  --sl-color-gray-7: var(--cg-surface-subtle);
+  /* The library's page ground, with white cards on it (founder, 2026-10-19). */
+  --sl-color-black: var(--cg-surface-page);
+
+  /* The accent triplet: selection tint, focus and active marks. */
+  --sl-color-accent-low: var(--cg-primary-tint);
+  --sl-color-accent: var(--cg-primary);
+  --sl-color-accent-high: var(--cg-primary-press);
+
+  /* The hue triplets, `-low` fill, base, `-high` text. Each is a library tone.
+     Caution borrows the expired state's amber: an editorial role on a state
+     tone, stated here rather than minted as a new token. The note (blue) has no
+     tinted rung in the library, so its fill is the neutral raised surface. */
+  --sl-color-purple-low: var(--cg-primary-tint);
+  --sl-color-purple: var(--cg-primary);
+  --sl-color-purple-high: var(--cg-primary-press);
+  --sl-color-orange-low: var(--cg-expired-fill);
+  --sl-color-orange: var(--cg-expired);
+  --sl-color-orange-high: var(--cg-expired-strong);
+  --sl-color-red-low: var(--cg-danger-fill);
+  --sl-color-red: var(--cg-danger);
+  --sl-color-red-high: var(--cg-danger-strong);
+  --sl-color-green-low: var(--cg-online-fill);
+  --sl-color-green: var(--cg-online);
+  --sl-color-green-high: var(--cg-online-strong);
+  --sl-color-blue-low: var(--cg-surface-raised);
+  --sl-color-blue: var(--cg-accent);
+  --sl-color-blue-high: var(--cg-accent-press);
+
+  /* The semantic slots Starlight derives, set explicitly so none of them
+     falls back to Starlight's own light values. */
+  --sl-color-text: var(--cg-text-secondary);
+  --sl-color-text-accent: var(--cg-primary);
+  --sl-color-text-invert: var(--cg-text-on-primary);
+  --sl-color-bg: var(--cg-surface-page);
+  --sl-color-bg-nav: var(--cg-surface-card);
+  --sl-color-bg-sidebar: var(--cg-surface-page);
+  --sl-color-bg-inline-code: var(--cg-surface-page-alt);
+  --sl-color-bg-accent: var(--cg-primary);
+  --sl-color-hairline-light: var(--cg-border-hairline);
+  --sl-color-hairline: var(--cg-border-hairline);
+  --sl-color-hairline-shade: var(--cg-border-hairline);
+  --sl-color-backdrop-overlay: var(--cg-scrim);
+
+  /* The brand is flat and contains by hairlines; the card shadow is the one it
+     uses under a white card on the ground. */
+  --sl-shadow-sm: var(--cg-shadow-card);
+  --sl-shadow-md: var(--cg-shadow-card);
+  --sl-shadow-lg: var(--cg-shadow-raised);
+
+  /* Type. Space Grotesk for everything a reader reads, headings included, and
+     no Tanker anywhere (founder, 2026-10-19). */
+  --sl-font: var(--cg-font-body);
+  --sl-font-mono: var(--cg-font-mono);
+
+  /* The size scale. Nothing under 13px: Starlight's 12px rung (the search
+     shortcut) lands on the caption, the brand's floor. */
+  --sl-text-2xs: var(--cg-caption);
+  --sl-text-xs: var(--cg-caption);
+  --sl-text-sm: var(--cg-body-14);
+  --sl-text-base: var(--cg-body-md);
+  --sl-text-lg: var(--cg-body-18);
+  --sl-text-xl: var(--cg-body-xl);
+  --sl-text-2xl: var(--cg-title-24);
+  --sl-text-3xl: var(--cg-display-sm);
+  --sl-text-4xl: var(--cg-title-36);
+  --sl-text-5xl: var(--cg-display-lg);
+  --sl-text-6xl: var(--cg-display-64);
+  --sl-text-body: var(--cg-body-md);
+  --sl-text-body-sm: var(--cg-caption);
+  --sl-text-code: var(--cg-mono-size);
+  --sl-text-code-sm: var(--cg-caption);
+
+  /* Headings follow prose.css: h1 is its clamp, h2 and h3 its two rungs, and
+     h4 and h5 continue down the heading ramp. Starlight re-declares h1 to h4
+     above 50em inside its layer; this unlayered block wins at every width. */
+  --sl-text-h1: clamp(var(--cg-display-sm), 5vw, var(--cg-display-lg));
+  --sl-text-h2: var(--cg-heading-lg);
+  --sl-text-h3: var(--cg-heading-md);
+  --sl-text-h4: var(--cg-heading-sm);
+  --sl-text-h5: var(--cg-body-md);
+
+  --sl-line-height: var(--cg-body-line);
+  --sl-line-height-headings: var(--cg-heading-line);
+}
+
+/* Starlight's reset sets `color-scheme: dark` under a dark theme. Light only,
+   so scrollbars and form controls stay light whatever the OS says. */
+:root {
+  color-scheme: light;
+}
+
+/* ---- part two: targeted rules -------------------------------------------- */
+
+/* Headings: the body face at medium, as the library sets a heading. `#_top` is
+   Starlight's page title (PAGE_TITLE_ID); it defaults to 600. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)),
+#_top,
+.hero h1 {
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The heading anchor glyph, quiet until hovered. */
+.sl-markdown-content .sl-anchor-link {
+  color: var(--cg-text-muted);
+}
+
+/* prose.css: strong is the ink. */
+.sl-markdown-content strong:not(:where(.not-content *)) {
+  color: var(--cg-text-primary);
+  font-weight: var(--cg-weight-bold);
+}
+
+/* prose.css links: --cg-link, the accent blue since #197, one link colour
+   across the brand (founder, 2026-10-19). Inside an aside too: no per-callout
+   link colour. */
+.sl-markdown-content a:not(:where(.not-content *)) {
+  color: var(--cg-link);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.sl-markdown-content a:hover:not(:where(.not-content *)) {
+  color: var(--cg-link-hover);
+}
+
+/* prose.css inline code. `:not(pre) >` keeps it off code inside a block. */
+.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
+  background: var(--cg-surface-page-alt);
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  border-radius: var(--cg-radius-xs);
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+}
+
+/* No chip inside a heading: the mono face only (founder, 2026-10-19). Every CLI
+   h2 is a command, and a chip at heading size reads as a button. */
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code:not(:where(.not-content *)) {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+/* Inside a tinted callout the chip is the white card, so it reads as a chip
+   on every tone instead of a mix of the tone. */
+.sl-markdown-content .starlight-aside :not(pre) > code:not(:where(.not-content *)) {
+  background: var(--cg-surface-card);
+}
+
+/* prose.css blockquote. Unused in the content today, kept so a first one does
+   not arrive in Starlight's grey. */
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+  border-inline-start: var(--cg-border-width-strong) solid var(--cg-border-accent);
+  color: var(--cg-text-primary);
+}
+
+/* prose.css tables: hairline cells, a tinted header row. The cells are white
+   so a table reads as a card on the ground.
+
+   THE TABLE IS ITS OWN SCROLL CONTAINER. Starlight renders a bare <table> with
+   no wrapper, so the scroll goes on the table itself: `display: block` with
+   `overflow-x: auto`, exactly prose.css's recipe. A table wider than the column
+   scrolls inside itself and the page never scrolls sideways. */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  border-collapse: collapse;
+  font-size: var(--cg-body-sm);
+  display: block;
+  width: 100%;
+  max-width: max-content;
+  overflow-x: auto;
+}
+
+/* Code in a cell never breaks inside a word. prose.css's `overflow-wrap:
+   anywhere` on inline code also lowers a cell's minimum width, so on a phone
+   the table squeezed `inside` into `insid` / `e` rather than scrolling
+   (founder, 2026-10-19). `nowrap` keeps a flag such as `--require-signin` whole
+   too, which `overflow-wrap: normal` alone would still break after a hyphen;
+   the table scrolls instead. */
+.sl-markdown-content :is(th, td) code:not(:where(.not-content *)) {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  border: var(--cg-border-width) solid var(--cg-border-hairline);
+  padding: var(--cg-space-2) var(--cg-space-3);
+  background: var(--cg-surface-card);
+}
+
+.sl-markdown-content th:not(:where(.not-content *)) {
+  background: var(--cg-surface-page-alt);
+  font-weight: var(--cg-weight-bold);
+}
+
+/* Asides: a hairline box with the library's corner, in place of Starlight's
+   4px bar. Each type takes its tone's own border rung. */
+.starlight-aside {
+  border: var(--cg-border-width) solid var(--sl-color-asides-border);
+  border-radius: var(--cg-radius-md);
+}
+
+.starlight-aside--note {
+  --sl-color-asides-border: var(--cg-border-control);
+  --sl-color-asides-text-accent: var(--cg-text-primary);
+}
+
+.starlight-aside--tip {
+  --sl-color-asides-border: var(--cg-primary-tint);
+}
+
+.starlight-aside--caution {
+  --sl-color-asides-border: var(--cg-expired-border);
+}
+
+.starlight-aside--danger {
+  --sl-color-asides-border: var(--cg-danger-border);
+}
+
+/* Sidebar, as the library SideNav draws it: a group header and its rows in
+   the body size, rounded rows, the hover wash, and the current page as the
+   brand-tint chip rather than Starlight's solid purple bar. */
+.sidebar-content .large {
+  font-size: var(--cg-body-sm);
+  font-weight: var(--cg-weight-medium);
+  color: var(--cg-text-primary);
+}
+
+.sidebar-content summary {
+  border-radius: var(--cg-radius-lg);
+}
+
+.sidebar-content summary:hover {
+  background: var(--cg-hover);
+}
+
+.sidebar-content a {
+  font-size: var(--cg-body-sm);
+  color: var(--cg-text-secondary);
+  border-radius: var(--cg-radius-lg);
+}
+
+.sidebar-content a:hover,
+.sidebar-content a:focus {
+  background: var(--cg-hover);
+  color: var(--cg-text-primary);
+}
+
+.sidebar-content a[aria-current='page'],
+.sidebar-content a[aria-current='page']:hover,
+.sidebar-content a[aria-current='page']:focus {
+  background: var(--cg-primary-tint);
+  color: var(--cg-primary);
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The header's social link, quiet ink rather than the accent. */
+.social-icons a {
+  color: var(--cg-text-secondary);
+}
+
+.social-icons a:hover {
+  color: var(--cg-text-primary);
+}
+
+/* The search control: a white control with the library's control corner. */
+@media (min-width: 50rem) {
+  button[data-open-modal] {
+    background-color: var(--cg-surface-card);
+    border-radius: var(--cg-radius-sm);
+  }
+}
+
+/* The search shortcut, a key cap at the caption size, the brand's floor. */
+button[data-open-modal] > kbd {
+  font-size: var(--cg-caption);
+  background-color: var(--cg-surface-control);
+  border-radius: var(--cg-radius-2xs);
+}
+
+/* Pagefind sets its own scale to 0.8, which puts result text at 11 to 13px.
+   At 1 it is 14, 16 and 21px. */
+#starlight__search {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-font: var(--cg-font-body);
+  --pagefind-ui-border-radius: var(--cg-radius-sm);
+}
+
+/* Hero buttons as the library's primary Button: the brand fill with its own
+   on-primary text. Starlight paints that text in --sl-color-black, which is
+   now the page ground, not white. */
+.sl-link-button {
+  font-family: var(--cg-font-ui);
+  font-weight: var(--cg-label-weight);
+}
+
+.sl-link-button.primary,
+.sl-link-button.primary:hover {
+  background: var(--cg-primary);
+  border-color: var(--cg-primary);
+  color: var(--cg-text-on-primary);
+}
+
+.sl-link-button.primary:hover {
+  background: var(--cg-primary-press);
+  border-color: var(--cg-primary-press);
+}
+
+/* Cards on the ground, as the library Card: white, a hairline ring, the card
+   corner. One brand tone for every icon tile instead of Starlight's rotation
+   through five hues; unlayered, this beats its :nth-child rules outright. */
+.card,
+.sl-link-card,
+.pagination-links a {
+  background-color: var(--cg-surface-card);
+  border-color: var(--cg-border-hairline);
+  border-radius: var(--cg-radius-xl);
+}
+
+.card {
+  --sl-card-border: var(--cg-primary-tint);
+  --sl-card-bg: var(--cg-primary-tint);
+}
+
+.card .icon {
+  color: var(--cg-primary);
+  border-radius: var(--cg-radius-2xs);
+}
+
+.card .title {
+  font-weight: var(--cg-weight-medium);
+}
+
+/* The Card body at the library Card's size. Starlight's clamp bottoms out at
+   14px on a phone, where inline code at prose's 0.9em measured 12.6px. */
+.card .body {
+  font-size: var(--cg-body-sm);
+}
+
+.sl-link-card:hover,
+.pagination-links a:hover {
+  background-color: var(--cg-surface-card);
+  border-color: var(--cg-border-control);
+}
+
+/* Expressive Code draws its copy button at a fixed 0.2rem corner and has no
+   setting for it. The library's copy control is a pill. */
+.expressive-code .copy button,
+.expressive-code .copy button div {
+  border-radius: var(--cg-radius-pill);
+}
+
+/* NO WINDOW DOTS (founder, 2026-10-19: "the icons are not relevant").
+   Expressive Code draws a terminal frame for every sh/bash block: a title bar
+   with three window dots and nothing else in it. The dots go, and so does the
+   empty bar they sat in, so a terminal block is the same ink box as every other
+   block, the way CodeBlock draws one.
+
+   The bar is collapsed, never `display: none`. It holds the screen-reader label
+   "Terminal window", and hiding the bar would remove that text from the page.
+   A titled terminal frame keeps its bar for the title, without the dots. */
+.expressive-code .frame.is-terminal .header::before {
+  content: none;
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) {
+  /* The copy button's offset from the top: the bar is gone, so it sits where
+     an untitled code frame's does. */
+  --button-spacing: var(--cg-space-2);
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) .header {
+  padding: 0;
+  border: 0;
+}
+
+.expressive-code .frame.is-terminal:not(.has-title) .header .title,
+.expressive-code .frame.is-terminal:not(.has-title) .header::after {
+  display: none;
+}
+
+/* With the bar gone the code box carries the top edge and corners again,
+   which Expressive Code removes from any terminal frame. */
+.expressive-code .frame.is-terminal:not(.has-title) pre {
+  border-top: var(--cg-border-width) solid var(--cg-surface-code);
+  border-top-left-radius: var(--header-border-radius);
+  border-top-right-radius: var(--header-border-radius);
+}
+
+.expressive-code .frame:not(.has-title):not(.is-terminal) {
+  --button-spacing: var(--cg-space-2);
+}

package/dist/expressive-code-palette.d.ts

@@ -0,0 +1,5 @@
+export declare const CODE_PALETTE: {
+    readonly background: "#222222";
+    readonly foreground: "#e7e7e7";
+};
+//# sourceMappingURL=expressive-code-palette.d.ts.map

package/dist/expressive-code-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code-palette.d.ts","sourceRoot":"","sources":["../src/expressive-code-palette.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;CAGf,CAAA"}

package/dist/expressive-code-palette.js

@@ -0,0 +1,10 @@
+// GENERATED by scripts/build-expressive-code.mjs from src/tokens.css. Do not edit.
+//
+// Expressive Code does colour arithmetic on its theme at build time and cannot
+// read a CSS custom property there, so these two are the resolved values of the
+// tokens named beside them, at :root. Retune the token and rebuild.
+export const CODE_PALETTE = {
+    background: "#222222", // --cg-surface-code
+    foreground: "#e7e7e7", // --cg-text-on-code
+};
+//# sourceMappingURL=expressive-code-palette.js.map

package/dist/expressive-code-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code-palette.js","sourceRoot":"","sources":["../src/expressive-code-palette.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,EAAE;AACF,+EAA+E;AAC/E,gFAAgF;AAChF,oEAAoE;AAEpE,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,SAAS,EAAE,oBAAoB;IAC3C,UAAU,EAAE,SAAS,EAAE,oBAAoB;CACnC,CAAA"}

package/dist/expressive-code.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The code blocks of the docs site, as the library CodeBlock draws them. ui#341.
+ *
+ * Expressive Code renders every fenced block in the Starlight docs. This is its
+ * configuration, so the docs repo takes it in one line:
+ *
+ *     import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"
+ *     starlight({ expressiveCode: cloudgridExpressiveCode, ... })
+ *
+ * MONOCHROME (founder, 2026-10-19), like CodeBlock: ink ground, every token in
+ * the on-code text, no syntax palette. The theme has no token rules at all, so
+ * Shiki gives every token the default foreground.
+ *
+ * TWO KINDS OF VALUE. Expressive Code paints through CSS, and every value it
+ * paints with here is a `var(--cg-*)` (`styleOverrides`), so a retune lands
+ * without touching this file. It also does colour arithmetic on its theme at
+ * build time (contrast, derived scrollbar and selection colours, the colour
+ * baked into each highlighted span), and that cannot read a custom property.
+ * Those values come from CODE_PALETTE, which scripts/build-expressive-code.mjs
+ * generates from tokens.css. Nothing here is a typed literal colour, and
+ * test/docs-preset.test.mjs holds it to that.
+ *
+ * PLAIN DATA. No functions, no class instances, no import from Expressive Code:
+ * Starlight serialises this config into a virtual module, and a theme object is
+ * accepted as-is (Expressive Code wraps it in ExpressiveCodeTheme itself).
+ *
+ * LIGHT ONLY. One theme, so Expressive Code emits no per-theme switch, and code
+ * is dark on a light page the way CodeBlock is everywhere.
+ *
+ * Measured against Expressive Code 0.44 (astro-expressive-code, via
+ * @astrojs/starlight 0.42.6).
+ */
+/** A VS Code-style theme, the shape Expressive Code accepts as a theme object. */
+export interface CodeTheme {
+    name: string;
+    type: "dark" | "light";
+    fg: string;
+    bg: string;
+    colors: Record<string, string>;
+    settings: Array<{
+        scope?: string[];
+        settings: Record<string, string>;
+    }>;
+}
+/** The subset of Expressive Code's options this export sets. */
+export interface CloudgridExpressiveCodeOptions {
+    themes: CodeTheme[];
+    styleOverrides: Record<string, string | Record<string, string>>;
+}
+/** The monochrome code theme: one ground, one foreground, no token rules. */
+export declare const cloudgridCodeTheme: CodeTheme;
+/** Every value Expressive Code paints through CSS, as a library token. */
+export declare const cloudgridCodeStyleOverrides: CloudgridExpressiveCodeOptions["styleOverrides"];
+/** The whole configuration: `starlight({ expressiveCode: cloudgridExpressiveCode })`. */
+export declare const cloudgridExpressiveCode: CloudgridExpressiveCodeOptions;
+export default cloudgridExpressiveCode;
+//# sourceMappingURL=expressive-code.d.ts.map

package/dist/expressive-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code.d.ts","sourceRoot":"","sources":["../src/expressive-code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,kFAAkF;AAClF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC,CAAA;CACxE;AAED,gEAAgE;AAChE,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,SAAS,EAAE,CAAA;IACnB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAChE;AAED,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,SAahC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,2BAA2B,EAAE,8BAA8B,CAAC,gBAAgB,CA4CxF,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,uBAAuB,EAAE,8BAGrC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/expressive-code.js

@@ -0,0 +1,101 @@
+/**
+ * The code blocks of the docs site, as the library CodeBlock draws them. ui#341.
+ *
+ * Expressive Code renders every fenced block in the Starlight docs. This is its
+ * configuration, so the docs repo takes it in one line:
+ *
+ *     import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"
+ *     starlight({ expressiveCode: cloudgridExpressiveCode, ... })
+ *
+ * MONOCHROME (founder, 2026-10-19), like CodeBlock: ink ground, every token in
+ * the on-code text, no syntax palette. The theme has no token rules at all, so
+ * Shiki gives every token the default foreground.
+ *
+ * TWO KINDS OF VALUE. Expressive Code paints through CSS, and every value it
+ * paints with here is a `var(--cg-*)` (`styleOverrides`), so a retune lands
+ * without touching this file. It also does colour arithmetic on its theme at
+ * build time (contrast, derived scrollbar and selection colours, the colour
+ * baked into each highlighted span), and that cannot read a custom property.
+ * Those values come from CODE_PALETTE, which scripts/build-expressive-code.mjs
+ * generates from tokens.css. Nothing here is a typed literal colour, and
+ * test/docs-preset.test.mjs holds it to that.
+ *
+ * PLAIN DATA. No functions, no class instances, no import from Expressive Code:
+ * Starlight serialises this config into a virtual module, and a theme object is
+ * accepted as-is (Expressive Code wraps it in ExpressiveCodeTheme itself).
+ *
+ * LIGHT ONLY. One theme, so Expressive Code emits no per-theme switch, and code
+ * is dark on a light page the way CodeBlock is everywhere.
+ *
+ * Measured against Expressive Code 0.44 (astro-expressive-code, via
+ * @astrojs/starlight 0.42.6).
+ */
+import { CODE_PALETTE } from "./expressive-code-palette.js";
+/** The monochrome code theme: one ground, one foreground, no token rules. */
+export const cloudgridCodeTheme = {
+    name: "cloudgrid",
+    type: "dark",
+    fg: CODE_PALETTE.foreground,
+    bg: CODE_PALETTE.background,
+    colors: {
+        "editor.background": CODE_PALETTE.background,
+        "editor.foreground": CODE_PALETTE.foreground,
+        "terminal.background": CODE_PALETTE.background,
+        "terminal.foreground": CODE_PALETTE.foreground,
+    },
+    // The default entry only. No scoped rules is what makes it monochrome.
+    settings: [{ settings: { foreground: CODE_PALETTE.foreground, background: CODE_PALETTE.background } }],
+};
+/** Every value Expressive Code paints through CSS, as a library token. */
+export const cloudgridCodeStyleOverrides = {
+    // The frame: CodeBlock's corner on the ink ground, and no ring around it.
+    borderRadius: "var(--cg-radius-md)",
+    borderWidth: "var(--cg-border-width)",
+    borderColor: "var(--cg-surface-code)",
+    codeBackground: "var(--cg-surface-code)",
+    codeForeground: "var(--cg-text-on-code)",
+    codeFontFamily: "var(--cg-font-mono)",
+    codeFontSize: "var(--cg-mono-size)",
+    codeLineHeight: "var(--cg-mono-line)",
+    // CodeBlock's padding: py-5, px-6.
+    codePaddingBlock: "var(--cg-space-5)",
+    codePaddingInline: "var(--cg-space-6)",
+    uiFontFamily: "var(--cg-font-ui)",
+    uiFontSize: "var(--cg-body-14)",
+    // On ink the library's focus colour is the lime (`[data-cg-surface='ink']`
+    // sets --cg-border-accent to --cg-secondary); the purple measures about 2:1.
+    focusBorder: "var(--cg-secondary)",
+    frames: {
+        frameBoxShadowCssValue: "var(--cg-shadow-none)",
+        editorBackground: "var(--cg-surface-code)",
+        terminalBackground: "var(--cg-surface-code)",
+        // A titled frame and a terminal both keep their bar, on the same ink, so the
+        // block reads as one surface.
+        editorTabBarBackground: "var(--cg-surface-code)",
+        editorTabBarBorderColor: "var(--cg-surface-code)",
+        editorTabBarBorderBottomColor: "var(--cg-surface-code)",
+        editorActiveTabBackground: "var(--cg-surface-code)",
+        editorActiveTabForeground: "var(--cg-text-muted)",
+        editorActiveTabIndicatorTopColor: "var(--cg-surface-code)",
+        editorActiveTabIndicatorBottomColor: "var(--cg-surface-code)",
+        terminalTitlebarBackground: "var(--cg-surface-code)",
+        terminalTitlebarForeground: "var(--cg-text-muted)",
+        terminalTitlebarBorderBottomColor: "var(--cg-surface-code)",
+        // No dots colour: docs.css removes the window dots and the empty bar they
+        // sit in (founder, 2026-10-19), which Expressive Code has no setting for.
+        // The copy control, in the on-code text like everything else on ink.
+        inlineButtonForeground: "var(--cg-text-on-code)",
+        inlineButtonBackground: "var(--cg-text-on-code)",
+        inlineButtonBorder: "var(--cg-text-on-code)",
+        // The copy confirmation: the online state's text on its fill.
+        tooltipSuccessBackground: "var(--cg-online-fill)",
+        tooltipSuccessForeground: "var(--cg-online-strong)",
+    },
+};
+/** The whole configuration: `starlight({ expressiveCode: cloudgridExpressiveCode })`. */
+export const cloudgridExpressiveCode = {
+    themes: [cloudgridCodeTheme],
+    styleOverrides: cloudgridCodeStyleOverrides,
+};
+export default cloudgridExpressiveCode;
+//# sourceMappingURL=expressive-code.js.map

package/dist/expressive-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expressive-code.js","sourceRoot":"","sources":["../src/expressive-code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAkB3D,6EAA6E;AAC7E,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,YAAY,CAAC,UAAU;IAC3B,EAAE,EAAE,YAAY,CAAC,UAAU;IAC3B,MAAM,EAAE;QACN,mBAAmB,EAAE,YAAY,CAAC,UAAU;QAC5C,mBAAmB,EAAE,YAAY,CAAC,UAAU;QAC5C,qBAAqB,EAAE,YAAY,CAAC,UAAU;QAC9C,qBAAqB,EAAE,YAAY,CAAC,UAAU;KAC/C;IACD,uEAAuE;IACvE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;CACvG,CAAA;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,2BAA2B,GAAqD;IAC3F,0EAA0E;IAC1E,YAAY,EAAE,qBAAqB;IACnC,WAAW,EAAE,wBAAwB;IACrC,WAAW,EAAE,wBAAwB;IACrC,cAAc,EAAE,wBAAwB;IACxC,cAAc,EAAE,wBAAwB;IACxC,cAAc,EAAE,qBAAqB;IACrC,YAAY,EAAE,qBAAqB;IACnC,cAAc,EAAE,qBAAqB;IACrC,mCAAmC;IACnC,gBAAgB,EAAE,mBAAmB;IACrC,iBAAiB,EAAE,mBAAmB;IACtC,YAAY,EAAE,mBAAmB;IACjC,UAAU,EAAE,mBAAmB;IAC/B,2EAA2E;IAC3E,6EAA6E;IAC7E,WAAW,EAAE,qBAAqB;IAClC,MAAM,EAAE;QACN,sBAAsB,EAAE,uBAAuB;QAC/C,gBAAgB,EAAE,wBAAwB;QAC1C,kBAAkB,EAAE,wBAAwB;QAC5C,6EAA6E;QAC7E,8BAA8B;QAC9B,sBAAsB,EAAE,wBAAwB;QAChD,uBAAuB,EAAE,wBAAwB;QACjD,6BAA6B,EAAE,wBAAwB;QACvD,yBAAyB,EAAE,wBAAwB;QACnD,yBAAyB,EAAE,sBAAsB;QACjD,gCAAgC,EAAE,wBAAwB;QAC1D,mCAAmC,EAAE,wBAAwB;QAC7D,0BAA0B,EAAE,wBAAwB;QACpD,0BAA0B,EAAE,sBAAsB;QAClD,iCAAiC,EAAE,wBAAwB;QAC3D,0EAA0E;QAC1E,0EAA0E;QAC1E,qEAAqE;QACrE,sBAAsB,EAAE,wBAAwB;QAChD,sBAAsB,EAAE,wBAAwB;QAChD,kBAAkB,EAAE,wBAAwB;QAC5C,8DAA8D;QAC9D,wBAAwB,EAAE,uBAAuB;QACjD,wBAAwB,EAAE,yBAAyB;KACpD;CACF,CAAA;AAED,yFAAyF;AACzF,MAAM,CAAC,MAAM,uBAAuB,GAAmC;IACrE,MAAM,EAAE,CAAC,kBAAkB,CAAC;IAC5B,cAAc,EAAE,2BAA2B;CAC5C,CAAA;AAED,eAAe,uBAAuB,CAAA"}