@latty-ds/tokens 0.2.0

package/dist/tokens.json

@@ -0,0 +1,377 @@
+{
+  "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",
+    "square": false
+  },
+  "typography": {
+    "fontFamily": "\"Hanken Grotesk\", sans-serif"
+  },
+  "elevation": {
+    "0": "none",
+    "1": "0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)",
+    "2": "0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)",
+    "3": "0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)",
+    "4": "0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)",
+    "5": "0 25px 50px -12px rgb(27 27 27 / 0.25)"
+  },
+  "semantic": {
+    "text-default": "color-neutral-900",
+    "text-subtle": "color-neutral-600",
+    "text-muted": "color-neutral-400",
+    "text-disabled": "color-neutral-400",
+    "text-inverse": "color-white",
+    "text-neutral": "color-neutral-700",
+    "text-primary": "color-primary-700",
+    "text-on-primary": "color-neutral-900",
+    "text-on-warning": "color-warning-800",
+    "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-error": "color-error-700",
+    "text-on-error": "color-white",
+    "text-info": "color-info-700",
+    "text-on-info": "color-white",
+    "bg-default": "color-white",
+    "bg-subtle": "color-neutral-50",
+    "bg-surface": "color-neutral-100",
+    "bg-overlay": "color-neutral-200",
+    "bg-inverse": "color-neutral-900",
+    "bg-neutral-subtle": "color-neutral-100",
+    "bg-primary": "color-primary-500",
+    "bg-primary-subtle": "color-primary-100",
+    "bg-secondary": "color-secondary-500",
+    "bg-secondary-subtle": "color-secondary-100",
+    "bg-success": "color-success-500",
+    "bg-success-subtle": "color-success-100",
+    "bg-warning": "color-warning-500",
+    "bg-warning-subtle": "color-warning-100",
+    "bg-error": "color-error-500",
+    "bg-error-subtle": "color-error-100",
+    "bg-info": "color-info-500",
+    "bg-info-subtle": "color-info-100",
+    "border-default": "color-neutral-200",
+    "border-strong": "color-neutral-400",
+    "border-subtle": "color-neutral-100",
+    "border-focus": "color-primary-200",
+    "border-primary": "color-primary-200",
+    "border-primary-strong": "color-primary-500",
+    "border-secondary": "color-secondary-200",
+    "border-secondary-strong": "color-secondary-500",
+    "border-success": "color-success-200",
+    "border-success-strong": "color-success-500",
+    "border-warning": "color-warning-200",
+    "border-warning-strong": "color-warning-500",
+    "border-error": "color-error-200",
+    "border-error-strong": "color-error-500",
+    "border-info": "color-info-200",
+    "border-info-strong": "color-info-500",
+    "interactive-primary-bg": "color-primary-500",
+    "interactive-primary-bg-hover": "color-primary-600",
+    "interactive-primary-bg-active": "color-primary-700",
+    "interactive-secondary-bg": "color-secondary-500",
+    "interactive-secondary-bg-hover": "color-secondary-600",
+    "interactive-secondary-bg-active": "color-secondary-700",
+    "interactive-success-bg": "color-success-500",
+    "interactive-success-bg-hover": "color-success-600",
+    "interactive-success-bg-active": "color-success-700",
+    "interactive-warning-bg": "color-warning-500",
+    "interactive-warning-bg-hover": "color-warning-600",
+    "interactive-warning-bg-active": "color-warning-700",
+    "interactive-error-bg": "color-error-500",
+    "interactive-error-bg-hover": "color-error-600",
+    "interactive-error-bg-active": "color-error-700",
+    "interactive-info-bg": "color-info-500",
+    "interactive-info-bg-hover": "color-info-600",
+    "interactive-info-bg-active": "color-info-700"
+  },
+  "semanticDark": {
+    "text-default": "color-neutral-100",
+    "text-subtle": "color-neutral-300",
+    "text-muted": "color-neutral-500",
+    "text-disabled": "color-neutral-600",
+    "text-inverse": "color-neutral-900",
+    "text-neutral": "color-neutral-200",
+    "text-primary": "color-primary-300",
+    "text-on-primary": "color-neutral-900",
+    "text-secondary": "color-secondary-300",
+    "text-on-secondary": "color-white",
+    "text-success": "color-success-300",
+    "text-on-success": "color-white",
+    "text-warning": "color-warning-300",
+    "text-on-warning": "color-white",
+    "text-error": "color-error-300",
+    "text-on-error": "color-white",
+    "text-info": "color-info-300",
+    "text-on-info": "color-white",
+    "bg-default": "color-neutral-900",
+    "bg-subtle": "color-neutral-800",
+    "bg-surface": "color-neutral-800",
+    "bg-overlay": "color-neutral-700",
+    "bg-inverse": "color-neutral-50",
+    "bg-neutral-subtle": "color-neutral-800",
+    "bg-primary": "color-primary-500",
+    "bg-primary-subtle": "color-primary-900",
+    "bg-secondary": "color-secondary-500",
+    "bg-secondary-subtle": "color-secondary-900",
+    "bg-success": "color-success-500",
+    "bg-success-subtle": "color-success-900",
+    "bg-warning": "color-warning-500",
+    "bg-warning-subtle": "color-warning-900",
+    "bg-error": "color-error-500",
+    "bg-error-subtle": "color-error-900",
+    "bg-info": "color-info-500",
+    "bg-info-subtle": "color-info-900",
+    "border-default": "color-neutral-700",
+    "border-strong": "color-neutral-500",
+    "border-subtle": "color-neutral-800",
+    "border-focus": "color-primary-400",
+    "border-primary": "color-primary-700",
+    "border-primary-strong": "color-primary-500",
+    "border-secondary": "color-secondary-700",
+    "border-secondary-strong": "color-secondary-500",
+    "border-success": "color-success-700",
+    "border-success-strong": "color-success-500",
+    "border-warning": "color-warning-700",
+    "border-warning-strong": "color-warning-500",
+    "border-error": "color-error-700",
+    "border-error-strong": "color-error-500",
+    "border-info": "color-info-700",
+    "border-info-strong": "color-info-500",
+    "interactive-primary-bg": "color-primary-400",
+    "interactive-primary-bg-hover": "color-primary-300",
+    "interactive-primary-bg-active": "color-primary-500",
+    "interactive-secondary-bg": "color-secondary-400",
+    "interactive-secondary-bg-hover": "color-secondary-300",
+    "interactive-secondary-bg-active": "color-secondary-500",
+    "interactive-success-bg": "color-success-400",
+    "interactive-success-bg-hover": "color-success-300",
+    "interactive-success-bg-active": "color-success-500",
+    "interactive-warning-bg": "color-warning-400",
+    "interactive-warning-bg-hover": "color-warning-300",
+    "interactive-warning-bg-active": "color-warning-500",
+    "interactive-error-bg": "color-error-400",
+    "interactive-error-bg-hover": "color-error-300",
+    "interactive-error-bg-active": "color-error-500",
+    "interactive-info-bg": "color-info-400",
+    "interactive-info-bg-hover": "color-info-300",
+    "interactive-info-bg-active": "color-info-500"
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Type definitions for design tokens.
+ * Exports all types related to color palettes and spacing scales.
+ *
+ * @module types
+ */
+export * from './palette.types';
+export * from './spacing.types';

package/dist/types/palette.types.d.ts

@@ -0,0 +1,84 @@
+import type { COLOR_NAMES, STEPS } from '../constants/';
+/**
+ * Numeric step values in the color palette (50-900).
+ * Represents lightness levels from lightest (50) to darkest (900).
+ */
+export type Step = (typeof STEPS)[number];
+/**
+ * String representation of palette steps.
+ * Used as keys in color scale objects.
+ */
+export type StepStr = `${Step}`;
+/**
+ * Color palette mapping numeric steps to hex color values.
+ * Example: { 50: "#fef2f2", 100: "#fee2e2", ..., 900: "#7f1d1d" }
+ */
+export type Palette = Record<Step, string>;
+/**
+ * Flattened color palette with string keys.
+ * Example: { "50": "#fef2f2", "100": "#fee2e2", ..., "900": "#7f1d1d" }
+ */
+export type PaletteFlat = Record<StepStr, string>;
+/**
+ * Semantic color names available in the design system.
+ * - `error`: Error/danger states
+ * - `info`: Informational states
+ * - `primary`: Primary brand color
+ * - `secondary`: Secondary brand color
+ * - `success`: Success states
+ * - `warning`: Warning/caution states
+ */
+export type ColorName = (typeof COLOR_NAMES)[number];
+/**
+ * Muted (desaturated) variant of a semantic color.
+ * Example: "primary-muted", "error-muted"
+ */
+export type MutedColorName = `${ColorName}-muted`;
+/**
+ * System neutral color name.
+ * Used for grayscale values.
+ */
+export type SystemColorName = 'neutral';
+/**
+ * All available color token names in the design system.
+ * Includes semantic colors, their muted variants, and neutral.
+ */
+export type TokenColorName = ColorName | MutedColorName | SystemColorName;
+/**
+ * Design system configuration for color generation.
+ * Maps semantic color names to base hex values.
+ *
+ * @example
+ * ```typescript
+ * const config: Config = {
+ *   color: {
+ *     primary: "#3b82f6",
+ *     error: "#ef4444",
+ *     success: "#10b981",
+ *     warning: "#f59e0b",
+ *     info: "#06b6d4",
+ *     secondary: "#8b5cf6"
+ *   }
+ * };
+ * ```
+ */
+export type Config = {
+    color: Record<string, string>;
+};
+/**
+ * OKLCH color space representation.
+ * Perceptually uniform color model for generating accessible color palettes.
+ *
+ * @property mode - Color space identifier (always "oklch")
+ * @property l - Lightness (0-1)
+ * @property c - Chroma/saturation (0-0.5 typically)
+ * @property h - Hue angle in degrees (0-360)
+ *
+ * @see https://oklch.com/
+ */
+export type Oklch = {
+    mode: 'oklch';
+    l: number;
+    c: number;
+    h: number;
+};

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

@@ -0,0 +1,68 @@
+import type { PaletteFlat } from './palette.types';
+import type { SpacingTokens } from './spacing.types';
+import type { ElevationTokens } from '../elevation/';
+/**
+ * Complete design system tokens.
+ * Includes color palettes, spacing scales, border properties, typography, and elevation.
+ *
+ * Elevation is automatically generated from the neutral color palette to ensure
+ * consistent shadows that match the design system's color scheme.
+ *
+ * @example
+ * ```typescript
+ * const tokens: Tokens = {
+ *   color: {
+ *     primary: { "50": "#eff6ff", ..., "900": "#1e3a8a" },
+ *     neutral: { "50": "#fafafa", ..., "900": "#171717" },
+ *     // ... other colors
+ *   },
+ *   spacing: {
+ *     rem: { "0": "0rem", "1": "0.25rem", ... },
+ *     px: { "0": "0px", "1": "4px", ... }
+ *   },
+ *   border: {
+ *     radius: "0.375rem",
+ *     square: false
+ *   },
+ *   typography: {
+ *     fontFamily: "Hanken Grotesk, sans-serif"
+ *   },
+ *   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)
+ *   }
+ * };
+ * ```
+ */
+export type Tokens = {
+    color: Record<string, PaletteFlat | string>;
+    spacing: SpacingTokens;
+    border: {
+        radius: string;
+        square: false;
+    };
+    typography: {
+        fontFamily: string;
+    };
+    elevation: ElevationTokens;
+};
+export type { Config, TokenColorName } from './';
+export interface LattyConfig {
+    /** Built-in names: primary, secondary, success, warning, error, info. Any additional name generates a new palette. */
+    colors?: Record<string, string>;
+    font?: {
+        family?: string;
+    };
+    border?: {
+        radius?: string;
+    };
+    /**
+     * Controls which semantic token layer is emitted.
+     * - `'light'` (default) — light tokens only; ignores OS preference
+     * - `'dark'`   — dark tokens only; ignores OS preference
+     * - `'system'` — light at `:root`, dark inside `@media (prefers-color-scheme: dark)` + `[data-theme]` overrides
+     * - `'auto'`   — alias for `'system'`, deprecated
+     */
+    theme?: 'light' | 'dark' | 'system' | 'auto';
+}

package/dist/types/spacing.types.d.ts

@@ -0,0 +1,33 @@
+import type { SPACE_STEPS } from '../constants/';
+import type { EnumerateInclusive } from './utils';
+/**
+ * Numeric index for spacing values (0-24).
+ * Represents multipliers of the base spacing unit (4px).
+ */
+export type SpaceIndex = EnumerateInclusive<typeof SPACE_STEPS>;
+/**
+ * String representation of spacing indices.
+ * Used as keys in spacing scale objects.
+ */
+export type SpaceKey = `${SpaceIndex}`;
+/**
+ * Complete spacing scale mapping indices to CSS values.
+ * Example: { "0": "0px", "1": "4px", "2": "8px", ... }
+ */
+export type SpaceScale = Record<SpaceKey, string>;
+/**
+ * Design system spacing tokens in both rem and px units.
+ * Provides a consistent spacing scale based on a 4px grid system.
+ *
+ * @example
+ * ```typescript
+ * const spacing: SpacingTokens = {
+ *   rem: { "0": "0rem", "1": "0.25rem", "2": "0.5rem", ... },
+ *   px: { "0": "0px", "1": "4px", "2": "8px", ... }
+ * };
+ * ```
+ */
+export type SpacingTokens = {
+    rem: SpaceScale;
+    px: SpaceScale;
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Recursive helper to generate a union of numbers from 0 to N.
+ * It builds an array until its length reaches N,
+ * then returns the union of the array's elements plus N itself.
+ */
+export type EnumerateInclusive<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? [...Acc, N][number] : EnumerateInclusive<N, [...Acc, Acc['length']]>;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@latty-ds/tokens",
+  "version": "0.2.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": {
+    "type": "git",
+    "url": "https://github.com/penhold3r/latty-ds.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://penhold3r.github.io/latty-ds",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "css-variables",
+    "css-custom-properties",
+    "tokens",
+    "latty"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/public-types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/public-types.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./configure": {
+      "types": "./dist/configure.d.ts",
+      "default": "./dist/configure.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./semantic.css": "./dist/semantic.css",
+    "./tokens.json": "./dist/tokens.json"
+  },
+  "scripts": {
+    "build": "pnpm run build:scripts && pnpm run build:tokens && pnpm run build:types",
+    "build:scripts": "tsup",
+    "build:tokens": "node ./dist-scripts/tokens.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist dist-scripts"
+  },
+  "devDependencies": {
+    "@types/culori": "^4.0.1",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@latty-ds/utils": "0.2.0",
+    "culori": "^4.0.2"
+  },
+  "gitHead": "6fd1814cb17a56d6652c581fc349c4f8f426a4bc"
+}