@forumone/throughline-reference-ds 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @forumone/throughline-reference-ds
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [24bd325]
+  - @forumone/throughline-design-contract@0.3.0
+
+## 0.3.0
+
+### Minor Changes
+
+- e994176: Add layout tokens and a Storybook "Foundations" section.
+
+  New `layout` tokens (container max-widths, gutter, page margin, breakpoints) emit as `--layout-*` CSS custom properties, filling the previous gap where the DS had no container/breakpoint scale. New Foundations stories — Colors, Typography, Spacing, Radii, Elevation, and **Layout & Containers** — document the tokens visually in Storybook.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/foundations/_helpers.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+/** Shared layout chrome for every Foundations page. */
+export declare function FoundationPage({ title, intro, children, }: {
+    title: string;
+    intro?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** A simple token reference table: name, resolved value, and a preview cell. */
+export declare function TokenTable({ rows, }: {
+    rows: Array<{
+        name: string;
+        value: string;
+        preview?: ReactNode;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=_helpers.d.ts.map

package/dist/foundations/_helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_helpers.d.ts","sourceRoot":"","sources":["../../src/foundations/_helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,uDAAuD;AACvD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,SAAS,CAAA;CACpB,2CA6BA;AASD,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,EACzB,IAAI,GACL,EAAE;IACD,IAAI,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAA;CAClE,2CA2BA"}

package/dist/foundations/_helpers.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Shared layout chrome for every Foundations page. */
+export function FoundationPage({ title, intro, children, }) {
+    return (_jsxs("div", { style: {
+            fontFamily: 'var(--font-family-sans)',
+            color: 'var(--color-text-primary)',
+            background: 'var(--color-bg-primary)',
+            padding: '2rem',
+            maxWidth: '64rem',
+        }, children: [_jsx("h1", { style: { fontSize: 'var(--font-size-4xl)', margin: '0 0 0.5rem', lineHeight: 1.15 }, children: title }), intro ? (_jsx("p", { style: {
+                    color: 'var(--color-text-secondary)',
+                    margin: '0 0 2rem',
+                    maxWidth: '42rem',
+                    lineHeight: 'var(--line-height-relaxed)',
+                }, children: intro })) : null, children] }));
+}
+const cell = {
+    textAlign: 'left',
+    padding: '0.5rem 0.75rem',
+    borderBottom: '1px solid var(--color-border-default)',
+    verticalAlign: 'middle',
+};
+/** A simple token reference table: name, resolved value, and a preview cell. */
+export function TokenTable({ rows, }) {
+    return (_jsxs("table", { style: {
+            borderCollapse: 'collapse',
+            width: '100%',
+            fontSize: 'var(--font-size-sm)',
+        }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }, children: "Token" }), _jsx("th", { style: { ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }, children: "Value" }), _jsx("th", { style: { ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }, children: "Preview" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { style: { ...cell, fontFamily: 'var(--font-family-mono)' }, children: row.name }), _jsx("td", { style: { ...cell, color: 'var(--color-text-secondary)' }, children: row.value }), _jsx("td", { style: cell, children: row.preview })] }, row.name))) })] }));
+}
+//# sourceMappingURL=_helpers.js.map

package/dist/foundations/_helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_helpers.js","sourceRoot":"","sources":["../../src/foundations/_helpers.tsx"],"names":[],"mappings":";AAEA,uDAAuD;AACvD,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,QAAQ,GAKT;IACC,OAAO,CACL,eACE,KAAK,EAAE;YACL,UAAU,EAAE,yBAAyB;YACrC,KAAK,EAAE,2BAA2B;YAClC,UAAU,EAAE,yBAAyB;YACrC,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,OAAO;SAClB,aAED,aAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,YACpF,KAAK,GACH,EACJ,KAAK,CAAC,CAAC,CAAC,CACP,YACE,KAAK,EAAE;oBACL,KAAK,EAAE,6BAA6B;oBACpC,MAAM,EAAE,UAAU;oBAClB,QAAQ,EAAE,OAAO;oBACjB,UAAU,EAAE,4BAA4B;iBACzC,YAEA,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,IAAI,GAAkB;IAC1B,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,uCAAuC;IACrD,aAAa,EAAE,QAAQ;CACxB,CAAA;AAED,gFAAgF;AAChF,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,GAGL;IACC,OAAO,CACL,iBACE,KAAK,EAAE;YACL,cAAc,EAAE,UAAU;YAC1B,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,qBAAqB;SAChC,aAED,0BACE,yBACE,aAAI,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,GAAG,EAAE,sBAAY,EACrF,aAAI,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,GAAG,EAAE,sBAAY,EACrF,aAAI,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,GAAG,EAAE,wBAAc,IACpF,GACC,EACR,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,yBACE,aAAI,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,UAAU,EAAE,yBAAyB,EAAE,YAAG,GAAG,CAAC,IAAI,GAAM,EAC9E,aAAI,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,6BAA6B,EAAE,YAAG,GAAG,CAAC,KAAK,GAAM,EAC9E,aAAI,KAAK,EAAE,IAAI,YAAG,GAAG,CAAC,OAAO,GAAM,KAH5B,GAAG,CAAC,IAAI,CAIZ,CACN,CAAC,GACI,IACF,CACT,CAAA;AACH,CAAC"}

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "contractVersion": "1.0.0",
   "designSystem": {
     "name": "@forumone/throughline-reference-ds",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "description": "A brand-neutral reference design system demonstrating contract compliance for Throughline."
   },
   "tokens": [
@@ -405,6 +405,51 @@
       "name": "radius.full",
       "value": "9999px",
       "category": "radius"
+    },
+    {
+      "name": "layout.container.sm",
+      "value": "40rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.container.md",
+      "value": "64rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.container.lg",
+      "value": "80rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.gutter",
+      "value": "1.5rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.margin",
+      "value": "1rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.sm",
+      "value": "40rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.md",
+      "value": "48rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.lg",
+      "value": "64rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.xl",
+      "value": "80rem",
+      "category": "layout"
     }
   ],
   "components": {
@@ -2008,7 +2053,7 @@
     }
   },
   "build": {
-    "timestamp": "2026-04-22T21:15:56.355Z",
+    "timestamp": "2026-08-24T20:11:13.861Z",
     "source": "scripts/build-manifest.ts"
   }
 }

package/dist/styles/index.css

@@ -139,6 +139,17 @@ video {
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-full: 9999px;
+
+  /* Layout & Containers */
+  --layout-container-sm: 40rem;
+  --layout-container-md: 64rem;
+  --layout-container-lg: 80rem;
+  --layout-gutter: 1.5rem;
+  --layout-margin: 1rem;
+  --layout-breakpoint-sm: 40rem;
+  --layout-breakpoint-md: 48rem;
+  --layout-breakpoint-lg: 64rem;
+  --layout-breakpoint-xl: 80rem;
 }
 
 @media (prefers-color-scheme: dark) {

package/dist/styles/tokens.css

@@ -88,6 +88,17 @@
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-full: 9999px;
+
+  /* Layout & Containers */
+  --layout-container-sm: 40rem;
+  --layout-container-md: 64rem;
+  --layout-container-lg: 80rem;
+  --layout-gutter: 1.5rem;
+  --layout-margin: 1rem;
+  --layout-breakpoint-sm: 40rem;
+  --layout-breakpoint-md: 48rem;
+  --layout-breakpoint-lg: 64rem;
+  --layout-breakpoint-xl: 80rem;
 }
 
 @media (prefers-color-scheme: dark) {

package/dist/tokens/index.d.ts

@@ -2,12 +2,23 @@ import { colors, darkOverrides } from './colors.js';
 import { typography } from './typography.js';
 import { spacing } from './spacing.js';
 import { radii } from './radii.js';
-export { colors, darkOverrides, typography, spacing, radii };
+import { layout } from './layout.js';
+export { colors, darkOverrides, typography, spacing, radii, layout };
 export type { ColorToken } from './colors.js';
 export type { TypographyToken } from './typography.js';
 export type { SpacingToken } from './spacing.js';
 export type { RadiusToken } from './radii.js';
+export type { LayoutToken } from './layout.js';
 export declare const allTokens: {
+    readonly 'layout.container.sm': "40rem";
+    readonly 'layout.container.md': "64rem";
+    readonly 'layout.container.lg': "80rem";
+    readonly 'layout.gutter': "1.5rem";
+    readonly 'layout.margin': "1rem";
+    readonly 'layout.breakpoint.sm': "40rem";
+    readonly 'layout.breakpoint.md': "48rem";
+    readonly 'layout.breakpoint.lg': "64rem";
+    readonly 'layout.breakpoint.xl': "80rem";
     readonly 'radius.none': "0";
     readonly 'radius.sm': "0.25rem";
     readonly 'radius.md': "0.375rem";
@@ -93,7 +104,7 @@ export type TokenName = keyof typeof allTokens;
 /** Returns every token in the shape the design-contract manifest expects. */
 export declare function getTokenList(): {
     name: string;
-    value: "0" | "#FFFFFF" | "#FAFAFA" | "#F4F4F5" | "#E4E4E7" | "#D4D4D8" | "#A1A1AA" | "#71717A" | "#52525B" | "#3F3F46" | "#27272A" | "#18181B" | "#000000" | "#2563EB" | "#1D4ED8" | "#0891B2" | "#16A34A" | "#CA8A04" | "#DC2626" | "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" | "ui-monospace, \"SF Mono\", Monaco, Consolas, monospace" | "0.75rem" | "0.875rem" | "1rem" | "1.125rem" | "1.25rem" | "1.5rem" | "1.875rem" | "2.25rem" | "3rem" | "3.75rem" | "400" | "500" | "600" | "700" | "1.15" | "1.3" | "1.5" | "1.65" | "1.8" | "-0.025em" | "0.025em" | "1px" | "0.125rem" | "0.25rem" | "0.5rem" | "2rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "0.375rem" | "9999px";
+    value: "0" | "#FFFFFF" | "#FAFAFA" | "#F4F4F5" | "#E4E4E7" | "#D4D4D8" | "#A1A1AA" | "#71717A" | "#52525B" | "#3F3F46" | "#27272A" | "#18181B" | "#000000" | "#2563EB" | "#1D4ED8" | "#0891B2" | "#16A34A" | "#CA8A04" | "#DC2626" | "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" | "ui-monospace, \"SF Mono\", Monaco, Consolas, monospace" | "0.75rem" | "0.875rem" | "1rem" | "1.125rem" | "1.25rem" | "1.5rem" | "1.875rem" | "2.25rem" | "3rem" | "3.75rem" | "400" | "500" | "600" | "700" | "1.15" | "1.3" | "1.5" | "1.65" | "1.8" | "-0.025em" | "0.025em" | "1px" | "0.125rem" | "0.25rem" | "0.5rem" | "2rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "0.375rem" | "9999px" | "40rem" | "64rem" | "80rem" | "48rem";
     category: string;
 }[];
 //# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKZ,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,SAAS,CAAA;AAE9C,6EAA6E;AAC7E,wBAAgB,YAAY;;;;IAO3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;AACpE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMZ,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,SAAS,CAAA;AAE9C,6EAA6E;AAC7E,wBAAgB,YAAY;;;;IAO3B"}

package/dist/tokens/index.js

@@ -2,12 +2,14 @@ import { colors, darkOverrides } from './colors.js';
 import { typography } from './typography.js';
 import { spacing } from './spacing.js';
 import { radii } from './radii.js';
-export { colors, darkOverrides, typography, spacing, radii };
+import { layout } from './layout.js';
+export { colors, darkOverrides, typography, spacing, radii, layout };
 export const allTokens = {
     ...colors,
     ...typography,
     ...spacing,
     ...radii,
+    ...layout,
 };
 /** Returns every token in the shape the design-contract manifest expects. */
 export function getTokenList() {

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;AAM5D,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,MAAM;IACT,GAAG,UAAU;IACb,GAAG,OAAO;IACV,GAAG,KAAK;CACA,CAAA;AAIV,6EAA6E;AAC7E,MAAM,UAAU,YAAY;IAC1B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,CAAA;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACvD,IAAI;QACJ,KAAK;QACL,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;KAC3B,CAAC,CAAC,CAAA;AACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;AAOpE,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,MAAM;IACT,GAAG,UAAU;IACb,GAAG,OAAO;IACV,GAAG,KAAK;IACR,GAAG,MAAM;CACD,CAAA;AAIV,6EAA6E;AAC7E,MAAM,UAAU,YAAY;IAC1B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,CAAA;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACvD,IAAI;QACJ,KAAK;QACL,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC;KAC3B,CAAC,CAAC,CAAA;AACL,CAAC"}

package/dist/tokens/layout.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Layout & container tokens: the max-widths a page constrains to, the
+ * horizontal gutter/margins, and the responsive breakpoints. These are the
+ * values the "Layout & Containers" foundation documents. Brand projects
+ * override them (e.g. Forum One uses constrain 800/1440/2200, gutter 40,
+ * breakpoints 320–1400); the reference DS ships neutral defaults.
+ */
+export declare const layout: {
+    /** Container max-widths the page content constrains to. */
+    readonly 'layout.container.sm': "40rem";
+    readonly 'layout.container.md': "64rem";
+    readonly 'layout.container.lg': "80rem";
+    /** Horizontal gutter between grid columns. */
+    readonly 'layout.gutter': "1.5rem";
+    /** Page side margins (inside the viewport, outside the container). */
+    readonly 'layout.margin': "1rem";
+    /** Responsive breakpoints (min-width). */
+    readonly 'layout.breakpoint.sm': "40rem";
+    readonly 'layout.breakpoint.md': "48rem";
+    readonly 'layout.breakpoint.lg': "64rem";
+    readonly 'layout.breakpoint.xl': "80rem";
+};
+export type LayoutToken = keyof typeof layout;
+//# sourceMappingURL=layout.d.ts.map

package/dist/tokens/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/tokens/layout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;IACjB,2DAA2D;;;;IAK3D,8CAA8C;;IAE9C,sEAAsE;;IAGtE,0CAA0C;;;;;CAKlC,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,MAAM,CAAA"}

package/dist/tokens/layout.js

@@ -0,0 +1,23 @@
+/**
+ * Layout & container tokens: the max-widths a page constrains to, the
+ * horizontal gutter/margins, and the responsive breakpoints. These are the
+ * values the "Layout & Containers" foundation documents. Brand projects
+ * override them (e.g. Forum One uses constrain 800/1440/2200, gutter 40,
+ * breakpoints 320–1400); the reference DS ships neutral defaults.
+ */
+export const layout = {
+    /** Container max-widths the page content constrains to. */
+    'layout.container.sm': '40rem', // 640px — narrow prose
+    'layout.container.md': '64rem', // 1024px — default content width
+    'layout.container.lg': '80rem', // 1280px — wide / full-bleed sections
+    /** Horizontal gutter between grid columns. */
+    'layout.gutter': '1.5rem', // 24px
+    /** Page side margins (inside the viewport, outside the container). */
+    'layout.margin': '1rem', // 16px
+    /** Responsive breakpoints (min-width). */
+    'layout.breakpoint.sm': '40rem', // 640px
+    'layout.breakpoint.md': '48rem', // 768px
+    'layout.breakpoint.lg': '64rem', // 1024px
+    'layout.breakpoint.xl': '80rem', // 1280px
+};
+//# sourceMappingURL=layout.js.map

package/dist/tokens/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/tokens/layout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,2DAA2D;IAC3D,qBAAqB,EAAE,OAAO,EAAE,uBAAuB;IACvD,qBAAqB,EAAE,OAAO,EAAE,iCAAiC;IACjE,qBAAqB,EAAE,OAAO,EAAE,sCAAsC;IAEtE,8CAA8C;IAC9C,eAAe,EAAE,QAAQ,EAAE,OAAO;IAClC,sEAAsE;IACtE,eAAe,EAAE,MAAM,EAAE,OAAO;IAEhC,0CAA0C;IAC1C,sBAAsB,EAAE,OAAO,EAAE,QAAQ;IACzC,sBAAsB,EAAE,OAAO,EAAE,QAAQ;IACzC,sBAAsB,EAAE,OAAO,EAAE,SAAS;IAC1C,sBAAsB,EAAE,OAAO,EAAE,SAAS;CAClC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forumone/throughline-reference-ds",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A competent, brand-neutral reference design system demonstrating contract compliance for Throughline.",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "@forumone/throughline-design-contract": "0.2.0"
+    "@forumone/throughline-design-contract": "0.3.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.5",