@asafarim/design-tokens 0.4.5 → 0.4.9

package/src/tokens/color/gradients.ts

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

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

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

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

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

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

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

package/src/tokens/effects/opacity.ts

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

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

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

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

package/src/tokens/iconography/sizes.ts

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

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

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

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

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

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

package/src/tokens/motion/reducedMotion.ts

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

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

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

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

package/src/tokens/shape/radii.ts

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

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

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