oneslash-design-system 2.3.0 → 2.4.0

package/README.md

@@ -21,7 +21,7 @@ The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. E
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Fira+Code:wght@300;400&display=swap">
 ```
 
-   `next/font/google` registers a hashed family name instead, so with it apply `mono.className` to the code element rather than relying on `font-mono`.
+   Don't load Fira Code with `next/font/google`: it registers a generated family name, so `font-mono` would not find it. If your Content Security Policy blocks Google Fonts, self-host it with `@fontsource/fira-code` (import `latin-300.css` and `latin-400.css` in the root layout), which keeps the real family name.
 
 ```css
 /* Tailwind v4, OS-driven dark mode */
@@ -34,6 +34,22 @@ The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. E
 
 Use class names that mean the same thing in Tailwind v3 and v4 inside components, since apps on both versions compile them.
 
+## Building a page
+
+2.4.0 adds what a page needs on top of the components, so a page can be written with no markup of its own: `PageShell` (the column and the space between sections), `PageHeader`, `SectionIntro`, `FactsRow`, `NumberedRow`, `Surface` (a panel, or a sheet of `paper`), `Figure`, `LinkCard`, `Heading`, `Paragraph`, `List`, and the layout helpers `Stack`, `Cluster`, `Grid` and `PageSection` in `components/layout`. Spacing has steps up to `page` (160px), text widths are `max-w-measure-*`, and the column is `max-w-page`. A Button in a `Stack` stretches to the full width, so put it in a `Cluster`.
+
+```jsx
+import PageShell from 'oneslash-design-system/components/pageShell';
+import { PageSection } from 'oneslash-design-system/components/layout';
+import SectionIntro from 'oneslash-design-system/components/sectionIntro';
+
+<PageShell>
+  <PageSection>
+    <SectionIntro name="Origin" statement="Say the point of the section here." />
+  </PageSection>
+</PageShell>
+```
+
 ## Releasing
 
 Bump `version` in `package.json`, run `npm run build`, and merge to `main`. The Release workflow runs the tests and `npm run check:contrast`, then publishes to npm, creates the tag and GitHub Release with notes from the merged PR titles, and updates the docs site.

package/dist/components/factsRow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Fact {
+    label: string;
+    value: React.ReactNode;
+}
+interface FactsRowProps {
+    items: Fact[];
+}
+export default function FactsRow({ items }: FactsRowProps): React.JSX.Element;
+export {};

package/dist/components/factsRow.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Line from './line';
+var columns = {
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+    5: 'md:grid-cols-5',
+};
+// The few facts that sit under a title: small labels over small values,
+// under a rule. Two across on a phone, one per fact from the medium breakpoint.
+export default function FactsRow(_a) {
+    var items = _a.items;
+    var md = columns[Math.min(5, Math.max(3, items.length))];
+    return (<div className="flex flex-col gap-medium">
+      <Line />
+      <dl className={"grid grid-cols-2 gap-large text-body2 ".concat(md)}>
+        {items.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (<div key={label}>
+            <dt className="text-fg-secondary">{label}</dt>
+            <dd className="text-fg-primary">{value}</dd>
+          </div>);
+        })}
+      </dl>
+    </div>);
+}

package/dist/components/figure.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface FigureProps {
+    /** An image or a video. */
+    children: React.ReactNode;
+    caption?: React.ReactNode;
+    /** Crop what is inside to this width over height, filling the frame. */
+    crop?: number;
+    /** Set it on a sheet of paper that stays light in dark mode, for scans and drawings in black. */
+    paper?: boolean;
+    radius?: 'control' | 'container';
+    className?: string;
+}
+export default function Figure({ children, caption, crop, paper, radius, className, }: FigureProps): React.JSX.Element;
+export {};

package/dist/components/figure.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+var radii = { control: 'rounded-control', container: 'rounded-container' };
+export default function Figure(_a) {
+    var children = _a.children, caption = _a.caption, crop = _a.crop, _b = _a.paper, paper = _b === void 0 ? false : _b, _c = _a.radius, radius = _c === void 0 ? 'container' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var frame = paper ? "bg-background-paper p-large md:p-xlarge ".concat(radii[radius]) : "overflow-hidden ".concat(radii[radius]);
+    return (<figure className={"flex flex-col gap-medium ".concat(className)}>
+      {crop ? (<div className={"relative overflow-hidden ".concat(radii[radius], " [&_img]:absolute [&_img]:inset-0 [&_img]:h-full [&_img]:w-full [&_img]:object-cover")} style={{ aspectRatio: crop }}>
+          {children}
+        </div>) : (<div className={frame}>{children}</div>)}
+      {caption && <figcaption className="text-body2 text-fg-secondary">{caption}</figcaption>}
+    </figure>);
+}

package/dist/components/heading.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface HeadingProps {
+    children: React.ReactNode;
+    /** The element: h2 to h4. Pick the one that fits the page's outline, not the size. */
+    level?: 2 | 3 | 4;
+    /** How large it is set. */
+    size?: 'h4' | 'h5' | 'h6' | 'subtitle1';
+    id?: string;
+    className?: string;
+}
+export default function Heading({ children, level, size, id, className }: HeadingProps): React.JSX.Element;
+export {};

package/dist/components/heading.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+var sizes = {
+    h4: 'text-h4',
+    h5: 'text-h5',
+    h6: 'text-h6',
+    subtitle1: 'text-subtitle1',
+};
+export default function Heading(_a) {
+    var children = _a.children, _b = _a.level, level = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'h6' : _c, id = _a.id, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var Tag = "h".concat(level);
+    return (<Tag id={id} className={"".concat(sizes[size], " text-fg-primary ").concat(className)}>
+      {children}
+    </Tag>);
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type Gap = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'huge' | 'giant';
+interface LayoutProps {
+    children: React.ReactNode;
+    gap?: Gap;
+    className?: string;
+}
+interface StackProps extends LayoutProps {
+    /** `stretch` gives every child the full width, which suits panels. `start` lets a child keep its own width, which a Button needs. */
+    align?: 'stretch' | 'start';
+}
+export declare function Stack({ children, gap, align, className }: StackProps): React.JSX.Element;
+export declare function Cluster({ children, gap, className }: LayoutProps): React.JSX.Element;
+interface GridProps extends LayoutProps {
+    /** How many columns from the medium breakpoint up. Below it: two for `compact`, otherwise one. */
+    columns?: 2 | 3 | 4;
+    compact?: boolean;
+    /** `stretch` makes the items in a row the same height; `start` lets each keep its own. */
+    align?: 'stretch' | 'start';
+}
+export declare function Grid({ children, columns, compact, align, gap, className }: GridProps): React.JSX.Element;
+export declare function PageSection({ children, gap, className }: LayoutProps): React.JSX.Element;
+export {};

package/dist/components/layout.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+var gaps = {
+    small: 'gap-small',
+    medium: 'gap-medium',
+    large: 'gap-large',
+    xlarge: 'gap-xlarge',
+    xxlarge: 'gap-xxlarge',
+    huge: 'gap-huge',
+    giant: 'gap-giant',
+};
+// One column of things, a spacing token apart.
+export function Stack(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'large' : _b, _c = _a.align, align = _c === void 0 ? 'stretch' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return <div className={"flex flex-col ".concat(align === 'start' ? 'items-start' : '', " ").concat(gaps[gap], " ").concat(className)}>{children}</div>;
+}
+// Things that sit in a row and wrap, a spacing token apart.
+export function Cluster(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'medium' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return <div className={"flex flex-wrap items-center ".concat(gaps[gap], " ").concat(className)}>{children}</div>;
+}
+var mdColumns = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4' };
+export function Grid(_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 2 : _b, _c = _a.compact, compact = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? 'stretch' : _d, _e = _a.gap, gap = _e === void 0 ? 'large' : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
+    return (<div className={"grid ".concat(compact ? 'grid-cols-2' : 'grid-cols-1', " ").concat(mdColumns[columns], " ").concat(align === 'start' ? 'items-start' : '', " ").concat(gaps[gap], " ").concat(className)}>
+      {children}
+    </div>);
+}
+// A section of a page: a column of its parts. The first child is usually a SectionIntro.
+// Children take the full width; put a Button in a Cluster so it keeps its own.
+export function PageSection(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'huge' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return <section className={"flex flex-col ".concat(gaps[gap], " ").concat(className)}>{children}</section>;
+}

package/dist/components/linkCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LinkCardProps {
+    href: string;
+    title: string;
+    /** A small line under the title, in the mono face. */
+    caption?: string;
+    className?: string;
+}
+export default function LinkCard({ href, title, caption, className }: LinkCardProps): React.JSX.Element;
+export {};

package/dist/components/linkCard.jsx

@@ -0,0 +1,16 @@
+'use client';
+import React from 'react';
+import NextLink from 'next/link';
+import Icon from './icon';
+import { focusRing } from './sharedStyles';
+// A link set as a card: the title, a caption, and an arrow that moves off the corner.
+export default function LinkCard(_a) {
+    var href = _a.href, title = _a.title, caption = _a.caption, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (<NextLink href={href} className={"group flex items-center justify-between gap-xxlarge rounded-container bg-background-panel p-large transition-colors hover:bg-background-accent200 motion-reduce:transition-none ".concat(focusRing, " ").concat(className)}>
+      <span className="flex flex-col gap-small">
+        <span className="text-subtitle1 text-fg-primary">{title}</span>
+        {caption && <span className="font-mono text-caption text-fg-secondary">{caption}</span>}
+      </span>
+      <Icon name="ArrowUpRight" size="small" color="secondary" className="shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none"/>
+    </NextLink>);
+}

package/dist/components/list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ListProps {
+    items: React.ReactNode[];
+    size?: 'body1' | 'body2';
+    tone?: 'primary' | 'secondary';
+    className?: string;
+}
+export default function List({ items, size, tone, className }: ListProps): React.JSX.Element;
+export {};

package/dist/components/list.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+var sizes = { body1: 'text-body1', body2: 'text-body2' };
+var tones = { primary: 'text-fg-primary', secondary: 'text-fg-secondary' };
+// A plain list, one line of text per item, a little apart.
+export default function List(_a) {
+    var items = _a.items, _b = _a.size, size = _b === void 0 ? 'body2' : _b, _c = _a.tone, tone = _c === void 0 ? 'primary' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (<ul className={"flex flex-col gap-medium ".concat(sizes[size], " ").concat(tones[tone], " ").concat(className)}>
+      {items.map(function (item, i) { return (<li key={i}>{item}</li>); })}
+    </ul>);
+}

package/dist/components/numberedRow.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface NumberedRowProps {
+    /** Starts at 0; shown as 01, 02. */
+    index: number;
+    title: string;
+    /** What the row says: paragraphs, links. */
+    children?: React.ReactNode;
+    /** One line with a check, for what the row comes to. */
+    proof?: string;
+    /** What the row is about, shown beside it on wide windows and under it otherwise. */
+    visual?: React.ReactNode;
+}
+export default function NumberedRow({ index, title, children, proof, visual }: NumberedRowProps): React.JSX.Element;
+export {};

package/dist/components/numberedRow.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from './icon';
+import Surface from './surface';
+// A numbered row with the thing it is about beside it. From the 2xl breakpoint
+// the two sit side by side and swap sides each row; below it the visual sits
+// under the text. A row with nothing to show is text alone.
+export default function NumberedRow(_a) {
+    var index = _a.index, title = _a.title, children = _a.children, proof = _a.proof, visual = _a.visual;
+    return (<article className={"grid grid-cols-1 items-center gap-xxlarge ".concat(visual ? '2xl:grid-cols-2 2xl:gap-giant' : '')}>
+      <div className={"flex flex-col gap-large ".concat(visual && index % 2 === 1 ? '2xl:order-2' : '')}>
+        <span className="font-mono text-body2 text-fg-secondary">{String(index + 1).padStart(2, '0')}</span>
+        <h3 className="text-h5 text-fg-primary md:text-h4">{title}</h3>
+        {children && (<div className="flex max-w-measure-body flex-col gap-large text-body1 text-fg-secondary">{children}</div>)}
+        {proof && (<p className="flex items-start gap-medium text-body2 text-fg-primary">
+            <Icon name="Check" size="small" color="success" className="mt-0.5 shrink-0"/>
+            {proof}
+          </p>)}
+      </div>
+      {visual && (<Surface align="center" minHeight="tall" padding="medium">
+          {visual}
+        </Surface>)}
+    </article>);
+}

package/dist/components/pageHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface PageHeaderProps {
+    /** A small line over the title: where this page sits. */
+    eyebrow?: string;
+    title: string;
+    lede?: React.ReactNode;
+    facts?: {
+        label: string;
+        value: React.ReactNode;
+    }[];
+}
+export default function PageHeader({ eyebrow, title, lede, facts }: PageHeaderProps): React.JSX.Element;
+export {};

package/dist/components/pageHeader.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import FactsRow from './factsRow';
+import Paragraph from './paragraph';
+export default function PageHeader(_a) {
+    var eyebrow = _a.eyebrow, title = _a.title, lede = _a.lede, facts = _a.facts;
+    return (<div className="flex flex-col gap-huge">
+      <div className="flex flex-col gap-large">
+        {eyebrow && (<Paragraph tone="secondary" size="body2" measure="none">
+            {eyebrow}
+          </Paragraph>)}
+        <h1 className="text-h3 text-fg-primary md:text-h2">{title}</h1>
+        {lede && (<Paragraph tone="secondary" measure="lede">
+            {lede}
+          </Paragraph>)}
+      </div>
+      {facts && <FactsRow items={facts}/>}
+    </div>);
+}

package/dist/components/pageShell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PageShellProps extends React.ComponentPropsWithoutRef<'main'> {
+    children: React.ReactNode;
+    /** Let the column grow from the 2xl breakpoint, for pages with wide figures. */
+    wide?: boolean;
+}
+export default function PageShell({ children, wide, className, ...rest }: PageShellProps): React.JSX.Element;
+export {};

package/dist/components/pageShell.jsx

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+// The frame of a page: the column, its side space, and the space between sections.
+// Anything else given (data-* attributes, an id) goes to the <main>.
+export default function PageShell(_a) {
+    var children = _a.children, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, rest = __rest(_a, ["children", "wide", "className"]);
+    return (<main className={"min-h-screen ".concat(className)} {...rest}>
+      <div className={"mx-auto flex w-full max-w-page flex-col gap-section px-xlarge pb-page pt-giant md:px-xxlarge ".concat(wide ? '2xl:max-w-page-wide' : '')}>
+        {children}
+      </div>
+    </main>);
+}

package/dist/components/paragraph.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ParagraphProps {
+    children: React.ReactNode;
+    tone?: 'primary' | 'secondary';
+    size?: 'body1' | 'body2' | 'caption';
+    /** How wide a line may run, so a paragraph stays readable. `none` leaves it to the parent. */
+    measure?: 'narrow' | 'lede' | 'body' | 'wide' | 'none';
+    /** Set in the mono face, for labels, numbers and dates. */
+    mono?: boolean;
+    className?: string;
+}
+export default function Paragraph({ children, tone, size, measure, mono, className, }: ParagraphProps): React.JSX.Element;
+export {};

package/dist/components/paragraph.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+var tones = { primary: 'text-fg-primary', secondary: 'text-fg-secondary' };
+var sizes = { body1: 'text-body1', body2: 'text-body2', caption: 'text-caption' };
+var measures = {
+    narrow: 'max-w-measure-narrow',
+    lede: 'max-w-measure-lede',
+    body: 'max-w-measure-body',
+    wide: 'max-w-measure-wide',
+    none: '',
+};
+export default function Paragraph(_a) {
+    var children = _a.children, _b = _a.tone, tone = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 'body1' : _c, _d = _a.measure, measure = _d === void 0 ? 'body' : _d, _e = _a.mono, mono = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
+    return (<p className={"".concat(sizes[size], " ").concat(tones[tone], " ").concat(measures[measure], " ").concat(mono ? 'font-mono' : '', " ").concat(className)}>
+      {children}
+    </p>);
+}

package/dist/components/sectionIntro.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare function headingId(text: string): string | undefined;
+interface SectionIntroProps {
+    /** The section's name. It is the heading, so a contents list shows it. */
+    name: string;
+    /** The point the section makes, set large under the name. */
+    statement?: string;
+    /** What carries on from the statement, usually paragraphs. */
+    children?: React.ReactNode;
+    id?: string;
+}
+export default function SectionIntro({ name, statement, children, id }: SectionIntroProps): React.JSX.Element;
+export {};

package/dist/components/sectionIntro.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+// The id a section heading carries, made from its own text, so every section
+// has a link (/about#design-philosophy) without each page naming one.
+// Built at run time: the tsconfig targets ES5, which has no \p{...} in a literal.
+var NOT_A_LETTER_OR_NUMBER = new RegExp('[^\\p{L}\\p{N}]+', 'gu');
+export function headingId(text) {
+    var id = text
+        .toLowerCase()
+        .replace(NOT_A_LETTER_OR_NUMBER, '-')
+        .replace(/^-|-$/g, '');
+    return id || undefined;
+}
+export default function SectionIntro(_a) {
+    var name = _a.name, statement = _a.statement, children = _a.children, id = _a.id;
+    return (<div className="flex max-w-measure-statement flex-col gap-large">
+      <h2 id={id !== null && id !== void 0 ? id : headingId(name)} className="scroll-mt-giant text-body2 font-normal text-fg-secondary">
+        {name}
+      </h2>
+      {statement && <p className="text-h4 text-fg-primary md:text-h3">{statement}</p>}
+      {children}
+    </div>);
+}

package/dist/components/surface.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface SurfaceProps {
+    children: React.ReactNode;
+    /** `panel` is the quiet surface content sits on; `paper` stays light in dark mode, for scans and drawings in black. */
+    tone?: 'panel' | 'paper';
+    padding?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** The least height it takes: `short` is 20rem, `tall` is 26rem from the medium breakpoint up. */
+    minHeight?: 'short' | 'tall';
+    /** `center` centers what is inside, both ways. `start` lays it out as it comes. */
+    align?: 'center' | 'start';
+    className?: string;
+}
+export default function Surface({ children, tone, padding, minHeight, align, className, }: SurfaceProps): React.JSX.Element;
+export {};

package/dist/components/surface.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+var tones = { panel: 'bg-background-panel', paper: 'bg-background-paper' };
+var paddings = {
+    small: 'p-medium md:p-large',
+    medium: 'p-large md:p-xxlarge',
+    large: 'p-xlarge md:p-xxlarge',
+    xlarge: 'p-xlarge md:p-huge',
+};
+var heights = {
+    short: 'min-h-[var(--os-stage-short)]',
+    tall: 'min-h-[var(--os-stage-short)] md:min-h-[var(--os-stage-tall)]',
+};
+export default function Surface(_a) {
+    var children = _a.children, _b = _a.tone, tone = _b === void 0 ? 'panel' : _b, _c = _a.padding, padding = _c === void 0 ? 'large' : _c, minHeight = _a.minHeight, _d = _a.align, align = _d === void 0 ? 'start' : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var alignClasses = align === 'center' ? 'flex items-center justify-center overflow-hidden' : '';
+    return (<div className={"rounded-container ".concat(tones[tone], " ").concat(paddings[padding], " ").concat(minHeight ? heights[minHeight] : '', " ").concat(alignClasses, " ").concat(className)}>
+      {children}
+    </div>);
+}

package/dist/designTokens.d.ts

@@ -97,6 +97,8 @@ declare const defaultSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -249,6 +251,8 @@ declare const defaultSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -403,6 +407,8 @@ declare const forestSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -555,6 +561,8 @@ declare const forestSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -712,6 +720,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -864,6 +874,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1018,6 +1030,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1170,6 +1184,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1324,6 +1340,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1476,6 +1494,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1536,6 +1556,27 @@ export declare namespace spacing {
     let small: string;
     let medium: string;
     let large: string;
+    let xlarge: string;
+    let xxlarge: string;
+    let huge: string;
+    let giant: string;
+    let section: string;
+    let page: string;
+}
+export declare namespace measure {
+    let narrow: string;
+    let lede: string;
+    let statement: string;
+    let body: string;
+    let wide: string;
+}
+export declare let container: {
+    page: string;
+    'page-wide': string;
+};
+export declare namespace stage {
+    let short: string;
+    let tall: string;
 }
 export declare namespace typography {
     let family: string;
@@ -1664,10 +1705,11 @@ export declare namespace typography {
     }
 }
 export declare namespace radius {
-    let inline: string;
-    let control: string;
-    let container: string;
-    let full: string;
+    export let inline: string;
+    export let control: string;
+    let container_1: string;
+    export { container_1 as container };
+    export let full: string;
 }
 export declare namespace shadow {
     let overlay: string;

package/dist/designTokens.js

@@ -186,6 +186,32 @@ var base = {
         small: '4px',
         medium: '8px',
         large: '16px',
+        xlarge: '24px',
+        xxlarge: '32px',
+        huge: '48px',
+        giant: '64px',
+        // The space between the sections of a page, and under its last one.
+        section: '128px',
+        page: '160px',
+    },
+    // How wide a line of text runs, in characters, so a paragraph stays
+    // readable at any window width. `statement` is the large line that opens a
+    // section.
+    measure: {
+        narrow: '24ch',
+        lede: '48ch',
+        statement: '40rem',
+        body: '60ch',
+        wide: '75ch',
+    },
+    // The width of a page's column, and how tall a panel is at least.
+    container: {
+        page: '48rem',
+        'page-wide': '64rem',
+    },
+    stage: {
+        short: '20rem',
+        tall: '26rem',
     },
     typography: {
         family: 'Inter, sans-serif',
@@ -311,7 +337,10 @@ function withSemanticKeys(set, mode) {
     var status = function (g, isError) { return (__assign(__assign({}, g), { fill: isLight ? g.dark : g.main, onFill: isLight ? '#FFFFFF' : '#000000', text: isLight ? g.dark : isError ? g.light : g.main, textHover: isLight ? g.dark : g.light, tint: isLight ? g.light : g.dark })); };
     return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }), 
         // Secondary buttons use text.primary as their label; a theme whose secondary.main is mid-tone sets its own.
-        secondary: __assign(__assign({}, set.secondary), { contrast: set.text.primary }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100 }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
+        secondary: __assign(__assign({}, set.secondary), { contrast: set.text.primary }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100, 
+            // The surface a panel of content sits on, and a sheet of paper that stays
+            // light in dark mode, for scans, drawings and specimens drawn in black.
+            panel: set.background.accent100, paper: '#FFFFFF' }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
 }
 // Forest: the default set with these values replaced (group by group).
 /**

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/button';
 export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
+export * from './components/layout';
 export * from './components/loadingScreen';
 export * from './components/menu';
 export * from './components/menuItem';
@@ -12,6 +13,7 @@ export * from './components/modal';
 export * from './components/navigation';
 export * from './components/popover';
 export * from './components/radioGroup';
+export * from './components/sectionIntro';
 export * from './components/select';
 export * from './components/tab';
 export * from './components/tableCell';

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './components/button';
 export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
+export * from './components/layout';
 export * from './components/loadingScreen';
 export * from './components/menu';
 export * from './components/menuItem';
@@ -12,6 +13,7 @@ export * from './components/modal';
 export * from './components/navigation';
 export * from './components/popover';
 export * from './components/radioGroup';
+export * from './components/sectionIntro';
 export * from './components/select';
 export * from './components/tab';
 export * from './components/tableCell';

package/dist/stories/PageComponents.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Page: Story;
+export declare const FactsAndFigures: Story;

package/dist/stories/PageComponents.stories.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import PageShell from "../components/pageShell";
+import PageHeader from "../components/pageHeader";
+import SectionIntro from "../components/sectionIntro";
+import Paragraph from "../components/paragraph";
+import Surface from "../components/surface";
+import NumberedRow from "../components/numberedRow";
+import FactsRow from "../components/factsRow";
+import LinkCard from "../components/linkCard";
+import Figure from "../components/figure";
+import Tag from "../components/tag";
+import { Cluster, Grid, PageSection, Stack } from "../components/layout";
+var meta = {
+    title: "Pages/Page components",
+};
+export default meta;
+var facts = [
+    { label: "Role", value: "Principal Product Designer" },
+    { label: "Company", value: "Example Co" },
+    { label: "Focus", value: "Agents" },
+    { label: "Experience", value: "15 years" },
+    { label: "Based", value: "Chicago area" },
+];
+export var Page = {
+    render: function () { return (<PageShell>
+      <PageSection>
+        <PageHeader eyebrow="Design Translation · 2011" title="Geocentric Clock" lede="The arm stays still and the numbers come to it." facts={facts}/>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="How to read it" statement="The light stays. The numbers move.">
+          <Paragraph tone="secondary">
+            The clock has a stationary light at the top of the circle and a rotating face with three dots between each hour.
+          </Paragraph>
+        </SectionIntro>
+        <Surface padding="xlarge" minHeight="tall" align="center">
+          <Paragraph>A panel holds the thing being shown.</Paragraph>
+        </Surface>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="Design decisions" statement="Four choices behind the clock"/>
+        <Stack gap="giant">
+          <NumberedRow index={0} title="Move the numbers, not the arm" proof="One light stays put. Everything else moves." visual={<Paragraph tone="secondary">A visual</Paragraph>}>
+            <p>A standard wall clock turns two arms clockwise over twelve fixed numbers.</p>
+          </NumberedRow>
+          <NumberedRow index={1} title="A row with nothing to show">
+            <p>It is text alone, across the column.</p>
+          </NumberedRow>
+        </Stack>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="Tools"/>
+        <Surface>
+          <Cluster>
+            {["Figma", "Prototyping", "Design Systems"].map(function (label) { return (<Tag key={label} variant="contained" size="medium" state="enabled" label={label}/>); })}
+          </Cluster>
+        </Surface>
+        <Grid columns={2}>
+          <LinkCard href="/design-translation" title="More Design Translation" caption="Design Translation"/>
+          <LinkCard href="/design-product" title="More Design Product" caption="Design Product · Locked"/>
+        </Grid>
+      </PageSection>
+    </PageShell>); },
+};
+export var FactsAndFigures = {
+    render: function () { return (<Stack gap="xxlarge">
+      <FactsRow items={facts.slice(0, 3)}/>
+      <Grid columns={3} compact>
+        <Figure caption="Cropped to 4:5" crop={0.8}>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
+        </Figure>
+        <Figure caption="On paper" paper>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="100%" height="80"/>
+        </Figure>
+      </Grid>
+    </Stack>); },
+};

package/dist/tailwind-preset-auto.js

@@ -197,6 +197,12 @@ module.exports = {
         "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "light-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "dark-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "light-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "dark-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
         "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
@@ -266,7 +272,22 @@ module.exports = {
       "spacing": {
         "small": "var(--os-spacing-small)",
         "medium": "var(--os-spacing-medium)",
-        "large": "var(--os-spacing-large)"
+        "large": "var(--os-spacing-large)",
+        "xlarge": "var(--os-spacing-xlarge)",
+        "xxlarge": "var(--os-spacing-xxlarge)",
+        "huge": "var(--os-spacing-huge)",
+        "giant": "var(--os-spacing-giant)",
+        "section": "var(--os-spacing-section)",
+        "page": "var(--os-spacing-page)"
+      },
+      "maxWidth": {
+        "measure-narrow": "var(--os-measure-narrow)",
+        "measure-lede": "var(--os-measure-lede)",
+        "measure-statement": "var(--os-measure-statement)",
+        "measure-body": "var(--os-measure-body)",
+        "measure-wide": "var(--os-measure-wide)",
+        "page": "var(--os-container-page)",
+        "page-wide": "var(--os-container-page-wide)"
       },
       "fontSize": {
         "h1": [

package/dist/tailwind-preset.js

@@ -191,6 +191,12 @@ module.exports = {
         "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "light-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "dark-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "light-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "dark-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
         "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
@@ -260,7 +266,22 @@ module.exports = {
       "spacing": {
         "small": "var(--os-spacing-small)",
         "medium": "var(--os-spacing-medium)",
-        "large": "var(--os-spacing-large)"
+        "large": "var(--os-spacing-large)",
+        "xlarge": "var(--os-spacing-xlarge)",
+        "xxlarge": "var(--os-spacing-xxlarge)",
+        "huge": "var(--os-spacing-huge)",
+        "giant": "var(--os-spacing-giant)",
+        "section": "var(--os-spacing-section)",
+        "page": "var(--os-spacing-page)"
+      },
+      "maxWidth": {
+        "measure-narrow": "var(--os-measure-narrow)",
+        "measure-lede": "var(--os-measure-lede)",
+        "measure-statement": "var(--os-measure-statement)",
+        "measure-body": "var(--os-measure-body)",
+        "measure-wide": "var(--os-measure-wide)",
+        "page": "var(--os-container-page)",
+        "page-wide": "var(--os-container-page-wide)"
       },
       "fontSize": {
         "h1": [

package/dist/theme-auto.css

@@ -194,6 +194,12 @@
   --color-background-overlay: rgb(var(--os-color-background-overlay));
   --color-light-background-overlay: rgb(var(--os-color-background-overlay));
   --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
+  --color-background-panel: rgb(var(--os-color-background-panel));
+  --color-light-background-panel: rgb(var(--os-color-background-panel));
+  --color-dark-background-panel: rgb(var(--os-color-background-panel));
+  --color-background-paper: rgb(var(--os-color-background-paper));
+  --color-light-background-paper: rgb(var(--os-color-background-paper));
+  --color-dark-background-paper: rgb(var(--os-color-background-paper));
   --color-action-active: rgb(var(--os-color-action-active));
   --color-light-action-active: rgb(var(--os-color-action-active));
   --color-dark-action-active: rgb(var(--os-color-action-active));
@@ -256,4 +262,17 @@
   --spacing-small: var(--os-spacing-small);
   --spacing-medium: var(--os-spacing-medium);
   --spacing-large: var(--os-spacing-large);
+  --spacing-xlarge: var(--os-spacing-xlarge);
+  --spacing-xxlarge: var(--os-spacing-xxlarge);
+  --spacing-huge: var(--os-spacing-huge);
+  --spacing-giant: var(--os-spacing-giant);
+  --spacing-section: var(--os-spacing-section);
+  --spacing-page: var(--os-spacing-page);
+  --container-measure-narrow: var(--os-measure-narrow);
+  --container-measure-lede: var(--os-measure-lede);
+  --container-measure-statement: var(--os-measure-statement);
+  --container-measure-body: var(--os-measure-body);
+  --container-measure-wide: var(--os-measure-wide);
+  --container-page: var(--os-container-page);
+  --container-page-wide: var(--os-container-page-wide);
 }

package/dist/theme.css

@@ -189,6 +189,12 @@
   --color-background-overlay: rgb(var(--os-color-background-overlay));
   --color-light-background-overlay: rgb(var(--os-color-background-overlay));
   --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
+  --color-background-panel: rgb(var(--os-color-background-panel));
+  --color-light-background-panel: rgb(var(--os-color-background-panel));
+  --color-dark-background-panel: rgb(var(--os-color-background-panel));
+  --color-background-paper: rgb(var(--os-color-background-paper));
+  --color-light-background-paper: rgb(var(--os-color-background-paper));
+  --color-dark-background-paper: rgb(var(--os-color-background-paper));
   --color-action-active: rgb(var(--os-color-action-active));
   --color-light-action-active: rgb(var(--os-color-action-active));
   --color-dark-action-active: rgb(var(--os-color-action-active));
@@ -251,4 +257,17 @@
   --spacing-small: var(--os-spacing-small);
   --spacing-medium: var(--os-spacing-medium);
   --spacing-large: var(--os-spacing-large);
+  --spacing-xlarge: var(--os-spacing-xlarge);
+  --spacing-xxlarge: var(--os-spacing-xxlarge);
+  --spacing-huge: var(--os-spacing-huge);
+  --spacing-giant: var(--os-spacing-giant);
+  --spacing-section: var(--os-spacing-section);
+  --spacing-page: var(--os-spacing-page);
+  --container-measure-narrow: var(--os-measure-narrow);
+  --container-measure-lede: var(--os-measure-lede);
+  --container-measure-statement: var(--os-measure-statement);
+  --container-measure-body: var(--os-measure-body);
+  --container-measure-wide: var(--os-measure-wide);
+  --container-page: var(--os-container-page);
+  --container-page-wide: var(--os-container-page-wide);
 }

package/dist/themes/clay-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 248 242;
   --os-color-background-elevated: 237 224 204;
   --os-color-background-overlay: 252 248 242;
+  --os-color-background-panel: 242 232 217;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 52;
   --os-color-background-elevated: 54 42 31;
   --os-color-background-overlay: 54 42 31;
+  --os-color-background-panel: 54 42 31;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 81 64 52;
     --os-color-background-elevated: 54 42 31;
     --os-color-background-overlay: 54 42 31;
+    --os-color-background-panel: 54 42 31;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/clay.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 248 242;
   --os-color-background-elevated: 237 224 204;
   --os-color-background-overlay: 252 248 242;
+  --os-color-background-panel: 242 232 217;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 52;
   --os-color-background-elevated: 54 42 31;
   --os-color-background-overlay: 54 42 31;
+  --os-color-background-panel: 54 42 31;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/default-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 255 255 255;
   --os-color-background-elevated: 232 232 232;
   --os-color-background-overlay: 255 255 255;
+  --os-color-background-panel: 241 241 241;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 79 79 79;
   --os-color-background-elevated: 51 51 51;
   --os-color-background-overlay: 51 51 51;
+  --os-color-background-panel: 51 51 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 79 79 79;
     --os-color-background-elevated: 51 51 51;
     --os-color-background-overlay: 51 51 51;
+    --os-color-background-panel: 51 51 51;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/default.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 255 255 255;
   --os-color-background-elevated: 232 232 232;
   --os-color-background-overlay: 255 255 255;
+  --os-color-background-panel: 241 241 241;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 79 79 79;
   --os-color-background-elevated: 51 51 51;
   --os-color-background-overlay: 51 51 51;
+  --os-color-background-panel: 51 51 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/forest-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 244 247 236;
   --os-color-background-elevated: 217 229 199;
   --os-color-background-overlay: 244 247 236;
+  --os-color-background-panel: 226 236 212;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 66 79 52;
   --os-color-background-elevated: 39 48 27;
   --os-color-background-overlay: 39 48 27;
+  --os-color-background-panel: 39 48 27;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 66 79 52;
     --os-color-background-elevated: 39 48 27;
     --os-color-background-overlay: 39 48 27;
+    --os-color-background-panel: 39 48 27;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/forest.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 244 247 236;
   --os-color-background-elevated: 217 229 199;
   --os-color-background-overlay: 244 247 236;
+  --os-color-background-panel: 226 236 212;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 66 79 52;
   --os-color-background-elevated: 39 48 27;
   --os-color-background-overlay: 39 48 27;
+  --os-color-background-panel: 39 48 27;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/indigo-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 247 249 252;
   --os-color-background-elevated: 221 230 240;
   --os-color-background-overlay: 247 249 252;
+  --os-color-background-panel: 230 237 245;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 51 64 90;
   --os-color-background-elevated: 28 38 59;
   --os-color-background-overlay: 28 38 59;
+  --os-color-background-panel: 28 38 59;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 51 64 90;
     --os-color-background-elevated: 28 38 59;
     --os-color-background-overlay: 28 38 59;
+    --os-color-background-panel: 28 38 59;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/indigo.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 247 249 252;
   --os-color-background-elevated: 221 230 240;
   --os-color-background-overlay: 247 249 252;
+  --os-color-background-panel: 230 237 245;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 51 64 90;
   --os-color-background-elevated: 28 38 59;
   --os-color-background-overlay: 28 38 59;
+  --os-color-background-panel: 28 38 59;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/wine-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 249 247;
   --os-color-background-elevated: 238 228 228;
   --os-color-background-overlay: 252 249 247;
+  --os-color-background-panel: 243 235 234;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 77;
   --os-color-background-elevated: 53 40 51;
   --os-color-background-overlay: 53 40 51;
+  --os-color-background-panel: 53 40 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 81 64 77;
     --os-color-background-elevated: 53 40 51;
     --os-color-background-overlay: 53 40 51;
+    --os-color-background-panel: 53 40 51;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/wine.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 249 247;
   --os-color-background-elevated: 238 228 228;
   --os-color-background-overlay: 252 249 247;
+  --os-color-background-panel: 243 235 234;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 77;
   --os-color-background-elevated: 53 40 51;
   --os-color-background-overlay: 53 40 51;
+  --os-color-background-panel: 53 40 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/tokens.css

@@ -16,4 +16,19 @@
   --os-spacing-small: 4px;
   --os-spacing-medium: 8px;
   --os-spacing-large: 16px;
+  --os-spacing-xlarge: 24px;
+  --os-spacing-xxlarge: 32px;
+  --os-spacing-huge: 48px;
+  --os-spacing-giant: 64px;
+  --os-spacing-section: 128px;
+  --os-spacing-page: 160px;
+  --os-measure-narrow: 24ch;
+  --os-measure-lede: 48ch;
+  --os-measure-statement: 40rem;
+  --os-measure-body: 60ch;
+  --os-measure-wide: 75ch;
+  --os-container-page: 48rem;
+  --os-container-page-wide: 64rem;
+  --os-stage-short: 20rem;
+  --os-stage-tall: 26rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",