vectis-ui 0.1.0

package/dist/tokens/primitives.js

@@ -0,0 +1,166 @@
+import { color as e, cubicBezier as t, dimension as n, duration as r, fontFamily as i, fontWeight as a, shadow as o } from "./types.js";
+//#region src/tokens/primitives.ts
+var s = (t) => Object.fromEntries(Object.entries(t).map(([t, n]) => [t, e(n)])), c = {
+	color: {
+		white: e("oklch(100% 0 0)"),
+		black: e("oklch(0% 0 0)"),
+		red: s({
+			50: "oklch(97.1% 0.013 17.38)",
+			100: "oklch(93.6% 0.032 17.717)",
+			200: "oklch(88.5% 0.062 18.334)",
+			300: "oklch(80.8% 0.114 19.571)",
+			400: "oklch(70.4% 0.191 22.216)",
+			500: "oklch(63.7% 0.237 25.331)",
+			600: "oklch(57.7% 0.245 27.325)",
+			700: "oklch(50.5% 0.213 27.518)",
+			800: "oklch(44.4% 0.177 26.899)",
+			900: "oklch(39.6% 0.141 25.723)",
+			950: "oklch(25.8% 0.092 26.042)"
+		}),
+		amber: s({
+			50: "oklch(98.7% 0.022 95.277)",
+			100: "oklch(96.2% 0.059 95.617)",
+			200: "oklch(92.4% 0.12 95.746)",
+			300: "oklch(87.9% 0.169 91.605)",
+			400: "oklch(82.8% 0.189 84.429)",
+			500: "oklch(76.9% 0.188 70.08)",
+			600: "oklch(66.6% 0.179 58.318)",
+			700: "oklch(55.5% 0.163 48.998)",
+			800: "oklch(47.3% 0.137 46.201)",
+			900: "oklch(41.4% 0.112 45.904)",
+			950: "oklch(27.9% 0.077 45.635)"
+		}),
+		green: s({
+			50: "oklch(98.2% 0.018 155.826)",
+			100: "oklch(96.2% 0.044 156.743)",
+			200: "oklch(92.5% 0.084 155.995)",
+			300: "oklch(87.1% 0.15 154.449)",
+			400: "oklch(79.2% 0.209 151.711)",
+			500: "oklch(72.3% 0.219 149.579)",
+			600: "oklch(62.7% 0.194 149.214)",
+			700: "oklch(52.7% 0.154 150.069)",
+			800: "oklch(44.8% 0.119 151.328)",
+			900: "oklch(39.3% 0.095 152.535)",
+			950: "oklch(26.6% 0.065 152.934)"
+		}),
+		indigo: s({
+			50: "oklch(96.2% 0.018 272.314)",
+			100: "oklch(93% 0.034 272.788)",
+			200: "oklch(87% 0.065 274.039)",
+			300: "oklch(78.5% 0.115 274.713)",
+			400: "oklch(67.3% 0.182 276.935)",
+			500: "oklch(58.5% 0.233 277.117)",
+			600: "oklch(51.1% 0.262 276.966)",
+			700: "oklch(45.7% 0.24 277.023)",
+			800: "oklch(39.8% 0.195 277.366)",
+			900: "oklch(35.9% 0.144 278.697)",
+			950: "oklch(25.7% 0.09 281.288)"
+		}),
+		gray: s({
+			50: "oklch(98.5% 0.002 247.839)",
+			100: "oklch(96.7% 0.003 264.542)",
+			200: "oklch(92.8% 0.006 264.531)",
+			300: "oklch(87.2% 0.01 258.338)",
+			400: "oklch(70.7% 0.022 261.325)",
+			500: "oklch(55.1% 0.027 264.364)",
+			600: "oklch(44.6% 0.03 256.802)",
+			700: "oklch(37.3% 0.034 259.733)",
+			800: "oklch(27.8% 0.033 256.848)",
+			900: "oklch(21% 0.034 264.665)",
+			950: "oklch(13% 0.028 261.692)"
+		})
+	},
+	space: {
+		1: n("0.25rem"),
+		2: n("0.5rem"),
+		3: n("0.75rem"),
+		4: n("1rem"),
+		5: n("1.25rem"),
+		6: n("1.5rem"),
+		7: n("2rem"),
+		8: n("2.5rem"),
+		9: n("3rem"),
+		10: n("4rem"),
+		11: n("5rem"),
+		12: n("6rem")
+	},
+	font: {
+		family: {
+			sans: i("system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"),
+			display: i("{font.family.sans}"),
+			mono: i("ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace"),
+			icon: i("'Material Symbols Rounded'")
+		},
+		weight: {
+			regular: a("400"),
+			medium: a("500"),
+			semibold: a("600"),
+			bold: a("700")
+		},
+		size: {
+			xs: n("0.75rem"),
+			sm: n("0.875rem"),
+			md: n("1rem"),
+			lg: n("1.125rem"),
+			xl: n("1.25rem"),
+			"2xl": n("1.5rem"),
+			"3xl": n("1.875rem"),
+			"4xl": n("2.25rem"),
+			"5xl": n("3rem")
+		},
+		leading: {
+			none: n("1"),
+			tight: n("1.25"),
+			snug: n("1.4"),
+			normal: n("1.5"),
+			relaxed: n("1.65")
+		},
+		tracking: {
+			tight: n("-0.015em", "Tightening for large sizes (display, the top headings)"),
+			wide: n("0.05em", "Letter spacing for all-caps micro labels (overline)")
+		}
+	},
+	radius: {
+		none: n("0px"),
+		xs: n("0.125rem"),
+		sm: n("0.25rem"),
+		md: n("0.375rem"),
+		lg: n("0.5rem"),
+		xl: n("0.75rem"),
+		"2xl": n("1rem"),
+		full: n("9999px")
+	},
+	shadow: {
+		xs: o("0 1px 2px 0 oklch(0% 0 0 / 0.05)"),
+		sm: o("0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)"),
+		md: o("0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)"),
+		lg: o("0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)"),
+		xl: o("0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)")
+	},
+	duration: {
+		0: r("0ms"),
+		50: r("50ms"),
+		100: r("100ms"),
+		150: r("150ms"),
+		200: r("200ms"),
+		300: r("300ms"),
+		400: r("400ms"),
+		500: r("500ms"),
+		700: r("700ms"),
+		1e3: r("1000ms"),
+		1500: r("1500ms"),
+		2e3: r("2000ms"),
+		3e3: r("3000ms"),
+		5e3: r("5000ms")
+	},
+	ease: {
+		default: t("cubic-bezier(0.2, 0, 0, 1)"),
+		in: t("cubic-bezier(0.5, 0, 1, 1)"),
+		out: t("cubic-bezier(0, 0, 0.2, 1)"),
+		"in-out": t("cubic-bezier(0.4, 0, 0.2, 1)", "Symmetric: both the start and the end are eased. Looping animations that cross the track (an indeterminate VProgressLinear).")
+	}
+};
+//#endregion
+export { c as primitives };
+
+//# sourceMappingURL=primitives.js.map

package/dist/tokens/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","names":[],"sources":["../../src/tokens/primitives.ts"],"sourcesContent":["/**\n * The raw material: the colour palettes and the numeric scales the whole design system is\n * built out of.\n *\n * Nothing here is used by a component directly. A component asks for \"the accent colour\"\n * or \"the page background\", and it is those ROLES, defined alongside this file, that point\n * at a step of a palette. Keeping the two apart is what makes a theme possible at all: a\n * dark theme moves the roles, and never the palette.\n *\n * The colours are written in OKLCH, a way of describing a colour by how bright it LOOKS\n * rather than by how much of each primary it mixes. Two consequences matter here: a step\n * of a palette is as light as the same step of any other, and mixing two of these colours\n * passes through the shades one would expect rather than through grey.\n *\n * The palettes themselves come from Tailwind CSS 4, family for family and step for step, so\n * that anyone already used to them recognizes the shades. There are exactly five of them,\n * and they are exactly the five a role points at: gray for the surfaces, the text and the\n * borders, indigo for the accent, and red, green and amber for danger, success and warning.\n *\n * The design system ships nothing it does not paint with, and that is a deliberate limit\n * rather than an oversight: a palette costs eleven custom properties in every page that\n * loads the stylesheet, whether or not anything reads them. An application wanting a sixth\n * colour declares its own eleven steps — under its own name, in its own stylesheet — and\n * points the role at them. That is one unlayered rule, it needs no release, and it is what\n * the documentation site does for its violet accent.\n */\nimport {\n  color,\n  cubicBezier,\n  dimension,\n  duration,\n  fontFamily,\n  fontWeight,\n  shadow,\n  type TokenGroup,\n} from './types'\n\nconst palette = (values: Record<string, string>): TokenGroup =>\n  Object.fromEntries(Object.entries(values).map(([step, value]) => [step, color(value)]))\n\nexport const primitives = {\n  color: {\n    white: color('oklch(100% 0 0)'),\n    black: color('oklch(0% 0 0)'),\n    red: palette({\n      '50': 'oklch(97.1% 0.013 17.38)',\n      '100': 'oklch(93.6% 0.032 17.717)',\n      '200': 'oklch(88.5% 0.062 18.334)',\n      '300': 'oklch(80.8% 0.114 19.571)',\n      '400': 'oklch(70.4% 0.191 22.216)',\n      '500': 'oklch(63.7% 0.237 25.331)',\n      '600': 'oklch(57.7% 0.245 27.325)',\n      '700': 'oklch(50.5% 0.213 27.518)',\n      '800': 'oklch(44.4% 0.177 26.899)',\n      '900': 'oklch(39.6% 0.141 25.723)',\n      '950': 'oklch(25.8% 0.092 26.042)',\n    }),\n    amber: palette({\n      '50': 'oklch(98.7% 0.022 95.277)',\n      '100': 'oklch(96.2% 0.059 95.617)',\n      '200': 'oklch(92.4% 0.12 95.746)',\n      '300': 'oklch(87.9% 0.169 91.605)',\n      '400': 'oklch(82.8% 0.189 84.429)',\n      '500': 'oklch(76.9% 0.188 70.08)',\n      '600': 'oklch(66.6% 0.179 58.318)',\n      '700': 'oklch(55.5% 0.163 48.998)',\n      '800': 'oklch(47.3% 0.137 46.201)',\n      '900': 'oklch(41.4% 0.112 45.904)',\n      '950': 'oklch(27.9% 0.077 45.635)',\n    }),\n    green: palette({\n      '50': 'oklch(98.2% 0.018 155.826)',\n      '100': 'oklch(96.2% 0.044 156.743)',\n      '200': 'oklch(92.5% 0.084 155.995)',\n      '300': 'oklch(87.1% 0.15 154.449)',\n      '400': 'oklch(79.2% 0.209 151.711)',\n      '500': 'oklch(72.3% 0.219 149.579)',\n      '600': 'oklch(62.7% 0.194 149.214)',\n      '700': 'oklch(52.7% 0.154 150.069)',\n      '800': 'oklch(44.8% 0.119 151.328)',\n      '900': 'oklch(39.3% 0.095 152.535)',\n      '950': 'oklch(26.6% 0.065 152.934)',\n    }),\n    indigo: palette({\n      '50': 'oklch(96.2% 0.018 272.314)',\n      '100': 'oklch(93% 0.034 272.788)',\n      '200': 'oklch(87% 0.065 274.039)',\n      '300': 'oklch(78.5% 0.115 274.713)',\n      '400': 'oklch(67.3% 0.182 276.935)',\n      '500': 'oklch(58.5% 0.233 277.117)',\n      '600': 'oklch(51.1% 0.262 276.966)',\n      '700': 'oklch(45.7% 0.24 277.023)',\n      '800': 'oklch(39.8% 0.195 277.366)',\n      '900': 'oklch(35.9% 0.144 278.697)',\n      '950': 'oklch(25.7% 0.09 281.288)',\n    }),\n    gray: palette({\n      '50': 'oklch(98.5% 0.002 247.839)',\n      '100': 'oklch(96.7% 0.003 264.542)',\n      '200': 'oklch(92.8% 0.006 264.531)',\n      '300': 'oklch(87.2% 0.01 258.338)',\n      '400': 'oklch(70.7% 0.022 261.325)',\n      '500': 'oklch(55.1% 0.027 264.364)',\n      '600': 'oklch(44.6% 0.03 256.802)',\n      '700': 'oklch(37.3% 0.034 259.733)',\n      '800': 'oklch(27.8% 0.033 256.848)',\n      '900': 'oklch(21% 0.034 264.665)',\n      '950': 'oklch(13% 0.028 261.692)',\n    }),\n  },\n  space: {\n    '1': dimension('0.25rem'),\n    '2': dimension('0.5rem'),\n    '3': dimension('0.75rem'),\n    '4': dimension('1rem'),\n    '5': dimension('1.25rem'),\n    '6': dimension('1.5rem'),\n    '7': dimension('2rem'),\n    '8': dimension('2.5rem'),\n    '9': dimension('3rem'),\n    '10': dimension('4rem'),\n    '11': dimension('5rem'),\n    '12': dimension('6rem'),\n  },\n  font: {\n    family: {\n      sans: fontFamily(\n        \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n      ),\n      // The heading typeface. It points at the running one, so out of the box the two are\n      // the same and nothing looks different; giving headings a face of their own is a\n      // matter of overriding this single token. The indirection is what makes the two\n      // decisions independent: replacing `sans` still carries the headings along, whereas\n      // replacing `display` moves the headings alone.\n      display: fontFamily('{font.family.sans}'),\n      mono: fontFamily(\n        \"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace\",\n      ),\n      // The icon font, which the library never bundles: an application that wants icons\n      // drawn from a font loads it itself, as the README explains. Overriding this one\n      // token is what switches the whole system to another cut of Material Symbols.\n      icon: fontFamily(\"'Material Symbols Rounded'\"),\n    },\n    weight: {\n      regular: fontWeight('400'),\n      medium: fontWeight('500'),\n      semibold: fontWeight('600'),\n      bold: fontWeight('700'),\n    },\n    size: {\n      xs: dimension('0.75rem'),\n      sm: dimension('0.875rem'),\n      md: dimension('1rem'),\n      lg: dimension('1.125rem'),\n      xl: dimension('1.25rem'),\n      '2xl': dimension('1.5rem'),\n      '3xl': dimension('1.875rem'),\n      '4xl': dimension('2.25rem'),\n      '5xl': dimension('3rem'),\n    },\n    leading: {\n      none: dimension('1'),\n      tight: dimension('1.25'),\n      snug: dimension('1.4'),\n      normal: dimension('1.5'),\n      relaxed: dimension('1.65'),\n    },\n    tracking: {\n      tight: dimension('-0.015em', 'Tightening for large sizes (display, the top headings)'),\n      wide: dimension('0.05em', 'Letter spacing for all-caps micro labels (overline)'),\n    },\n  },\n  radius: {\n    // Carries a unit although it is zero: these tokens are subtracted from one another to\n    // derive a nested corner (`calc(var(--vectis-radius-surface) - 1px)`), and `calc(0 - 1px)`\n    // is invalid where `calc(0px - 1px)` is not.\n    none: dimension('0px'),\n    xs: dimension('0.125rem'),\n    sm: dimension('0.25rem'),\n    md: dimension('0.375rem'),\n    lg: dimension('0.5rem'),\n    xl: dimension('0.75rem'),\n    '2xl': dimension('1rem'),\n    full: dimension('9999px'),\n  },\n  shadow: {\n    xs: shadow('0 1px 2px 0 oklch(0% 0 0 / 0.05)'),\n    sm: shadow('0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)'),\n    md: shadow('0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)'),\n    lg: shadow('0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)'),\n    xl: shadow('0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)'),\n  },\n  /*\n   * The durations are named after the milliseconds they hold, and that is what lets a\n   * component state the time it actually wants. The roles a transition reaches for (fast,\n   * base, slow) are defined alongside the other roles; the values here are what those roles\n   * point at, and what the long looping animations — a spinner, a skeleton's wave — name\n   * directly, since \"one second\" is the whole point of such a loop and no role could say it\n   * better.\n   *\n   * The steps above a second exist for those loops and for their slowed-down counterparts\n   * under `prefers-reduced-motion`. Without them the same durations come back as arbitrary\n   * multipliers on a shorter token, which is what this scale replaces.\n   */\n  duration: {\n    '0': duration('0ms'),\n    '50': duration('50ms'),\n    '100': duration('100ms'),\n    '150': duration('150ms'),\n    '200': duration('200ms'),\n    '300': duration('300ms'),\n    '400': duration('400ms'),\n    '500': duration('500ms'),\n    '700': duration('700ms'),\n    '1000': duration('1000ms'),\n    '1500': duration('1500ms'),\n    '2000': duration('2000ms'),\n    '3000': duration('3000ms'),\n    '5000': duration('5000ms'),\n  },\n  ease: {\n    default: cubicBezier('cubic-bezier(0.2, 0, 0, 1)'),\n    in: cubicBezier('cubic-bezier(0.5, 0, 1, 1)'),\n    out: cubicBezier('cubic-bezier(0, 0, 0.2, 1)'),\n    'in-out': cubicBezier(\n      'cubic-bezier(0.4, 0, 0.2, 1)',\n      'Symmetric: both the start and the end are eased. Looping animations that cross the track (an indeterminate VProgressLinear).',\n    ),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAqCA,IAAM,KAAW,MACf,OAAO,YAAY,OAAO,QAAQ,CAAM,CAAC,CAAC,KAAK,CAAC,GAAM,OAAW,CAAC,GAAM,EAAM,CAAK,CAAC,CAAC,CAAC,GAE3E,IAAa;CACxB,OAAO;EACL,OAAO,EAAM,iBAAiB;EAC9B,OAAO,EAAM,eAAe;EAC5B,KAAK,EAAQ;GACX,IAAM;GACN,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;EACT,CAAC;EACD,OAAO,EAAQ;GACb,IAAM;GACN,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;EACT,CAAC;EACD,OAAO,EAAQ;GACb,IAAM;GACN,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;EACT,CAAC;EACD,QAAQ,EAAQ;GACd,IAAM;GACN,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;EACT,CAAC;EACD,MAAM,EAAQ;GACZ,IAAM;GACN,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;GACP,KAAO;EACT,CAAC;CACH;CACA,OAAO;EACL,GAAK,EAAU,SAAS;EACxB,GAAK,EAAU,QAAQ;EACvB,GAAK,EAAU,SAAS;EACxB,GAAK,EAAU,MAAM;EACrB,GAAK,EAAU,SAAS;EACxB,GAAK,EAAU,QAAQ;EACvB,GAAK,EAAU,MAAM;EACrB,GAAK,EAAU,QAAQ;EACvB,GAAK,EAAU,MAAM;EACrB,IAAM,EAAU,MAAM;EACtB,IAAM,EAAU,MAAM;EACtB,IAAM,EAAU,MAAM;CACxB;CACA,MAAM;EACJ,QAAQ;GACN,MAAM,EACJ,mFACF;GAMA,SAAS,EAAW,oBAAoB;GACxC,MAAM,EACJ,8EACF;GAIA,MAAM,EAAW,4BAA4B;EAC/C;EACA,QAAQ;GACN,SAAS,EAAW,KAAK;GACzB,QAAQ,EAAW,KAAK;GACxB,UAAU,EAAW,KAAK;GAC1B,MAAM,EAAW,KAAK;EACxB;EACA,MAAM;GACJ,IAAI,EAAU,SAAS;GACvB,IAAI,EAAU,UAAU;GACxB,IAAI,EAAU,MAAM;GACpB,IAAI,EAAU,UAAU;GACxB,IAAI,EAAU,SAAS;GACvB,OAAO,EAAU,QAAQ;GACzB,OAAO,EAAU,UAAU;GAC3B,OAAO,EAAU,SAAS;GAC1B,OAAO,EAAU,MAAM;EACzB;EACA,SAAS;GACP,MAAM,EAAU,GAAG;GACnB,OAAO,EAAU,MAAM;GACvB,MAAM,EAAU,KAAK;GACrB,QAAQ,EAAU,KAAK;GACvB,SAAS,EAAU,MAAM;EAC3B;EACA,UAAU;GACR,OAAO,EAAU,YAAY,wDAAwD;GACrF,MAAM,EAAU,UAAU,qDAAqD;EACjF;CACF;CACA,QAAQ;EAIN,MAAM,EAAU,KAAK;EACrB,IAAI,EAAU,UAAU;EACxB,IAAI,EAAU,SAAS;EACvB,IAAI,EAAU,UAAU;EACxB,IAAI,EAAU,QAAQ;EACtB,IAAI,EAAU,SAAS;EACvB,OAAO,EAAU,MAAM;EACvB,MAAM,EAAU,QAAQ;CAC1B;CACA,QAAQ;EACN,IAAI,EAAO,kCAAkC;EAC7C,IAAI,EAAO,qEAAqE;EAChF,IAAI,EAAO,wEAAwE;EACnF,IAAI,EAAO,0EAA0E;EACrF,IAAI,EAAO,2EAA2E;CACxF;CAaA,UAAU;EACR,GAAK,EAAS,KAAK;EACnB,IAAM,EAAS,MAAM;EACrB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAO,EAAS,OAAO;EACvB,KAAQ,EAAS,QAAQ;EACzB,MAAQ,EAAS,QAAQ;EACzB,KAAQ,EAAS,QAAQ;EACzB,KAAQ,EAAS,QAAQ;EACzB,KAAQ,EAAS,QAAQ;CAC3B;CACA,MAAM;EACJ,SAAS,EAAY,4BAA4B;EACjD,IAAI,EAAY,4BAA4B;EAC5C,KAAK,EAAY,4BAA4B;EAC7C,UAAU,EACR,gCACA,8HACF;CACF;AACF"}

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,236 @@
+export declare const semantic: {
+    color: {
+        surface: import('./types.js').DesignToken;
+        'surface-muted': import('./types.js').DesignToken;
+        'surface-raised': import('./types.js').DesignToken;
+        'surface-overlay': import('./types.js').DesignToken;
+        'surface-sunken': import('./types.js').DesignToken;
+        'surface-inverse': import('./types.js').DesignToken;
+        'surface-skeleton': import('./types.js').DesignToken;
+        'text-on-inverse': import('./types.js').DesignToken;
+        text: import('./types.js').DesignToken;
+        'text-muted': import('./types.js').DesignToken;
+        'text-subtle': import('./types.js').DesignToken;
+        'text-on-accent': import('./types.js').DesignToken;
+        'text-on-warning': import('./types.js').DesignToken;
+        border: import('./types.js').DesignToken;
+        'border-strong': import('./types.js').DesignToken;
+        accent: import('./types.js').DesignToken;
+        'accent-hover': import('./types.js').DesignToken;
+        'accent-active': import('./types.js').DesignToken;
+        'accent-surface': import('./types.js').DesignToken;
+        'accent-border': import('./types.js').DesignToken;
+        'accent-text': import('./types.js').DesignToken;
+        danger: import('./types.js').DesignToken;
+        'danger-hover': import('./types.js').DesignToken;
+        'danger-active': import('./types.js').DesignToken;
+        'danger-surface': import('./types.js').DesignToken;
+        'danger-border': import('./types.js').DesignToken;
+        'danger-text': import('./types.js').DesignToken;
+        success: import('./types.js').DesignToken;
+        'success-hover': import('./types.js').DesignToken;
+        'success-active': import('./types.js').DesignToken;
+        'success-surface': import('./types.js').DesignToken;
+        'success-border': import('./types.js').DesignToken;
+        'success-text': import('./types.js').DesignToken;
+        warning: import('./types.js').DesignToken;
+        'warning-hover': import('./types.js').DesignToken;
+        'warning-active': import('./types.js').DesignToken;
+        'warning-surface': import('./types.js').DesignToken;
+        'warning-border': import('./types.js').DesignToken;
+        'warning-text': import('./types.js').DesignToken;
+        backdrop: import('./types.js').DesignToken;
+        'event-surface': import('./types.js').DesignToken;
+        'event-border': import('./types.js').DesignToken;
+        'event-text': import('./types.js').DesignToken;
+    };
+    /**
+     * The typography, described by role rather than by measurement: a heading, a subtitle,
+     * a caption, a piece of code.
+     *
+     * Each role is a COMPLETE recipe — a size, a weight, the space between lines, and where
+     * it matters the space between letters. Asking for a role therefore settles every one of
+     * those at once, and two pieces of text in the same role cannot drift apart. It is what
+     * the typography component renders, and what the components' own stylesheets ask for.
+     */
+    text: {
+        family: import('./types.js').DesignToken;
+        'family-heading': import('./types.js').DesignToken;
+        'family-code': import('./types.js').DesignToken;
+        display: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+            tracking: import('./types.js').DesignToken;
+        };
+        'heading-1': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+            tracking: import('./types.js').DesignToken;
+        };
+        'heading-2': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+            tracking: import('./types.js').DesignToken;
+        };
+        'heading-3': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        'heading-4': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        subtitle: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        /**
+         * The introduction that opens a page or a section, one step above the running text.
+         *
+         * It shares `body-lg`'s generous leading rather than taking a tighter one: a lead is read
+         * as prose, not as a heading, and the two therefore sit in the same column without the
+         * rhythm changing under the reader between the first paragraph and the second.
+         */
+        'body-xl': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        'body-lg': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        'body-md': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        'body-sm': {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        label: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        caption: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        overline: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+            tracking: import('./types.js').DesignToken;
+        };
+        code: {
+            size: import('./types.js').DesignToken;
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+        control: {
+            weight: import('./types.js').DesignToken;
+            leading: import('./types.js').DesignToken;
+        };
+    };
+    radius: {
+        interactive: import('./types.js').DesignToken;
+        surface: import('./types.js').DesignToken;
+        overlay: import('./types.js').DesignToken;
+        pill: import('./types.js').DesignToken;
+    };
+    /**
+     * How long a change takes, described by what it is: the immediate feedback of a control
+     * under the pointer, the ordinary pace of the design system, a deliberately slower move.
+     *
+     * These three are what a `transition` reaches for. Motion does not vary from one theme to
+     * the next, so unlike the colours they are stated once and never restated.
+     */
+    duration: {
+        fast: import('./types.js').DesignToken;
+        base: import('./types.js').DesignToken;
+        slow: import('./types.js').DesignToken;
+    };
+    focus: {
+        'ring-color': import('./types.js').DesignToken;
+        'ring-width': import('./types.js').DesignToken;
+        'ring-offset': import('./types.js').DesignToken;
+    };
+    control: {
+        'height-xs': import('./types.js').DesignToken;
+        'height-sm': import('./types.js').DesignToken;
+        'height-md': import('./types.js').DesignToken;
+        'height-lg': import('./types.js').DesignToken;
+        'height-xl': import('./types.js').DesignToken;
+        'border-width': import('./types.js').DesignToken;
+        'size-check': import('./types.js').DesignToken;
+        'size-check-mark': import('./types.js').DesignToken;
+        'size-check-dot': import('./types.js').DesignToken;
+        'size-switch-w': import('./types.js').DesignToken;
+        'size-switch-h': import('./types.js').DesignToken;
+        'action-size-sm': import('./types.js').DesignToken;
+        'action-size-md': import('./types.js').DesignToken;
+        'action-size-lg': import('./types.js').DesignToken;
+        'size-slider-track': import('./types.js').DesignToken;
+        'size-slider-thumb': import('./types.js').DesignToken;
+        'size-slider-length': import('./types.js').DesignToken;
+        'size-slider-field': import('./types.js').DesignToken;
+        'size-carousel-block': import('./types.js').DesignToken;
+        'size-carousel-indicator': import('./types.js').DesignToken;
+        'size-carousel-indicator-active': import('./types.js').DesignToken;
+        'size-combobox-list-max-block': import('./types.js').DesignToken;
+        'size-menu-min': import('./types.js').DesignToken;
+        'size-menu-max': import('./types.js').DesignToken;
+        'size-progress-linear-thickness': import('./types.js').DesignToken;
+        'size-progress-linear-length': import('./types.js').DesignToken;
+        'size-progress-circular-diameter': import('./types.js').DesignToken;
+        'size-progress-circular-thickness': import('./types.js').DesignToken;
+        'size-skeleton-surface': import('./types.js').DesignToken;
+        'size-toast-width': import('./types.js').DesignToken;
+        'size-snackbar-min': import('./types.js').DesignToken;
+        'size-snackbar-max': import('./types.js').DesignToken;
+        'size-badge-h': import('./types.js').DesignToken;
+        'size-badge-dot': import('./types.js').DesignToken;
+        'size-avatar-ring': import('./types.js').DesignToken;
+        'size-date-picker-cell': import('./types.js').DesignToken;
+        'size-date-picker-dot': import('./types.js').DesignToken;
+        'size-date-picker-nav-min': import('./types.js').DesignToken;
+        'size-tab-indicator': import('./types.js').DesignToken;
+        'size-table-search': import('./types.js').DesignToken;
+        'size-time-picker-dial': import('./types.js').DesignToken;
+        'size-time-picker-number': import('./types.js').DesignToken;
+        'size-time-picker-center': import('./types.js').DesignToken;
+        'size-time-picker-hand': import('./types.js').DesignToken;
+        'size-time-picker-hand-minor': import('./types.js').DesignToken;
+        'size-time-input-list-max-block': import('./types.js').DesignToken;
+        'size-file-picker-min-block': import('./types.js').DesignToken;
+        'size-file-picker-icon': import('./types.js').DesignToken;
+        'size-file-picker-thumb': import('./types.js').DesignToken;
+        'size-calendar-hour': import('./types.js').DesignToken;
+        'size-calendar-gutter': import('./types.js').DesignToken;
+        'size-calendar-tick': import('./types.js').DesignToken;
+        'size-calendar-edge': import('./types.js').DesignToken;
+        'size-calendar-day-min': import('./types.js').DesignToken;
+        'size-calendar-handle': import('./types.js').DesignToken;
+        'size-calendar-allday-lane': import('./types.js').DesignToken;
+        'size-calendar-allday-max': import('./types.js').DesignToken;
+        'size-calendar-now-dot': import('./types.js').DesignToken;
+        'size-calendar-month-cell': import('./types.js').DesignToken;
+        'size-calendar-year-cell': import('./types.js').DesignToken;
+    };
+    icon: {
+        'size-sm': import('./types.js').DesignToken;
+        'size-md': import('./types.js').DesignToken;
+        'size-lg': import('./types.js').DesignToken;
+    };
+};

package/dist/tokens/semantic.js

@@ -0,0 +1,219 @@
+import { color as e, dimension as t, duration as n, fontFamily as r, fontWeight as i } from "./types.js";
+//#region src/tokens/semantic.ts
+var a = {
+	color: {
+		surface: e("{color.white}", "The default page background"),
+		"surface-muted": e("{color.gray.100}", "A muted background (secondary areas)"),
+		"surface-raised": e("{color.white}", "Raised surfaces: cards"),
+		"surface-overlay": e("{color.white}", "Floating surfaces: dialogs, popovers, menus"),
+		"surface-sunken": e("{color.gray.50}", "Sunken surfaces: wells, code areas"),
+		"surface-inverse": e("{color.gray.900}", "Inverted-contrast surfaces: tooltips"),
+		"surface-skeleton": e("{color.gray.200}", "The background of the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS"),
+		"text-on-inverse": e("{color.white}", "Text set on an inverted surface"),
+		text: e("{color.gray.900}"),
+		"text-muted": e("{color.gray.600}"),
+		"text-subtle": e("{color.gray.500}", "Placeholders, disabled text"),
+		"text-on-accent": e("{color.white}", "Text set on an accent/danger/success background"),
+		"text-on-warning": e("{color.gray.950}", "Text set on a solid warning background (amber too light for white)"),
+		border: e("{color.gray.200}"),
+		"border-strong": e("{color.gray.300}", "The borders of form controls"),
+		accent: e("{color.indigo.600}"),
+		"accent-hover": e("{color.indigo.700}"),
+		"accent-active": e("{color.indigo.800}"),
+		"accent-surface": e("{color.indigo.50}", "A tinted accent background (badges, selections)"),
+		"accent-border": e("{color.indigo.200}"),
+		"accent-text": e("{color.indigo.700}", "Accent text on a neutral or tinted background"),
+		danger: e("{color.red.600}"),
+		"danger-hover": e("{color.red.700}"),
+		"danger-active": e("{color.red.800}"),
+		"danger-surface": e("{color.red.50}"),
+		"danger-border": e("{color.red.200}"),
+		"danger-text": e("{color.red.700}"),
+		success: e("{color.green.700}"),
+		"success-hover": e("{color.green.800}"),
+		"success-active": e("{color.green.900}"),
+		"success-surface": e("{color.green.50}"),
+		"success-border": e("{color.green.200}"),
+		"success-text": e("{color.green.800}"),
+		warning: e("{color.amber.600}"),
+		"warning-hover": e("{color.amber.700}"),
+		"warning-active": e("{color.amber.800}"),
+		"warning-surface": e("{color.amber.50}"),
+		"warning-border": e("{color.amber.200}"),
+		"warning-text": e("{color.amber.900}"),
+		backdrop: e("oklch(0% 0 0 / 0.45)", "The veil behind modal dialogs"),
+		"event-surface": e("oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))", "The face of a calendar event that carries no colour of its own"),
+		"event-border": e("oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))", "The edge of that event, and the bar marking its leading side"),
+		"event-text": e("oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))", "The title written on that face")
+	},
+	text: {
+		family: r("{font.family.sans}", "The font of all the design system text"),
+		"family-heading": r("{font.family.display}", "The font of the display and heading roles; identical to the running font until it is overridden"),
+		"family-code": r("{font.family.mono}", "The font of code content (the code variant, VInputOTP)"),
+		display: {
+			size: t("{font.size.5xl}"),
+			weight: i("{font.weight.bold}"),
+			leading: t("{font.leading.none}"),
+			tracking: t("{font.tracking.tight}")
+		},
+		"heading-1": {
+			size: t("{font.size.4xl}"),
+			weight: i("{font.weight.bold}"),
+			leading: t("{font.leading.tight}"),
+			tracking: t("{font.tracking.tight}")
+		},
+		"heading-2": {
+			size: t("{font.size.2xl}"),
+			weight: i("{font.weight.semibold}"),
+			leading: t("{font.leading.tight}"),
+			tracking: t("{font.tracking.tight}")
+		},
+		"heading-3": {
+			size: t("{font.size.lg}"),
+			weight: i("{font.weight.semibold}"),
+			leading: t("{font.leading.snug}")
+		},
+		"heading-4": {
+			size: t("{font.size.md}"),
+			weight: i("{font.weight.semibold}"),
+			leading: t("{font.leading.snug}")
+		},
+		subtitle: {
+			size: t("{font.size.sm}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.normal}")
+		},
+		"body-xl": {
+			size: t("{font.size.lg}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.relaxed}")
+		},
+		"body-lg": {
+			size: t("{font.size.md}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.relaxed}")
+		},
+		"body-md": {
+			size: t("{font.size.sm}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.normal}")
+		},
+		"body-sm": {
+			size: t("{font.size.xs}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.normal}")
+		},
+		label: {
+			size: t("{font.size.sm}"),
+			weight: i("{font.weight.medium}"),
+			leading: t("{font.leading.snug}")
+		},
+		caption: {
+			size: t("{font.size.xs}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.snug}")
+		},
+		overline: {
+			size: t("{font.size.xs}"),
+			weight: i("{font.weight.medium}"),
+			leading: t("{font.leading.snug}"),
+			tracking: t("{font.tracking.wide}")
+		},
+		code: {
+			size: t("{font.size.sm}"),
+			weight: i("{font.weight.regular}"),
+			leading: t("{font.leading.normal}")
+		},
+		control: {
+			weight: i("{font.weight.medium}"),
+			leading: t("{font.leading.none}")
+		}
+	},
+	radius: {
+		interactive: t("{radius.md}", "Buttons, inputs, controls"),
+		surface: t("{radius.lg}", "Cards, alerts"),
+		overlay: t("{radius.xl}", "Dialogs, popovers, menus"),
+		pill: t("{radius.full}")
+	},
+	duration: {
+		fast: n("{duration.150}", "Colour and border changes on hover, focus, press"),
+		base: n("{duration.200}", "The default: a panel opening, a value moving"),
+		slow: n("{duration.300}", "Movements large enough to be followed by the eye")
+	},
+	focus: {
+		"ring-color": e("{color.indigo.500}"),
+		"ring-width": t("2px"),
+		"ring-offset": t("2px")
+	},
+	control: {
+		"height-xs": t("1.5rem"),
+		"height-sm": t("2rem"),
+		"height-md": t("2.5rem"),
+		"height-lg": t("3rem"),
+		"height-xl": t("3.5rem"),
+		"border-width": t("2px", "The border of checkable controls (VCheckbox, VRadio)"),
+		"size-check": t("1.25rem", "The box of checkable controls (VCheckbox, VRadio)"),
+		"size-check-mark": t("0.875rem", "VCheckbox's SVG tick"),
+		"size-check-dot": t("0.5rem", "VRadio's inner dot"),
+		"size-switch-w": t("2.5rem", "The width of VSwitch's track"),
+		"size-switch-h": t("1.25rem", "The height of VSwitch's track"),
+		"action-size-sm": t("1.25rem", "The inner buttons of sm input fields (clear, a clickable icon)"),
+		"action-size-md": t("1.5rem", "The inner buttons of md input fields (clear, a clickable icon)"),
+		"action-size-lg": t("1.75rem", "The inner buttons of lg input fields (clear, a clickable icon)"),
+		"size-slider-track": t("0.375rem", "The thickness of VSlider's track"),
+		"size-slider-thumb": t("1.25rem", "The diameter of VSlider's thumb"),
+		"size-slider-length": t("10rem", "The default length of a vertical VSlider"),
+		"size-slider-field": t("5rem", "The width of VSlider's number fields"),
+		"size-carousel-block": t("24rem", "The default block size of VCarousel's viewport. Load-bearing in the vertical orientation: a percentage flex-basis has no definite reference on the block axis, and every slide would collapse onto its content without it"),
+		"size-carousel-indicator": t("0.625rem", "The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)"),
+		"size-carousel-indicator-active": t("1.25rem", "The main-axis size of the ACTIVE VCarousel indicator, which stretches from a dot into a pill"),
+		"size-combobox-list-max-block": t("18rem", "The maximum height of VCombobox's list panel (the scrolling area)"),
+		"size-menu-min": t("11rem", "The minimum width of VMenu's panel"),
+		"size-menu-max": t("20rem", "The maximum width of VMenu's panel"),
+		"size-progress-linear-thickness": t("0.25rem", "The default thickness of VProgressLinear's bar (4px)"),
+		"size-progress-linear-length": t("10rem", "The default length of a vertical VProgressLinear (overridable through `height`)"),
+		"size-progress-circular-diameter": t("3rem", "The default diameter of VProgressCircular"),
+		"size-progress-circular-thickness": t("0.25rem", "The default stroke thickness of VProgressCircular (4px)"),
+		"size-skeleton-surface": t("6rem", "The default height of a surface-shaped VSkeletonLoader — a card, an image (96px)"),
+		"size-toast-width": t("22rem", "The default width of a toast"),
+		"size-snackbar-min": t("18rem", "The minimum width of a snackbar (288px)"),
+		"size-snackbar-max": t("36rem", "The maximum width of a snackbar (576px)"),
+		"size-badge-h": t("1.25rem", "The height of VBadge (the pill)"),
+		"size-badge-dot": t("0.625rem", "The diameter of VBadge in dot mode"),
+		"size-avatar-ring": t("2px", "The separating ring of stacked Avatars (VAvatarGroup)"),
+		"size-date-picker-cell": t("2.5rem", "The side (height/width) of a VDatePicker day cell"),
+		"size-date-picker-dot": t("0.25rem", "The diameter of a VDatePicker event dot"),
+		"size-date-picker-nav-min": t("5.375rem", "The minimum width of VDatePicker's month/year picker buttons (≈86px)"),
+		"size-tab-indicator": t("2px", "The thickness of the active tab indicator (VTabs, flat/outlined)"),
+		"size-table-search": t("16rem", "The width of VDataTable's search field"),
+		"size-time-picker-dial": t("16rem", "The diameter of VTimePicker's clock face (the M3 spec)"),
+		"size-time-picker-number": t("3rem", "A numeral cell on VTimePicker's face, and the hand's dot on a marker"),
+		"size-time-picker-center": t("0.5rem", "The centre dot of VTimePicker's face"),
+		"size-time-picker-hand": t("2px", "The thickness of the hand on VTimePicker's face"),
+		"size-time-picker-hand-minor": t("1rem", "The dot of VTimePicker's hand on a minute off the 5-minute markers"),
+		"size-time-input-list-max-block": t("18rem", "The maximum height of VTimeInput's list panel (the scrolling area)"),
+		"size-file-picker-min-block": t("10rem", "The minimum height of VFilePicker's drop zone — icon, two lines, separator and button"),
+		"size-file-picker-icon": t("2.5rem", "The large icon at the top of VFilePicker's drop zone"),
+		"size-file-picker-thumb": t("2.5rem", "The thumbnail square of a VFilePicker preview row (an image, or its type icon)"),
+		"size-calendar-hour": t("4rem", "The height of one hour in VCalendar's time grid"),
+		"size-calendar-gutter": t("4.5rem", "The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line"),
+		"size-calendar-tick": t("0.375rem", "How far an hour's rule runs back into VCalendar's gutter, tying the label to its line"),
+		"size-calendar-edge": t("3rem", "The strip at the side of VCalendar that pages the view when a dragged event rests on it"),
+		"size-calendar-day-min": t("5rem", "The width a VCalendar day column may not go below, past which the grid scrolls"),
+		"size-calendar-handle": t("0.5rem", "The strip along a VCalendar card's bottom edge that its end is dragged by"),
+		"size-calendar-allday-lane": t("1.5rem", "One lane of VCalendar's all-day band"),
+		"size-calendar-allday-max": t("7rem", "The height past which that band scrolls instead of growing"),
+		"size-calendar-now-dot": t("0.625rem", "The dot on VCalendar's current-time line"),
+		"size-calendar-month-cell": t("8.5rem", "The minimum height of a day in VCalendar's month view"),
+		"size-calendar-year-cell": t("1.5rem", "The side of a day square in the mini-months of VCalendar's year view")
+	},
+	icon: {
+		"size-sm": t("1rem", "16px icons"),
+		"size-md": t("1.25rem", "20px icons"),
+		"size-lg": t("1.5rem", "24px icons")
+	}
+};
+//#endregion
+export { a as semantic };
+
+//# sourceMappingURL=semantic.js.map