@asafarim/design-tokens 0.3.5 → 0.4.1

package/src/tokens/color/brand.ts

@@ -0,0 +1,41 @@
+import type { Token } from "../../core/types";
+
+export const brand = {
+  primary50: {
+    value: "#EEF2FF",
+    description: "Primary brand color scale - 50 (lightest)."
+  } satisfies Token,
+  primary100: {
+    value: "#E0E7FF",
+    description: "Primary brand color scale - 100."
+  } satisfies Token,
+  primary200: {
+    value: "#C7D2FE",
+    description: "Primary brand color scale - 200."
+  } satisfies Token,
+  primary300: {
+    value: "#A5B4FC",
+    description: "Primary brand color scale - 300."
+  } satisfies Token,
+  primary400: {
+    value: "#818CF8",
+    description: "Primary brand color scale - 400."
+  } satisfies Token,
+  primary500: {
+    value: "#3A5AFE",
+    description: "Primary brand color scale - 500 (core brand blue).",
+    meta: { wcag: "Use for primary actions; pair with onPrimary tokens." }
+  } satisfies Token,
+  primary600: {
+    value: "#304FFE",
+    description: "Primary brand color scale - 600."
+  } satisfies Token,
+  primary700: {
+    value: "#1E40FF",
+    description: "Primary brand color scale - 700 (darkest brand accent)."
+  } satisfies Token,
+  secondary500: {
+    value: "#14B8A6",
+    description: "Optional secondary brand accent (teal)."
+  } satisfies Token
+} as const;

package/src/tokens/color/dataViz.ts

@@ -0,0 +1,20 @@
+import type { Token } from "../../core/types";
+
+export const dataViz = {
+  series1: { value: "#3A5AFE", description: "DataViz series color 1 (brand primary)." } satisfies Token,
+  series2: { value: "#14B8A6", description: "DataViz series color 2 (brand secondary)." } satisfies Token,
+  series3: { value: "#8B5CF6", description: "DataViz series color 3." } satisfies Token,
+  series4: { value: "#F59E0B", description: "DataViz series color 4." } satisfies Token,
+  series5: { value: "#EF4444", description: "DataViz series color 5." } satisfies Token,
+  series6: { value: "#0EA5E9", description: "DataViz series color 6." } satisfies Token,
+  series7: { value: "#84CC16", description: "DataViz series color 7." } satisfies Token,
+  series8: { value: "#EC4899", description: "DataViz series color 8." } satisfies Token,
+  series9: { value: "#6366F1", description: "DataViz series color 9." } satisfies Token,
+  series10: { value: "#F97316", description: "DataViz series color 10." } satisfies Token,
+  series11: { value: "#22C55E", description: "DataViz series color 11." } satisfies Token,
+  series12: { value: "#A855F7", description: "DataViz series color 12." } satisfies Token,
+  gridline: { value: "#D1D5DB", description: "DataViz gridline color." } satisfies Token,
+  axis: { value: "#6B7280", description: "DataViz axis label color." } satisfies Token,
+  tooltipBg: { value: "#111827", description: "DataViz tooltip background color." } satisfies Token,
+  tooltipText: { value: "#F9FAFB", description: "DataViz tooltip text color." } satisfies Token
+} as const;

package/src/tokens/color/gradients.ts

@@ -0,0 +1,13 @@
+import type { Token } from "../../core/types";
+
+export const gradients = {
+  primary: {
+    value: "linear-gradient(135deg, #3A5AFE 0%, #8B5CF6 100%)",
+    description: "Primary brand gradient (used for hero/marketing accents)."
+  } satisfies Token,
+  subtleHero: {
+    value: "linear-gradient(180deg, rgba(58, 90, 254, 0.10) 0%, rgba(249, 250, 251, 0) 80%)",
+    description: "Subtle hero gradient background overlay (light).",
+    meta: { note: "Use theme override in dark/high-contrast." }
+  } satisfies Token
+} as const;

package/src/tokens/color/index.ts

@@ -0,0 +1,7 @@
+export { brand } from "./brand";
+export { neutral } from "./neutral";
+export { semantic } from "./semantic";
+export { accent } from "./accent";
+export { dataViz } from "./dataViz";
+export { overlays } from "./overlays";
+export { gradients } from "./gradients";

package/src/tokens/color/neutral.ts

@@ -0,0 +1,32 @@
+import type { Token } from "../../core/types";
+
+export const neutral = {
+  gray900: {
+    value: "#111827",
+    description: "Neutral gray - 900 (near-black)."
+  } satisfies Token,
+  gray700: {
+    value: "#374151",
+    description: "Neutral gray - 700."
+  } satisfies Token,
+  gray500: {
+    value: "#6B7280",
+    description: "Neutral gray - 500."
+  } satisfies Token,
+  gray300: {
+    value: "#D1D5DB",
+    description: "Neutral gray - 300."
+  } satisfies Token,
+  gray50: {
+    value: "#F9FAFB",
+    description: "Neutral gray - 50 (near-white)."
+  } satisfies Token,
+  white: {
+    value: "#FFFFFF",
+    description: "Pure white."
+  } satisfies Token,
+  black: {
+    value: "#000000",
+    description: "Pure black."
+  } satisfies Token
+} as const;

package/src/tokens/color/overlays.ts

@@ -0,0 +1,21 @@
+import type { Token } from "../../core/types";
+
+export const overlays = {
+  scrimStrong: {
+    value: "rgba(17, 24, 39, 0.64)",
+    description: "Strong scrim for modals/overlays."
+  } satisfies Token,
+  scrim: {
+    value: "rgba(17, 24, 39, 0.48)",
+    description: "Default scrim for overlays."
+  } satisfies Token,
+  scrimSubtle: {
+    value: "rgba(17, 24, 39, 0.24)",
+    description: "Subtle scrim for light overlays."
+  } satisfies Token,
+  glassFill: {
+    value: "rgba(249, 250, 251, 0.72)",
+    description: "Glass/blur fill for frosted surfaces (light).",
+    meta: { note: "For dark theme, use theme override." }
+  } satisfies Token
+} as const;

package/src/tokens/color/semantic.ts

@@ -0,0 +1,36 @@
+import type { Token } from "../../core/types";
+
+export const semantic = {
+  success: {
+    value: "#16A34A",
+    description: "Semantic success color (base)."
+  } satisfies Token,
+  successSubtle: {
+    value: "#DCFCE7",
+    description: "Semantic success background/surface (subtle)."
+  } satisfies Token,
+  warning: {
+    value: "#F59E0B",
+    description: "Semantic warning color (base)."
+  } satisfies Token,
+  warningSubtle: {
+    value: "#FEF3C7",
+    description: "Semantic warning background/surface (subtle)."
+  } satisfies Token,
+  error: {
+    value: "#EF4444",
+    description: "Semantic error color (base)."
+  } satisfies Token,
+  errorSubtle: {
+    value: "#FEE2E2",
+    description: "Semantic error background/surface (subtle)."
+  } satisfies Token,
+  info: {
+    value: "#0EA5E9",
+    description: "Semantic info color (base)."
+  } satisfies Token,
+  infoSubtle: {
+    value: "#E0F2FE",
+    description: "Semantic info background/surface (subtle)."
+  } satisfies Token
+} as const;

package/src/tokens/effects/blur.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const blur = {
+  sm: { value: "4px", description: "Small blur." } satisfies Token,
+  md: { value: "8px", description: "Medium blur." } satisfies Token,
+  lg: { value: "16px", description: "Large blur (glass)." } satisfies Token
+} as const;

package/src/tokens/effects/index.ts

@@ -0,0 +1,4 @@
+export { shadows } from "./shadows";
+export { blur } from "./blur";
+export { opacity } from "./opacity";
+export { textures } from "./textures";

package/src/tokens/effects/opacity.ts

@@ -0,0 +1,11 @@
+import type { Token } from "../../core/types";
+
+export const opacity = {
+  o0: { value: 0, description: "Opacity 0%." } satisfies Token<number>,
+  o10: { value: 0.1, description: "Opacity 10%." } satisfies Token<number>,
+  o20: { value: 0.2, description: "Opacity 20%." } satisfies Token<number>,
+  o40: { value: 0.4, description: "Opacity 40%." } satisfies Token<number>,
+  o60: { value: 0.6, description: "Opacity 60%." } satisfies Token<number>,
+  o80: { value: 0.8, description: "Opacity 80%." } satisfies Token<number>,
+  o100: { value: 1, description: "Opacity 100%." } satisfies Token<number>
+} as const;

package/src/tokens/effects/shadows.ts

@@ -0,0 +1,20 @@
+import type { Token } from "../../core/types";
+
+export const shadows = {
+  sm: {
+    value: "0 1px 2px rgba(17, 24, 39, 0.06)",
+    description: "Shadow sm (subtle elevation)."
+  } satisfies Token,
+  md: {
+    value: "0 6px 20px rgba(17, 24, 39, 0.10)",
+    description: "Shadow md (card elevation)."
+  } satisfies Token,
+  lg: {
+    value: "0 16px 40px rgba(17, 24, 39, 0.14)",
+    description: "Shadow lg (overlay elevation)."
+  } satisfies Token,
+  xl: {
+    value: "0 24px 60px rgba(17, 24, 39, 0.18)",
+    description: "Shadow xl (modal elevation)."
+  } satisfies Token
+} as const;

package/src/tokens/effects/textures.ts

@@ -0,0 +1,11 @@
+import type { Token } from "../../core/types";
+
+export const textures = {
+  none: { value: "none", description: "No texture." } satisfies Token,
+  noise: {
+    value:
+      "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22120%22 height=%22120%22 filter=%22url(%23n)%22 opacity=%220.06%22/%3E%3C/svg%3E')",
+    description: "Subtle noise texture (data URI).",
+    meta: { note: "Use as background-image; keep opacity low." }
+  } satisfies Token
+} as const;

package/src/tokens/iconography/index.ts

@@ -0,0 +1,2 @@
+export { sizes } from "./sizes";
+export { strokeWidths } from "./strokeWidths";

package/src/tokens/iconography/sizes.ts

@@ -0,0 +1,9 @@
+import type { Token } from "../../core/types";
+
+export const sizes = {
+  xs: { value: "12px", description: "Icon size XS." } satisfies Token,
+  sm: { value: "16px", description: "Icon size SM." } satisfies Token,
+  md: { value: "20px", description: "Icon size MD." } satisfies Token,
+  lg: { value: "24px", description: "Icon size LG." } satisfies Token,
+  xl: { value: "28px", description: "Icon size XL." } satisfies Token
+} as const;

package/src/tokens/iconography/strokeWidths.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const strokeWidths = {
+  thin: { value: 1, description: "Thin icon stroke width." } satisfies Token<number>,
+  regular: { value: 1.5, description: "Regular icon stroke width." } satisfies Token<number>,
+  bold: { value: 2, description: "Bold icon stroke width." } satisfies Token<number>
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,21 @@
+import * as color from "./color";
+import * as typography from "./typography";
+import * as spacing from "./spacing";
+import * as shape from "./shape";
+import * as effects from "./effects";
+import * as motion from "./motion";
+import * as zindex from "./zindex";
+import * as iconography from "./iconography";
+import * as ui from "./ui";
+
+export const tokens = {
+  color,
+  typography,
+  spacing,
+  shape,
+  effects,
+  motion,
+  zindex,
+  iconography,
+  ui
+} as const;

package/src/tokens/motion/duration.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const duration = {
+  fast: { value: "120ms", description: "Fast duration for micro-interactions." } satisfies Token,
+  normal: { value: "200ms", description: "Normal duration for standard UI transitions." } satisfies Token,
+  slow: { value: "320ms", description: "Slow duration for larger transitions." } satisfies Token
+} as const;

package/src/tokens/motion/easing.ts

@@ -0,0 +1,8 @@
+import type { Token } from "../../core/types";
+
+export const easing = {
+  standard: { value: "cubic-bezier(0.2, 0, 0, 1)", description: "Standard easing." } satisfies Token,
+  emphasized: { value: "cubic-bezier(0.2, 0, 0, 1.2)", description: "Emphasized easing." } satisfies Token,
+  entrance: { value: "cubic-bezier(0, 0, 0, 1)", description: "Entrance easing." } satisfies Token,
+  exit: { value: "cubic-bezier(0.4, 0, 1, 1)", description: "Exit easing." } satisfies Token
+} as const;

package/src/tokens/motion/index.ts

@@ -0,0 +1,4 @@
+export { duration } from "./duration";
+export { easing } from "./easing";
+export { transitions } from "./transitions";
+export { reducedMotion } from "./reducedMotion";

package/src/tokens/motion/reducedMotion.ts

@@ -0,0 +1,9 @@
+import type { Token } from "../../core/types";
+
+export const reducedMotion = {
+  disableTransitions: {
+    value: 1,
+    description: "If true, consumers should disable non-essential transitions when prefers-reduced-motion is enabled.",
+    meta: { hint: "Use @media (prefers-reduced-motion: reduce) in CSS." }
+  } satisfies Token<number>
+} as const;

package/src/tokens/motion/transitions.ts

@@ -0,0 +1,16 @@
+import type { Token } from "../../core/types";
+
+export const transitions = {
+  fade: {
+    value: "opacity var(--asm-motion-duration-normal) var(--asm-motion-easing-standard)",
+    description: "Fade transition preset."
+  } satisfies Token,
+  slide: {
+    value: "transform var(--asm-motion-duration-normal) var(--asm-motion-easing-standard)",
+    description: "Slide transition preset."
+  } satisfies Token,
+  scale: {
+    value: "transform var(--asm-motion-duration-fast) var(--asm-motion-easing-emphasized)",
+    description: "Scale transition preset."
+  } satisfies Token
+} as const;

package/src/tokens/shape/borders.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const borders = {
+  hairline: { value: "1px", description: "Hairline border width." } satisfies Token,
+  thin: { value: "2px", description: "Thin border width." } satisfies Token,
+  thick: { value: "3px", description: "Thick border width." } satisfies Token
+} as const;

package/src/tokens/shape/index.ts

@@ -0,0 +1,3 @@
+export { radii } from "./radii";
+export { borders } from "./borders";
+export { strokes } from "./strokes";

package/src/tokens/shape/radii.ts

@@ -0,0 +1,9 @@
+import type { Token } from "../../core/types";
+
+export const radii = {
+  sm: { value: "6px", description: "Small radius." } satisfies Token,
+  md: { value: "10px", description: "Medium radius." } satisfies Token,
+  lg: { value: "12px", description: "Large radius (cards)." } satisfies Token,
+  xl: { value: "16px", description: "Extra-large radius." } satisfies Token,
+  full: { value: "9999px", description: "Full pill/circle radius." } satisfies Token
+} as const;

package/src/tokens/shape/strokes.ts

@@ -0,0 +1,7 @@
+import type { Token } from "../../core/types";
+
+export const strokes = {
+  default: { value: "1px", description: "Default stroke width." } satisfies Token,
+  strong: { value: "2px", description: "Strong stroke width." } satisfies Token,
+  dash: { value: "4 2", description: "Default dash pattern (stroke-dasharray)." } satisfies Token
+} as const;

package/src/tokens/spacing/density.ts

@@ -0,0 +1,12 @@
+import type { Token } from "../../core/types";
+
+export const density = {
+  compactFactor: {
+    value: 0.9,
+    description: "Density factor applied in compact mode."
+  } satisfies Token<number>,
+  comfortableFactor: {
+    value: 1.05,
+    description: "Density factor applied in comfortable mode."
+  } satisfies Token<number>
+} as const;

package/src/tokens/spacing/grid.ts

@@ -0,0 +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;

package/src/tokens/spacing/index.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +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;

package/src/tokens/spacing/rtl.ts

@@ -0,0 +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;

package/src/tokens/spacing/scale.ts

@@ -0,0 +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;

package/src/tokens/typography/families.ts

@@ -0,0 +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;

package/src/tokens/typography/headings.ts

@@ -0,0 +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;

package/src/tokens/typography/index.ts

@@ -0,0 +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";

package/src/tokens/typography/letterSpacing.ts

@@ -0,0 +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;

package/src/tokens/typography/lineHeights.ts

@@ -0,0 +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;

package/src/tokens/typography/responsive.ts

@@ -0,0 +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;

package/src/tokens/typography/sizes.ts

@@ -0,0 +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;

package/src/tokens/typography/weights.ts

@@ -0,0 +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;