@latty-ds/tokens 0.6.0 → 0.8.0

package/dist/configure.d.ts

@@ -1,11 +1,29 @@
+/**
+ * Border width applied to control chrome (outlined buttons, inputs, chips, surfaces).
+ * Named presets: `thin` = 1px (default), `medium` = 2px, `thick` = 4px.
+ * Any other CSS length (e.g. `'1.5px'`) passes through unchanged.
+ */
+type BorderWidth = 'thin' | 'medium' | 'thick' | (string & {});
 interface LattyConfig {
     /** Built-in names: primary, secondary, success, warning, error, info. Any additional name generates a new palette. */
     colors?: Record<string, string>;
     font?: {
+        /**
+         * A CSS `font-family` value (e.g. `'Inter, sans-serif'`), or a Google
+         * Fonts CSS2 stylesheet URL (e.g.
+         * `'https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900&display=swap'`).
+         * URLs get `@import`ed automatically and the family name is derived from
+         * the `family=` query param — no separate `<link>` tag needed. Stylesheet
+         * URLs from providers other than `fonts.googleapis.com` are still loaded,
+         * but since there's no reliable way to guess the family name from an
+         * arbitrary CDN, pass the resulting name as a plain value instead (or
+         * open an issue if there's a provider worth special-casing).
+         */
         family?: string;
     };
     border?: {
         radius?: string;
+        width?: BorderWidth;
     };
     /**
      * Controls which semantic token layer is emitted.
@@ -32,6 +50,10 @@ declare const createStyleSheet: (userConfig?: LattyConfig) => string;
  * For zero FOUC on initial load, also add this one-liner before your module script:
  * `<style>html[data-lt]:not([data-lt-ready]){visibility:hidden}</style>`
  *
+ * `font.family` also accepts a Google Fonts CSS2 stylesheet URL — configure()
+ * both `@import`s it and derives the font-family name for you, so no separate
+ * `<link>` tag is needed.
+ *
  * @example
  * ```html
  * <html lang="en" data-lt>
@@ -41,8 +63,8 @@ declare const createStyleSheet: (userConfig?: LattyConfig) => string;
  *       import { configure } from '@latty-ds/tokens/configure';
  *       configure({
  *         colors: { primary: '#6366f1', secondary: '#f59e0b' },
- *         font:   { family: 'Inter, sans-serif' },
- *         border: { radius: '0.375rem' },
+ *         font:   { family: 'https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap' },
+ *         border: { radius: '0.375rem', width: 'medium' },
  *       });
  *     </script>
  *   </head>
@@ -51,4 +73,4 @@ declare const createStyleSheet: (userConfig?: LattyConfig) => string;
  */
 declare const configure: (userConfig?: LattyConfig) => void;
 
-export { type LattyConfig, configure, createStyleSheet };
+export { type BorderWidth, type LattyConfig, configure, createStyleSheet };

package/dist/configure.js

@@ -32,6 +32,12 @@ var REM_BASE_PX = 16;
 
 // src/constants/tokens.constants.ts
 var DEFAULT_BORDER_RADIUS = "0.5rem";
+var DEFAULT_BORDER_WIDTH = "1px";
+var BORDER_WIDTH_PRESETS = {
+  thin: "1px",
+  medium: "2px",
+  thick: "4px"
+};
 var DEFAULT_FONT_FAMILY = '"Hanken Grotesk", sans-serif';
 
 // src/spacing/spacing.ts
@@ -165,7 +171,7 @@ var buildTokens = (cfg) => {
   let color = buildColorTokens(cfg);
   color = addSystemColors(color);
   const spacing = buildSpacing();
-  const border = { radius: DEFAULT_BORDER_RADIUS };
+  const border = { radius: DEFAULT_BORDER_RADIUS, width: DEFAULT_BORDER_WIDTH };
   const typography = { fontFamily: DEFAULT_FONT_FAMILY };
   const elevation = buildElevation(color.neutral);
   return { color, spacing, border, typography, elevation };
@@ -313,6 +319,36 @@ var buildDarkSemanticTokens = (opts = {}) => {
 };
 var buildSemanticTokens = (mode = "light", opts = {}) => mode === "dark" ? buildDarkSemanticTokens(opts) : buildLightSemanticTokens(opts);
 
+// src/configure/font.ts
+var unwrapQuotes = (value) => {
+  const trimmed = value.trim();
+  const first = trimmed[0];
+  if (trimmed.length > 1 && (first === '"' || first === "'") && trimmed[trimmed.length - 1] === first) {
+    return trimmed.slice(1, -1).trim();
+  }
+  return trimmed;
+};
+var isUrl = (value) => /^https?:\/\//i.test(value);
+var namesFromFamilyParam = (raw) => raw.split("|").map((part) => part.split(":")[0].trim()).filter(Boolean);
+var quoteIfNeeded = (name) => /\s/.test(name) ? `"${name}"` : name;
+var resolveFontFamily = (value) => {
+  const unwrapped = unwrapQuotes(value);
+  if (!isUrl(unwrapped)) return { family: unwrapped, importUrl: null };
+  let parsed;
+  try {
+    parsed = new URL(unwrapped);
+  } catch {
+    return { family: unwrapped, importUrl: null };
+  }
+  if (parsed.hostname.toLowerCase() === "fonts.googleapis.com") {
+    const names = [...new Set(parsed.searchParams.getAll("family").flatMap(namesFromFamilyParam))];
+    if (names.length > 0) {
+      return { family: `${names.map(quoteIfNeeded).join(", ")}, sans-serif`, importUrl: unwrapped };
+    }
+  }
+  return { family: "", importUrl: unwrapped };
+};
+
 // tokens.config.json
 var tokens_config_default = {
   color: {
@@ -332,27 +368,43 @@ var tokens_config_default = {
 var DEFAULTS = {
   colors: tokens_config_default.color,
   font: { family: DEFAULT_FONT_FAMILY },
-  border: { radius: DEFAULT_BORDER_RADIUS }
+  border: { radius: DEFAULT_BORDER_RADIUS, width: DEFAULT_BORDER_WIDTH }
 };
 var toInternalConfig = (userConfig) => ({
   color: { ...DEFAULTS.colors, ...userConfig.colors }
 });
+var resolveBorderWidth = (width) => BORDER_WIDTH_PRESETS[width] ?? width;
 var createStyleSheet = (userConfig = {}) => {
   const cfg = toInternalConfig(userConfig);
   let tokens = buildTokens(cfg);
+  let fontImportUrl = null;
   if (userConfig.font?.family) {
-    tokens = { ...tokens, typography: { fontFamily: userConfig.font.family } };
+    const resolvedFont = resolveFontFamily(userConfig.font.family);
+    fontImportUrl = resolvedFont.importUrl;
+    if (resolvedFont.family) {
+      tokens = { ...tokens, typography: { fontFamily: resolvedFont.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) } };
+  }
   const primitives = tokensToCss(tokens);
   const theme = userConfig.theme ?? "light";
   const primary = tokens.color.primary;
   const semanticOpts = { primary500: primary["500"], primary400: primary["400"] };
-  if (theme === "dark") return primitives + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts));
-  if (theme === "light") return primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts));
-  return 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"]');
+  let body;
+  if (theme === "dark") {
+    body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts));
+  } else if (theme === "light") {
+    body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts));
+  } 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"]');
+  }
+  return fontImportUrl ? `@import url("${fontImportUrl}");
+${body}` : body;
 };
 var configure = (userConfig = {}) => {
   const root = document.documentElement;
@@ -363,7 +415,9 @@ var configure = (userConfig = {}) => {
     style.id = "lt-tokens";
     document.head.prepend(style);
   }
-  style.textContent = "html[data-lt]:not([data-lt-ready]){visibility:hidden}\n" + createStyleSheet(userConfig);
+  const guard = "html[data-lt]:not([data-lt-ready]){visibility:hidden}\n";
+  const css = createStyleSheet(userConfig);
+  style.textContent = css.startsWith("@import") ? css.replace(/^(@import[^\n]*\n)/, `$1${guard}`) : guard + css;
   requestAnimationFrame(() => root.setAttribute("data-lt-ready", ""));
 };
 export {

package/dist/constants/tokens.constants.d.ts

@@ -1,2 +1,12 @@
 export declare const DEFAULT_BORDER_RADIUS: "0.5rem";
+export declare const DEFAULT_BORDER_WIDTH: "1px";
+/**
+ * Named presets accepted by `border.width` in `LattyConfig`.
+ * Any other CSS length passes through unchanged.
+ */
+export declare const BORDER_WIDTH_PRESETS: {
+    readonly thin: "1px";
+    readonly medium: "2px";
+    readonly thick: "4px";
+};
 export declare const DEFAULT_FONT_FAMILY: "\"Hanken Grotesk\", sans-serif";

package/dist/tokens.css

@@ -1,5 +1,6 @@
 :root{
   --lt-border-radius: 0.5rem;
+  --lt-border-width: 1px;
   --lt-color-black: #000000;
   --lt-color-error-100: #ffc8c1;
   --lt-color-error-200: #ffa198;

package/dist/tokens.js

@@ -1 +1 @@
-export const tokens = {"color":{"primary":{"50":"#f0e5df","100":"#ffd4b5","200":"#ffbb87","300":"#ffa860","400":"#ff9539","500":"#ff8200","600":"#d56400","700":"#963b00","800":"#5e3c25","900":"#3c1d05"},"primary-muted":{"50":"#e9e7e6","100":"#e8dfda","200":"#dfd1c8","300":"#dac8bd","400":"#d2beb2","500":"#c6b1a5","600":"#a08e82","700":"#6b5c53","800":"#50453e","900":"#2b2521"},"secondary":{"50":"#e5e7f1","100":"#cbd2ff","200":"#a3acf7","300":"#8a93f4","400":"#7076e5","500":"#5252c5","600":"#4544ad","700":"#333187","800":"#2e3254","900":"#202343"},"secondary-muted":{"50":"#e7e8e9","100":"#d5d7df","200":"#b4b7c4","300":"#a0a3b3","400":"#898c9e","500":"#6c6f81","600":"#5a5d6d","700":"#414351","800":"#363742","900":"#25262c"},"success":{"50":"#e1ebe2","100":"#beedc6","200":"#94e4a4","300":"#70df8b","400":"#4bd573","500":"#22c55e","600":"#00a244","700":"#006f22","800":"#2b4d32","900":"#0c2e16"},"success-muted":{"50":"#e7e8e7","100":"#dbe3dc","200":"#cad7cc","300":"#bfcfc1","400":"#b3c5b6","500":"#a5b8a8","600":"#839586","700":"#546256","800":"#404a41","900":"#222823"},"warning":{"50":"#ece7de","100":"#f5e0b5","200":"#f6d289","300":"#f9c962","400":"#f7bf3a","500":"#eeb308","600":"#c38e00","700":"#845a00","800":"#584720","900":"#332400"},"warning-muted":{"50":"#e8e8e6","100":"#e7e4dc","200":"#e2dcd0","300":"#ded7c8","400":"#dad1c0","500":"#d2c9b8","600":"#a9a090","700":"#6d6659","800":"#504c42","900":"#292621"},"error":{"50":"#f3e4e2","100":"#ffc8c1","200":"#ffa198","300":"#ff847b","400":"#ff6560","500":"#ef4444","600":"#cb2d31","700":"#950e18","800":"#5a312e","900":"#3f1917"},"error-muted":{"50":"#e9e7e7","100":"#e6dad8","200":"#d6c3c1","300":"#cdb4b2","400":"#bfa4a1","500":"#ab908d","600":"#8d7572","700":"#624e4c","800":"#4c3d3b","900":"#2d2423"},"info":{"50":"#e1e9ef","100":"#bce4fe","200":"#8fd2fd","300":"#6ac7ff","400":"#43b9fa","500":"#0ea5e9","600":"#0087c4","700":"#005c8d","800":"#1e465d","900":"#082a3c"},"info-muted":{"50":"#e7e8e9","100":"#d9e0e5","200":"#c5d0d7","300":"#b8c6cf","400":"#aab9c4","500":"#99a9b3","600":"#7a8993","700":"#4f5b63","800":"#3d464c","900":"#22272a"},"neutral":{"50":"#fafafa","100":"#f3f3f3","200":"#e4e4e4","300":"#cacaca","400":"#ababab","500":"#868686","600":"#696969","700":"#4d4d4d","800":"#333333","900":"#1b1b1b"},"white":"#FFFFFF","black":"#000000"},"spacing":{"px":{"0":"0px","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","7":"28px","8":"32px","9":"36px","10":"40px","11":"44px","12":"48px","13":"52px","14":"56px","15":"60px","16":"64px","17":"68px","18":"72px","19":"76px","20":"80px","21":"84px","22":"88px","23":"92px","24":"96px"},"rem":{"0":"0rem","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","9":"2.25rem","10":"2.5rem","11":"2.75rem","12":"3rem","13":"3.25rem","14":"3.5rem","15":"3.75rem","16":"4rem","17":"4.25rem","18":"4.5rem","19":"4.75rem","20":"5rem","21":"5.25rem","22":"5.5rem","23":"5.75rem","24":"6rem"}},"border":{"radius":"0.5rem"},"typography":{"fontFamily":"\"Hanken Grotesk\", sans-serif"},"elevation":{"0":"none","1":"0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)","2":"0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)","3":"0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)","4":"0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)","5":"0 25px 50px -12px rgb(27 27 27 / 0.25)"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-400","text-disabled":"color-neutral-400","text-inverse":"color-white","text-neutral":"color-neutral-700","text-primary":"color-primary-700","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-700","text-on-secondary":"color-white","text-success":"color-success-700","text-on-success":"color-white","text-warning":"color-warning-700","text-on-warning":"color-warning-800","text-error":"color-error-700","text-on-error":"color-white","text-info":"color-info-700","text-on-info":"color-white","bg-default":"color-white","bg-subtle":"color-neutral-50","bg-surface":"color-neutral-100","bg-overlay":"color-neutral-200","bg-inverse":"color-neutral-900","bg-neutral-subtle":"color-neutral-100","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-100","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-100","bg-success":"color-success-500","bg-success-subtle":"color-success-100","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-100","bg-error":"color-error-500","bg-error-subtle":"color-error-100","bg-info":"color-info-500","bg-info-subtle":"color-info-100","border-default":"color-neutral-200","border-strong":"color-neutral-400","border-subtle":"color-neutral-100","border-focus":"color-primary-200","border-primary":"color-primary-200","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-200","border-secondary-strong":"color-secondary-500","border-success":"color-success-200","border-success-strong":"color-success-500","border-warning":"color-warning-200","border-warning-strong":"color-warning-500","border-error":"color-error-200","border-error-strong":"color-error-500","border-info":"color-info-200","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-500","interactive-primary-bg-hover":"color-primary-600","interactive-primary-bg-active":"color-primary-700","interactive-secondary-bg":"color-secondary-500","interactive-secondary-bg-hover":"color-secondary-600","interactive-secondary-bg-active":"color-secondary-700","interactive-success-bg":"color-success-500","interactive-success-bg-hover":"color-success-600","interactive-success-bg-active":"color-success-700","interactive-warning-bg":"color-warning-500","interactive-warning-bg-hover":"color-warning-600","interactive-warning-bg-active":"color-warning-700","interactive-error-bg":"color-error-500","interactive-error-bg-hover":"color-error-600","interactive-error-bg-active":"color-error-700","interactive-info-bg":"color-info-500","interactive-info-bg-hover":"color-info-600","interactive-info-bg-active":"color-info-700"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-500","text-disabled":"color-neutral-600","text-inverse":"color-neutral-900","text-neutral":"color-neutral-200","text-primary":"color-primary-300","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-300","text-on-secondary":"color-white","text-success":"color-success-300","text-on-success":"color-white","text-warning":"color-warning-300","text-on-warning":"color-warning-800","text-error":"color-error-300","text-on-error":"color-white","text-info":"color-info-300","text-on-info":"color-white","bg-default":"color-neutral-900","bg-subtle":"color-neutral-800","bg-surface":"color-neutral-800","bg-overlay":"color-neutral-700","bg-inverse":"color-neutral-50","bg-neutral-subtle":"color-neutral-800","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-900","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-900","bg-success":"color-success-500","bg-success-subtle":"color-success-900","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-900","bg-error":"color-error-500","bg-error-subtle":"color-error-900","bg-info":"color-info-500","bg-info-subtle":"color-info-900","border-default":"color-neutral-700","border-strong":"color-neutral-500","border-subtle":"color-neutral-800","border-focus":"color-primary-400","border-primary":"color-primary-700","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-700","border-secondary-strong":"color-secondary-500","border-success":"color-success-700","border-success-strong":"color-success-500","border-warning":"color-warning-700","border-warning-strong":"color-warning-500","border-error":"color-error-700","border-error-strong":"color-error-500","border-info":"color-info-700","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-400","interactive-primary-bg-hover":"color-primary-300","interactive-primary-bg-active":"color-primary-500","interactive-secondary-bg":"color-secondary-400","interactive-secondary-bg-hover":"color-secondary-300","interactive-secondary-bg-active":"color-secondary-500","interactive-success-bg":"color-success-400","interactive-success-bg-hover":"color-success-300","interactive-success-bg-active":"color-success-500","interactive-warning-bg":"color-warning-400","interactive-warning-bg-hover":"color-warning-300","interactive-warning-bg-active":"color-warning-500","interactive-error-bg":"color-error-400","interactive-error-bg-hover":"color-error-300","interactive-error-bg-active":"color-error-500","interactive-info-bg":"color-info-400","interactive-info-bg-hover":"color-info-300","interactive-info-bg-active":"color-info-500"}};
+export const tokens = {"color":{"primary":{"50":"#f0e5df","100":"#ffd4b5","200":"#ffbb87","300":"#ffa860","400":"#ff9539","500":"#ff8200","600":"#d56400","700":"#963b00","800":"#5e3c25","900":"#3c1d05"},"primary-muted":{"50":"#e9e7e6","100":"#e8dfda","200":"#dfd1c8","300":"#dac8bd","400":"#d2beb2","500":"#c6b1a5","600":"#a08e82","700":"#6b5c53","800":"#50453e","900":"#2b2521"},"secondary":{"50":"#e5e7f1","100":"#cbd2ff","200":"#a3acf7","300":"#8a93f4","400":"#7076e5","500":"#5252c5","600":"#4544ad","700":"#333187","800":"#2e3254","900":"#202343"},"secondary-muted":{"50":"#e7e8e9","100":"#d5d7df","200":"#b4b7c4","300":"#a0a3b3","400":"#898c9e","500":"#6c6f81","600":"#5a5d6d","700":"#414351","800":"#363742","900":"#25262c"},"success":{"50":"#e1ebe2","100":"#beedc6","200":"#94e4a4","300":"#70df8b","400":"#4bd573","500":"#22c55e","600":"#00a244","700":"#006f22","800":"#2b4d32","900":"#0c2e16"},"success-muted":{"50":"#e7e8e7","100":"#dbe3dc","200":"#cad7cc","300":"#bfcfc1","400":"#b3c5b6","500":"#a5b8a8","600":"#839586","700":"#546256","800":"#404a41","900":"#222823"},"warning":{"50":"#ece7de","100":"#f5e0b5","200":"#f6d289","300":"#f9c962","400":"#f7bf3a","500":"#eeb308","600":"#c38e00","700":"#845a00","800":"#584720","900":"#332400"},"warning-muted":{"50":"#e8e8e6","100":"#e7e4dc","200":"#e2dcd0","300":"#ded7c8","400":"#dad1c0","500":"#d2c9b8","600":"#a9a090","700":"#6d6659","800":"#504c42","900":"#292621"},"error":{"50":"#f3e4e2","100":"#ffc8c1","200":"#ffa198","300":"#ff847b","400":"#ff6560","500":"#ef4444","600":"#cb2d31","700":"#950e18","800":"#5a312e","900":"#3f1917"},"error-muted":{"50":"#e9e7e7","100":"#e6dad8","200":"#d6c3c1","300":"#cdb4b2","400":"#bfa4a1","500":"#ab908d","600":"#8d7572","700":"#624e4c","800":"#4c3d3b","900":"#2d2423"},"info":{"50":"#e1e9ef","100":"#bce4fe","200":"#8fd2fd","300":"#6ac7ff","400":"#43b9fa","500":"#0ea5e9","600":"#0087c4","700":"#005c8d","800":"#1e465d","900":"#082a3c"},"info-muted":{"50":"#e7e8e9","100":"#d9e0e5","200":"#c5d0d7","300":"#b8c6cf","400":"#aab9c4","500":"#99a9b3","600":"#7a8993","700":"#4f5b63","800":"#3d464c","900":"#22272a"},"neutral":{"50":"#fafafa","100":"#f3f3f3","200":"#e4e4e4","300":"#cacaca","400":"#ababab","500":"#868686","600":"#696969","700":"#4d4d4d","800":"#333333","900":"#1b1b1b"},"white":"#FFFFFF","black":"#000000"},"spacing":{"px":{"0":"0px","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","7":"28px","8":"32px","9":"36px","10":"40px","11":"44px","12":"48px","13":"52px","14":"56px","15":"60px","16":"64px","17":"68px","18":"72px","19":"76px","20":"80px","21":"84px","22":"88px","23":"92px","24":"96px"},"rem":{"0":"0rem","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","9":"2.25rem","10":"2.5rem","11":"2.75rem","12":"3rem","13":"3.25rem","14":"3.5rem","15":"3.75rem","16":"4rem","17":"4.25rem","18":"4.5rem","19":"4.75rem","20":"5rem","21":"5.25rem","22":"5.5rem","23":"5.75rem","24":"6rem"}},"border":{"radius":"0.5rem","width":"1px"},"typography":{"fontFamily":"\"Hanken Grotesk\", sans-serif"},"elevation":{"0":"none","1":"0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)","2":"0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)","3":"0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)","4":"0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)","5":"0 25px 50px -12px rgb(27 27 27 / 0.25)"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-400","text-disabled":"color-neutral-400","text-inverse":"color-white","text-neutral":"color-neutral-700","text-primary":"color-primary-700","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-700","text-on-secondary":"color-white","text-success":"color-success-700","text-on-success":"color-white","text-warning":"color-warning-700","text-on-warning":"color-warning-800","text-error":"color-error-700","text-on-error":"color-white","text-info":"color-info-700","text-on-info":"color-white","bg-default":"color-white","bg-subtle":"color-neutral-50","bg-surface":"color-neutral-100","bg-overlay":"color-neutral-200","bg-inverse":"color-neutral-900","bg-neutral-subtle":"color-neutral-100","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-100","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-100","bg-success":"color-success-500","bg-success-subtle":"color-success-100","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-100","bg-error":"color-error-500","bg-error-subtle":"color-error-100","bg-info":"color-info-500","bg-info-subtle":"color-info-100","border-default":"color-neutral-200","border-strong":"color-neutral-400","border-subtle":"color-neutral-100","border-focus":"color-primary-200","border-primary":"color-primary-200","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-200","border-secondary-strong":"color-secondary-500","border-success":"color-success-200","border-success-strong":"color-success-500","border-warning":"color-warning-200","border-warning-strong":"color-warning-500","border-error":"color-error-200","border-error-strong":"color-error-500","border-info":"color-info-200","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-500","interactive-primary-bg-hover":"color-primary-600","interactive-primary-bg-active":"color-primary-700","interactive-secondary-bg":"color-secondary-500","interactive-secondary-bg-hover":"color-secondary-600","interactive-secondary-bg-active":"color-secondary-700","interactive-success-bg":"color-success-500","interactive-success-bg-hover":"color-success-600","interactive-success-bg-active":"color-success-700","interactive-warning-bg":"color-warning-500","interactive-warning-bg-hover":"color-warning-600","interactive-warning-bg-active":"color-warning-700","interactive-error-bg":"color-error-500","interactive-error-bg-hover":"color-error-600","interactive-error-bg-active":"color-error-700","interactive-info-bg":"color-info-500","interactive-info-bg-hover":"color-info-600","interactive-info-bg-active":"color-info-700"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-500","text-disabled":"color-neutral-600","text-inverse":"color-neutral-900","text-neutral":"color-neutral-200","text-primary":"color-primary-300","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-300","text-on-secondary":"color-white","text-success":"color-success-300","text-on-success":"color-white","text-warning":"color-warning-300","text-on-warning":"color-warning-800","text-error":"color-error-300","text-on-error":"color-white","text-info":"color-info-300","text-on-info":"color-white","bg-default":"color-neutral-900","bg-subtle":"color-neutral-800","bg-surface":"color-neutral-800","bg-overlay":"color-neutral-700","bg-inverse":"color-neutral-50","bg-neutral-subtle":"color-neutral-800","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-900","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-900","bg-success":"color-success-500","bg-success-subtle":"color-success-900","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-900","bg-error":"color-error-500","bg-error-subtle":"color-error-900","bg-info":"color-info-500","bg-info-subtle":"color-info-900","border-default":"color-neutral-700","border-strong":"color-neutral-500","border-subtle":"color-neutral-800","border-focus":"color-primary-400","border-primary":"color-primary-700","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-700","border-secondary-strong":"color-secondary-500","border-success":"color-success-700","border-success-strong":"color-success-500","border-warning":"color-warning-700","border-warning-strong":"color-warning-500","border-error":"color-error-700","border-error-strong":"color-error-500","border-info":"color-info-700","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-400","interactive-primary-bg-hover":"color-primary-300","interactive-primary-bg-active":"color-primary-500","interactive-secondary-bg":"color-secondary-400","interactive-secondary-bg-hover":"color-secondary-300","interactive-secondary-bg-active":"color-secondary-500","interactive-success-bg":"color-success-400","interactive-success-bg-hover":"color-success-300","interactive-success-bg-active":"color-success-500","interactive-warning-bg":"color-warning-400","interactive-warning-bg-hover":"color-warning-300","interactive-warning-bg-active":"color-warning-500","interactive-error-bg":"color-error-400","interactive-error-bg-hover":"color-error-300","interactive-error-bg-active":"color-error-500","interactive-info-bg":"color-info-400","interactive-info-bg-hover":"color-info-300","interactive-info-bg-active":"color-info-500"}};

package/dist/tokens.json

@@ -216,7 +216,8 @@
     }
   },
   "border": {
-    "radius": "0.5rem"
+    "radius": "0.5rem",
+    "width": "1px"
   },
   "typography": {
     "fontFamily": "\"Hanken Grotesk\", sans-serif"

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

@@ -39,6 +39,7 @@ export type Tokens = {
     spacing: SpacingTokens;
     border: {
         radius: string;
+        width: string;
     };
     typography: {
         fontFamily: string;
@@ -46,14 +47,32 @@ export type Tokens = {
     elevation: ElevationTokens;
 };
 export type { Config, TokenColorName } from './';
+/**
+ * Border width applied to control chrome (outlined buttons, inputs, chips, surfaces).
+ * Named presets: `thin` = 1px (default), `medium` = 2px, `thick` = 4px.
+ * Any other CSS length (e.g. `'1.5px'`) passes through unchanged.
+ */
+export type BorderWidth = 'thin' | 'medium' | 'thick' | (string & {});
 export interface LattyConfig {
     /** Built-in names: primary, secondary, success, warning, error, info. Any additional name generates a new palette. */
     colors?: Record<string, string>;
     font?: {
+        /**
+         * A CSS `font-family` value (e.g. `'Inter, sans-serif'`), or a Google
+         * Fonts CSS2 stylesheet URL (e.g.
+         * `'https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900&display=swap'`).
+         * URLs get `@import`ed automatically and the family name is derived from
+         * the `family=` query param — no separate `<link>` tag needed. Stylesheet
+         * URLs from providers other than `fonts.googleapis.com` are still loaded,
+         * but since there's no reliable way to guess the family name from an
+         * arbitrary CDN, pass the resulting name as a plain value instead (or
+         * open an issue if there's a provider worth special-casing).
+         */
         family?: string;
     };
     border?: {
         radius?: string;
+        width?: BorderWidth;
     };
     /**
      * Controls which semantic token layer is emitted.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/tokens",
-  "version": "0.6.0",
+  "version": "0.8.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": {
@@ -53,12 +53,12 @@
     "clean": "rm -rf dist dist-scripts"
   },
   "devDependencies": {
-    "@latty-ds/utils": "0.6.0",
+    "@latty-ds/utils": "0.7.0",
     "@types/culori": "^4.0.1",
     "typescript": "^5.5.4"
   },
   "dependencies": {
     "culori": "^4.0.2"
   },
-  "gitHead": "5f2e9dbee20f32bc24117a40f8f2f65a4de07979"
+  "gitHead": "144dd8d2f7440fd5fd8ecb4f396407c4ce3be9f2"
 }