@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/theme/tokens/generate.d.ts

@@ -0,0 +1,15 @@
+import type { Scales, Theme } from "./types.js";
+/** The theme-independent token tree, in the shape of `Scales`. */
+export declare const SCALES: Scales;
+/**
+ * The CSS variable for a token path: `--gx-<path>`, camelCase and snake_case → kebab-case.
+ * `["color", "border", "focused"]` (or `"color.border.focused"`) → `--gx-color-border-focused`;
+ * `color.solid.error.text` → `--gx-color-solid-error-text`; `size.control.xSmall` →
+ * `--gx-size-control-x-small`; `palette.blue.500` → `--gx-palette-blue-500`. The single naming
+ * function for the generator and `t`.
+ */
+export declare function tokenName(path: string | readonly (string | number)[]): string;
+/** `[data-gx-theme="<name>"] { … }` with every color and font variable of `theme`. */
+export declare function themeToCss(theme: Theme, name: string): string;
+/** `:root { … }` with the theme-independent scales and the palette. */
+export declare function scalesToCss(): string;

package/dist/theme/tokens/generate.js

@@ -0,0 +1,47 @@
+import { CONTROL_SIZE, DURATION, RADIUS, SPACE, Z } from "./scales.js";
+import { PALETTE } from "./palette.js";
+//#region src/theme/tokens/generate.ts
+/**
+* Token → CSS. Used by `scripts/build-tokens.ts` to write `dist/tokens.css` and by Storybook's
+* preview. Pure; no DOM.
+*
+* Ownership of variables:
+* - `scalesToCss` → `:root`: space, radius, duration, z, size.control and the mode-stable palette.
+* - `themeToCss`  → `[data-gx-theme="<name>"]`: every `color.*` and `font.*` token.
+*/
+/** The theme-independent token tree, in the shape of `Scales`. */
+var SCALES = {
+	space: SPACE,
+	radius: RADIUS,
+	duration: DURATION,
+	z: Z,
+	size: { control: CONTROL_SIZE },
+	palette: PALETTE
+};
+var kebab = (segment) => String(segment).replace(/_/g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+* The CSS variable for a token path: `--gx-<path>`, camelCase and snake_case → kebab-case.
+* `["color", "border", "focused"]` (or `"color.border.focused"`) → `--gx-color-border-focused`;
+* `color.solid.error.text` → `--gx-color-solid-error-text`; `size.control.xSmall` →
+* `--gx-size-control-x-small`; `palette.blue.500` → `--gx-palette-blue-500`. The single naming
+* function for the generator and `t`.
+*/
+function tokenName(path) {
+	return `--gx-${(typeof path === "string" ? path.split(".") : [...path]).map(kebab).join("-")}`;
+}
+/** Every leaf of a token tree as `[path, value]`, in declaration order. */
+function leaves(tree, path = []) {
+	return Object.entries(tree).flatMap(([key, value]) => typeof value === "object" ? leaves(value, [...path, key]) : [[[...path, key], value]]);
+}
+var block = (selector, declarations) => `${selector} {\n${declarations.map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}\n`;
+/** `[data-gx-theme="<name>"] { … }` with every color and font variable of `theme`. */
+function themeToCss(theme, name) {
+	const declarations = leaves(theme).map(([path, value]) => [tokenName(path), value]);
+	return block(`[data-gx-theme="${name}"]`, declarations);
+}
+/** `:root { … }` with the theme-independent scales and the palette. */
+function scalesToCss() {
+	return block(":root", leaves(SCALES).map(([path, value]) => [tokenName(path), value]));
+}
+//#endregion
+export { SCALES, scalesToCss, themeToCss, tokenName };

package/dist/theme/tokens/light.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types.js";
+export declare const LIGHT_THEME: Theme;

package/dist/theme/tokens/light.js

@@ -0,0 +1,274 @@
+import { TYPE_SCALE } from "./scales.js";
+//#region src/theme/tokens/light.ts
+/**
+* Light theme, resolved hex. Everything is Galaxy monochrome: `solid.primary` is `text.primary`
+* with `background.base` on it, `background.selected` is `text.primary` at 12% over
+* `background.base`.
+*
+* Families (`<family>` below is any of the 17; the palette steps are `PALETTE`):
+* - `text`: the lightest OKLCH lightness, at the largest in-gamut chroma for the hue, that reaches
+*   4.6:1 on every surface and on its own tint, so it is as vivid as reading allows. Orange, amber
+*   and yellow are pulled apart in hue (42° / 62° / 95°) so they never read alike.
+* - `background`: palette 100.
+* - `border`: OKLCH mix of palette 300 → 500 at 65%.
+* - `solid`: shared with Dark (see `solid` below).
+*
+* Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
+* warning 70° in Dark and 50° in Light (amber that never reads brown), error 22° (a clear red).
+* Their text follows the text rule above, their tint is a subtle wash of the hue, and their border
+* is the lightest value of the hue that reaches 3:1 on every surface.
+*
+* `solid.neutral`: the muted fill, `background.secondary` with `text.primary` on it; hover and press
+* are clear steps darker than `background.tertiary` (#e5e5e6, #dcdcdd).
+*
+* `solid.<family|status>`: the vivid fill with black text, hover and press mixing toward the light
+* end (away from the text); or, where white reaches 4.6:1 within 35% of the way to palette 700,
+* that mix with white text, hover and press 12% / 24% further toward 700.
+*/
+var LIGHT_THEME = {
+	color: {
+		background: {
+			base: "#ffffff",
+			primary: "#fafafb",
+			secondary: "#f1f1f2",
+			tertiary: "#ededee",
+			hovered: "#f5f5f5",
+			pressed: "#eeeeee",
+			selected: "#e2e2e2",
+			disabled: "#f1f1f2",
+			success: "#ecfcf0",
+			warning: "#fff8eb",
+			error: "#fff2f2",
+			red: "#fef2f2",
+			orange: "#fff7ed",
+			amber: "#fffbeb",
+			yellow: "#fefce8",
+			lime: "#f7fee7",
+			green: "#f0fdf4",
+			emerald: "#ecfdf5",
+			teal: "#f0fdfa",
+			cyan: "#ecfeff",
+			sky: "#f0f9ff",
+			blue: "#eff6ff",
+			indigo: "#eef2ff",
+			violet: "#f5f3ff",
+			purple: "#faf5ff",
+			fuchsia: "#fdf4ff",
+			pink: "#fdf2f8",
+			rose: "#fff1f2"
+		},
+		text: {
+			primary: "#101010",
+			secondary: "#4d4d4d",
+			tertiary: "#6b6b6b",
+			disabled: "#b8b8b8",
+			success: "#087a45",
+			warning: "#ab5007",
+			error: "#d40d31",
+			red: "#d40d24",
+			orange: "#b74507",
+			amber: "#9d5a07",
+			yellow: "#7d6907",
+			lime: "#4a7607",
+			green: "#087b36",
+			emerald: "#087953",
+			teal: "#08776b",
+			cyan: "#087488",
+			sky: "#0871a2",
+			blue: "#0662e4",
+			indigo: "#584dfc",
+			violet: "#8237fc",
+			purple: "#9d10fa",
+			fuchsia: "#b50dcb",
+			pink: "#cb0c7b",
+			rose: "#d20c43"
+		},
+		border: {
+			primary: "#d2d2d4",
+			secondary: "#c4c4c7",
+			tertiary: "#b4b4b7",
+			hovered: "#a8a8ab",
+			focused: "#87878a",
+			disabled: "#d2d2d4",
+			success: "#0d9a59",
+			warning: "#d6660b",
+			error: "#fd3348",
+			red: "#f87977",
+			orange: "#fc9a4f",
+			amber: "#f8b943",
+			yellow: "#f1c948",
+			lime: "#a4dc53",
+			green: "#65d789",
+			emerald: "#59cd9c",
+			teal: "#53cdbb",
+			cyan: "#56cce1",
+			sky: "#5fbdf0",
+			blue: "#68a3fa",
+			indigo: "#818ff8",
+			violet: "#a58afb",
+			purple: "#bf86fb",
+			fuchsia: "#e47ff7",
+			pink: "#f47db8",
+			rose: "#fb7989"
+		},
+		solid: {
+			primary: {
+				background: "#101010",
+				text: "#ffffff",
+				hovered: "#2d2d2d",
+				pressed: "#494949"
+			},
+			neutral: {
+				background: "#f1f1f2",
+				text: "#101010",
+				hovered: "#e5e5e6",
+				pressed: "#dcdcdd"
+			},
+			success: {
+				background: "#13bc6e",
+				text: "#000000",
+				hovered: "#15cb76",
+				pressed: "#18d97f"
+			},
+			warning: {
+				background: "#fea931",
+				text: "#000000",
+				hovered: "#febc6c",
+				pressed: "#fece96"
+			},
+			error: {
+				background: "#e50f36",
+				text: "#ffffff",
+				hovered: "#ce0c30",
+				pressed: "#b70929"
+			},
+			red: {
+				background: "#d83939",
+				text: "#ffffff",
+				hovered: "#ce3434",
+				pressed: "#c3302f"
+			},
+			orange: {
+				background: "#f97316",
+				text: "#000000",
+				hovered: "#fb8a3a",
+				pressed: "#fc9f56"
+			},
+			amber: {
+				background: "#f59e0b",
+				text: "#000000",
+				hovered: "#f7ad31",
+				pressed: "#f8bc49"
+			},
+			yellow: {
+				background: "#eab308",
+				text: "#000000",
+				hovered: "#eec035",
+				pressed: "#f2cc4e"
+			},
+			lime: {
+				background: "#84cc16",
+				text: "#000000",
+				hovered: "#97d53e",
+				pressed: "#a8de59"
+			},
+			green: {
+				background: "#22c55e",
+				text: "#000000",
+				hovered: "#4dd077",
+				pressed: "#6cda8f"
+			},
+			emerald: {
+				background: "#10b981",
+				text: "#000000",
+				hovered: "#42c591",
+				pressed: "#60d0a0"
+			},
+			teal: {
+				background: "#14b8a6",
+				text: "#000000",
+				hovered: "#3ec4b2",
+				pressed: "#59d1be"
+			},
+			cyan: {
+				background: "#06b6d4",
+				text: "#000000",
+				hovered: "#3fc2db",
+				pressed: "#5dcfe3"
+			},
+			sky: {
+				background: "#0ea5e9",
+				text: "#000000",
+				hovered: "#45b3ed",
+				pressed: "#67c0f1"
+			},
+			blue: {
+				background: "#3270e3",
+				text: "#ffffff",
+				hovered: "#2f68da",
+				pressed: "#2b60d2"
+			},
+			indigo: {
+				background: "#6163ed",
+				text: "#ffffff",
+				hovered: "#5b5de3",
+				pressed: "#5656da"
+			},
+			violet: {
+				background: "#8555ee",
+				text: "#ffffff",
+				hovered: "#7f4fe6",
+				pressed: "#7948df"
+			},
+			purple: {
+				background: "#9b4be7",
+				text: "#ffffff",
+				hovered: "#9445dd",
+				pressed: "#8d3fd4"
+			},
+			fuchsia: {
+				background: "#bb36cc",
+				text: "#ffffff",
+				hovered: "#b131c0",
+				pressed: "#a72bb5"
+			},
+			pink: {
+				background: "#d0377d",
+				text: "#ffffff",
+				hovered: "#c73173",
+				pressed: "#bd2c6a"
+			},
+			rose: {
+				background: "#da3253",
+				text: "#ffffff",
+				hovered: "#d02d4e",
+				pressed: "#c5284a"
+			}
+		},
+		opacity: {
+			bg4: "rgba(255, 255, 255, 0.04)",
+			bg8: "rgba(255, 255, 255, 0.08)",
+			bg12: "rgba(255, 255, 255, 0.12)",
+			bg16: "rgba(255, 255, 255, 0.16)",
+			bg24: "rgba(255, 255, 255, 0.24)",
+			bg32: "rgba(255, 255, 255, 0.32)",
+			bg48: "rgba(255, 255, 255, 0.48)",
+			bg64: "rgba(255, 255, 255, 0.64)",
+			bg80: "rgba(255, 255, 255, 0.8)",
+			bg100: "rgba(255, 255, 255, 1)",
+			fg4: "rgba(0, 0, 0, 0.04)",
+			fg8: "rgba(0, 0, 0, 0.08)",
+			fg12: "rgba(0, 0, 0, 0.12)",
+			fg16: "rgba(0, 0, 0, 0.16)",
+			fg24: "rgba(0, 0, 0, 0.24)",
+			fg32: "rgba(0, 0, 0, 0.32)",
+			fg48: "rgba(0, 0, 0, 0.48)",
+			fg64: "rgba(0, 0, 0, 0.64)",
+			fg80: "rgba(0, 0, 0, 0.8)",
+			fg100: "rgba(0, 0, 0, 1)"
+		}
+	},
+	font: TYPE_SCALE
+};
+//#endregion
+export { LIGHT_THEME };

package/dist/theme/tokens/palette.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The mode-stable primitive palette: 17 chromatic families, five steps each, the same hex in every
+ * theme. The steps are Tailwind v4's 50, 200, 500, 800 and 950, renamed `100 300 500 700 900`
+ * (lightest to darkest). No gray family. Emitted on `:root` as `--gx-palette-<family>-<step>`;
+ * style with `t.palette.<family>[<step>]`, and import `PALETTE` only for JS logic (canvas, WebGL).
+ * The theme roles (`t.color.<property>.<family>`) are derived from these steps (dark.ts, light.ts).
+ */
+import type { PaletteColor, PaletteStep } from "./types.js";
+/** Every palette family in hue order, red → rose. */
+export declare const PALETTE_COLORS: readonly PaletteColor[];
+/** Every step of a family, lightest first. */
+export declare const PALETTE_STEPS: readonly PaletteStep[];
+/** Family → step → hex. */
+export declare const PALETTE: Record<PaletteColor, Record<PaletteStep, `#${string}`>>;

package/dist/theme/tokens/palette.js

@@ -0,0 +1,153 @@
+//#region src/theme/tokens/palette.ts
+/** Every palette family in hue order, red → rose. */
+var PALETTE_COLORS = [
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose"
+];
+/** Every step of a family, lightest first. */
+var PALETTE_STEPS = [
+	100,
+	300,
+	500,
+	700,
+	900
+];
+/** Family → step → hex. */
+var PALETTE = {
+	red: {
+		100: "#fef2f2",
+		300: "#fecaca",
+		500: "#ef4444",
+		700: "#991b1b",
+		900: "#450a0a"
+	},
+	orange: {
+		100: "#fff7ed",
+		300: "#fed7aa",
+		500: "#f97316",
+		700: "#9a3412",
+		900: "#431407"
+	},
+	amber: {
+		100: "#fffbeb",
+		300: "#fde68a",
+		500: "#f59e0b",
+		700: "#92400e",
+		900: "#451a03"
+	},
+	yellow: {
+		100: "#fefce8",
+		300: "#fef08a",
+		500: "#eab308",
+		700: "#854d0e",
+		900: "#422006"
+	},
+	lime: {
+		100: "#f7fee7",
+		300: "#d9f99d",
+		500: "#84cc16",
+		700: "#3f6212",
+		900: "#1a2e05"
+	},
+	green: {
+		100: "#f0fdf4",
+		300: "#bbf7d0",
+		500: "#22c55e",
+		700: "#166534",
+		900: "#052e16"
+	},
+	emerald: {
+		100: "#ecfdf5",
+		300: "#a7f3d0",
+		500: "#10b981",
+		700: "#065f46",
+		900: "#022c22"
+	},
+	teal: {
+		100: "#f0fdfa",
+		300: "#99f6e4",
+		500: "#14b8a6",
+		700: "#115e59",
+		900: "#042f2e"
+	},
+	cyan: {
+		100: "#ecfeff",
+		300: "#a5f3fc",
+		500: "#06b6d4",
+		700: "#155e75",
+		900: "#083344"
+	},
+	sky: {
+		100: "#f0f9ff",
+		300: "#bae6fd",
+		500: "#0ea5e9",
+		700: "#075985",
+		900: "#082f49"
+	},
+	blue: {
+		100: "#eff6ff",
+		300: "#bfdbfe",
+		500: "#3b82f6",
+		700: "#1e40af",
+		900: "#172554"
+	},
+	indigo: {
+		100: "#eef2ff",
+		300: "#c7d2fe",
+		500: "#6366f1",
+		700: "#3730a3",
+		900: "#1e1b4b"
+	},
+	violet: {
+		100: "#f5f3ff",
+		300: "#ddd6fe",
+		500: "#8b5cf6",
+		700: "#5b21b6",
+		900: "#2e1065"
+	},
+	purple: {
+		100: "#faf5ff",
+		300: "#e9d5ff",
+		500: "#a855f7",
+		700: "#6b21a8",
+		900: "#3b0764"
+	},
+	fuchsia: {
+		100: "#fdf4ff",
+		300: "#f5d0fe",
+		500: "#d946ef",
+		700: "#86198f",
+		900: "#4a044e"
+	},
+	pink: {
+		100: "#fdf2f8",
+		300: "#fbcfe8",
+		500: "#ec4899",
+		700: "#9d174d",
+		900: "#500724"
+	},
+	rose: {
+		100: "#fff1f2",
+		300: "#fecdd3",
+		500: "#f43f5e",
+		700: "#9f1239",
+		900: "#4c0519"
+	}
+};
+//#endregion
+export { PALETTE, PALETTE_COLORS, PALETTE_STEPS };

package/dist/theme/tokens/scales.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Theme-independent scales (Constitution II.5–II.8, III-A). The same in every theme;
+ * emitted once on `:root` by `scalesToCss`. `TYPE_SCALE` is the `font` of both built-in themes.
+ */
+import type { Scales, Theme } from "./types.js";
+/** Gap and padding. The only spacing values; margins are forbidden. */
+export declare const SPACE: Scales["space"];
+/** `sm` inline, `md` controls, `lg` panels, `pill` fully rounded. Nothing rounder. */
+export declare const RADIUS: Scales["radius"];
+/** `fast` for color/border, `base` for transforms. */
+export declare const DURATION: Scales["duration"];
+/** Stacking order of floating layers, lowest first. */
+export declare const Z: Scales["z"];
+/** Control heights: the canonical `<Component>Size` rungs X_SMALL … X_LARGE. */
+export declare const CONTROL_SIZE: Scales["size"]["control"];
+/**
+ * Sans, mono and serif metrics.
+ * - sans: sizes `10 12 13 14 16 20 24 32 40` (III-A.1).
+ * - mono: size = round(sans × 0.92), same line height and spacing as sans, so a mono value and a
+ *   sans label share a baseline (III-A.3).
+ * - serif: editorial steps only; size = the sans step, spacing `0px` (Tokens Q6). Cardo's ink
+ *   runs deeper (ascent 1em, descent 0.375em, descender ink 0.313em), so its line box must be at
+ *   least 1.25 × size: from `heading_md` up the serif line heights are one or two 4px steps taller
+ *   than sans. Prose line height (`1.5`) is applied by `Text isProse`, not here.
+ */
+export declare const TYPE_SCALE: Theme["font"];

package/dist/theme/tokens/scales.js

@@ -0,0 +1,154 @@
+//#region src/theme/tokens/scales.ts
+/** Gap and padding. The only spacing values; margins are forbidden. */
+var SPACE = {
+	0: "0px",
+	2: "2px",
+	4: "4px",
+	8: "8px",
+	12: "12px",
+	16: "16px",
+	24: "24px",
+	32: "32px",
+	48: "48px"
+};
+/** `sm` inline, `md` controls, `lg` panels, `pill` fully rounded. Nothing rounder. */
+var RADIUS = {
+	sm: "2px",
+	md: "2px",
+	lg: "4px",
+	pill: "999px"
+};
+/** `fast` for color/border, `base` for transforms. */
+var DURATION = {
+	fast: "75ms",
+	base: "150ms"
+};
+/** Stacking order of floating layers, lowest first. */
+var Z = {
+	dropdown: 1e3,
+	drawer: 1100,
+	modal: 1200,
+	toast: 1300,
+	tooltip: 1400
+};
+/** Control heights: the canonical `<Component>Size` rungs X_SMALL … X_LARGE. */
+var CONTROL_SIZE = {
+	xSmall: "20px",
+	small: "24px",
+	medium: "32px",
+	large: "36px",
+	xLarge: "40px"
+};
+var WEIGHT = {
+	regular: 400,
+	medium: 500
+};
+/**
+* UI line heights, snapped to the 4px grid (III-A.2). Shared by sans and mono.
+*
+* Each one is the smallest 4px step whose line box holds the glyph ink. ABC Diatype's vertical
+* metrics are lopsided (ascent 0.975em, descent 0.275em, descender ink 0.223em below the
+* baseline), so a line box of height L puts the bottom of a `g j p q y` at L / 2 + 0.573em: the
+* ink fits only while L ≥ 1.146 × size. The display steps were 36 and 44 (1.125× and 1.1×), so
+* descenders hung 0.7px and 0.9px below the box and any `overflow: hidden` cut them; they are now
+* 40 and 48. Berkeley Mono fits at every step either way.
+*/
+var LINE_HEIGHT = {
+	caption: "12px",
+	body_sm: "16px",
+	body_md: "16px",
+	body_lg: "20px",
+	heading_sm: "20px",
+	heading_md: "24px",
+	heading_lg: "28px",
+	display_sm: "40px",
+	display_lg: "48px"
+};
+/** Letter spacing: 1.x port (size × 0.01px); the new display steps follow the same rule. */
+var LETTER_SPACING = {
+	caption: "0.1px",
+	body_sm: "0.12px",
+	body_md: "0.13px",
+	body_lg: "0.14px",
+	heading_sm: "0.16px",
+	heading_md: "0.20px",
+	heading_lg: "0.24px",
+	display_sm: "0.32px",
+	display_lg: "0.40px"
+};
+/**
+* Sans, mono and serif metrics.
+* - sans: sizes `10 12 13 14 16 20 24 32 40` (III-A.1).
+* - mono: size = round(sans × 0.92), same line height and spacing as sans, so a mono value and a
+*   sans label share a baseline (III-A.3).
+* - serif: editorial steps only; size = the sans step, spacing `0px` (Tokens Q6). Cardo's ink
+*   runs deeper (ascent 1em, descent 0.375em, descender ink 0.313em), so its line box must be at
+*   least 1.25 × size: from `heading_md` up the serif line heights are one or two 4px steps taller
+*   than sans. Prose line height (`1.5`) is applied by `Text isProse`, not here.
+*/
+var TYPE_SCALE = {
+	sans: {
+		family: "\"ABC Diatype\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+		weight: WEIGHT,
+		size: {
+			caption: "10px",
+			body_sm: "12px",
+			body_md: "13px",
+			body_lg: "14px",
+			heading_sm: "16px",
+			heading_md: "20px",
+			heading_lg: "24px",
+			display_sm: "32px",
+			display_lg: "40px"
+		},
+		height: LINE_HEIGHT,
+		spacing: LETTER_SPACING
+	},
+	mono: {
+		family: "\"Berkeley Mono\", ui-monospace, \"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+		weight: WEIGHT,
+		size: {
+			caption: "9px",
+			body_sm: "11px",
+			body_md: "12px",
+			body_lg: "13px",
+			heading_sm: "15px",
+			heading_md: "18px",
+			heading_lg: "22px",
+			display_sm: "29px",
+			display_lg: "37px"
+		},
+		height: LINE_HEIGHT,
+		spacing: LETTER_SPACING
+	},
+	serif: {
+		family: "\"Cardo\", Georgia, \"Times New Roman\", serif",
+		weight: WEIGHT,
+		size: {
+			body_lg: "14px",
+			heading_sm: "16px",
+			heading_md: "20px",
+			heading_lg: "24px",
+			display_sm: "32px",
+			display_lg: "40px"
+		},
+		height: {
+			body_lg: "20px",
+			heading_sm: "20px",
+			heading_md: "28px",
+			heading_lg: "32px",
+			display_sm: "40px",
+			display_lg: "52px"
+		},
+		spacing: {
+			body_lg: "0px",
+			heading_sm: "0px",
+			heading_md: "0px",
+			heading_lg: "0px",
+			display_sm: "0px",
+			display_lg: "0px"
+		}
+	}
+};
+//#endregion
+export { CONTROL_SIZE, DURATION, RADIUS, SPACE, TYPE_SCALE, Z };

package/dist/theme/tokens/t.d.ts

@@ -0,0 +1,3 @@
+import type { Scales, Theme, TokenAccessor } from "./types.js";
+/** Typed `var(--gx-…)` accessor for every token. Style with `t.*` only. */
+export declare const t: TokenAccessor<Theme & Scales>;