@loidolt/theme-tokens 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,50 +1,7 @@
-// src/contrast.ts
-var contrastRequirements = {
-  AA: { normal: 4.5, large: 3 },
-  AAA: { normal: 7, large: 4.5 }
-};
-var channels = (hex, caller) => {
-  const match = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(hex.trim());
-  if (!match) throw new RangeError(`${caller}: invalid hex colour ${JSON.stringify(hex)}`);
-  const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join("") : match[1];
-  return [0, 2, 4].map((index) => parseInt(digits.slice(index, index + 2), 16));
-};
-var luminanceOf = (hex, caller) => {
-  const [r, g, b] = channels(hex, caller).map((channel) => channel / 255).map((channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-};
-function getLuminance(hex) {
-  return luminanceOf(hex, "getLuminance");
-}
-function getContrastRatio(foreground, background) {
-  const [high, low] = [
-    luminanceOf(foreground, "getContrastRatio"),
-    luminanceOf(background, "getContrastRatio")
-  ].sort((a, b) => b - a);
-  return (high + 0.05) / (low + 0.05);
-}
-function meetsContrast(foreground, background, { level = "AA", size = "normal" } = {}) {
-  return getContrastRatio(foreground, background) >= contrastRequirements[level][size];
-}
-function validateContrast(foreground, background) {
-  const ratio = getContrastRatio(foreground, background);
-  return {
-    ratio,
-    ratioString: `${ratio.toFixed(2)}:1`,
-    passesAANormal: ratio >= contrastRequirements.AA.normal,
-    passesAALarge: ratio >= contrastRequirements.AA.large,
-    passesAAANormal: ratio >= contrastRequirements.AAA.normal,
-    passesAAALarge: ratio >= contrastRequirements.AAA.large
-  };
-}
-function getContrastTextColor(background, { dark = "#20231d", light = "#f5f2e9" } = {}) {
-  return getContrastRatio(dark, background) >= getContrastRatio(light, background) ? dark : light;
-}
-
-// src/index.ts
+// src/tokens.ts
 var ref = (name) => ({ $ref: `--loidolt-${name}` });
 var isRef = (value) => typeof value === "object" && value !== null && "$ref" in value;
-var kebab = (value) => value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+var kebab = (value) => value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/([a-z])(\d)/g, "$1-$2");
 var cssVarName = (path) => `--loidolt-${kebab(path.join("-"))}`;
 var colors = {
   paper: "#ebe7dc",
@@ -66,7 +23,60 @@ var colors = {
   errorDark: "#7f1f1a",
   success: "#3f5139",
   warning: "#7c4d17",
-  info: "#265162"
+  info: "#265162",
+  /**
+   * Categorical series for charts, in the order they are handed out. Earth tones that stay apart
+   * from each other and hold 3:1 against every surface, so a line or bar needs no outline.
+   */
+  series: {
+    1: "#c65224",
+    2: "#2f6f8a",
+    3: "#5b7a3a",
+    4: "#9a6a12",
+    5: "#7a4a78",
+    6: "#4d5a6a",
+    7: "#2f7d6d",
+    8: "#8a5a3c"
+  },
+  /** One warm hue from little to most: heatmaps, choropleths, cluster sizes. */
+  sequential: {
+    1: "#ecd3b8",
+    2: "#dea67a",
+    3: "#c97a45",
+    4: "#a4521f",
+    5: "#6e3314"
+  },
+  /** Below and above a midpoint: slate for below, orange for above, the neutral paper between. */
+  diverging: {
+    1: "#265162",
+    2: "#4f8196",
+    3: "#9cbac3",
+    4: "#ddd7c9",
+    5: "#e0a986",
+    6: "#c96f3d",
+    7: "#9b3a17"
+  },
+  /**
+   * Code highlighting. Code sits on the inverse surface — dark in the light theme — so these are
+   * the light inks; the dark theme's code block is light, and takes dark ones.
+   */
+  syntax: {
+    keyword: "#f0895c",
+    string: "#a3c197",
+    comment: "#b5ae9c",
+    constant: "#e2b56c",
+    function: "#8fc0d4",
+    parameter: "#d3a8cf",
+    punctuation: "#d8d2c4"
+  },
+  /** Basemap fills. Quiet by design: the data drawn on top carries the colour. */
+  map: {
+    water: "#b9cdd3",
+    park: "#d3d8bd",
+    road: "#f5f2e9",
+    roadMajor: "#ffffff",
+    building: "#d8d3c7"
+  }
 };
 var typography = {
   display: '"Jost", "Avenir Next", sans-serif',
@@ -181,7 +191,107 @@ var semanticDefs = {
   textInfo: ref("color-info"),
   focusRing: ref("color-orange"),
   shadowColor: ref("color-deep"),
-  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent)"
+  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent)",
+  /*
+   * Data visualisation. `chart1`…`chart8` are categorical series; the ramps run from "least" (1)
+   * to "most" (last), whatever the theme; the diverging midpoint (4) is the neutral.
+   */
+  chart1: ref("color-series-1"),
+  chart2: ref("color-series-2"),
+  chart3: ref("color-series-3"),
+  chart4: ref("color-series-4"),
+  chart5: ref("color-series-5"),
+  chart6: ref("color-series-6"),
+  chart7: ref("color-series-7"),
+  chart8: ref("color-series-8"),
+  chartSequential1: ref("color-sequential-1"),
+  chartSequential2: ref("color-sequential-2"),
+  chartSequential3: ref("color-sequential-3"),
+  chartSequential4: ref("color-sequential-4"),
+  chartSequential5: ref("color-sequential-5"),
+  chartDiverging1: ref("color-diverging-1"),
+  chartDiverging2: ref("color-diverging-2"),
+  chartDiverging3: ref("color-diverging-3"),
+  chartDiverging4: ref("color-diverging-4"),
+  chartDiverging5: ref("color-diverging-5"),
+  chartDiverging6: ref("color-diverging-6"),
+  chartDiverging7: ref("color-diverging-7"),
+  /** Gains and losses: candlestick up/down, positive/negative bars. */
+  chartPositive: ref("color-success"),
+  chartNegative: ref("color-error"),
+  /* Basemap roles, read by the map style generator. */
+  mapLand: ref("color-paper"),
+  mapWater: ref("color-map-water"),
+  mapPark: ref("color-map-park"),
+  mapRoad: ref("color-map-road"),
+  mapRoadMajor: ref("color-map-road-major"),
+  mapBuilding: ref("color-map-building"),
+  mapBoundary: ref("color-line-strong"),
+  mapLabel: ref("color-deep"),
+  mapLabelHalo: ref("color-panel"),
+  /* Code highlighting, on the inverse surface where code blocks sit. */
+  syntaxKeyword: ref("color-syntax-keyword"),
+  syntaxString: ref("color-syntax-string"),
+  syntaxComment: ref("color-syntax-comment"),
+  syntaxConstant: ref("color-syntax-constant"),
+  syntaxFunction: ref("color-syntax-function"),
+  syntaxParameter: ref("color-syntax-parameter"),
+  syntaxPunctuation: ref("color-syntax-punctuation")
+};
+var roleDefs = {
+  /** Buttons, boxed fields, toggle groups, switches, swatches, tooltips. */
+  radiusControl: ref("border-radius"),
+  /** Rows and items inside a rounded container (menu items, list rows, filmstrip frames). */
+  radiusInner: "0px",
+  /** Cards, panels, tables, alerts, code blocks, thumbnails. */
+  radiusSurface: ref("border-radius"),
+  /** Dialogs, popovers, menus, toasts. Drawers stay square: they are anchored to an edge. */
+  radiusOverlay: ref("border-radius"),
+  /** Width of the keyboard focus ring. WCAG 2.4.13 wants at least 2px; keep it there. */
+  strokeFocus: "2px",
+  /** Selected-tab, active-nav and selected-row indicators. */
+  strokeIndicator: "2px",
+  /** The status bar on the leading edge of an alert or toast. */
+  strokeAccent: "3px",
+  /*
+   * Density. Discrete roles rather than one runtime multiplier: computed values stay readable in
+   * devtools, and a preset can move one role without dragging the rest. `definePreset({ density })`
+   * scales them all at build time when one knob is what you want.
+   */
+  padControlX: "0.85rem",
+  padControlXSm: "0.65rem",
+  padControlXLg: "1.2rem",
+  padControlY: "0.5rem",
+  padControlYSm: "0.38rem",
+  /** Underlined fields: vertical, then horizontal. Boxed fields use `pad-control-x-sm` inline. */
+  padField: "0.45rem 0.15rem",
+  padItem: "0.65rem 0.55rem",
+  padCell: "0.7rem 0.8rem",
+  padCallout: "0.8rem 1rem",
+  padSurface: ref("space-4"),
+  padOverlay: "1rem 1.25rem",
+  padPopover: "0.45rem",
+  padBarX: "1.35rem",
+  padPane: "1.25rem",
+  padPage: ref("space-6"),
+  /** Between a field's label, control and help text. */
+  gapField: "0.35rem",
+  /** Between the buttons of a dialog footer or an empty state. */
+  gapActions: ref("space-2"),
+  /*
+   * Voice: how labels and controls speak. The default shouts — small uppercase utility type,
+   * tracked out — and a preset can bring it back to sentence case. Tracking roles keep a unit
+   * because stylesheets derive from them with `calc()`.
+   */
+  labelTransform: "uppercase",
+  labelTracking: ref("font-tracking-utility"),
+  labelTrackingWide: ref("font-tracking-wide"),
+  labelWeight: "400",
+  controlTransform: "uppercase",
+  controlTracking: "0.08em",
+  controlWeight: "400",
+  headingWeight: "500",
+  strongWeight: "600"
 };
 var PRIMITIVE_GROUPS = [
   ["color", colors],
@@ -204,6 +314,7 @@ function flattenTokens() {
   const out = [];
   for (const [prefix, tree] of PRIMITIVE_GROUPS) flattenInto([prefix], tree, out);
   for (const [name, value] of Object.entries(semanticDefs)) out.push([cssVarName([name]), value]);
+  for (const [name, value] of Object.entries(roleDefs)) out.push([cssVarName([name]), value]);
   return out;
 }
 function generateCss() {
@@ -221,12 +332,14 @@ function generateCss() {
 var resolved = new Map(
   flattenTokens().filter((entry) => typeof entry[1] === "string")
 );
-var semantic = Object.fromEntries(
-  Object.entries(semanticDefs).map(([name, value]) => [
+var resolveDefs = (defs) => Object.fromEntries(
+  Object.entries(defs).map(([name, value]) => [
     name,
     isRef(value) ? resolved.get(value.$ref) ?? "" : value
   ])
 );
+var semantic = resolveDefs(semanticDefs);
+var roles = resolveDefs(roleDefs);
 var darkSemantic = {
   background: "#161814",
   surface: "#1e211c",
@@ -262,8 +375,115 @@ var darkSemantic = {
   textInfo: "#85b6ca",
   focusRing: "#f0895c",
   shadowColor: "#000000",
-  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent)"
+  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent)",
+  chart1: "#e0672f",
+  chart2: "#6ea5bd",
+  chart3: "#93b287",
+  chart4: "#d9ab63",
+  chart5: "#c49ac0",
+  chart6: "#b8ad96",
+  chart7: "#6fb8a6",
+  chart8: "#c79a78",
+  chartSequential1: "#3a2a1d",
+  chartSequential2: "#6b4225",
+  chartSequential3: "#a4602f",
+  chartSequential4: "#d98a4d",
+  chartSequential5: "#f2bd8a",
+  chartDiverging1: "#85b6ca",
+  chartDiverging2: "#5a8ea3",
+  chartDiverging3: "#35596a",
+  chartDiverging4: "#3a3d34",
+  chartDiverging5: "#7a4428",
+  chartDiverging6: "#bf6a3a",
+  chartDiverging7: "#f0895c",
+  chartPositive: "#93b287",
+  chartNegative: "#e88b81",
+  mapLand: "#161814",
+  mapWater: "#1d2b31",
+  mapPark: "#1f271c",
+  mapRoad: "#2b2e26",
+  mapRoadMajor: "#3a3d34",
+  mapBuilding: "#24271f",
+  mapBoundary: "#787c6b",
+  mapLabel: "#ebe7dc",
+  mapLabelHalo: "#161814",
+  syntaxKeyword: "#a9441d",
+  syntaxString: "#3f5139",
+  syntaxComment: "#5f5b50",
+  syntaxConstant: "#7c4d17",
+  syntaxFunction: "#265162",
+  syntaxParameter: "#7a4a78",
+  syntaxPunctuation: "#474a42"
+};
+var roleVar = (role) => cssVarName([role]);
+var roleValue = (role, scheme = "light") => scheme === "dark" ? darkSemantic[role] : semantic[role];
+function resolveRoles(spec, scheme = "light", read = (role) => roleValue(role, scheme)) {
+  return Object.fromEntries(
+    Object.entries(spec).map(([key, value]) => [
+      key,
+      typeof value === "string" ? read(value) : value.map((role) => read(role))
+    ])
+  );
+}
+var chartRoles = {
+  categorical: ["chart1", "chart2", "chart3", "chart4", "chart5", "chart6", "chart7", "chart8"],
+  sequential: [
+    "chartSequential1",
+    "chartSequential2",
+    "chartSequential3",
+    "chartSequential4",
+    "chartSequential5"
+  ],
+  diverging: [
+    "chartDiverging1",
+    "chartDiverging2",
+    "chartDiverging3",
+    "chartDiverging4",
+    "chartDiverging5",
+    "chartDiverging6",
+    "chartDiverging7"
+  ],
+  positive: "chartPositive",
+  negative: "chartNegative",
+  text: "text",
+  muted: "textMuted",
+  axis: "border",
+  grid: "borderSoft",
+  surface: "surface",
+  background: "background",
+  accent: "accent"
 };
+var mapRoles = {
+  land: "mapLand",
+  water: "mapWater",
+  park: "mapPark",
+  road: "mapRoad",
+  roadMajor: "mapRoadMajor",
+  building: "mapBuilding",
+  boundary: "mapBoundary",
+  label: "mapLabel",
+  labelHalo: "mapLabelHalo",
+  accent: "accent",
+  text: "text",
+  surface: "surface",
+  focus: "focusRing",
+  categorical: chartRoles.categorical,
+  sequential: chartRoles.sequential
+};
+var syntaxRoles = {
+  background: "surfaceInverse",
+  text: "textInverse",
+  keyword: "syntaxKeyword",
+  string: "syntaxString",
+  comment: "syntaxComment",
+  constant: "syntaxConstant",
+  function: "syntaxFunction",
+  parameter: "syntaxParameter",
+  punctuation: "syntaxPunctuation"
+};
+var syntaxColors = (scheme = "light") => resolveRoles(syntaxRoles, scheme);
+var chartColors = (scheme = "light") => resolveRoles(chartRoles, scheme);
+var mapColors = (scheme = "light") => resolveRoles(mapRoles, scheme);
 var darkDeclarations = () => Object.entries(darkSemantic).map(([name, value]) => `  ${cssVarName([name])}: ${value};`);
 function generateDarkCss(scope = "attribute") {
   const body = ["  color-scheme: dark;", ...darkDeclarations()];
@@ -298,30 +518,464 @@ var tokens = {
   breakpoints,
   aspectRatio,
   semantic,
-  darkSemantic
+  darkSemantic,
+  roles
+};
+
+// src/contrast.ts
+var contrastRequirements = {
+  AA: { normal: 4.5, large: 3 },
+  AAA: { normal: 7, large: 4.5 }
+};
+var channels = (hex, caller) => {
+  const match = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(hex.trim());
+  if (!match) throw new RangeError(`${caller}: invalid hex colour ${JSON.stringify(hex)}`);
+  const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join("") : match[1];
+  return [0, 2, 4].map((index) => parseInt(digits.slice(index, index + 2), 16));
+};
+var luminanceOf = (hex, caller) => {
+  const [r, g, b] = channels(hex, caller).map((channel) => channel / 255).map((channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+function getLuminance(hex) {
+  return luminanceOf(hex, "getLuminance");
+}
+function getContrastRatio(foreground, background) {
+  const [high, low] = [
+    luminanceOf(foreground, "getContrastRatio"),
+    luminanceOf(background, "getContrastRatio")
+  ].sort((a, b) => b - a);
+  return (high + 0.05) / (low + 0.05);
+}
+function meetsContrast(foreground, background, { level = "AA", size = "normal" } = {}) {
+  return getContrastRatio(foreground, background) >= contrastRequirements[level][size];
+}
+function validateContrast(foreground, background) {
+  const ratio = getContrastRatio(foreground, background);
+  return {
+    ratio,
+    ratioString: `${ratio.toFixed(2)}:1`,
+    passesAANormal: ratio >= contrastRequirements.AA.normal,
+    passesAALarge: ratio >= contrastRequirements.AA.large,
+    passesAAANormal: ratio >= contrastRequirements.AAA.normal,
+    passesAAALarge: ratio >= contrastRequirements.AAA.large
+  };
+}
+function getContrastTextColor(background, { dark = "#20231d", light = "#f5f2e9" } = {}) {
+  return getContrastRatio(dark, background) >= getContrastRatio(light, background) ? dark : light;
+}
+function contrastPairs(t) {
+  return [
+    ["accent text on background", t.textAccent, t.background, 4.5],
+    ["accent text on surface", t.textAccent, t.surface, 4.5],
+    ["accent text on surface-alt", t.textAccent, t.surfaceAlt, 4.5],
+    ["muted text on background", t.textMuted, t.background, 4.5],
+    ["muted text on surface", t.textMuted, t.surface, 4.5],
+    // The recessed fill a default badge sits on.
+    ["muted text on the sunken surface", t.textMuted, t.surfaceSunken, 4.5],
+    ["body text on background", t.text, t.background, 4.5],
+    ["body text on surface", t.text, t.surface, 4.5],
+    ["inverse text on the inverse surface", t.textInverse, t.surfaceInverse, 4.5],
+    ["on-accent over accent", t.onAccent, t.accent, 4.5],
+    ["on-accent over accent hover", t.onAccent, t.accentHover, 4.5],
+    ["on-danger over danger", t.onDanger, t.danger, 4.5],
+    ["on-danger over danger hover", t.onDanger, t.dangerHover, 4.5],
+    ["on-success over success", t.onSuccess, t.success, 4.5],
+    ["on-warning over warning", t.onWarning, t.warning, 4.5],
+    ["on-info over info", t.onInfo, t.info, 4.5],
+    ["danger text on surface", t.textDanger, t.surface, 4.5],
+    ["danger text on surface-alt", t.textDanger, t.surfaceAlt, 4.5],
+    ["success text on surface", t.textSuccess, t.surface, 4.5],
+    ["warning text on surface", t.textWarning, t.surface, 4.5],
+    ["info text on surface", t.textInfo, t.surface, 4.5],
+    ["control border on the input surface", t.borderControl, t.surfaceInput, 3],
+    ["control border on background", t.borderControl, t.background, 3],
+    ["control border on surface", t.borderControl, t.surface, 3],
+    ["control border on surface-alt", t.borderControl, t.surfaceAlt, 3],
+    ["focus ring on background", t.focusRing, t.background, 3],
+    ["focus ring on surface", t.focusRing, t.surface, 3]
+  ];
+}
+function auditContrast(colors2) {
+  return contrastPairs(colors2).map(([name, foreground, background, required]) => {
+    const ratio = getContrastRatio(foreground, background);
+    return { name, foreground, background, ratio, required, pass: ratio >= required };
+  });
+}
+
+// src/presets/define.ts
+var PRIMITIVE_GROUPS2 = { typography, spacing, sizing, borders, shadows, motion };
+var PRIMITIVE_PREFIX = {
+  typography: "font",
+  spacing: "space",
+  sizing: "size",
+  borders: "border",
+  shadows: "shadow",
+  motion: "motion"
+};
+var flatten = (prefix, tree) => {
+  const out = [];
+  flattenInto([prefix], tree, out);
+  return out;
+};
+var baseState = () => ({
+  primitives: new Map(
+    Object.keys(PRIMITIVE_GROUPS2).flatMap(
+      (group) => flatten(PRIMITIVE_PREFIX[group], PRIMITIVE_GROUPS2[group])
+    )
+  ),
+  roles: { ...roleDefs },
+  light: { ...semanticDefs },
+  dark: { ...darkSemantic }
+});
+var states = /* @__PURE__ */ new WeakMap();
+var NAME = /^[a-z][a-z0-9-]*$/;
+var DENSITY_ROLE = /^(pad|gap)[A-Z]/;
+var LENGTH = /(-?\d*\.?\d+)(rem|px|em)\b/g;
+var round = (value) => String(Number(value.toFixed(4)));
+var scaleLengths = (value, factor) => value.replace(
+  LENGTH,
+  (_, amount, unit) => `${round(parseFloat(amount) * factor)}${unit}`
+);
+var roleName = (name) => cssVarName([name]);
+var cssValue = (value) => isRef(value) ? `var(${value.$ref})` : value;
+var defaultValues = new Map(flattenTokens());
+var resolveIn = (state) => {
+  const lookup = (name) => state.primitives.get(name) ?? defaultValues.get(name);
+  const resolve = (value, seen = /* @__PURE__ */ new Set()) => {
+    if (!isRef(value)) return value;
+    if (seen.has(value.$ref)) throw new Error(`Circular token reference through ${value.$ref}`);
+    const target = lookup(value.$ref);
+    if (target === void 0) throw new Error(`Unknown token reference ${value.$ref}`);
+    return resolve(target, /* @__PURE__ */ new Set([...seen, value.$ref]));
+  };
+  return resolve;
 };
+var assertKnownKeys = (what, given, known) => {
+  for (const key of Object.keys(given ?? {})) {
+    if (!(key in known)) throw new Error(`Unknown ${what} "${key}"`);
+  }
+};
+function definePreset(definition) {
+  const { name, primitives = {}, roles: roles2 = {}, density, colors: colors2, fontImport } = definition;
+  if (!NAME.test(name)) {
+    throw new Error(`Preset name "${name}" must be lowercase letters, digits and dashes`);
+  }
+  assertKnownKeys("primitive group", primitives, PRIMITIVE_GROUPS2);
+  assertKnownKeys("role", roles2, roleDefs);
+  assertKnownKeys("colour role", colors2?.light, semanticDefs);
+  assertKnownKeys("colour role", colors2?.dark, semanticDefs);
+  if (colors2) {
+    const missing = Object.keys(colors2.light).filter((key) => !(key in colors2.dark));
+    if (missing.length) {
+      throw new Error(`Preset "${name}" sets ${missing.join(", ")} for light but not for dark`);
+    }
+  }
+  if (density !== void 0 && !(density >= 0.5 && density <= 1.5)) {
+    throw new Error(`Preset "${name}" density must be between 0.5 and 1.5, got ${density}`);
+  }
+  const parent = definition.extends ? states.get(definition.extends) : baseState();
+  if (!parent) throw new Error(`Preset "${name}" extends something that is not a preset`);
+  const state = {
+    primitives: new Map(parent.primitives),
+    roles: { ...parent.roles },
+    light: { ...parent.light, ...colors2?.light },
+    dark: { ...parent.dark, ...colors2?.dark }
+  };
+  for (const [group, overrides] of Object.entries(primitives)) {
+    for (const [property, value] of flatten(PRIMITIVE_PREFIX[group], overrides)) {
+      if (!state.primitives.has(property)) throw new Error(`Unknown primitive ${property}`);
+      state.primitives.set(property, value);
+    }
+  }
+  const resolve = resolveIn(state);
+  for (const role of Object.keys(state.roles)) {
+    const explicit = roles2[role];
+    if (explicit !== void 0) state.roles[role] = explicit;
+    else if (density !== void 0 && density !== 1 && DENSITY_ROLE.test(role)) {
+      state.roles[role] = scaleLengths(resolve(state.roles[role]), density);
+    }
+  }
+  for (const role of Object.keys(state.roles)) {
+    const value = state.roles[role];
+    if (value === "0" && role.startsWith("stroke")) state.roles[role] = "0px";
+    if (value === "0" && role.endsWith("Tracking")) state.roles[role] = "0em";
+  }
+  const focus = /^([\d.]+)px$/.exec(resolve(state.roles.strokeFocus));
+  if (focus && parseFloat(focus[1]) < 2) {
+    throw new Error(`Preset "${name}" focus ring must stay at least 2px wide (WCAG 2.4.13)`);
+  }
+  const resolveAll = (record) => Object.fromEntries(
+    Object.entries(record).map(([key, value]) => [key, resolve(value)])
+  );
+  const preset = {
+    name,
+    label: definition.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+    description: definition.description,
+    fontImports: [fontImport ?? []].flat(),
+    declarations: {
+      shape: [
+        ...state.primitives,
+        ...Object.entries(state.roles).map(
+          ([role, value]) => [roleName(role), cssValue(value)]
+        )
+      ],
+      light: Object.entries(state.light).map(
+        ([role, value]) => [roleName(role), cssValue(value)]
+      ),
+      dark: Object.entries(state.dark).map(([role, value]) => [roleName(role), value])
+    },
+    resolved: {
+      roles: resolveAll(state.roles),
+      light: resolveAll(state.light),
+      dark: resolveAll(state.dark)
+    }
+  };
+  states.set(preset, state);
+  return preset;
+}
+var block = (selector, lines, indent = "") => [
+  `${indent}${selector} {`,
+  ...lines.map((line) => `${indent}  ${line}`),
+  `${indent}}`
+];
+var declare = (entries) => entries.map(([name, value]) => `${name}: ${value};`);
+var selectors = (name, scope) => {
+  if (scope === "root") {
+    return {
+      shape: ":root",
+      light: ":root:not([data-theme='dark'])",
+      dark: ":root[data-theme='dark']",
+      auto: ":root:root:not([data-theme='light'])"
+    };
+  }
+  const p = `[data-preset='${name}']`;
+  return {
+    shape: p,
+    light: `${p}:not([data-theme='dark'], [data-theme='dark'] *)`,
+    dark: `${p}[data-theme='dark'],
+[data-theme='dark'] ${p}`,
+    auto: `${p}:root:not([data-theme='light']),
+:root:not([data-theme='light']) ${p}:not([data-theme='light'], [data-theme='light'] *)`
+  };
+};
+var comment = (text) => text.replaceAll("*/", "* /");
+function generatePresetCss(preset, options = {}) {
+  const { scope = "attribute", scheme = "light" } = options;
+  const select = selectors(preset.name, scope);
+  const header = [
+    `/* ${comment(`${preset.label} preset${preset.description ? ` \u2014 ${preset.description}` : ""}`)}`,
+    "   Generated by definePreset(). Do not edit directly. */"
+  ];
+  if (scheme === "light") {
+    return `${[
+      ...preset.fontImports.map((url) => `@import url(${JSON.stringify(url)});`),
+      ...header,
+      ...block(select.shape, declare(preset.declarations.shape)),
+      ...block(select.light, declare(preset.declarations.light))
+    ].join("\n")}
+`;
+  }
+  const dark = ["color-scheme: dark;", ...declare(preset.declarations.dark)];
+  const lines = [...header, ...block(select.dark, dark)];
+  if (scheme === "dark-auto") {
+    lines.push(
+      "",
+      "@media (prefers-color-scheme: dark) {",
+      ...block(select.auto.replaceAll("\n", "\n  "), dark, "  "),
+      "}"
+    );
+  }
+  return `${lines.join("\n")}
+`;
+}
+function presetStylesheets(preset) {
+  const files = {};
+  for (const scope of ["attribute", "root"]) {
+    const base = scope === "root" ? `${preset.name}.root` : preset.name;
+    files[`${base}.css`] = generatePresetCss(preset, { scope, scheme: "light" });
+    files[`${base}-dark.css`] = generatePresetCss(preset, { scope, scheme: "dark" });
+    files[`${base}-dark-auto.css`] = generatePresetCss(preset, { scope, scheme: "dark-auto" });
+  }
+  return files;
+}
+
+// src/presets/compact.ts
+var compact = definePreset({
+  name: "compact",
+  label: "Compact",
+  description: "The Loidolt look with tighter padding and smaller controls.",
+  density: 0.75,
+  primitives: {
+    sizing: {
+      // 28px: still above the 24px WCAG 2.5.8 minimum.
+      controlSm: "1.75rem",
+      control: "2.125rem",
+      controlLg: "2.5rem",
+      topbar: "3.25rem",
+      contextbar: "2.25rem"
+    }
+  }
+});
+
+// src/presets/loidolt.ts
+var loidolt = definePreset({
+  name: "loidolt",
+  label: "Loidolt",
+  description: "Square corners, tracked uppercase labels, warm paper and orange."
+});
+
+// src/presets/soft.ts
+var systemSans = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var soft = definePreset({
+  name: "soft",
+  label: "Soft",
+  description: "Rounded corners, sentence-case labels, cool neutrals and a blue accent.",
+  density: 1.15,
+  primitives: {
+    typography: {
+      display: systemSans,
+      utility: systemSans,
+      // Sentence case at 11px is harder to read than uppercase at 11px; give it the extra pixel.
+      size: { xs: "0.75rem" }
+    },
+    borders: { radius: "6px" }
+  },
+  roles: {
+    radiusControl: "6px",
+    radiusInner: "4px",
+    radiusSurface: "8px",
+    radiusOverlay: "10px",
+    labelTransform: "none",
+    labelTracking: "0em",
+    labelTrackingWide: "0.02em",
+    labelWeight: "500",
+    controlTransform: "none",
+    controlTracking: "0em",
+    controlWeight: "500",
+    headingWeight: "600"
+  },
+  colors: {
+    light: {
+      background: "#f4f6f8",
+      surface: "#ffffff",
+      surfaceAlt: "#f8fafc",
+      surfaceSunken: "#e9edf2",
+      surfacePaper: "#ffffff",
+      surfaceInverse: "#1c2430",
+      surfaceInput: "#ffffff",
+      text: "#1c2430",
+      textMuted: "#556070",
+      textInverse: "#f4f6f8",
+      textAccent: "#1d4ed8",
+      border: "#d5dbe3",
+      borderSoft: "#e4e8ee",
+      borderStrong: "#8792a2",
+      borderControl: "#7b8696",
+      borderSunken: "#d5dbe3",
+      accent: "#2563eb",
+      accentHover: "#1d4ed8",
+      onAccent: "#ffffff",
+      danger: "#c62828",
+      dangerHover: "#a51d1d",
+      onDanger: "#ffffff",
+      textDanger: "#b42318",
+      success: "#1f7a4d",
+      onSuccess: "#ffffff",
+      textSuccess: "#1a6a42",
+      warning: "#a15c07",
+      onWarning: "#ffffff",
+      textWarning: "#8a4b06",
+      info: "#0e6b8c",
+      onInfo: "#ffffff",
+      textInfo: "#0b5c78",
+      focusRing: "#2563eb",
+      shadowColor: "#1c2430"
+    },
+    dark: {
+      background: "#11151b",
+      surface: "#181d25",
+      surfaceAlt: "#1e2430",
+      surfaceSunken: "#0c0f13",
+      surfacePaper: "#ffffff",
+      surfaceInverse: "#e6eaf0",
+      surfaceInput: "#1e2430",
+      text: "#e6eaf0",
+      textMuted: "#9aa5b4",
+      textInverse: "#11151b",
+      textAccent: "#8ab4ff",
+      border: "#2d3542",
+      borderSoft: "#232a35",
+      borderStrong: "#5b6677",
+      borderControl: "#6f7a8b",
+      borderSunken: "#1f2630",
+      accent: "#6aa1ff",
+      accentHover: "#8ab4ff",
+      onAccent: "#0c1220",
+      danger: "#f07167",
+      dangerHover: "#f4928a",
+      onDanger: "#11151b",
+      textDanger: "#f59a92",
+      success: "#5cc08a",
+      onSuccess: "#11151b",
+      textSuccess: "#74cf9c",
+      warning: "#e0a24a",
+      onWarning: "#11151b",
+      textWarning: "#e8b468",
+      info: "#5bb5d6",
+      onInfo: "#11151b",
+      textInfo: "#7cc6e2",
+      focusRing: "#8ab4ff",
+      shadowColor: "#000000"
+    }
+  }
+});
+
+// src/presets/index.ts
+var builtInPresets = [loidolt, soft, compact];
+
+// src/index.ts
 var index_default = tokens;
 export {
   aspectRatio,
+  auditContrast,
   borders,
   breakpoints,
+  builtInPresets,
+  chartColors,
+  chartRoles,
   colors,
+  compact,
+  contrastPairs,
   contrastRequirements,
   cssVarName,
   darkSemantic,
   index_default as default,
+  definePreset,
   flattenTokens,
   generateCss,
   generateDarkCss,
+  generatePresetCss,
   getContrastRatio,
   getContrastTextColor,
   getLuminance,
+  loidolt,
+  mapColors,
+  mapRoles,
   meetsContrast,
   motion,
+  presetStylesheets,
+  resolveRoles,
+  roleValue,
+  roleVar,
+  roles,
   semantic,
   shadows,
   sizing,
+  soft,
   spacing,
+  syntaxColors,
+  syntaxRoles,
   tokens,
   typography,
   validateContrast,