@latty-ds/tokens 0.10.2 → 1.0.0

package/dist/configure.js

@@ -33,6 +33,8 @@ var REM_BASE_PX = 16;
 // src/constants/tokens.constants.ts
 var DEFAULT_BORDER_RADIUS = "0.5rem";
 var DEFAULT_BORDER_WIDTH = "1px";
+var DEFAULT_FOCUS_RING_WIDTH = "3px";
+var DEFAULT_FOCUS_RING_OFFSET = "2px";
 var BORDER_WIDTH_PRESETS = {
   thin: "1px",
   medium: "2px",
@@ -40,6 +42,18 @@ var BORDER_WIDTH_PRESETS = {
 };
 var DEFAULT_FONT_FAMILY = '"Hanken Grotesk", sans-serif';
 
+// src/constants/motion.constants.ts
+var DURATION_INSTANT = "100ms";
+var DURATION_FAST = "150ms";
+var DURATION_MODERATE = "200ms";
+var DURATION_SLOW = "300ms";
+var EASE_STANDARD = "cubic-bezier(0.4, 0, 0.2, 1)";
+var EASE_EMPHASIZED = "cubic-bezier(0.34, 1.2, 0.64, 1)";
+
+// src/constants/zindex.constants.ts
+var Z_INDEX_STICKY = "100";
+var Z_INDEX_OVERLAY = "1000";
+
 // src/spacing/spacing.ts
 var buildSpacing = () => {
   const px = {};
@@ -70,6 +84,26 @@ var buildElevation = (neutral) => {
   };
 };
 
+// src/motion/motion.ts
+var buildMotion = () => ({
+  duration: {
+    instant: DURATION_INSTANT,
+    fast: DURATION_FAST,
+    moderate: DURATION_MODERATE,
+    slow: DURATION_SLOW
+  },
+  ease: {
+    standard: EASE_STANDARD,
+    emphasized: EASE_EMPHASIZED
+  }
+});
+
+// src/zindex/zindex.ts
+var buildZIndex = () => ({
+  sticky: Z_INDEX_STICKY,
+  overlay: Z_INDEX_OVERLAY
+});
+
 // src/colors/palette.ts
 import { formatHex, converter } from "culori";
 var toOklch = converter("oklch");
@@ -171,10 +205,17 @@ var buildTokens = (cfg) => {
   let color = buildColorTokens(cfg);
   color = addSystemColors(color);
   const spacing = buildSpacing();
-  const border = { radius: DEFAULT_BORDER_RADIUS, width: DEFAULT_BORDER_WIDTH };
+  const border = {
+    radius: DEFAULT_BORDER_RADIUS,
+    width: DEFAULT_BORDER_WIDTH,
+    focusRingWidth: DEFAULT_FOCUS_RING_WIDTH,
+    focusRingOffset: DEFAULT_FOCUS_RING_OFFSET
+  };
   const typography = { fontFamilyPrimary: DEFAULT_FONT_FAMILY };
   const elevation = buildElevation(color.neutral);
-  return { color, spacing, border, typography, elevation };
+  const { duration, ease } = buildMotion();
+  const z = buildZIndex();
+  return { color, spacing, border, typography, elevation, duration, ease, z };
 };
 var tokensToCss = (tokens) => {
   const lines = [];
@@ -227,8 +268,8 @@ ${lines.join("\n")}
 `;
 };
 
-// src/semantic/semantic-tokens.ts
-var VARIANTS = ["primary", "secondary", "success", "warning", "error", "info"];
+// src/semantic/contrast.ts
+var WCAG_AA = 4.5;
 var relativeLuminance = (hex) => {
   const r = parseInt(hex.slice(1, 3), 16) / 255;
   const g = parseInt(hex.slice(3, 5), 16) / 255;
@@ -236,11 +277,59 @@ var relativeLuminance = (hex) => {
   const lin = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
   return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
 };
-var accessibleTextOn = (bgHex) => {
-  const L = relativeLuminance(bgHex);
-  const whiteContrast = 1.05 / (L + 0.05);
-  const darkContrast = (L + 0.05) / 0.059;
-  return whiteContrast >= darkContrast ? "color-white" : "color-neutral-900";
+var contrastRatio = (a, b) => {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+};
+var LADDER = {
+  light: { rest: 500, hover: { directions: [1, -1], steps: 1 }, active: { directions: [1, -1], steps: 2 } },
+  dark: { rest: 400, hover: { directions: [-1, 1], steps: 1 }, active: { directions: [1, -1], steps: 1 } }
+};
+var asPalette = (value, name) => {
+  if (value === void 0 || typeof value === "string") throw new Error(`No colour ramp named "${name}"`);
+  return value;
+};
+var resolveVariantColors = (variant, palettes, mode, minContrast = WCAG_AA) => {
+  const palette = asPalette(palettes[variant], variant);
+  const neutral = asPalette(palettes.neutral, "neutral");
+  const white = typeof palettes.white === "string" ? palettes.white : "#ffffff";
+  const black = typeof palettes.black === "string" ? palettes.black : "#000000";
+  const ladder = LADDER[mode];
+  const restIndex = STEPS.indexOf(ladder.rest);
+  const fill = palette[String(ladder.rest)];
+  const solid = palette["500"];
+  const candidates = [
+    ["color-white", white],
+    [`color-${variant}-50`, palette["50"]],
+    [`color-${variant}-900`, palette["900"]],
+    ["color-neutral-900", neutral["900"]],
+    ["color-black", black]
+  ];
+  const reaches = (hex, background) => contrastRatio(hex, background) >= minContrast;
+  const [onText, onHex] = candidates.find(([, hex]) => reaches(hex, fill) && reaches(hex, solid)) ?? candidates.find(([, hex]) => reaches(hex, fill)) ?? candidates.reduce((best, next) => contrastRatio(next[1], fill) > contrastRatio(best[1], fill) ? next : best);
+  const walk = ({ directions, steps }) => {
+    for (const direction of directions) {
+      const step = STEPS[restIndex + direction * steps];
+      const hex = step === void 0 ? void 0 : palette[String(step)];
+      if (hex && reaches(onHex, hex)) return step;
+    }
+    return ladder.rest;
+  };
+  return {
+    onText,
+    bg: `color-${variant}-${ladder.rest}`,
+    hover: `color-${variant}-${walk(ladder.hover)}`,
+    active: `color-${variant}-${walk(ladder.active)}`
+  };
+};
+
+// src/semantic/semantic-tokens.ts
+var VARIANTS = ["primary", "secondary", "success", "warning", "error", "info"];
+var addNeutralInteractive = (map) => {
+  map["interactive-neutral-bg"] = "color-neutral-600";
+  map["interactive-neutral-bg-hover"] = "color-neutral-700";
+  map["interactive-neutral-bg-active"] = "color-neutral-800";
 };
 var BORDER_STEPS = {
   light: {
@@ -252,7 +341,17 @@ var BORDER_STEPS = {
     high: { default: "500", strong: "300", subtle: "600" }
   }
 };
-var buildLightSemanticTokens = (opts = {}) => {
+var addInteractive = (map, mode, palettes) => {
+  for (const v of VARIANTS) {
+    const colors = resolveVariantColors(v, palettes, mode);
+    map[`text-on-${v}`] = colors.onText;
+    map[`interactive-${v}-bg`] = colors.bg;
+    map[`interactive-${v}-bg-hover`] = colors.hover;
+    map[`interactive-${v}-bg-active`] = colors.active;
+  }
+  addNeutralInteractive(map);
+};
+var buildLightSemanticTokens = (opts) => {
   const map = {};
   map["text-default"] = "color-neutral-900";
   map["text-subtle"] = "color-neutral-600";
@@ -260,12 +359,7 @@ var buildLightSemanticTokens = (opts = {}) => {
   map["text-disabled"] = "color-neutral-400";
   map["text-inverse"] = "color-white";
   map["text-neutral"] = "color-neutral-700";
-  for (const v of VARIANTS) {
-    map[`text-${v}`] = `color-${v}-700`;
-    map[`text-on-${v}`] = "color-white";
-  }
-  map["text-on-warning"] = "color-warning-800";
-  if (opts.primary500) map["text-on-primary"] = accessibleTextOn(opts.primary500);
+  for (const v of VARIANTS) map[`text-${v}`] = `color-${v}-700`;
   map["bg-default"] = "color-white";
   map["bg-subtle"] = "color-neutral-50";
   map["bg-surface"] = "color-neutral-100";
@@ -281,18 +375,17 @@ var buildLightSemanticTokens = (opts = {}) => {
   map["border-strong"] = `color-neutral-${lightBorderSteps.strong}`;
   map["border-subtle"] = `color-neutral-${lightBorderSteps.subtle}`;
   map["border-focus"] = "color-primary-200";
+  map["border-input"] = "border-default";
+  map["focus-ring-color"] = "border-focus";
+  map["focus-halo-color"] = "bg-primary-subtle";
   for (const v of VARIANTS) {
     map[`border-${v}`] = `color-${v}-200`;
     map[`border-${v}-strong`] = `color-${v}-500`;
   }
-  for (const v of VARIANTS) {
-    map[`interactive-${v}-bg`] = `color-${v}-500`;
-    map[`interactive-${v}-bg-hover`] = `color-${v}-600`;
-    map[`interactive-${v}-bg-active`] = `color-${v}-700`;
-  }
+  addInteractive(map, "light", opts.palettes);
   return map;
 };
-var buildDarkSemanticTokens = (opts = {}) => {
+var buildDarkSemanticTokens = (opts) => {
   const map = {};
   map["text-default"] = "color-neutral-100";
   map["text-subtle"] = "color-neutral-300";
@@ -300,12 +393,7 @@ var buildDarkSemanticTokens = (opts = {}) => {
   map["text-disabled"] = "color-neutral-600";
   map["text-inverse"] = "color-neutral-900";
   map["text-neutral"] = "color-neutral-200";
-  for (const v of VARIANTS) {
-    map[`text-${v}`] = `color-${v}-300`;
-    map[`text-on-${v}`] = "color-white";
-  }
-  map["text-on-warning"] = "color-warning-800";
-  if (opts.primary400) map["text-on-primary"] = accessibleTextOn(opts.primary400);
+  for (const v of VARIANTS) map[`text-${v}`] = `color-${v}-300`;
   map["bg-default"] = "color-neutral-900";
   map["bg-subtle"] = "color-neutral-800";
   map["bg-surface"] = "color-neutral-800";
@@ -321,18 +409,17 @@ var buildDarkSemanticTokens = (opts = {}) => {
   map["border-strong"] = `color-neutral-${darkBorderSteps.strong}`;
   map["border-subtle"] = `color-neutral-${darkBorderSteps.subtle}`;
   map["border-focus"] = "color-primary-400";
+  map["border-input"] = "border-default";
+  map["focus-ring-color"] = "border-focus";
+  map["focus-halo-color"] = "bg-primary-subtle";
   for (const v of VARIANTS) {
     map[`border-${v}`] = `color-${v}-700`;
     map[`border-${v}-strong`] = `color-${v}-500`;
   }
-  for (const v of VARIANTS) {
-    map[`interactive-${v}-bg`] = `color-${v}-400`;
-    map[`interactive-${v}-bg-hover`] = `color-${v}-300`;
-    map[`interactive-${v}-bg-active`] = `color-${v}-500`;
-  }
+  addInteractive(map, "dark", opts.palettes);
   return map;
 };
-var buildSemanticTokens = (mode = "light", opts = {}) => mode === "dark" ? buildDarkSemanticTokens(opts) : buildLightSemanticTokens(opts);
+var buildSemanticTokens = (mode, opts) => mode === "dark" ? buildDarkSemanticTokens(opts) : buildLightSemanticTokens(opts);
 
 // src/configure/font.ts
 var FONT_FAMILY_SLOT_NAMES = ["Primary", "Secondary", "Tertiary", "Quaternary"];
@@ -430,10 +517,8 @@ var createStyleSheet = (userConfig = {}) => {
   }
   const primitives = tokensToCss(tokens);
   const theme = userConfig.theme ?? "light";
-  const primary = tokens.color.primary;
   const semanticOpts = {
-    primary500: primary["500"],
-    primary400: primary["400"],
+    palettes: tokens.color,
     borderContrast: userConfig.border?.contrast
   };
   let body;

package/dist/constants/index.d.ts

@@ -6,3 +6,5 @@
 export * from './colors.constants';
 export * from './spacing.constants';
 export * from './tokens.constants';
+export * from './motion.constants';
+export * from './zindex.constants';

package/dist/constants/motion.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DURATION_INSTANT: "100ms";
+export declare const DURATION_FAST: "150ms";
+export declare const DURATION_MODERATE: "200ms";
+export declare const DURATION_SLOW: "300ms";
+export declare const EASE_STANDARD: "cubic-bezier(0.4, 0, 0.2, 1)";
+export declare const EASE_EMPHASIZED: "cubic-bezier(0.34, 1.2, 0.64, 1)";

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

@@ -1,5 +1,7 @@
 export declare const DEFAULT_BORDER_RADIUS: "0.5rem";
 export declare const DEFAULT_BORDER_WIDTH: "1px";
+export declare const DEFAULT_FOCUS_RING_WIDTH: "3px";
+export declare const DEFAULT_FOCUS_RING_OFFSET: "2px";
 /**
  * Named presets accepted by `border.width` in `LattyConfig`.
  * Any other CSS length passes through unchanged.

package/dist/constants/zindex.constants.d.ts

@@ -0,0 +1,4 @@
+/** In-flow elements that sit above normal content: header, nav. */
+export declare const Z_INDEX_STICKY: "100";
+/** Floating overlay content not yet on the native top layer (dialog/sidepanel/snackbar use that instead). */
+export declare const Z_INDEX_OVERLAY: "1000";

package/dist/motion/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Motion token generation.
+ * Provides transition duration and easing scales shared across components.
+ *
+ * @module motion
+ */
+export { buildMotion } from './motion';
+export type { DurationToken, EaseToken } from './motion';

package/dist/motion/motion.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Transition/animation duration scale.
+ *
+ * - `instant`: micro feedback — press/active transforms
+ * - `fast`: default interactive transition — hover/focus color, border, box-shadow
+ * - `moderate`: structural movement — expand/collapse, enter/exit fades
+ * - `slow`: large/attention movement — panel slides, progress fill
+ */
+export type DurationToken = 'instant' | 'fast' | 'moderate' | 'slow';
+/**
+ * Easing curve scale.
+ *
+ * - `standard`: deceleration curve for elements entering/settling on screen
+ * - `emphasized`: overshoot curve for entrances that should draw attention
+ */
+export type EaseToken = 'standard' | 'emphasized';
+export declare const buildMotion: () => {
+    duration: Record<DurationToken, string>;
+    ease: Record<EaseToken, string>;
+};

package/dist/semantic.css

@@ -24,6 +24,7 @@
   --lt-border-focus: var(--lt-color-primary-200);
   --lt-border-info: var(--lt-color-info-200);
   --lt-border-info-strong: var(--lt-color-info-500);
+  --lt-border-input: var(--lt-border-default);
   --lt-border-primary: var(--lt-color-primary-200);
   --lt-border-primary-strong: var(--lt-color-primary-500);
   --lt-border-secondary: var(--lt-color-secondary-200);
@@ -34,23 +35,28 @@
   --lt-border-success-strong: var(--lt-color-success-500);
   --lt-border-warning: var(--lt-color-warning-200);
   --lt-border-warning-strong: var(--lt-color-warning-500);
+  --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+  --lt-focus-ring-color: var(--lt-border-focus);
   --lt-interactive-error-bg: var(--lt-color-error-500);
-  --lt-interactive-error-bg-active: var(--lt-color-error-700);
-  --lt-interactive-error-bg-hover: var(--lt-color-error-600);
+  --lt-interactive-error-bg-active: var(--lt-color-error-300);
+  --lt-interactive-error-bg-hover: var(--lt-color-error-400);
   --lt-interactive-info-bg: var(--lt-color-info-500);
-  --lt-interactive-info-bg-active: var(--lt-color-info-700);
-  --lt-interactive-info-bg-hover: var(--lt-color-info-600);
+  --lt-interactive-info-bg-active: var(--lt-color-info-300);
+  --lt-interactive-info-bg-hover: var(--lt-color-info-400);
+  --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+  --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+  --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
   --lt-interactive-primary-bg: var(--lt-color-primary-500);
-  --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
-  --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
+  --lt-interactive-primary-bg-active: var(--lt-color-primary-300);
+  --lt-interactive-primary-bg-hover: var(--lt-color-primary-400);
   --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
   --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
   --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
   --lt-interactive-success-bg: var(--lt-color-success-500);
-  --lt-interactive-success-bg-active: var(--lt-color-success-700);
-  --lt-interactive-success-bg-hover: var(--lt-color-success-600);
+  --lt-interactive-success-bg-active: var(--lt-color-success-300);
+  --lt-interactive-success-bg-hover: var(--lt-color-success-400);
   --lt-interactive-warning-bg: var(--lt-color-warning-500);
-  --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
+  --lt-interactive-warning-bg-active: var(--lt-color-warning-300);
   --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
   --lt-text-default: var(--lt-color-neutral-900);
   --lt-text-disabled: var(--lt-color-neutral-400);
@@ -59,12 +65,12 @@
   --lt-text-inverse: var(--lt-color-white);
   --lt-text-muted: var(--lt-color-neutral-600);
   --lt-text-neutral: var(--lt-color-neutral-700);
-  --lt-text-on-error: var(--lt-color-white);
-  --lt-text-on-info: var(--lt-color-white);
-  --lt-text-on-primary: var(--lt-color-neutral-900);
+  --lt-text-on-error: var(--lt-color-neutral-900);
+  --lt-text-on-info: var(--lt-color-info-900);
+  --lt-text-on-primary: var(--lt-color-primary-900);
   --lt-text-on-secondary: var(--lt-color-white);
-  --lt-text-on-success: var(--lt-color-white);
-  --lt-text-on-warning: var(--lt-color-warning-800);
+  --lt-text-on-success: var(--lt-color-success-900);
+  --lt-text-on-warning: var(--lt-color-warning-900);
   --lt-text-primary: var(--lt-color-primary-700);
   --lt-text-secondary: var(--lt-color-secondary-700);
   --lt-text-subtle: var(--lt-color-neutral-600);
@@ -98,6 +104,7 @@
     --lt-border-focus: var(--lt-color-primary-400);
     --lt-border-info: var(--lt-color-info-700);
     --lt-border-info-strong: var(--lt-color-info-500);
+    --lt-border-input: var(--lt-border-default);
     --lt-border-primary: var(--lt-color-primary-700);
     --lt-border-primary-strong: var(--lt-color-primary-500);
     --lt-border-secondary: var(--lt-color-secondary-700);
@@ -108,17 +115,22 @@
     --lt-border-success-strong: var(--lt-color-success-500);
     --lt-border-warning: var(--lt-color-warning-700);
     --lt-border-warning-strong: var(--lt-color-warning-500);
+    --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+    --lt-focus-ring-color: var(--lt-border-focus);
     --lt-interactive-error-bg: var(--lt-color-error-400);
     --lt-interactive-error-bg-active: var(--lt-color-error-500);
     --lt-interactive-error-bg-hover: var(--lt-color-error-300);
     --lt-interactive-info-bg: var(--lt-color-info-400);
     --lt-interactive-info-bg-active: var(--lt-color-info-500);
     --lt-interactive-info-bg-hover: var(--lt-color-info-300);
+    --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+    --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+    --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
     --lt-interactive-primary-bg: var(--lt-color-primary-400);
     --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
     --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
     --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
-    --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
+    --lt-interactive-secondary-bg-active: var(--lt-color-secondary-300);
     --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
     --lt-interactive-success-bg: var(--lt-color-success-400);
     --lt-interactive-success-bg-active: var(--lt-color-success-500);
@@ -133,12 +145,12 @@
     --lt-text-inverse: var(--lt-color-neutral-900);
     --lt-text-muted: var(--lt-color-neutral-400);
     --lt-text-neutral: var(--lt-color-neutral-200);
-    --lt-text-on-error: var(--lt-color-white);
-    --lt-text-on-info: var(--lt-color-white);
-    --lt-text-on-primary: var(--lt-color-neutral-900);
-    --lt-text-on-secondary: var(--lt-color-white);
-    --lt-text-on-success: var(--lt-color-white);
-    --lt-text-on-warning: var(--lt-color-warning-800);
+    --lt-text-on-error: var(--lt-color-neutral-900);
+    --lt-text-on-info: var(--lt-color-info-900);
+    --lt-text-on-primary: var(--lt-color-primary-900);
+    --lt-text-on-secondary: var(--lt-color-black);
+    --lt-text-on-success: var(--lt-color-success-900);
+    --lt-text-on-warning: var(--lt-color-warning-900);
     --lt-text-primary: var(--lt-color-primary-300);
     --lt-text-secondary: var(--lt-color-secondary-300);
     --lt-text-subtle: var(--lt-color-neutral-300);
@@ -172,6 +184,7 @@
   --lt-border-focus: var(--lt-color-primary-400);
   --lt-border-info: var(--lt-color-info-700);
   --lt-border-info-strong: var(--lt-color-info-500);
+  --lt-border-input: var(--lt-border-default);
   --lt-border-primary: var(--lt-color-primary-700);
   --lt-border-primary-strong: var(--lt-color-primary-500);
   --lt-border-secondary: var(--lt-color-secondary-700);
@@ -182,17 +195,22 @@
   --lt-border-success-strong: var(--lt-color-success-500);
   --lt-border-warning: var(--lt-color-warning-700);
   --lt-border-warning-strong: var(--lt-color-warning-500);
+  --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+  --lt-focus-ring-color: var(--lt-border-focus);
   --lt-interactive-error-bg: var(--lt-color-error-400);
   --lt-interactive-error-bg-active: var(--lt-color-error-500);
   --lt-interactive-error-bg-hover: var(--lt-color-error-300);
   --lt-interactive-info-bg: var(--lt-color-info-400);
   --lt-interactive-info-bg-active: var(--lt-color-info-500);
   --lt-interactive-info-bg-hover: var(--lt-color-info-300);
+  --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+  --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+  --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
   --lt-interactive-primary-bg: var(--lt-color-primary-400);
   --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
   --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
   --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
-  --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
+  --lt-interactive-secondary-bg-active: var(--lt-color-secondary-300);
   --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
   --lt-interactive-success-bg: var(--lt-color-success-400);
   --lt-interactive-success-bg-active: var(--lt-color-success-500);
@@ -207,12 +225,12 @@
   --lt-text-inverse: var(--lt-color-neutral-900);
   --lt-text-muted: var(--lt-color-neutral-400);
   --lt-text-neutral: var(--lt-color-neutral-200);
-  --lt-text-on-error: var(--lt-color-white);
-  --lt-text-on-info: var(--lt-color-white);
-  --lt-text-on-primary: var(--lt-color-neutral-900);
-  --lt-text-on-secondary: var(--lt-color-white);
-  --lt-text-on-success: var(--lt-color-white);
-  --lt-text-on-warning: var(--lt-color-warning-800);
+  --lt-text-on-error: var(--lt-color-neutral-900);
+  --lt-text-on-info: var(--lt-color-info-900);
+  --lt-text-on-primary: var(--lt-color-primary-900);
+  --lt-text-on-secondary: var(--lt-color-black);
+  --lt-text-on-success: var(--lt-color-success-900);
+  --lt-text-on-warning: var(--lt-color-warning-900);
   --lt-text-primary: var(--lt-color-primary-300);
   --lt-text-secondary: var(--lt-color-secondary-300);
   --lt-text-subtle: var(--lt-color-neutral-300);
@@ -244,6 +262,7 @@
   --lt-border-focus: var(--lt-color-primary-400);
   --lt-border-info: var(--lt-color-info-700);
   --lt-border-info-strong: var(--lt-color-info-500);
+  --lt-border-input: var(--lt-border-default);
   --lt-border-primary: var(--lt-color-primary-700);
   --lt-border-primary-strong: var(--lt-color-primary-500);
   --lt-border-secondary: var(--lt-color-secondary-700);
@@ -254,17 +273,22 @@
   --lt-border-success-strong: var(--lt-color-success-500);
   --lt-border-warning: var(--lt-color-warning-700);
   --lt-border-warning-strong: var(--lt-color-warning-500);
+  --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+  --lt-focus-ring-color: var(--lt-border-focus);
   --lt-interactive-error-bg: var(--lt-color-error-400);
   --lt-interactive-error-bg-active: var(--lt-color-error-500);
   --lt-interactive-error-bg-hover: var(--lt-color-error-300);
   --lt-interactive-info-bg: var(--lt-color-info-400);
   --lt-interactive-info-bg-active: var(--lt-color-info-500);
   --lt-interactive-info-bg-hover: var(--lt-color-info-300);
+  --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+  --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+  --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
   --lt-interactive-primary-bg: var(--lt-color-primary-400);
   --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
   --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
   --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
-  --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
+  --lt-interactive-secondary-bg-active: var(--lt-color-secondary-300);
   --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
   --lt-interactive-success-bg: var(--lt-color-success-400);
   --lt-interactive-success-bg-active: var(--lt-color-success-500);
@@ -279,12 +303,12 @@
   --lt-text-inverse: var(--lt-color-neutral-900);
   --lt-text-muted: var(--lt-color-neutral-400);
   --lt-text-neutral: var(--lt-color-neutral-200);
-  --lt-text-on-error: var(--lt-color-white);
-  --lt-text-on-info: var(--lt-color-white);
-  --lt-text-on-primary: var(--lt-color-neutral-900);
-  --lt-text-on-secondary: var(--lt-color-white);
-  --lt-text-on-success: var(--lt-color-white);
-  --lt-text-on-warning: var(--lt-color-warning-800);
+  --lt-text-on-error: var(--lt-color-neutral-900);
+  --lt-text-on-info: var(--lt-color-info-900);
+  --lt-text-on-primary: var(--lt-color-primary-900);
+  --lt-text-on-secondary: var(--lt-color-black);
+  --lt-text-on-success: var(--lt-color-success-900);
+  --lt-text-on-warning: var(--lt-color-warning-900);
   --lt-text-primary: var(--lt-color-primary-300);
   --lt-text-secondary: var(--lt-color-secondary-300);
   --lt-text-subtle: var(--lt-color-neutral-300);
@@ -317,6 +341,7 @@
   --lt-border-focus: var(--lt-color-primary-200);
   --lt-border-info: var(--lt-color-info-200);
   --lt-border-info-strong: var(--lt-color-info-500);
+  --lt-border-input: var(--lt-border-default);
   --lt-border-primary: var(--lt-color-primary-200);
   --lt-border-primary-strong: var(--lt-color-primary-500);
   --lt-border-secondary: var(--lt-color-secondary-200);
@@ -327,23 +352,28 @@
   --lt-border-success-strong: var(--lt-color-success-500);
   --lt-border-warning: var(--lt-color-warning-200);
   --lt-border-warning-strong: var(--lt-color-warning-500);
+  --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+  --lt-focus-ring-color: var(--lt-border-focus);
   --lt-interactive-error-bg: var(--lt-color-error-500);
-  --lt-interactive-error-bg-active: var(--lt-color-error-700);
-  --lt-interactive-error-bg-hover: var(--lt-color-error-600);
+  --lt-interactive-error-bg-active: var(--lt-color-error-300);
+  --lt-interactive-error-bg-hover: var(--lt-color-error-400);
   --lt-interactive-info-bg: var(--lt-color-info-500);
-  --lt-interactive-info-bg-active: var(--lt-color-info-700);
-  --lt-interactive-info-bg-hover: var(--lt-color-info-600);
+  --lt-interactive-info-bg-active: var(--lt-color-info-300);
+  --lt-interactive-info-bg-hover: var(--lt-color-info-400);
+  --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+  --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+  --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
   --lt-interactive-primary-bg: var(--lt-color-primary-500);
-  --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
-  --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
+  --lt-interactive-primary-bg-active: var(--lt-color-primary-300);
+  --lt-interactive-primary-bg-hover: var(--lt-color-primary-400);
   --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
   --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
   --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
   --lt-interactive-success-bg: var(--lt-color-success-500);
-  --lt-interactive-success-bg-active: var(--lt-color-success-700);
-  --lt-interactive-success-bg-hover: var(--lt-color-success-600);
+  --lt-interactive-success-bg-active: var(--lt-color-success-300);
+  --lt-interactive-success-bg-hover: var(--lt-color-success-400);
   --lt-interactive-warning-bg: var(--lt-color-warning-500);
-  --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
+  --lt-interactive-warning-bg-active: var(--lt-color-warning-300);
   --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
   --lt-text-default: var(--lt-color-neutral-900);
   --lt-text-disabled: var(--lt-color-neutral-400);
@@ -352,12 +382,12 @@
   --lt-text-inverse: var(--lt-color-white);
   --lt-text-muted: var(--lt-color-neutral-600);
   --lt-text-neutral: var(--lt-color-neutral-700);
-  --lt-text-on-error: var(--lt-color-white);
-  --lt-text-on-info: var(--lt-color-white);
-  --lt-text-on-primary: var(--lt-color-neutral-900);
+  --lt-text-on-error: var(--lt-color-neutral-900);
+  --lt-text-on-info: var(--lt-color-info-900);
+  --lt-text-on-primary: var(--lt-color-primary-900);
   --lt-text-on-secondary: var(--lt-color-white);
-  --lt-text-on-success: var(--lt-color-white);
-  --lt-text-on-warning: var(--lt-color-warning-800);
+  --lt-text-on-success: var(--lt-color-success-900);
+  --lt-text-on-warning: var(--lt-color-warning-900);
   --lt-text-primary: var(--lt-color-primary-700);
   --lt-text-secondary: var(--lt-color-secondary-700);
   --lt-text-subtle: var(--lt-color-neutral-600);
@@ -389,6 +419,7 @@
   --lt-border-focus: var(--lt-color-primary-200);
   --lt-border-info: var(--lt-color-info-200);
   --lt-border-info-strong: var(--lt-color-info-500);
+  --lt-border-input: var(--lt-border-default);
   --lt-border-primary: var(--lt-color-primary-200);
   --lt-border-primary-strong: var(--lt-color-primary-500);
   --lt-border-secondary: var(--lt-color-secondary-200);
@@ -399,23 +430,28 @@
   --lt-border-success-strong: var(--lt-color-success-500);
   --lt-border-warning: var(--lt-color-warning-200);
   --lt-border-warning-strong: var(--lt-color-warning-500);
+  --lt-focus-halo-color: var(--lt-bg-primary-subtle);
+  --lt-focus-ring-color: var(--lt-border-focus);
   --lt-interactive-error-bg: var(--lt-color-error-500);
-  --lt-interactive-error-bg-active: var(--lt-color-error-700);
-  --lt-interactive-error-bg-hover: var(--lt-color-error-600);
+  --lt-interactive-error-bg-active: var(--lt-color-error-300);
+  --lt-interactive-error-bg-hover: var(--lt-color-error-400);
   --lt-interactive-info-bg: var(--lt-color-info-500);
-  --lt-interactive-info-bg-active: var(--lt-color-info-700);
-  --lt-interactive-info-bg-hover: var(--lt-color-info-600);
+  --lt-interactive-info-bg-active: var(--lt-color-info-300);
+  --lt-interactive-info-bg-hover: var(--lt-color-info-400);
+  --lt-interactive-neutral-bg: var(--lt-color-neutral-600);
+  --lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
+  --lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
   --lt-interactive-primary-bg: var(--lt-color-primary-500);
-  --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
-  --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
+  --lt-interactive-primary-bg-active: var(--lt-color-primary-300);
+  --lt-interactive-primary-bg-hover: var(--lt-color-primary-400);
   --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
   --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
   --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
   --lt-interactive-success-bg: var(--lt-color-success-500);
-  --lt-interactive-success-bg-active: var(--lt-color-success-700);
-  --lt-interactive-success-bg-hover: var(--lt-color-success-600);
+  --lt-interactive-success-bg-active: var(--lt-color-success-300);
+  --lt-interactive-success-bg-hover: var(--lt-color-success-400);
   --lt-interactive-warning-bg: var(--lt-color-warning-500);
-  --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
+  --lt-interactive-warning-bg-active: var(--lt-color-warning-300);
   --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
   --lt-text-default: var(--lt-color-neutral-900);
   --lt-text-disabled: var(--lt-color-neutral-400);
@@ -424,12 +460,12 @@
   --lt-text-inverse: var(--lt-color-white);
   --lt-text-muted: var(--lt-color-neutral-600);
   --lt-text-neutral: var(--lt-color-neutral-700);
-  --lt-text-on-error: var(--lt-color-white);
-  --lt-text-on-info: var(--lt-color-white);
-  --lt-text-on-primary: var(--lt-color-neutral-900);
+  --lt-text-on-error: var(--lt-color-neutral-900);
+  --lt-text-on-info: var(--lt-color-info-900);
+  --lt-text-on-primary: var(--lt-color-primary-900);
   --lt-text-on-secondary: var(--lt-color-white);
-  --lt-text-on-success: var(--lt-color-white);
-  --lt-text-on-warning: var(--lt-color-warning-800);
+  --lt-text-on-success: var(--lt-color-success-900);
+  --lt-text-on-warning: var(--lt-color-warning-900);
   --lt-text-primary: var(--lt-color-primary-700);
   --lt-text-secondary: var(--lt-color-secondary-700);
   --lt-text-subtle: var(--lt-color-neutral-600);

package/dist/tokens.css

@@ -1,4 +1,6 @@
 :root{
+  --lt-border-focusRingOffset: 2px;
+  --lt-border-focusRingWidth: 3px;
   --lt-border-radius: 0.5rem;
   --lt-border-width: 1px;
   --lt-color-black: #000000;
@@ -133,6 +135,12 @@
   --lt-color-warning-muted-800: #504c42;
   --lt-color-warning-muted-900: #292621;
   --lt-color-white: #FFFFFF;
+  --lt-duration-fast: 150ms;
+  --lt-duration-instant: 100ms;
+  --lt-duration-moderate: 200ms;
+  --lt-duration-slow: 300ms;
+  --lt-ease-emphasized: cubic-bezier(0.34, 1.2, 0.64, 1);
+  --lt-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --lt-elevation-0: none;
   --lt-elevation-1: 0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06);
   --lt-elevation-2: 0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06);
@@ -190,4 +198,6 @@
   --lt-spacing-8: 2rem;
   --lt-spacing-9: 2.25rem;
   --lt-typography-fontFamilyPrimary: "Hanken Grotesk", sans-serif;
+  --lt-z-overlay: 1000;
+  --lt-z-sticky: 100;
 }

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","width":"1px"},"typography":{"fontFamilyPrimary":"\"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-600","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-400","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","focusRingWidth":"3px","focusRingOffset":"2px"},"typography":{"fontFamilyPrimary":"\"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)"},"duration":{"instant":"100ms","fast":"150ms","moderate":"200ms","slow":"300ms"},"ease":{"standard":"cubic-bezier(0.4, 0, 0.2, 1)","emphasized":"cubic-bezier(0.34, 1.2, 0.64, 1)"},"z":{"sticky":"100","overlay":"1000"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-600","text-disabled":"color-neutral-400","text-inverse":"color-white","text-neutral":"color-neutral-700","text-primary":"color-primary-700","text-secondary":"color-secondary-700","text-success":"color-success-700","text-warning":"color-warning-700","text-error":"color-error-700","text-info":"color-info-700","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-input":"border-default","focus-ring-color":"border-focus","focus-halo-color":"bg-primary-subtle","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","text-on-primary":"color-primary-900","interactive-primary-bg":"color-primary-500","interactive-primary-bg-hover":"color-primary-400","interactive-primary-bg-active":"color-primary-300","text-on-secondary":"color-white","interactive-secondary-bg":"color-secondary-500","interactive-secondary-bg-hover":"color-secondary-600","interactive-secondary-bg-active":"color-secondary-700","text-on-success":"color-success-900","interactive-success-bg":"color-success-500","interactive-success-bg-hover":"color-success-400","interactive-success-bg-active":"color-success-300","text-on-warning":"color-warning-900","interactive-warning-bg":"color-warning-500","interactive-warning-bg-hover":"color-warning-600","interactive-warning-bg-active":"color-warning-300","text-on-error":"color-neutral-900","interactive-error-bg":"color-error-500","interactive-error-bg-hover":"color-error-400","interactive-error-bg-active":"color-error-300","text-on-info":"color-info-900","interactive-info-bg":"color-info-500","interactive-info-bg-hover":"color-info-400","interactive-info-bg-active":"color-info-300","interactive-neutral-bg":"color-neutral-600","interactive-neutral-bg-hover":"color-neutral-700","interactive-neutral-bg-active":"color-neutral-800"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-400","text-disabled":"color-neutral-600","text-inverse":"color-neutral-900","text-neutral":"color-neutral-200","text-primary":"color-primary-300","text-secondary":"color-secondary-300","text-success":"color-success-300","text-warning":"color-warning-300","text-error":"color-error-300","text-info":"color-info-300","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-input":"border-default","focus-ring-color":"border-focus","focus-halo-color":"bg-primary-subtle","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","text-on-primary":"color-primary-900","interactive-primary-bg":"color-primary-400","interactive-primary-bg-hover":"color-primary-300","interactive-primary-bg-active":"color-primary-500","text-on-secondary":"color-black","interactive-secondary-bg":"color-secondary-400","interactive-secondary-bg-hover":"color-secondary-300","interactive-secondary-bg-active":"color-secondary-300","text-on-success":"color-success-900","interactive-success-bg":"color-success-400","interactive-success-bg-hover":"color-success-300","interactive-success-bg-active":"color-success-500","text-on-warning":"color-warning-900","interactive-warning-bg":"color-warning-400","interactive-warning-bg-hover":"color-warning-300","interactive-warning-bg-active":"color-warning-500","text-on-error":"color-neutral-900","interactive-error-bg":"color-error-400","interactive-error-bg-hover":"color-error-300","interactive-error-bg-active":"color-error-500","text-on-info":"color-info-900","interactive-info-bg":"color-info-400","interactive-info-bg-hover":"color-info-300","interactive-info-bg-active":"color-info-500","interactive-neutral-bg":"color-neutral-600","interactive-neutral-bg-hover":"color-neutral-700","interactive-neutral-bg-active":"color-neutral-800"}};

package/dist/tokens.json

@@ -217,7 +217,9 @@
   },
   "border": {
     "radius": "0.5rem",
-    "width": "1px"
+    "width": "1px",
+    "focusRingWidth": "3px",
+    "focusRingOffset": "2px"
   },
   "typography": {
     "fontFamilyPrimary": "\"Hanken Grotesk\", sans-serif"
@@ -230,6 +232,20 @@
     "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)"
   },
+  "duration": {
+    "instant": "100ms",
+    "fast": "150ms",
+    "moderate": "200ms",
+    "slow": "300ms"
+  },
+  "ease": {
+    "standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "emphasized": "cubic-bezier(0.34, 1.2, 0.64, 1)"
+  },
+  "z": {
+    "sticky": "100",
+    "overlay": "1000"
+  },
   "semantic": {
     "text-default": "color-neutral-900",
     "text-subtle": "color-neutral-600",
@@ -238,17 +254,11 @@
     "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",
@@ -271,6 +281,9 @@
     "border-strong": "color-neutral-400",
     "border-subtle": "color-neutral-100",
     "border-focus": "color-primary-200",
+    "border-input": "border-default",
+    "focus-ring-color": "border-focus",
+    "focus-halo-color": "bg-primary-subtle",
     "border-primary": "color-primary-200",
     "border-primary-strong": "color-primary-500",
     "border-secondary": "color-secondary-200",
@@ -283,24 +296,33 @@
     "border-error-strong": "color-error-500",
     "border-info": "color-info-200",
     "border-info-strong": "color-info-500",
+    "text-on-primary": "color-primary-900",
     "interactive-primary-bg": "color-primary-500",
-    "interactive-primary-bg-hover": "color-primary-600",
-    "interactive-primary-bg-active": "color-primary-700",
+    "interactive-primary-bg-hover": "color-primary-400",
+    "interactive-primary-bg-active": "color-primary-300",
+    "text-on-secondary": "color-white",
     "interactive-secondary-bg": "color-secondary-500",
     "interactive-secondary-bg-hover": "color-secondary-600",
     "interactive-secondary-bg-active": "color-secondary-700",
+    "text-on-success": "color-success-900",
     "interactive-success-bg": "color-success-500",
-    "interactive-success-bg-hover": "color-success-600",
-    "interactive-success-bg-active": "color-success-700",
+    "interactive-success-bg-hover": "color-success-400",
+    "interactive-success-bg-active": "color-success-300",
+    "text-on-warning": "color-warning-900",
     "interactive-warning-bg": "color-warning-500",
     "interactive-warning-bg-hover": "color-warning-600",
-    "interactive-warning-bg-active": "color-warning-700",
+    "interactive-warning-bg-active": "color-warning-300",
+    "text-on-error": "color-neutral-900",
     "interactive-error-bg": "color-error-500",
-    "interactive-error-bg-hover": "color-error-600",
-    "interactive-error-bg-active": "color-error-700",
+    "interactive-error-bg-hover": "color-error-400",
+    "interactive-error-bg-active": "color-error-300",
+    "text-on-info": "color-info-900",
     "interactive-info-bg": "color-info-500",
-    "interactive-info-bg-hover": "color-info-600",
-    "interactive-info-bg-active": "color-info-700"
+    "interactive-info-bg-hover": "color-info-400",
+    "interactive-info-bg-active": "color-info-300",
+    "interactive-neutral-bg": "color-neutral-600",
+    "interactive-neutral-bg-hover": "color-neutral-700",
+    "interactive-neutral-bg-active": "color-neutral-800"
   },
   "semanticDark": {
     "text-default": "color-neutral-100",
@@ -310,17 +332,11 @@
     "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",
@@ -343,6 +359,9 @@
     "border-strong": "color-neutral-500",
     "border-subtle": "color-neutral-800",
     "border-focus": "color-primary-400",
+    "border-input": "border-default",
+    "focus-ring-color": "border-focus",
+    "focus-halo-color": "bg-primary-subtle",
     "border-primary": "color-primary-700",
     "border-primary-strong": "color-primary-500",
     "border-secondary": "color-secondary-700",
@@ -355,23 +374,32 @@
     "border-error-strong": "color-error-500",
     "border-info": "color-info-700",
     "border-info-strong": "color-info-500",
+    "text-on-primary": "color-primary-900",
     "interactive-primary-bg": "color-primary-400",
     "interactive-primary-bg-hover": "color-primary-300",
     "interactive-primary-bg-active": "color-primary-500",
+    "text-on-secondary": "color-black",
     "interactive-secondary-bg": "color-secondary-400",
     "interactive-secondary-bg-hover": "color-secondary-300",
-    "interactive-secondary-bg-active": "color-secondary-500",
+    "interactive-secondary-bg-active": "color-secondary-300",
+    "text-on-success": "color-success-900",
     "interactive-success-bg": "color-success-400",
     "interactive-success-bg-hover": "color-success-300",
     "interactive-success-bg-active": "color-success-500",
+    "text-on-warning": "color-warning-900",
     "interactive-warning-bg": "color-warning-400",
     "interactive-warning-bg-hover": "color-warning-300",
     "interactive-warning-bg-active": "color-warning-500",
+    "text-on-error": "color-neutral-900",
     "interactive-error-bg": "color-error-400",
     "interactive-error-bg-hover": "color-error-300",
     "interactive-error-bg-active": "color-error-500",
+    "text-on-info": "color-info-900",
     "interactive-info-bg": "color-info-400",
     "interactive-info-bg-hover": "color-info-300",
-    "interactive-info-bg-active": "color-info-500"
+    "interactive-info-bg-active": "color-info-500",
+    "interactive-neutral-bg": "color-neutral-600",
+    "interactive-neutral-bg-hover": "color-neutral-700",
+    "interactive-neutral-bg-active": "color-neutral-800"
   }
 }

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

@@ -1,9 +1,11 @@
 import type { PaletteFlat } from './palette.types';
 import type { SpacingTokens } from './spacing.types';
 import type { ElevationTokens } from '../elevation/';
+import type { DurationToken, EaseToken } from '../motion/';
+import type { ZIndexLayer } from '../zindex/';
 /**
  * Complete design system tokens.
- * Includes color palettes, spacing scales, border properties, typography, and elevation.
+ * Includes color palettes, spacing scales, border properties, typography, elevation, motion, and z-index.
  *
  * Elevation is automatically generated from the neutral color palette to ensure
  * consistent shadows that match the design system's color scheme.
@@ -21,7 +23,10 @@ import type { ElevationTokens } from '../elevation/';
  *     px: { "0": "0px", "1": "4px", ... }
  *   },
  *   border: {
- *     radius: "0.375rem"
+ *     radius: "0.375rem",
+ *     width: "1px",
+ *     focusRingWidth: "3px",
+ *     focusRingOffset: "2px"
  *   },
  *   typography: {
  *     fontFamilyPrimary: "Hanken Grotesk, sans-serif"
@@ -30,7 +35,10 @@ import type { ElevationTokens } from '../elevation/';
  *     "0": "none",
  *     "1": "0 1px 3px 0 rgb(23 23 23 / 0.1), 0 1px 2px 0 rgb(23 23 23 / 0.06)",
  *     // ... other elevations (generated from neutral-900)
- *   }
+ *   },
+ *   duration: { instant: "100ms", fast: "150ms", moderate: "200ms", slow: "300ms" },
+ *   ease: { standard: "cubic-bezier(0.4, 0, 0.2, 1)", emphasized: "cubic-bezier(0.34, 1.2, 0.64, 1)" },
+ *   z: { sticky: "100", overlay: "1000" }
  * };
  * ```
  */
@@ -40,11 +48,16 @@ export type Tokens = {
     border: {
         radius: string;
         width: string;
+        focusRingWidth: string;
+        focusRingOffset: string;
     };
     typography: {
         fontFamilyPrimary: string;
     } & Record<string, string>;
     elevation: ElevationTokens;
+    duration: Record<DurationToken, string>;
+    ease: Record<EaseToken, string>;
+    z: Record<ZIndexLayer, string>;
 };
 export type { Config, TokenColorName } from './';
 /**

package/dist/zindex/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Z-index token generation.
+ * Provides a minimal stacking-layer scale for components not yet on the native top layer.
+ *
+ * @module zindex
+ */
+export { buildZIndex } from './zindex';
+export type { ZIndexLayer } from './zindex';

package/dist/zindex/zindex.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Stacking-layer scale.
+ *
+ * - `sticky`: in-flow elements that sit above normal content (header, nav)
+ * - `overlay`: floating overlay content not on the native top layer (select, combobox, dropdown, tooltip,
+ *   date-input's calendar popover) — components using native `<dialog>`/the Popover API (dialog, sidepanel,
+ *   snackbar) don't need a z-index token at all, since the top layer always wins regardless of stacking context.
+ */
+export type ZIndexLayer = 'sticky' | 'overlay';
+export declare const buildZIndex: () => Record<ZIndexLayer, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/tokens",
-  "version": "0.10.2",
+  "version": "1.0.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": {
@@ -55,10 +55,10 @@
   "devDependencies": {
     "@latty-ds/utils": "0.7.0",
     "@types/culori": "^4.0.1",
-    "typescript": "^5.5.4"
+    "typescript": "^6.0.3"
   },
   "dependencies": {
     "culori": "^4.0.2"
   },
-  "gitHead": "f8b8b747808307e0eab693efe2072a5b8ebf11be"
+  "gitHead": "fa5fe02064dea0ecfbb11423a5e51093b2bf7095"
 }