@asafarim/design-tokens 0.4.5 → 0.4.9

package/src/tokens/spacing/grid.ts

@@ -1,28 +1,28 @@
-import type { Token } from "../../core/types";
-
-export const grid = {
-  columns: {
-    value: 12,
-    description: "Default grid column count."
-  } satisfies Token<number>,
-  gutter: {
-    value: "24px",
-    description: "Default grid gutter size."
-  } satisfies Token,
-  breakpoints: {
-    xs: { value: "360px", description: "Breakpoint XS." } satisfies Token,
-    sm: { value: "640px", description: "Breakpoint SM." } satisfies Token,
-    md: { value: "768px", description: "Breakpoint MD." } satisfies Token,
-    lg: { value: "1024px", description: "Breakpoint LG." } satisfies Token,
-    xl: { value: "1280px", description: "Breakpoint XL." } satisfies Token,
-    x2l: { value: "1536px", description: "Breakpoint 2XL." } satisfies Token
-  },
-  containerWidths: {
-    xs: { value: "480px", description: "Container width XS." } satisfies Token,
-    sm: { value: "640px", description: "Container width SM." } satisfies Token,
-    md: { value: "768px", description: "Container width MD." } satisfies Token,
-    lg: { value: "1024px", description: "Container width LG." } satisfies Token,
-    xl: { value: "1280px", description: "Container width XL." } satisfies Token,
-    x2l: { value: "1360px", description: "Container width 2XL (ASafariM standard)." } satisfies Token
-  }
-} as const;
+import type { Token } from "../../core/types";
+
+export const grid = {
+  columns: {
+    value: 12,
+    description: "Default grid column count."
+  } satisfies Token<number>,
+  gutter: {
+    value: "24px",
+    description: "Default grid gutter size."
+  } satisfies Token,
+  breakpoints: {
+    xs: { value: "360px", description: "Breakpoint XS." } satisfies Token,
+    sm: { value: "640px", description: "Breakpoint SM." } satisfies Token,
+    md: { value: "768px", description: "Breakpoint MD." } satisfies Token,
+    lg: { value: "1024px", description: "Breakpoint LG." } satisfies Token,
+    xl: { value: "1280px", description: "Breakpoint XL." } satisfies Token,
+    x2l: { value: "1536px", description: "Breakpoint 2XL." } satisfies Token
+  },
+  containerWidths: {
+    xs: { value: "480px", description: "Container width XS." } satisfies Token,
+    sm: { value: "640px", description: "Container width SM." } satisfies Token,
+    md: { value: "768px", description: "Container width MD." } satisfies Token,
+    lg: { value: "1024px", description: "Container width LG." } satisfies Token,
+    xl: { value: "1280px", description: "Container width XL." } satisfies Token,
+    x2l: { value: "1360px", description: "Container width 2XL (ASafariM standard)." } satisfies Token
+  }
+} as const;

package/src/tokens/spacing/index.ts

@@ -1,5 +1,5 @@
-export { scale } from "./scale";
-export { layout } from "./layout";
-export { grid } from "./grid";
-export { density } from "./density";
-export { rtl } from "./rtl";
+export { scale } from "./scale";
+export { layout } from "./layout";
+export { grid } from "./grid";
+export { density } from "./density";
+export { rtl } from "./rtl";

package/src/tokens/spacing/layout.ts

@@ -1,20 +1,20 @@
-import type { Token } from "../../core/types";
-
-export const layout = {
-  pagePaddingX: {
-    value: "clamp(16px, 3vw, 32px)",
-    description: "Default horizontal page padding (responsive)."
-  } satisfies Token,
-  pagePaddingY: {
-    value: "clamp(16px, 3vw, 40px)",
-    description: "Default vertical page padding (responsive)."
-  } satisfies Token,
-  sectionGap: {
-    value: "clamp(24px, 4vw, 64px)",
-    description: "Vertical spacing between major sections."
-  } satisfies Token,
-  componentGap: {
-    value: "16px",
-    description: "Default spacing between components within a section."
-  } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const layout = {
+  pagePaddingX: {
+    value: "clamp(16px, 3vw, 32px)",
+    description: "Default horizontal page padding (responsive)."
+  } satisfies Token,
+  pagePaddingY: {
+    value: "clamp(16px, 3vw, 40px)",
+    description: "Default vertical page padding (responsive)."
+  } satisfies Token,
+  sectionGap: {
+    value: "clamp(24px, 4vw, 64px)",
+    description: "Vertical spacing between major sections."
+  } satisfies Token,
+  componentGap: {
+    value: "16px",
+    description: "Default spacing between components within a section."
+  } satisfies Token
+} as const;

package/src/tokens/spacing/rtl.ts

@@ -1,20 +1,20 @@
-import type { Token } from "../../core/types";
-
-export const rtl = {
-  logicalInsetStart: {
-    value: "inset-inline-start",
-    description: "Use logical inset start property for RTL-safe positioning."
-  } satisfies Token,
-  logicalInsetEnd: {
-    value: "inset-inline-end",
-    description: "Use logical inset end property for RTL-safe positioning."
-  } satisfies Token,
-  logicalMarginStart: {
-    value: "margin-inline-start",
-    description: "Use logical margin start for RTL-safe spacing."
-  } satisfies Token,
-  logicalMarginEnd: {
-    value: "margin-inline-end",
-    description: "Use logical margin end for RTL-safe spacing."
-  } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const rtl = {
+  logicalInsetStart: {
+    value: "inset-inline-start",
+    description: "Use logical inset start property for RTL-safe positioning."
+  } satisfies Token,
+  logicalInsetEnd: {
+    value: "inset-inline-end",
+    description: "Use logical inset end property for RTL-safe positioning."
+  } satisfies Token,
+  logicalMarginStart: {
+    value: "margin-inline-start",
+    description: "Use logical margin start for RTL-safe spacing."
+  } satisfies Token,
+  logicalMarginEnd: {
+    value: "margin-inline-end",
+    description: "Use logical margin end for RTL-safe spacing."
+  } satisfies Token
+} as const;

package/src/tokens/spacing/scale.ts

@@ -1,15 +1,15 @@
-import type { Token } from "../../core/types";
-
-export const scale = {
-  s0: { value: "0px", description: "Spacing 0." } satisfies Token,
-  s1: { value: "4px", description: "Spacing 1 (4px)." } satisfies Token,
-  s2: { value: "8px", description: "Spacing 2 (8px)." } satisfies Token,
-  s3: { value: "12px", description: "Spacing 3 (12px)." } satisfies Token,
-  s4: { value: "16px", description: "Spacing 4 (16px)." } satisfies Token,
-  s5: { value: "20px", description: "Spacing 5 (20px)." } satisfies Token,
-  s6: { value: "24px", description: "Spacing 6 (24px)." } satisfies Token,
-  s8: { value: "32px", description: "Spacing 8 (32px)." } satisfies Token,
-  s10: { value: "40px", description: "Spacing 10 (40px)." } satisfies Token,
-  s12: { value: "48px", description: "Spacing 12 (48px)." } satisfies Token,
-  s16: { value: "64px", description: "Spacing 16 (64px)." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const scale = {
+  s0: { value: "0px", description: "Spacing 0." } satisfies Token,
+  s1: { value: "4px", description: "Spacing 1 (4px)." } satisfies Token,
+  s2: { value: "8px", description: "Spacing 2 (8px)." } satisfies Token,
+  s3: { value: "12px", description: "Spacing 3 (12px)." } satisfies Token,
+  s4: { value: "16px", description: "Spacing 4 (16px)." } satisfies Token,
+  s5: { value: "20px", description: "Spacing 5 (20px)." } satisfies Token,
+  s6: { value: "24px", description: "Spacing 6 (24px)." } satisfies Token,
+  s8: { value: "32px", description: "Spacing 8 (32px)." } satisfies Token,
+  s10: { value: "40px", description: "Spacing 10 (40px)." } satisfies Token,
+  s12: { value: "48px", description: "Spacing 12 (48px)." } satisfies Token,
+  s16: { value: "64px", description: "Spacing 16 (64px)." } satisfies Token
+} as const;

package/src/tokens/typography/families.ts

@@ -1,14 +1,14 @@
-import type { Token } from "../../core/types";
-
-export const families = {
-  primary: {
-    value:
-      "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
-    description: "Primary UI font family stack (Inter first)."
-  } satisfies Token,
-  mono: {
-    value:
-      "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
-    description: "Monospace font family stack (JetBrains Mono first)."
-  } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const families = {
+  primary: {
+    value:
+      "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
+    description: "Primary UI font family stack (Inter first)."
+  } satisfies Token,
+  mono: {
+    value:
+      "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+    description: "Monospace font family stack (JetBrains Mono first)."
+  } satisfies Token
+} as const;

package/src/tokens/typography/headings.ts

@@ -1,29 +1,29 @@
-import type { Token } from "../../core/types";
-
-export const headings = {
-  h1: {
-    value: "var(--asm-font-size-6xl) / var(--asm-line-height-h1) var(--asm-font-family-primary)",
-    description: "H1 shorthand (size/line-height/family).",
-    meta: { note: "Use size/weight/lineHeight tokens for precise control." }
-  } satisfies Token,
-  h2: {
-    value: "var(--asm-font-size-5xl) / var(--asm-line-height-h2) var(--asm-font-family-primary)",
-    description: "H2 shorthand (size/line-height/family)."
-  } satisfies Token,
-  h3: {
-    value: "var(--asm-font-size-4xl) / var(--asm-line-height-h3) var(--asm-font-family-primary)",
-    description: "H3 shorthand (size/line-height/family)."
-  } satisfies Token,
-  h4: {
-    value: "var(--asm-font-size-3xl) / var(--asm-line-height-h4) var(--asm-font-family-primary)",
-    description: "H4 shorthand (size/line-height/family)."
-  } satisfies Token,
-  h5: {
-    value: "var(--asm-font-size-2xl) / var(--asm-line-height-h5) var(--asm-font-family-primary)",
-    description: "H5 shorthand (size/line-height/family)."
-  } satisfies Token,
-  h6: {
-    value: "var(--asm-font-size-xl) / var(--asm-line-height-h6) var(--asm-font-family-primary)",
-    description: "H6 shorthand (size/line-height/family)."
-  } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const headings = {
+  h1: {
+    value: "var(--asm-font-size-6xl) / var(--asm-line-height-h1) var(--asm-font-family-primary)",
+    description: "H1 shorthand (size/line-height/family).",
+    meta: { note: "Use size/weight/lineHeight tokens for precise control." }
+  } satisfies Token,
+  h2: {
+    value: "var(--asm-font-size-5xl) / var(--asm-line-height-h2) var(--asm-font-family-primary)",
+    description: "H2 shorthand (size/line-height/family)."
+  } satisfies Token,
+  h3: {
+    value: "var(--asm-font-size-4xl) / var(--asm-line-height-h3) var(--asm-font-family-primary)",
+    description: "H3 shorthand (size/line-height/family)."
+  } satisfies Token,
+  h4: {
+    value: "var(--asm-font-size-3xl) / var(--asm-line-height-h4) var(--asm-font-family-primary)",
+    description: "H4 shorthand (size/line-height/family)."
+  } satisfies Token,
+  h5: {
+    value: "var(--asm-font-size-2xl) / var(--asm-line-height-h5) var(--asm-font-family-primary)",
+    description: "H5 shorthand (size/line-height/family)."
+  } satisfies Token,
+  h6: {
+    value: "var(--asm-font-size-xl) / var(--asm-line-height-h6) var(--asm-font-family-primary)",
+    description: "H6 shorthand (size/line-height/family)."
+  } satisfies Token
+} as const;

package/src/tokens/typography/index.ts

@@ -1,7 +1,7 @@
-export { families } from "./families";
-export { weights } from "./weights";
-export { sizes } from "./sizes";
-export { lineHeights } from "./lineHeights";
-export { letterSpacing } from "./letterSpacing";
-export { headings } from "./headings";
-export { responsive } from "./responsive";
+export { families } from "./families";
+export { weights } from "./weights";
+export { sizes } from "./sizes";
+export { lineHeights } from "./lineHeights";
+export { letterSpacing } from "./letterSpacing";
+export { headings } from "./headings";
+export { responsive } from "./responsive";

package/src/tokens/typography/letterSpacing.ts

@@ -1,7 +1,7 @@
-import type { Token } from "../../core/types";
-
-export const letterSpacing = {
-  tight: { value: "-0.01em", description: "Tight letter spacing." } satisfies Token,
-  normal: { value: "0em", description: "Normal letter spacing." } satisfies Token,
-  wide: { value: "0.02em", description: "Wide letter spacing." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const letterSpacing = {
+  tight: { value: "-0.01em", description: "Tight letter spacing." } satisfies Token,
+  normal: { value: "0em", description: "Normal letter spacing." } satisfies Token,
+  wide: { value: "0.02em", description: "Wide letter spacing." } satisfies Token
+} as const;

package/src/tokens/typography/lineHeights.ts

@@ -1,13 +1,13 @@
-import type { Token } from "../../core/types";
-
-export const lineHeights = {
-  tight: { value: 1.1, description: "Tight line-height (headings)." } satisfies Token<number>,
-  normal: { value: 1.4, description: "Normal line-height (UI)." } satisfies Token<number>,
-  relaxed: { value: 1.6, description: "Relaxed line-height (long form)." } satisfies Token<number>,
-  h1: { value: 1.05, description: "H1 line-height." } satisfies Token<number>,
-  h2: { value: 1.1, description: "H2 line-height." } satisfies Token<number>,
-  h3: { value: 1.15, description: "H3 line-height." } satisfies Token<number>,
-  h4: { value: 1.2, description: "H4 line-height." } satisfies Token<number>,
-  h5: { value: 1.25, description: "H5 line-height." } satisfies Token<number>,
-  h6: { value: 1.25, description: "H6 line-height." } satisfies Token<number>
-} as const;
+import type { Token } from "../../core/types";
+
+export const lineHeights = {
+  tight: { value: 1.1, description: "Tight line-height (headings)." } satisfies Token<number>,
+  normal: { value: 1.4, description: "Normal line-height (UI)." } satisfies Token<number>,
+  relaxed: { value: 1.6, description: "Relaxed line-height (long form)." } satisfies Token<number>,
+  h1: { value: 1.05, description: "H1 line-height." } satisfies Token<number>,
+  h2: { value: 1.1, description: "H2 line-height." } satisfies Token<number>,
+  h3: { value: 1.15, description: "H3 line-height." } satisfies Token<number>,
+  h4: { value: 1.2, description: "H4 line-height." } satisfies Token<number>,
+  h5: { value: 1.25, description: "H5 line-height." } satisfies Token<number>,
+  h6: { value: 1.25, description: "H6 line-height." } satisfies Token<number>
+} as const;

package/src/tokens/typography/responsive.ts

@@ -1,21 +1,21 @@
-import type { Token } from "../../core/types";
-
-export const responsive = {
-  bodyMaxWidth: {
-    value: "68ch",
-    description: "Recommended max-width for long-form text blocks."
-  } satisfies Token,
-  scaleMobile: {
-    value: 0.95,
-    description: "Typography scale factor for mobile contexts.",
-    meta: { note: "Use with clamp() in consuming apps when needed." }
-  } satisfies Token<number>,
-  scaleTablet: {
-    value: 1,
-    description: "Typography scale factor for tablet contexts."
-  } satisfies Token<number>,
-  scaleDesktop: {
-    value: 1.05,
-    description: "Typography scale factor for desktop contexts."
-  } satisfies Token<number>
-} as const;
+import type { Token } from "../../core/types";
+
+export const responsive = {
+  bodyMaxWidth: {
+    value: "68ch",
+    description: "Recommended max-width for long-form text blocks."
+  } satisfies Token,
+  scaleMobile: {
+    value: 0.95,
+    description: "Typography scale factor for mobile contexts.",
+    meta: { note: "Use with clamp() in consuming apps when needed." }
+  } satisfies Token<number>,
+  scaleTablet: {
+    value: 1,
+    description: "Typography scale factor for tablet contexts."
+  } satisfies Token<number>,
+  scaleDesktop: {
+    value: 1.05,
+    description: "Typography scale factor for desktop contexts."
+  } satisfies Token<number>
+} as const;

package/src/tokens/typography/sizes.ts

@@ -1,14 +1,14 @@
-import type { Token } from "../../core/types";
-
-export const sizes = {
-  xs: { value: "0.75rem", description: "Font size xs (12px)." } satisfies Token,
-  sm: { value: "0.875rem", description: "Font size sm (14px)." } satisfies Token,
-  md: { value: "1rem", description: "Font size md (16px)." } satisfies Token,
-  lg: { value: "1.125rem", description: "Font size lg (18px)." } satisfies Token,
-  xl: { value: "1.25rem", description: "Font size xl (20px)." } satisfies Token,
-  x2l: { value: "1.5rem", description: "Font size 2xl (24px)." } satisfies Token,
-  x3l: { value: "1.875rem", description: "Font size 3xl (30px)." } satisfies Token,
-  x4l: { value: "2.25rem", description: "Font size 4xl (36px)." } satisfies Token,
-  x5l: { value: "3rem", description: "Font size 5xl (48px)." } satisfies Token,
-  x6l: { value: "3.75rem", description: "Font size 6xl (60px)." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const sizes = {
+  xs: { value: "0.75rem", description: "Font size xs (12px)." } satisfies Token,
+  sm: { value: "0.875rem", description: "Font size sm (14px)." } satisfies Token,
+  md: { value: "1rem", description: "Font size md (16px)." } satisfies Token,
+  lg: { value: "1.125rem", description: "Font size lg (18px)." } satisfies Token,
+  xl: { value: "1.25rem", description: "Font size xl (20px)." } satisfies Token,
+  x2l: { value: "1.5rem", description: "Font size 2xl (24px)." } satisfies Token,
+  x3l: { value: "1.875rem", description: "Font size 3xl (30px)." } satisfies Token,
+  x4l: { value: "2.25rem", description: "Font size 4xl (36px)." } satisfies Token,
+  x5l: { value: "3rem", description: "Font size 5xl (48px)." } satisfies Token,
+  x6l: { value: "3.75rem", description: "Font size 6xl (60px)." } satisfies Token
+} as const;

package/src/tokens/typography/weights.ts

@@ -1,13 +1,13 @@
-import type { Token } from "../../core/types";
-
-export const weights = {
-  w100: { value: 100, description: "Font weight 100 (thin)." } satisfies Token<number>,
-  w200: { value: 200, description: "Font weight 200 (extra light)." } satisfies Token<number>,
-  w300: { value: 300, description: "Font weight 300 (light)." } satisfies Token<number>,
-  w400: { value: 400, description: "Font weight 400 (regular)." } satisfies Token<number>,
-  w500: { value: 500, description: "Font weight 500 (medium)." } satisfies Token<number>,
-  w600: { value: 600, description: "Font weight 600 (semibold)." } satisfies Token<number>,
-  w700: { value: 700, description: "Font weight 700 (bold)." } satisfies Token<number>,
-  w800: { value: 800, description: "Font weight 800 (extra bold)." } satisfies Token<number>,
-  w900: { value: 900, description: "Font weight 900 (black)." } satisfies Token<number>
-} as const;
+import type { Token } from "../../core/types";
+
+export const weights = {
+  w100: { value: 100, description: "Font weight 100 (thin)." } satisfies Token<number>,
+  w200: { value: 200, description: "Font weight 200 (extra light)." } satisfies Token<number>,
+  w300: { value: 300, description: "Font weight 300 (light)." } satisfies Token<number>,
+  w400: { value: 400, description: "Font weight 400 (regular)." } satisfies Token<number>,
+  w500: { value: 500, description: "Font weight 500 (medium)." } satisfies Token<number>,
+  w600: { value: 600, description: "Font weight 600 (semibold)." } satisfies Token<number>,
+  w700: { value: 700, description: "Font weight 700 (bold)." } satisfies Token<number>,
+  w800: { value: 800, description: "Font weight 800 (extra bold)." } satisfies Token<number>,
+  w900: { value: 900, description: "Font weight 900 (black)." } satisfies Token<number>
+} as const;

package/src/tokens/ui/button.ts

@@ -1,25 +1,25 @@
-import type { Token } from "../../core/types";
-
-export const button = {
-  primaryBg: { value: "var(--asm-color-button-primary-bg)", description: "Primary button background." } satisfies Token,
-  primaryText: { value: "var(--asm-color-button-primary-text)", description: "Primary button text." } satisfies Token,
-  primaryBgHover: {
-    value: "var(--asm-color-button-primary-bg-hover)",
-    description: "Primary button background (hover)."
-  } satisfies Token,
-  primaryBgActive: {
-    value: "var(--asm-color-button-primary-bg-active)",
-    description: "Primary button background (active)."
-  } satisfies Token,
-
-  secondaryBg: { value: "var(--asm-color-button-secondary-bg)", description: "Secondary button background." } satisfies Token,
-  secondaryText: { value: "var(--asm-color-button-secondary-text)", description: "Secondary button text." } satisfies Token,
-
-  ghostBgHover: { value: "var(--asm-color-button-ghost-bg-hover)", description: "Ghost button hover background." } satisfies Token,
-
-  destructiveBg: { value: "var(--asm-color-button-destructive-bg)", description: "Destructive button background." } satisfies Token,
-  destructiveText: { value: "var(--asm-color-button-destructive-text)", description: "Destructive button text." } satisfies Token,
-
-  disabledBg: { value: "var(--asm-color-button-disabled-bg)", description: "Disabled button background." } satisfies Token,
-  disabledText: { value: "var(--asm-color-button-disabled-text)", description: "Disabled button text." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const button = {
+  primaryBg: { value: "var(--asm-color-button-primary-bg)", description: "Primary button background." } satisfies Token,
+  primaryText: { value: "var(--asm-color-button-primary-text)", description: "Primary button text." } satisfies Token,
+  primaryBgHover: {
+    value: "var(--asm-color-button-primary-bg-hover)",
+    description: "Primary button background (hover)."
+  } satisfies Token,
+  primaryBgActive: {
+    value: "var(--asm-color-button-primary-bg-active)",
+    description: "Primary button background (active)."
+  } satisfies Token,
+
+  secondaryBg: { value: "var(--asm-color-button-secondary-bg)", description: "Secondary button background." } satisfies Token,
+  secondaryText: { value: "var(--asm-color-button-secondary-text)", description: "Secondary button text." } satisfies Token,
+
+  ghostBgHover: { value: "var(--asm-color-button-ghost-bg-hover)", description: "Ghost button hover background." } satisfies Token,
+
+  destructiveBg: { value: "var(--asm-color-button-destructive-bg)", description: "Destructive button background." } satisfies Token,
+  destructiveText: { value: "var(--asm-color-button-destructive-text)", description: "Destructive button text." } satisfies Token,
+
+  disabledBg: { value: "var(--asm-color-button-disabled-bg)", description: "Disabled button background." } satisfies Token,
+  disabledText: { value: "var(--asm-color-button-disabled-text)", description: "Disabled button text." } satisfies Token
+} as const;

package/src/tokens/ui/focus.ts

@@ -1,7 +1,7 @@
-import type { Token } from "../../core/types";
-
-export const focus = {
-  ringColor: { value: "var(--asm-color-focus-ring)", description: "Focus ring color." } satisfies Token,
-  ringWidth: { value: "2px", description: "Focus ring width." } satisfies Token,
-  ringOffset: { value: "2px", description: "Focus ring offset." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const focus = {
+  ringColor: { value: "var(--asm-color-focus-ring)", description: "Focus ring color." } satisfies Token,
+  ringWidth: { value: "2px", description: "Focus ring width." } satisfies Token,
+  ringOffset: { value: "2px", description: "Focus ring offset." } satisfies Token
+} as const;

package/src/tokens/ui/index.ts

@@ -1,5 +1,5 @@
-export { surface } from "./surface";
-export { button } from "./button";
-export { input } from "./input";
-export { focus } from "./focus";
-export { overlay } from "./overlay";
+export { surface } from "./surface";
+export { button } from "./button";
+export { input } from "./input";
+export { focus } from "./focus";
+export { overlay } from "./overlay";

package/src/tokens/ui/input.ts

@@ -1,12 +1,12 @@
-import type { Token } from "../../core/types";
-
-export const input = {
-  bg: { value: "var(--asm-color-input-bg)", description: "Input background." } satisfies Token,
-  text: { value: "var(--asm-color-input-text)", description: "Input text." } satisfies Token,
-  border: { value: "var(--asm-color-input-border)", description: "Input border." } satisfies Token,
-  borderHover: { value: "var(--asm-color-input-border-hover)", description: "Input border (hover)." } satisfies Token,
-  borderFocus: { value: "var(--asm-color-input-border-focus)", description: "Input border (focus)." } satisfies Token,
-  placeholder: { value: "var(--asm-color-input-placeholder)", description: "Input placeholder text." } satisfies Token,
-  errorBorder: { value: "var(--asm-color-input-error-border)", description: "Input error border." } satisfies Token,
-  successBorder: { value: "var(--asm-color-input-success-border)", description: "Input success border." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const input = {
+  bg: { value: "var(--asm-color-input-bg)", description: "Input background." } satisfies Token,
+  text: { value: "var(--asm-color-input-text)", description: "Input text." } satisfies Token,
+  border: { value: "var(--asm-color-input-border)", description: "Input border." } satisfies Token,
+  borderHover: { value: "var(--asm-color-input-border-hover)", description: "Input border (hover)." } satisfies Token,
+  borderFocus: { value: "var(--asm-color-input-border-focus)", description: "Input border (focus)." } satisfies Token,
+  placeholder: { value: "var(--asm-color-input-placeholder)", description: "Input placeholder text." } satisfies Token,
+  errorBorder: { value: "var(--asm-color-input-error-border)", description: "Input error border." } satisfies Token,
+  successBorder: { value: "var(--asm-color-input-success-border)", description: "Input success border." } satisfies Token
+} as const;

package/src/tokens/ui/overlay.ts

@@ -1,6 +1,6 @@
-import type { Token } from "../../core/types";
-
-export const overlay = {
-  scrim: { value: "var(--asm-color-overlay-scrim)", description: "Overlay scrim color." } satisfies Token,
-  backdropBlur: { value: "var(--asm-effect-blur-md)", description: "Default overlay backdrop blur." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const overlay = {
+  scrim: { value: "var(--asm-color-overlay-scrim)", description: "Overlay scrim color." } satisfies Token,
+  backdropBlur: { value: "var(--asm-effect-blur-md)", description: "Default overlay backdrop blur." } satisfies Token
+} as const;

package/src/tokens/ui/surface.ts

@@ -1,9 +1,9 @@
-import type { Token } from "../../core/types";
-
-export const surface = {
-  background: { value: "var(--asm-color-bg)", description: "App background surface." } satisfies Token,
-  surface: { value: "var(--asm-color-surface)", description: "Default surface (cards)." } satisfies Token,
-  surfaceMuted: { value: "var(--asm-color-surface-muted)", description: "Muted surface." } satisfies Token,
-  panel: { value: "var(--asm-color-panel)", description: "Panel surface." } satisfies Token,
-  modal: { value: "var(--asm-color-modal)", description: "Modal surface." } satisfies Token
-} as const;
+import type { Token } from "../../core/types";
+
+export const surface = {
+  background: { value: "var(--asm-color-bg)", description: "App background surface." } satisfies Token,
+  surface: { value: "var(--asm-color-surface)", description: "Default surface (cards)." } satisfies Token,
+  surfaceMuted: { value: "var(--asm-color-surface-muted)", description: "Muted surface." } satisfies Token,
+  panel: { value: "var(--asm-color-panel)", description: "Panel surface." } satisfies Token,
+  modal: { value: "var(--asm-color-modal)", description: "Modal surface." } satisfies Token
+} as const;

package/src/tokens/zindex/index.ts

@@ -1 +1 @@
-export { scale } from "./scale";
+export { scale } from "./scale";

package/src/tokens/zindex/scale.ts

@@ -1,12 +1,12 @@
-import type { Token } from "../../core/types";
-
-export const scale = {
-  base: { value: 0, description: "Base stacking context." } satisfies Token<number>,
-  dropdown: { value: 100, description: "Dropdown menus." } satisfies Token<number>,
-  sticky: { value: 200, description: "Sticky headers." } satisfies Token<number>,
-  overlay: { value: 300, description: "Overlays/scrims." } satisfies Token<number>,
-  modal: { value: 400, description: "Modal dialogs." } satisfies Token<number>,
-  popover: { value: 450, description: "Popovers." } satisfies Token<number>,
-  tooltip: { value: 500, description: "Tooltips." } satisfies Token<number>,
-  toast: { value: 600, description: "Toasts/notifications." } satisfies Token<number>
-} as const;
+import type { Token } from "../../core/types";
+
+export const scale = {
+  base: { value: 0, description: "Base stacking context." } satisfies Token<number>,
+  dropdown: { value: 100, description: "Dropdown menus." } satisfies Token<number>,
+  sticky: { value: 200, description: "Sticky headers." } satisfies Token<number>,
+  overlay: { value: 300, description: "Overlays/scrims." } satisfies Token<number>,
+  modal: { value: 400, description: "Modal dialogs." } satisfies Token<number>,
+  popover: { value: 450, description: "Popovers." } satisfies Token<number>,
+  tooltip: { value: 500, description: "Tooltips." } satisfies Token<number>,
+  toast: { value: 600, description: "Toasts/notifications." } satisfies Token<number>
+} as const;