@loidolt/theme-tokens 0.7.0 → 0.8.1

package/dist/index.js

@@ -1,47 +1,4 @@
-// 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()}`).replace(/([a-z])(\d)/g, "$1-$2");
@@ -281,6 +238,61 @@ var semanticDefs = {
   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],
   ["font", typography],
@@ -302,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() {
@@ -319,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",
@@ -503,36 +518,461 @@ 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,