@billabex/ui-tokens 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export type { ColorToken, DimensionToken, TypographyToken, ShadowToken, RadiusToken, RgbComponents, HslComponents, TokenScale, TokenGroup, } from "./types.js";
+export { color, dimension, shadow } from "./utils.js";
+export { colors, spacing, padding, radii, shadows, typography, } from "./tokens/primitive.js";
+export { bg, text, action, status, border } from "./tokens/semantic.js";
+export * as primitive from "./tokens/primitive.js";
+export * as semantic from "./tokens/semantic.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EACV,UAAU,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,UAAU,EACV,UAAU,GACX,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAGtD,OAAO,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,GACX,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGxE,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,275 @@
+function m(r) {
+  const o = r.replace("#", "");
+  return {
+    r: parseInt(o.slice(0, 2), 16),
+    g: parseInt(o.slice(2, 4), 16),
+    b: parseInt(o.slice(4, 6), 16)
+  };
+}
+function S(r, o, s) {
+  const l = r / 255, a = o / 255, c = s / 255, i = Math.max(l, a, c), u = Math.min(l, a, c), b = (i + u) / 2;
+  if (i === u)
+    return { h: 0, s: 0, l: Math.round(b * 100) };
+  const f = i - u, p = b > 0.5 ? f / (2 - i - u) : f / (i + u);
+  let g = 0;
+  return i === l ? g = ((a - c) / f + (a < c ? 6 : 0)) / 6 : i === a ? g = ((c - l) / f + 2) / 6 : g = ((l - a) / f + 4) / 6, {
+    h: Math.round(g * 360),
+    s: Math.round(p * 100),
+    l: Math.round(b * 100)
+  };
+}
+function $(r) {
+  const o = r.replace("#", "");
+  return o.length === 8 ? parseInt(o.slice(6, 8), 16) / 255 : 1;
+}
+function n(r) {
+  const { r: o, g: s, b: l } = m(r), a = S(o, s, l);
+  return Object.freeze({
+    hex: r,
+    rgb: Object.freeze({ r: o, g: s, b: l }),
+    hsl: Object.freeze(a),
+    rgba(c) {
+      return `rgba(${o}, ${s}, ${l}, ${c})`;
+    },
+    hsla(c) {
+      return `hsla(${a.h}, ${a.s}%, ${a.l}%, ${c})`;
+    },
+    toString() {
+      return r;
+    }
+  });
+}
+function e(r) {
+  return Object.freeze({
+    value: r,
+    px: `${r}px`,
+    rem: `${r / 16}rem`,
+    toString() {
+      return `${r}px`;
+    }
+  });
+}
+function h(r, o, s, l, a) {
+  const c = $(a), i = `#${a.replace("#", "").slice(0, 6)}`, u = n(i), { r: b, g: f, b: p } = u.rgb, g = `${r}px ${o}px ${s}px ${l}px rgba(${b}, ${f}, ${p}, ${Number(c.toFixed(2))})`;
+  return Object.freeze({
+    offsetX: r,
+    offsetY: o,
+    blur: s,
+    spread: l,
+    color: u,
+    css: g,
+    toString() {
+      return g;
+    }
+  });
+}
+const t = {
+  /** Pure solids */
+  solid: {
+    white: n("#ffffff"),
+    black: n("#000000")
+  },
+  /** Warm neutral palette — the core Billabex tone */
+  neutral: {
+    50: n("#fdfcfb"),
+    100: n("#fcfaf8"),
+    200: n("#f5f0eb"),
+    300: n("#e3dbd2"),
+    400: n("#9c8e82"),
+    500: n("#534840"),
+    600: n("#3d3530"),
+    700: n("#1c1917")
+  },
+  /** Gold accent palette */
+  gold: {
+    100: n("#fef7e6"),
+    300: n("#f0d68a"),
+    500: n("#d4a853")
+  },
+  /** Terracotta / link color */
+  terracotta: {
+    400: n("#b5634b"),
+    500: n("#9c5340")
+  },
+  /** Status colors */
+  green: {
+    50: n("#e3f5eb"),
+    600: n("#067647")
+  },
+  orange: {
+    50: n("#fff1c6"),
+    500: n("#f99307")
+  },
+  red: {
+    50: n("#fde9e7"),
+    600: n("#d92d20")
+  },
+  blue: {
+    50: n("#e8ecf2"),
+    700: n("#1e4a8a")
+  }
+}, x = {
+  /** 4px */
+  xs: e(4),
+  /** 6px */
+  sm: e(6),
+  /** 8px */
+  md: e(8),
+  /** 12px */
+  lg: e(12),
+  /** 16px */
+  xl: e(16),
+  /** 24px */
+  "2xl": e(24),
+  /** 32px */
+  "3xl": e(32),
+  /** 48px */
+  "4xl": e(48)
+}, y = {
+  card: e(16),
+  page: e(24)
+}, z = {
+  none: e(0),
+  xs: e(4),
+  sm: e(8),
+  md: e(12),
+  lg: e(16),
+  full: e(9999)
+}, H = {
+  sm: h(0, 2, 8, 0, "#1C1C1A14"),
+  md: h(0, 6, 16, -2, "#1C1C1A1A"),
+  lg: h(0, 12, 28, -6, "#1C1C1A1F")
+}, d = "Nunito, sans-serif", j = {
+  display: {
+    fontFamily: d,
+    fontWeight: 600,
+    fontSize: e(32),
+    lineHeight: e(40),
+    letterSpacing: e(0)
+  },
+  headlineLg: {
+    fontFamily: d,
+    fontWeight: 600,
+    fontSize: e(20),
+    lineHeight: e(28),
+    letterSpacing: e(0)
+  },
+  headlineSm: {
+    fontFamily: d,
+    fontWeight: 600,
+    fontSize: e(16),
+    lineHeight: e(24),
+    letterSpacing: e(0)
+  },
+  body: {
+    fontFamily: d,
+    fontWeight: 400,
+    fontSize: e(14),
+    lineHeight: e(20),
+    letterSpacing: e(0)
+  },
+  bodySm: {
+    fontFamily: d,
+    fontWeight: 400,
+    fontSize: e(13),
+    lineHeight: e(18),
+    letterSpacing: e(0)
+  },
+  caption: {
+    fontFamily: d,
+    fontWeight: 500,
+    fontSize: e(12),
+    lineHeight: e(16),
+    letterSpacing: e(0)
+  }
+}, C = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  colors: t,
+  padding: y,
+  radii: z,
+  shadows: H,
+  spacing: x,
+  typography: j
+}, Symbol.toStringTag, { value: "Module" })), O = {
+  /** Default page / card background */
+  default: t.solid.white,
+  /** Subtle background for secondary surfaces */
+  subtle: t.neutral[100],
+  /** Muted background for tertiary surfaces, hover states */
+  muted: t.neutral[200],
+  /** Inverse background (dark) */
+  inverse: t.neutral[700],
+  /** Brand-tinted background */
+  brand: t.blue[50],
+  /** Accent background (warm) */
+  accent: t.neutral[200]
+}, M = {
+  /** Primary text — headings, body */
+  primary: t.neutral[700],
+  /** Secondary text — descriptions, labels */
+  secondary: t.neutral[500],
+  /** Tertiary text — placeholders, disabled */
+  tertiary: t.neutral[400],
+  /** Text on inverse/dark backgrounds */
+  inverse: t.solid.white,
+  /** Link text */
+  link: t.terracotta[400],
+  /** Link hover text */
+  linkHover: t.terracotta[500]
+}, _ = {
+  /** Primary action background */
+  primary: t.neutral[700],
+  /** Primary action hover */
+  primaryHover: t.neutral[600],
+  /** Primary action pressed */
+  primaryPressed: t.neutral[500],
+  /** Secondary action background */
+  secondary: t.neutral[200],
+  /** Secondary action hover */
+  secondaryHover: t.neutral[300],
+  /** Destructive action */
+  destructive: t.red[600]
+}, w = {
+  success: t.green[600],
+  successSubtle: t.green[50],
+  warning: t.orange[500],
+  warningSubtle: t.orange[50],
+  error: t.red[600],
+  errorSubtle: t.red[50],
+  info: t.blue[700],
+  infoSubtle: t.blue[50]
+}, v = {
+  /** Default border */
+  default: t.neutral[300],
+  /** Subtle border */
+  subtle: t.neutral[200],
+  /** Focused / active border */
+  focus: t.neutral[700],
+  /** Error border */
+  error: t.red[600]
+}, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  action: _,
+  bg: O,
+  border: v,
+  status: w,
+  text: M
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  _ as action,
+  O as bg,
+  v as border,
+  n as color,
+  t as colors,
+  e as dimension,
+  y as padding,
+  C as primitive,
+  z as radii,
+  W as semantic,
+  h as shadow,
+  H as shadows,
+  x as spacing,
+  w as status,
+  M as text,
+  j as typography
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export { colors, spacing, padding, radii, shadows, typography, } from "./primitive.js";
+export { bg, text, action, status, border } from "./semantic.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,GACX,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC"}

package/dist/tokens/primitive.d.ts

@@ -0,0 +1,127 @@
+import type { ColorToken, DimensionToken, ShadowToken } from "../types.js";
+export declare const colors: {
+    /** Pure solids */
+    readonly solid: {
+        readonly white: ColorToken;
+        readonly black: ColorToken;
+    };
+    /** Warm neutral palette — the core Billabex tone */
+    readonly neutral: {
+        readonly 50: ColorToken;
+        readonly 100: ColorToken;
+        readonly 200: ColorToken;
+        readonly 300: ColorToken;
+        readonly 400: ColorToken;
+        readonly 500: ColorToken;
+        readonly 600: ColorToken;
+        readonly 700: ColorToken;
+    };
+    /** Gold accent palette */
+    readonly gold: {
+        readonly 100: ColorToken;
+        readonly 300: ColorToken;
+        readonly 500: ColorToken;
+    };
+    /** Terracotta / link color */
+    readonly terracotta: {
+        readonly 400: ColorToken;
+        readonly 500: ColorToken;
+    };
+    /** Status colors */
+    readonly green: {
+        readonly 50: ColorToken;
+        readonly 600: ColorToken;
+    };
+    readonly orange: {
+        readonly 50: ColorToken;
+        readonly 500: ColorToken;
+    };
+    readonly red: {
+        readonly 50: ColorToken;
+        readonly 600: ColorToken;
+    };
+    readonly blue: {
+        readonly 50: ColorToken;
+        readonly 700: ColorToken;
+    };
+};
+export declare const spacing: {
+    /** 4px */
+    readonly xs: DimensionToken;
+    /** 6px */
+    readonly sm: DimensionToken;
+    /** 8px */
+    readonly md: DimensionToken;
+    /** 12px */
+    readonly lg: DimensionToken;
+    /** 16px */
+    readonly xl: DimensionToken;
+    /** 24px */
+    readonly "2xl": DimensionToken;
+    /** 32px */
+    readonly "3xl": DimensionToken;
+    /** 48px */
+    readonly "4xl": DimensionToken;
+};
+export declare const padding: {
+    readonly card: DimensionToken;
+    readonly page: DimensionToken;
+};
+export declare const radii: {
+    readonly none: DimensionToken;
+    readonly xs: DimensionToken;
+    readonly sm: DimensionToken;
+    readonly md: DimensionToken;
+    readonly lg: DimensionToken;
+    readonly full: DimensionToken;
+};
+export declare const shadows: {
+    readonly sm: ShadowToken;
+    readonly md: ShadowToken;
+    readonly lg: ShadowToken;
+};
+export declare const typography: {
+    readonly display: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 600;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+    readonly headlineLg: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 600;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+    readonly headlineSm: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 600;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+    readonly body: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 400;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+    readonly bodySm: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 400;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+    readonly caption: {
+        readonly fontFamily: "Nunito, sans-serif";
+        readonly fontWeight: 500;
+        readonly fontSize: DimensionToken;
+        readonly lineHeight: DimensionToken;
+        readonly letterSpacing: DimensionToken;
+    };
+};
+//# sourceMappingURL=primitive.d.ts.map

package/dist/tokens/primitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitive.d.ts","sourceRoot":"","sources":["../../src/tokens/primitive.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EACV,cAAc,EAEd,WAAW,EAEZ,MAAM,aAAa,CAAC;AAOrB,eAAO,MAAM,MAAM;IACjB,kBAAkB;;;;;IAMlB,oDAAoD;;;;;;;;;;;IAYpD,0BAA0B;;;;;;IAO1B,8BAA8B;;;;;IAM9B,oBAAoB;;;;;;;;;;;;;;;;;CAoBsE,CAAC;AAM7F,eAAO,MAAM,OAAO;IAClB,UAAU;;IAEV,UAAU;;IAEV,UAAU;;IAEV,WAAW;;IAEX,WAAW;;IAEX,WAAW;;IAEX,WAAW;;IAEX,WAAW;;CAEsC,CAAC;AAMpD,eAAO,MAAM,OAAO;;;CAG+B,CAAC;AAMpD,eAAO,MAAM,KAAK;;;;;;;CAO8B,CAAC;AAMjD,eAAO,MAAM,OAAO;;;;CAI4B,CAAC;AAQjD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C6B,CAAC"}

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,64 @@
+import type { ColorToken } from "../types.js";
+export declare const bg: {
+    /** Default page / card background */
+    readonly default: ColorToken;
+    /** Subtle background for secondary surfaces */
+    readonly subtle: ColorToken;
+    /** Muted background for tertiary surfaces, hover states */
+    readonly muted: ColorToken;
+    /** Inverse background (dark) */
+    readonly inverse: ColorToken;
+    /** Brand-tinted background */
+    readonly brand: ColorToken;
+    /** Accent background (warm) */
+    readonly accent: ColorToken;
+};
+export declare const text: {
+    /** Primary text — headings, body */
+    readonly primary: ColorToken;
+    /** Secondary text — descriptions, labels */
+    readonly secondary: ColorToken;
+    /** Tertiary text — placeholders, disabled */
+    readonly tertiary: ColorToken;
+    /** Text on inverse/dark backgrounds */
+    readonly inverse: ColorToken;
+    /** Link text */
+    readonly link: ColorToken;
+    /** Link hover text */
+    readonly linkHover: ColorToken;
+};
+export declare const action: {
+    /** Primary action background */
+    readonly primary: ColorToken;
+    /** Primary action hover */
+    readonly primaryHover: ColorToken;
+    /** Primary action pressed */
+    readonly primaryPressed: ColorToken;
+    /** Secondary action background */
+    readonly secondary: ColorToken;
+    /** Secondary action hover */
+    readonly secondaryHover: ColorToken;
+    /** Destructive action */
+    readonly destructive: ColorToken;
+};
+export declare const status: {
+    readonly success: ColorToken;
+    readonly successSubtle: ColorToken;
+    readonly warning: ColorToken;
+    readonly warningSubtle: ColorToken;
+    readonly error: ColorToken;
+    readonly errorSubtle: ColorToken;
+    readonly info: ColorToken;
+    readonly infoSubtle: ColorToken;
+};
+export declare const border: {
+    /** Default border */
+    readonly default: ColorToken;
+    /** Subtle border */
+    readonly subtle: ColorToken;
+    /** Focused / active border */
+    readonly focus: ColorToken;
+    /** Error border */
+    readonly error: ColorToken;
+};
+//# sourceMappingURL=semantic.d.ts.map

package/dist/tokens/semantic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../src/tokens/semantic.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,eAAO,MAAM,EAAE;IACb,qCAAqC;;IAErC,+CAA+C;;IAE/C,2DAA2D;;IAE3D,gCAAgC;;IAEhC,8BAA8B;;IAE9B,+BAA+B;;CAEc,CAAC;AAMhD,eAAO,MAAM,IAAI;IACf,oCAAoC;;IAEpC,4CAA4C;;IAE5C,6CAA6C;;IAE7C,uCAAuC;;IAEvC,gBAAgB;;IAEhB,sBAAsB;;CAEuB,CAAC;AAMhD,eAAO,MAAM,MAAM;IACjB,gCAAgC;;IAEhC,2BAA2B;;IAE3B,6BAA6B;;IAE7B,kCAAkC;;IAElC,6BAA6B;;IAE7B,yBAAyB;;CAEoB,CAAC;AAMhD,eAAO,MAAM,MAAM;;;;;;;;;CAS4B,CAAC;AAMhD,eAAO,MAAM,MAAM;IACjB,qBAAqB;;IAErB,oBAAoB;;IAEpB,8BAA8B;;IAE9B,mBAAmB;;CAE0B,CAAC"}

package/dist/tokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tokens.test.d.ts.map

package/dist/tokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.test.d.ts","sourceRoot":"","sources":["../src/tokens.test.ts"],"names":[],"mappings":""}

package/dist/types.d.ts

@@ -0,0 +1,108 @@
+/**
+ * RGB color components (0-255)
+ */
+export interface RgbComponents {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+}
+/**
+ * HSL color components
+ */
+export interface HslComponents {
+    readonly h: number;
+    readonly s: number;
+    readonly l: number;
+}
+/**
+ * A color token with rich conversion methods.
+ *
+ * @example
+ * ```ts
+ * import { semantic } from '@billabex/ui-tokens'
+ *
+ * semantic.bg.default.hex        // '#ffffff'
+ * semantic.bg.default.rgb        // { r: 255, g: 255, b: 255 }
+ * semantic.bg.default.rgba(0.5)  // 'rgba(255, 255, 255, 0.5)'
+ * semantic.bg.default.hsl        // { h: 0, s: 0, l: 100 }
+ * `${semantic.bg.default}`       // '#ffffff' (via toString)
+ * ```
+ */
+export interface ColorToken {
+    /** Hex string (e.g. '#1c1917') */
+    readonly hex: string;
+    /** RGB components (0-255) */
+    readonly rgb: RgbComponents;
+    /** HSL components (h: 0-360, s: 0-100, l: 0-100) */
+    readonly hsl: HslComponents;
+    /** Returns `rgba(r, g, b, alpha)` string */
+    rgba(alpha: number): string;
+    /** Returns `hsla(h, s%, l%, alpha)` string */
+    hsla(alpha: number): string;
+    /** Returns hex when coerced to string */
+    toString(): string;
+}
+/**
+ * A dimension token (spacing, sizing, border-width...).
+ *
+ * @example
+ * ```ts
+ * import { primitive } from '@billabex/ui-tokens'
+ *
+ * primitive.spacing.md.value   // 8
+ * primitive.spacing.md.px      // '8px'
+ * primitive.spacing.md.rem     // '0.5rem'
+ * `${primitive.spacing.md}`    // '8px' (via toString)
+ * ```
+ */
+export interface DimensionToken {
+    /** Raw numeric value (in pixels) */
+    readonly value: number;
+    /** Pixel string (e.g. '8px') */
+    readonly px: string;
+    /** Rem string based on 16px root (e.g. '0.5rem') */
+    readonly rem: string;
+    /** Returns px string when coerced to string */
+    toString(): string;
+}
+/**
+ * A typography token representing a complete text style.
+ */
+export interface TypographyToken {
+    readonly fontFamily: string;
+    readonly fontWeight: number;
+    readonly fontSize: DimensionToken;
+    readonly lineHeight: DimensionToken;
+    readonly letterSpacing: DimensionToken;
+}
+/**
+ * A shadow token representing a box-shadow.
+ *
+ * @example
+ * ```ts
+ * primitive.shadow.sm.css  // '0px 2px 8px 0px rgba(28, 28, 26, 0.08)'
+ * ```
+ */
+export interface ShadowToken {
+    readonly offsetX: number;
+    readonly offsetY: number;
+    readonly blur: number;
+    readonly spread: number;
+    readonly color: ColorToken;
+    /** Full CSS box-shadow string */
+    readonly css: string;
+    /** Returns CSS string when coerced to string */
+    toString(): string;
+}
+/**
+ * A radius token (border-radius).
+ */
+export interface RadiusToken extends DimensionToken {
+}
+/** A record of named tokens of a given type */
+export type TokenScale<T> = Readonly<Record<string, T>>;
+/** Nested token group (allows grouping like colors.neutral.100) */
+export interface TokenGroup<T> {
+    readonly [key: string]: T | TokenGroup<T>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,4CAA4C;IAC5C,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yCAAyC;IACzC,QAAQ,IAAI,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,IAAI,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,QAAQ,IAAI,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;CAAG;AAMtD,+CAA+C;AAC/C,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAExD,mEAAmE;AACnE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;CAC3C"}

package/dist/utils.d.ts

@@ -0,0 +1,36 @@
+import type { ColorToken, DimensionToken, ShadowToken } from "./types.js";
+/**
+ * Create a ColorToken from a hex string.
+ *
+ * @example
+ * ```ts
+ * const primary = color('#1c1917')
+ * primary.hex        // '#1c1917'
+ * primary.rgb        // { r: 28, g: 25, b: 23 }
+ * primary.rgba(0.5)  // 'rgba(28, 25, 23, 0.5)'
+ * ```
+ */
+export declare function color(hex: string): ColorToken;
+/**
+ * Create a DimensionToken from a pixel value.
+ *
+ * @example
+ * ```ts
+ * const md = dimension(8)
+ * md.value  // 8
+ * md.px     // '8px'
+ * md.rem    // '0.5rem'
+ * ```
+ */
+export declare function dimension(value: number): DimensionToken;
+/**
+ * Create a ShadowToken from individual shadow properties.
+ *
+ * @example
+ * ```ts
+ * const sm = shadow(0, 2, 8, 0, '#1C1C1A14')
+ * sm.css // '0px 2px 8px 0px rgba(28, 28, 26, 0.08)'
+ * ```
+ */
+export declare function shadow(offsetX: number, offsetY: number, blur: number, spread: number, colorHex: string): ShadowToken;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,UAAU,EACV,cAAc,EAGd,WAAW,EACZ,MAAM,YAAY,CAAC;AAuDpB;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAkB7C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CASvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,WAAW,CAmBb"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@billabex/ui-tokens",
+  "version": "0.0.0",
+  "description": "Design tokens for the Billabex design system — framework-agnostic, Figma Token Studio compatible",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./tokens.json": "./tokens.json"
+  },
+  "files": [
+    "dist",
+    "tokens.json"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "build:figma": "tsx scripts/build-figma.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit",
+    "prepare": "pnpm build:figma"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/billabex/lingot.git",
+    "directory": "packages/ui-tokens"
+  },
+  "sideEffects": false
+}

package/tokens.json

@@ -0,0 +1,424 @@
+{
+  "global": {
+    "color": {
+      "solid": {
+        "white": {
+          "$value": "#ffffff",
+          "$type": "color"
+        },
+        "black": {
+          "$value": "#000000",
+          "$type": "color"
+        }
+      },
+      "neutral": {
+        "50": {
+          "$value": "#fdfcfb",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#fcfaf8",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#f5f0eb",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#e3dbd2",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#9c8e82",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#534840",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#3d3530",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#1c1917",
+          "$type": "color"
+        }
+      },
+      "gold": {
+        "100": {
+          "$value": "#fef7e6",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#f0d68a",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#d4a853",
+          "$type": "color"
+        }
+      },
+      "terracotta": {
+        "300": {
+          "$value": "#eee3de",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#b5634b",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#9c5340",
+          "$type": "color"
+        }
+      },
+      "green": {
+        "50": {
+          "$value": "#e3f5eb",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#067647",
+          "$type": "color"
+        }
+      },
+      "orange": {
+        "50": {
+          "$value": "#fff1c6",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#f99307",
+          "$type": "color"
+        }
+      },
+      "red": {
+        "50": {
+          "$value": "#fde9e7",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#d92d20",
+          "$type": "color"
+        }
+      },
+      "blue": {
+        "50": {
+          "$value": "#e8ecf2",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#1e4a8a",
+          "$type": "color"
+        }
+      }
+    },
+    "spacing": {
+      "xs": {
+        "$value": "4px",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": "6px",
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": "8px",
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": "12px",
+        "$type": "dimension"
+      },
+      "xl": {
+        "$value": "16px",
+        "$type": "dimension"
+      },
+      "2xl": {
+        "$value": "24px",
+        "$type": "dimension"
+      },
+      "3xl": {
+        "$value": "32px",
+        "$type": "dimension"
+      },
+      "4xl": {
+        "$value": "48px",
+        "$type": "dimension"
+      },
+      "5xl": {
+        "$value": "64px",
+        "$type": "dimension"
+      }
+    },
+    "padding": {
+      "card": {
+        "$value": "16px",
+        "$type": "dimension"
+      },
+      "page": {
+        "$value": "24px",
+        "$type": "dimension"
+      }
+    },
+    "radius": {
+      "none": {
+        "$value": "0px",
+        "$type": "dimension"
+      },
+      "xs": {
+        "$value": "4px",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": "8px",
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": "12px",
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": "16px",
+        "$type": "dimension"
+      },
+      "full": {
+        "$value": "9999px",
+        "$type": "dimension"
+      }
+    },
+    "shadow": {
+      "sm": {
+        "$value": {
+          "offsetX": "0px",
+          "offsetY": "2px",
+          "blur": "8px",
+          "spread": "0px",
+          "color": "rgba(28, 28, 26, 1)"
+        },
+        "$type": "shadow"
+      },
+      "md": {
+        "$value": {
+          "offsetX": "0px",
+          "offsetY": "6px",
+          "blur": "16px",
+          "spread": "-2px",
+          "color": "rgba(28, 28, 26, 1)"
+        },
+        "$type": "shadow"
+      },
+      "lg": {
+        "$value": {
+          "offsetX": "0px",
+          "offsetY": "12px",
+          "blur": "28px",
+          "spread": "-6px",
+          "color": "rgba(28, 28, 26, 1)"
+        },
+        "$type": "shadow"
+      }
+    },
+    "typography": {
+      "display": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 600,
+          "fontSize": "32px",
+          "lineHeight": "40px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      },
+      "headlineLg": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 600,
+          "fontSize": "20px",
+          "lineHeight": "28px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      },
+      "headlineSm": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 600,
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      },
+      "body": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 400,
+          "fontSize": "14px",
+          "lineHeight": "20px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      },
+      "bodySm": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 400,
+          "fontSize": "13px",
+          "lineHeight": "18px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      },
+      "caption": {
+        "$value": {
+          "fontFamily": "Nunito, sans-serif",
+          "fontWeight": 500,
+          "fontSize": "12px",
+          "lineHeight": "16px",
+          "letterSpacing": "0px"
+        },
+        "$type": "typography"
+      }
+    }
+  },
+  "semantic": {
+    "bg": {
+      "default": {
+        "$value": "{global.color.solid.white}",
+        "$type": "color"
+      },
+      "subtle": {
+        "$value": "{global.color.neutral.100}",
+        "$type": "color"
+      },
+      "muted": {
+        "$value": "{global.color.neutral.200}",
+        "$type": "color"
+      },
+      "inverse": {
+        "$value": "{global.color.neutral.700}",
+        "$type": "color"
+      },
+      "brand": {
+        "$value": "{global.color.blue.50}",
+        "$type": "color"
+      },
+      "accent": {
+        "$value": "{global.color.terracotta.300}",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "primary": {
+        "$value": "{global.color.neutral.700}",
+        "$type": "color"
+      },
+      "secondary": {
+        "$value": "{global.color.neutral.500}",
+        "$type": "color"
+      },
+      "tertiary": {
+        "$value": "{global.color.neutral.400}",
+        "$type": "color"
+      },
+      "inverse": {
+        "$value": "{global.color.solid.white}",
+        "$type": "color"
+      },
+      "link": {
+        "$value": "{global.color.terracotta.400}",
+        "$type": "color"
+      },
+      "linkHover": {
+        "$value": "{global.color.terracotta.500}",
+        "$type": "color"
+      }
+    },
+    "action": {
+      "primary": {
+        "$value": "{global.color.neutral.700}",
+        "$type": "color"
+      },
+      "primaryHover": {
+        "$value": "{global.color.neutral.600}",
+        "$type": "color"
+      },
+      "primaryPressed": {
+        "$value": "{global.color.neutral.500}",
+        "$type": "color"
+      },
+      "secondary": {
+        "$value": "{global.color.neutral.200}",
+        "$type": "color"
+      },
+      "secondaryHover": {
+        "$value": "{global.color.neutral.300}",
+        "$type": "color"
+      },
+      "destructive": {
+        "$value": "{global.color.red.600}",
+        "$type": "color"
+      }
+    },
+    "status": {
+      "success": {
+        "$value": "{global.color.green.600}",
+        "$type": "color"
+      },
+      "successSubtle": {
+        "$value": "{global.color.green.50}",
+        "$type": "color"
+      },
+      "warning": {
+        "$value": "{global.color.orange.500}",
+        "$type": "color"
+      },
+      "warningSubtle": {
+        "$value": "{global.color.orange.50}",
+        "$type": "color"
+      },
+      "error": {
+        "$value": "{global.color.red.600}",
+        "$type": "color"
+      },
+      "errorSubtle": {
+        "$value": "{global.color.red.50}",
+        "$type": "color"
+      },
+      "info": {
+        "$value": "{global.color.blue.700}",
+        "$type": "color"
+      },
+      "infoSubtle": {
+        "$value": "{global.color.blue.50}",
+        "$type": "color"
+      }
+    },
+    "border": {
+      "default": {
+        "$value": "{global.color.neutral.300}",
+        "$type": "color"
+      },
+      "subtle": {
+        "$value": "{global.color.neutral.200}",
+        "$type": "color"
+      },
+      "focus": {
+        "$value": "{global.color.neutral.700}",
+        "$type": "color"
+      },
+      "error": {
+        "$value": "{global.color.red.600}",
+        "$type": "color"
+      }
+    }
+  },
+  "$metadata": {
+    "tokenSetOrder": [
+      "global",
+      "semantic"
+    ]
+  }
+}