@latty-ds/tokens 0.9.0 → 0.10.0

package/dist/configure.d.ts

@@ -46,11 +46,32 @@ interface LattyConfig {
          * referenced independently in your own CSS.
          */
         family?: FontFamilyEntry | FontFamilyEntry[];
+        /**
+         * A single dedicated heading font, resolved to `--lt-typography-fontFamilyHeading`.
+         * `lt-text`'s heading/display variants (`h1`–`h6`, `display-*`) read this
+         * token automatically, falling back to `fontFamilyPrimary` when unset —
+         * the built-in way to do a two-typeface identity without manually
+         * rerouting `--lt-typography-fontFamilySecondary` via hand-written CSS.
+         */
+        heading?: FontFamilyEntry;
     };
     border?: {
         radius?: string;
         width?: BorderWidth;
+        /**
+         * Shifts which neutral palette step `--lt-border-default`/`--lt-border-strong`/
+         * `--lt-border-subtle` resolve to. `'high'` moves them toward a bolder,
+         * higher-contrast step (darker in light mode, lighter in dark mode) without
+         * touching theme-switching machinery.
+         * @default 'default'
+         */
+        contrast?: 'default' | 'high';
     };
+    /**
+     * Set to `'none'` to flatten every `--lt-elevation-N` token (box-shadow) to
+     * `none` in one call, instead of overriding each level individually.
+     */
+    elevation?: 'none';
     /**
      * Controls which semantic token layer is emitted.
      * - `'light'` (default) — light tokens only; ignores OS preference

package/dist/configure.js

@@ -239,6 +239,16 @@ var accessibleTextOn = (bgHex) => {
   const darkContrast = (L + 0.05) / 0.059;
   return whiteContrast >= darkContrast ? "color-white" : "color-neutral-900";
 };
+var BORDER_STEPS = {
+  light: {
+    default: { default: "200", strong: "400", subtle: "100" },
+    high: { default: "400", strong: "600", subtle: "300" }
+  },
+  dark: {
+    default: { default: "700", strong: "500", subtle: "800" },
+    high: { default: "500", strong: "300", subtle: "600" }
+  }
+};
 var buildLightSemanticTokens = (opts = {}) => {
   const map = {};
   map["text-default"] = "color-neutral-900";
@@ -263,9 +273,10 @@ var buildLightSemanticTokens = (opts = {}) => {
     map[`bg-${v}`] = `color-${v}-500`;
     map[`bg-${v}-subtle`] = `color-${v}-100`;
   }
-  map["border-default"] = "color-neutral-200";
-  map["border-strong"] = "color-neutral-400";
-  map["border-subtle"] = "color-neutral-100";
+  const lightBorderSteps = BORDER_STEPS.light[opts.borderContrast ?? "default"];
+  map["border-default"] = `color-neutral-${lightBorderSteps.default}`;
+  map["border-strong"] = `color-neutral-${lightBorderSteps.strong}`;
+  map["border-subtle"] = `color-neutral-${lightBorderSteps.subtle}`;
   map["border-focus"] = "color-primary-200";
   for (const v of VARIANTS) {
     map[`border-${v}`] = `color-${v}-200`;
@@ -302,9 +313,10 @@ var buildDarkSemanticTokens = (opts = {}) => {
     map[`bg-${v}`] = `color-${v}-500`;
     map[`bg-${v}-subtle`] = `color-${v}-900`;
   }
-  map["border-default"] = "color-neutral-700";
-  map["border-strong"] = "color-neutral-500";
-  map["border-subtle"] = "color-neutral-800";
+  const darkBorderSteps = BORDER_STEPS.dark[opts.borderContrast ?? "default"];
+  map["border-default"] = `color-neutral-${darkBorderSteps.default}`;
+  map["border-strong"] = `color-neutral-${darkBorderSteps.strong}`;
+  map["border-subtle"] = `color-neutral-${darkBorderSteps.subtle}`;
   map["border-focus"] = "color-primary-400";
   for (const v of VARIANTS) {
     map[`border-${v}`] = `color-${v}-700`;
@@ -394,16 +406,33 @@ var createStyleSheet = (userConfig = {}) => {
       tokens = { ...tokens, typography: { ...tokens.typography, ...typographyOverrides } };
     }
   }
+  if (userConfig.font?.heading) {
+    const [resolvedHeading] = resolveFontFamilies(userConfig.font.heading);
+    if (resolvedHeading.importUrl) importUrls.push(resolvedHeading.importUrl);
+    if (resolvedHeading.family) {
+      tokens = { ...tokens, typography: { ...tokens.typography, fontFamilyHeading: resolvedHeading.family } };
+    }
+  }
   if (userConfig.border?.radius) {
     tokens = { ...tokens, border: { ...tokens.border, radius: userConfig.border.radius } };
   }
   if (userConfig.border?.width) {
     tokens = { ...tokens, border: { ...tokens.border, width: resolveBorderWidth(userConfig.border.width) } };
   }
+  if (userConfig.elevation === "none") {
+    const flatElevation = Object.fromEntries(
+      Object.keys(tokens.elevation).map((level) => [level, "none"])
+    );
+    tokens = { ...tokens, elevation: flatElevation };
+  }
   const primitives = tokensToCss(tokens);
   const theme = userConfig.theme ?? "light";
   const primary = tokens.color.primary;
-  const semanticOpts = { primary500: primary["500"], primary400: primary["400"] };
+  const semanticOpts = {
+    primary500: primary["500"],
+    primary400: primary["400"],
+    borderContrast: userConfig.border?.contrast
+  };
   let body;
   if (theme === "dark") {
     body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts));
@@ -412,6 +441,7 @@ var createStyleSheet = (userConfig = {}) => {
   } else {
     body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts)) + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), "@media (prefers-color-scheme: dark)") + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), '[data-theme="dark"]') + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts), '[data-theme="light"]');
   }
+  body += "\nbody { font-family: var(--lt-typography-fontFamilyPrimary); }\n";
   const importLines = importUrls.map((url) => `@import url("${url}");`).join("\n");
   return importLines ? `${importLines}
 ${body}` : body;

package/dist/types/public-types.d.ts

@@ -95,11 +95,32 @@ export interface LattyConfig {
          * referenced independently in your own CSS.
          */
         family?: FontFamilyEntry | FontFamilyEntry[];
+        /**
+         * A single dedicated heading font, resolved to `--lt-typography-fontFamilyHeading`.
+         * `lt-text`'s heading/display variants (`h1`–`h6`, `display-*`) read this
+         * token automatically, falling back to `fontFamilyPrimary` when unset —
+         * the built-in way to do a two-typeface identity without manually
+         * rerouting `--lt-typography-fontFamilySecondary` via hand-written CSS.
+         */
+        heading?: FontFamilyEntry;
     };
     border?: {
         radius?: string;
         width?: BorderWidth;
+        /**
+         * Shifts which neutral palette step `--lt-border-default`/`--lt-border-strong`/
+         * `--lt-border-subtle` resolve to. `'high'` moves them toward a bolder,
+         * higher-contrast step (darker in light mode, lighter in dark mode) without
+         * touching theme-switching machinery.
+         * @default 'default'
+         */
+        contrast?: 'default' | 'high';
     };
+    /**
+     * Set to `'none'` to flatten every `--lt-elevation-N` token (box-shadow) to
+     * `none` in one call, instead of overriding each level individually.
+     */
+    elevation?: 'none';
     /**
      * Controls which semantic token layer is emitted.
      * - `'light'` (default) — light tokens only; ignores OS preference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/tokens",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Design tokens for the Latty design system — generates CSS custom properties, JSON, and JavaScript exports from a single config file",
   "license": "MIT",
   "repository": {
@@ -60,5 +60,5 @@
   "dependencies": {
     "culori": "^4.0.2"
   },
-  "gitHead": "8d5627a4a71bb4c7efdf3b754198c6450ce5467f"
+  "gitHead": "7b0b9856be6755a573abf02c0b7cbdb1a6db4fef"
 }