@dinofront/design_system 0.1.0

package/dist/tailwind/preset.d.ts

@@ -0,0 +1,41 @@
+import { tailwindBorderRadius, tailwindBoxShadow, tailwindColors, tailwindFontFamily, tailwindFontSize } from './tokens';
+/**
+ * Minimal shape of the config fragment we export. Kept local instead of
+ * importing Tailwind's own config type so this file has zero build-time
+ * dependency on `tailwindcss` internals — it's just plain data.
+ */
+export interface UiPreset {
+    darkMode: 'class';
+    theme: {
+        extend: {
+            colors: typeof tailwindColors;
+            borderRadius: typeof tailwindBorderRadius;
+            boxShadow: typeof tailwindBoxShadow;
+            fontFamily: typeof tailwindFontFamily;
+            fontSize: typeof tailwindFontSize;
+        };
+    };
+}
+/**
+ * Tailwind preset for consumer apps still on a JS config (Tailwind v3, or
+ * v4 via the `@config` compatibility directive). Spread it into your own
+ * config's `presets` array:
+ *
+ * ```js
+ * // tailwind.config.js
+ * import { uiPreset } from '@ps-tools/ui/preset';
+ *
+ * export default {
+ *   presets: [uiPreset],
+ *   content: [
+ *     './src/**\/*.{ts,tsx}',
+ *     './node_modules/@ps-tools/ui/dist/**\/*.js',
+ *   ],
+ * };
+ * ```
+ *
+ * Native Tailwind v4 CSS-config consumers don't need this — importing
+ * `@ps-tools/ui/styles.css` already registers every token via `@theme inline`.
+ */
+export declare const uiPreset: UiPreset;
+export default uiPreset;

package/dist/tailwind/preset.js

@@ -0,0 +1,151 @@
+//#region src/tailwind/tokens.ts
+var e = (e, t) => Object.fromEntries(t.map((t) => [t, `var(--color-${e}-${t})`])), t = [
+	20,
+	30,
+	40,
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], n = [
+	20,
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], r = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], i = {
+	white: "var(--color-white)",
+	brand: e("brand", t),
+	gray: e("gray", n),
+	green: e("green", r),
+	blue: e("blue", r),
+	purple: e("purple", [
+		20,
+		50,
+		100,
+		200,
+		300,
+		400,
+		500,
+		600,
+		700,
+		800,
+		900
+	]),
+	pink: e("pink", r),
+	red: e("red", [
+		20,
+		50,
+		100,
+		200,
+		300,
+		400,
+		500,
+		600,
+		700,
+		800,
+		900
+	]),
+	yellow: e("yellow", r),
+	"bg-default": "var(--color-bg-default)",
+	"bg-container": "var(--color-bg-container)",
+	"bg-subtle": "var(--color-bg-subtle)",
+	"bg-brand-lighter": "var(--color-bg-brand-lighter)",
+	"bg-info-lighter": "var(--color-bg-info-lighter)",
+	"bg-success-lighter": "var(--color-bg-success-lighter)",
+	"bg-warning-lighter": "var(--color-bg-warning-lighter)",
+	"bg-danger-lighter": "var(--color-bg-danger-lighter)",
+	"fg-default": "var(--color-fg-default)",
+	"fg-secondary": "var(--color-fg-secondary)",
+	"fg-tertiary": "var(--color-fg-tertiary)",
+	"fg-disabled": "var(--color-fg-disabled)",
+	"fg-inverse": "var(--color-fg-inverse)",
+	"fg-brand": "var(--color-fg-brand)",
+	"fg-info": "var(--color-fg-info)",
+	"fg-success": "var(--color-fg-success)",
+	"fg-warning": "var(--color-fg-warning)",
+	"fg-danger": "var(--color-fg-danger)",
+	"border-default": "var(--color-border-default)",
+	"border-subtle": "var(--color-border-subtle)",
+	"border-strong": "var(--color-border-strong)",
+	"border-brand": "var(--color-border-brand)",
+	"icon-primary": "var(--color-icon-primary)",
+	"icon-secondary": "var(--color-icon-secondary)",
+	"icon-inverse": "var(--color-icon-inverse)",
+	"icon-brand": "var(--color-icon-brand)",
+	"icon-info": "var(--color-icon-info)",
+	"icon-danger": "var(--color-icon-danger)",
+	"icon-warning": "var(--color-icon-warning)"
+}, a = {
+	xs: "var(--radius-xs)",
+	sm: "var(--radius-sm)",
+	md: "var(--radius-md)",
+	lg: "var(--radius-lg)",
+	xl: "var(--radius-xl)",
+	"2xl": "var(--radius-2xl)",
+	"3xl": "var(--radius-3xl)",
+	full: "var(--radius-full)"
+}, o = {
+	z1: "var(--shadow-z1)",
+	z2: "var(--shadow-z2)",
+	z3: "var(--shadow-z3)",
+	z4: "var(--shadow-z4)",
+	z5: "var(--shadow-z5)"
+}, s = {
+	ps: "var(--font-ps)",
+	sans: "var(--font-sans)"
+}, c = (e) => [`var(--text-${e})`, { lineHeight: `var(--text-${e}--line-height)` }], l = {
+	darkMode: "class",
+	theme: { extend: {
+		colors: i,
+		borderRadius: a,
+		boxShadow: o,
+		fontFamily: s,
+		fontSize: {
+			"h-xl": c("h-xl"),
+			"h-lg": c("h-lg"),
+			"h-md": c("h-md"),
+			"h-std": c("h-std"),
+			"h-sm": c("h-sm"),
+			"h-xs": c("h-xs"),
+			"p-lg": c("p-lg"),
+			"p-md": c("p-md"),
+			"p-std": c("p-std"),
+			"p-sm": c("p-sm"),
+			"p-xs": c("p-xs"),
+			"label-lg": c("label-lg"),
+			"label-md": c("label-md"),
+			"label-std": c("label-std"),
+			"label-sm": c("label-sm"),
+			"label-xs": c("label-xs"),
+			"label-xxs": c("label-xxs")
+		}
+	} }
+};
+//#endregion
+export { l as default, l as uiPreset };
+
+//# sourceMappingURL=preset.js.map

package/dist/tailwind/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","names":[],"sources":["../../src/tailwind/tokens.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Tailwind `theme.extend`-shaped token map, for consumer apps still using a\n * JS Tailwind config (v3-style, or v4 via the `@config` compatibility\n * directive). Every value points at the CSS custom properties defined in\n * `styles/tokens.css` / `styles/theme.css` — never a hardcoded value — so\n * this stays correct regardless of light/dark mode or future palette edits.\n *\n * Consumers on native Tailwind v4 CSS config don't need this file at all:\n * importing `@ps-tools/ui/styles.css` already registers these as Tailwind\n * theme values via `@theme`.\n */\n\nconst colorScale = (name: string, steps: readonly number[]) =>\n  Object.fromEntries(steps.map((step) => [step, `var(--color-${name}-${step})`]));\n\nconst BRAND_STEPS = [20, 30, 40, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst GRAY_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst TEN_STEP = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst PURPLE_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\nconst RED_STEPS = [20, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900] as const;\n\nexport const tailwindColors = {\n  white: 'var(--color-white)',\n  brand: colorScale('brand', BRAND_STEPS),\n  gray: colorScale('gray', GRAY_STEPS),\n  green: colorScale('green', TEN_STEP),\n  blue: colorScale('blue', TEN_STEP),\n  purple: colorScale('purple', PURPLE_STEPS),\n  pink: colorScale('pink', TEN_STEP),\n  red: colorScale('red', RED_STEPS),\n  yellow: colorScale('yellow', TEN_STEP),\n\n  /* Semantic aliases — prefer these over raw scales in components. */\n  'bg-default': 'var(--color-bg-default)',\n  'bg-container': 'var(--color-bg-container)',\n  'bg-subtle': 'var(--color-bg-subtle)',\n  'bg-brand-lighter': 'var(--color-bg-brand-lighter)',\n  'bg-info-lighter': 'var(--color-bg-info-lighter)',\n  'bg-success-lighter': 'var(--color-bg-success-lighter)',\n  'bg-warning-lighter': 'var(--color-bg-warning-lighter)',\n  'bg-danger-lighter': 'var(--color-bg-danger-lighter)',\n\n  'fg-default': 'var(--color-fg-default)',\n  'fg-secondary': 'var(--color-fg-secondary)',\n  'fg-tertiary': 'var(--color-fg-tertiary)',\n  'fg-disabled': 'var(--color-fg-disabled)',\n  'fg-inverse': 'var(--color-fg-inverse)',\n  'fg-brand': 'var(--color-fg-brand)',\n  'fg-info': 'var(--color-fg-info)',\n  'fg-success': 'var(--color-fg-success)',\n  'fg-warning': 'var(--color-fg-warning)',\n  'fg-danger': 'var(--color-fg-danger)',\n\n  'border-default': 'var(--color-border-default)',\n  'border-subtle': 'var(--color-border-subtle)',\n  'border-strong': 'var(--color-border-strong)',\n  'border-brand': 'var(--color-border-brand)',\n\n  'icon-primary': 'var(--color-icon-primary)',\n  'icon-secondary': 'var(--color-icon-secondary)',\n  'icon-inverse': 'var(--color-icon-inverse)',\n  'icon-brand': 'var(--color-icon-brand)',\n  'icon-info': 'var(--color-icon-info)',\n  'icon-danger': 'var(--color-icon-danger)',\n  'icon-warning': 'var(--color-icon-warning)',\n} as const;\n\nexport const tailwindBorderRadius = {\n  xs: 'var(--radius-xs)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n  '2xl': 'var(--radius-2xl)',\n  '3xl': 'var(--radius-3xl)',\n  full: 'var(--radius-full)',\n} as const;\n\nexport const tailwindBoxShadow = {\n  z1: 'var(--shadow-z1)',\n  z2: 'var(--shadow-z2)',\n  z3: 'var(--shadow-z3)',\n  z4: 'var(--shadow-z4)',\n  z5: 'var(--shadow-z5)',\n} as const;\n\nexport const tailwindFontFamily = {\n  ps: 'var(--font-ps)',\n  sans: 'var(--font-sans)',\n} as const;\n\nconst textStyle = (name: string) => [`var(--text-${name})`, { lineHeight: `var(--text-${name}--line-height)` }];\n\nexport const tailwindFontSize = {\n  'h-xl': textStyle('h-xl'),\n  'h-lg': textStyle('h-lg'),\n  'h-md': textStyle('h-md'),\n  'h-std': textStyle('h-std'),\n  'h-sm': textStyle('h-sm'),\n  'h-xs': textStyle('h-xs'),\n\n  'p-lg': textStyle('p-lg'),\n  'p-md': textStyle('p-md'),\n  'p-std': textStyle('p-std'),\n  'p-sm': textStyle('p-sm'),\n  'p-xs': textStyle('p-xs'),\n\n  'label-lg': textStyle('label-lg'),\n  'label-md': textStyle('label-md'),\n  'label-std': textStyle('label-std'),\n  'label-sm': textStyle('label-sm'),\n  'label-xs': textStyle('label-xs'),\n  'label-xxs': textStyle('label-xxs'),\n} as const;\n","import {\n  tailwindBorderRadius,\n  tailwindBoxShadow,\n  tailwindColors,\n  tailwindFontFamily,\n  tailwindFontSize,\n} from './tokens';\n\n/**\n * Minimal shape of the config fragment we export. Kept local instead of\n * importing Tailwind's own config type so this file has zero build-time\n * dependency on `tailwindcss` internals — it's just plain data.\n */\nexport interface UiPreset {\n  darkMode: 'class';\n  theme: {\n    extend: {\n      colors: typeof tailwindColors;\n      borderRadius: typeof tailwindBorderRadius;\n      boxShadow: typeof tailwindBoxShadow;\n      fontFamily: typeof tailwindFontFamily;\n      fontSize: typeof tailwindFontSize;\n    };\n  };\n}\n\n/**\n * Tailwind preset for consumer apps still on a JS config (Tailwind v3, or\n * v4 via the `@config` compatibility directive). Spread it into your own\n * config's `presets` array:\n *\n * ```js\n * // tailwind.config.js\n * import { uiPreset } from '@ps-tools/ui/preset';\n *\n * export default {\n *   presets: [uiPreset],\n *   content: [\n *     './src/**\\/*.{ts,tsx}',\n *     './node_modules/@ps-tools/ui/dist/**\\/*.js',\n *   ],\n * };\n * ```\n *\n * Native Tailwind v4 CSS-config consumers don't need this — importing\n * `@ps-tools/ui/styles.css` already registers every token via `@theme inline`.\n */\nexport const uiPreset: UiPreset = {\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: tailwindColors,\n      borderRadius: tailwindBorderRadius,\n      boxShadow: tailwindBoxShadow,\n      fontFamily: tailwindFontFamily,\n      fontSize: tailwindFontSize,\n    },\n  },\n};\n\nexport default uiPreset;\n"],"mappings":";AAYA,IAAM,KAAc,GAAc,MAChC,OAAO,YAAY,EAAM,KAAK,MAAS,CAAC,GAAM,eAAe,EAAK,GAAG,EAAK,EAAE,CAAC,CAAC,GAE1E,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAC1E,IAAa;CAAC;CAAI;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GACjE,IAAW;CAAC;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GAIpD,IAAiB;CAC5B,OAAO;CACP,OAAO,EAAW,SAAS,CAAW;CACtC,MAAM,EAAW,QAAQ,CAAU;CACnC,OAAO,EAAW,SAAS,CAAQ;CACnC,MAAM,EAAW,QAAQ,CAAQ;CACjC,QAAQ,EAAW,UAAU;EATT;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CASvC,CAAY;CACzC,MAAM,EAAW,QAAQ,CAAQ;CACjC,KAAK,EAAW,OAAO;EAVN;EAAI;EAAI;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;CAU1C,CAAS;CAChC,QAAQ,EAAW,UAAU,CAAQ;CAGrC,cAAc;CACd,gBAAgB;CAChB,aAAa;CACb,oBAAoB;CACpB,mBAAmB;CACnB,sBAAsB;CACtB,sBAAsB;CACtB,qBAAqB;CAErB,cAAc;CACd,gBAAgB;CAChB,eAAe;CACf,eAAe;CACf,cAAc;CACd,YAAY;CACZ,WAAW;CACX,cAAc;CACd,cAAc;CACd,aAAa;CAEb,kBAAkB;CAClB,iBAAiB;CACjB,iBAAiB;CACjB,gBAAgB;CAEhB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB,GAEa,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR,GAEa,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEa,IAAqB;CAChC,IAAI;CACJ,MAAM;AACR,GAEM,KAAa,MAAiB,CAAC,cAAc,EAAK,IAAI,EAAE,YAAY,cAAc,EAAK,gBAAgB,CAAC,GC5CjG,IAAqB;CAChC,UAAU;CACV,OAAO,EACL,QAAQ;EACN,QAAQ;EACR,cAAc;EACd,WAAW;EACX,YAAY;EACZ,UAAU;GDuCd,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GACxB,SAAS,EAAU,OAAO;GAC1B,QAAQ,EAAU,MAAM;GACxB,QAAQ,EAAU,MAAM;GAExB,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;GAClC,YAAY,EAAU,UAAU;GAChC,YAAY,EAAU,UAAU;GAChC,aAAa,EAAU,WAAW;ECzDpB;CACZ,EACF;AACF"}

package/dist/tailwind/tokens.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Tailwind `theme.extend`-shaped token map, for consumer apps still using a
+ * JS Tailwind config (v3-style, or v4 via the `@config` compatibility
+ * directive). Every value points at the CSS custom properties defined in
+ * `styles/tokens.css` / `styles/theme.css` — never a hardcoded value — so
+ * this stays correct regardless of light/dark mode or future palette edits.
+ *
+ * Consumers on native Tailwind v4 CSS config don't need this file at all:
+ * importing `@ps-tools/ui/styles.css` already registers these as Tailwind
+ * theme values via `@theme`.
+ */
+export declare const tailwindColors: {
+    readonly white: "var(--color-white)";
+    readonly brand: {
+        [k: string]: string;
+    };
+    readonly gray: {
+        [k: string]: string;
+    };
+    readonly green: {
+        [k: string]: string;
+    };
+    readonly blue: {
+        [k: string]: string;
+    };
+    readonly purple: {
+        [k: string]: string;
+    };
+    readonly pink: {
+        [k: string]: string;
+    };
+    readonly red: {
+        [k: string]: string;
+    };
+    readonly yellow: {
+        [k: string]: string;
+    };
+    readonly 'bg-default': "var(--color-bg-default)";
+    readonly 'bg-container': "var(--color-bg-container)";
+    readonly 'bg-subtle': "var(--color-bg-subtle)";
+    readonly 'bg-brand-lighter': "var(--color-bg-brand-lighter)";
+    readonly 'bg-info-lighter': "var(--color-bg-info-lighter)";
+    readonly 'bg-success-lighter': "var(--color-bg-success-lighter)";
+    readonly 'bg-warning-lighter': "var(--color-bg-warning-lighter)";
+    readonly 'bg-danger-lighter': "var(--color-bg-danger-lighter)";
+    readonly 'fg-default': "var(--color-fg-default)";
+    readonly 'fg-secondary': "var(--color-fg-secondary)";
+    readonly 'fg-tertiary': "var(--color-fg-tertiary)";
+    readonly 'fg-disabled': "var(--color-fg-disabled)";
+    readonly 'fg-inverse': "var(--color-fg-inverse)";
+    readonly 'fg-brand': "var(--color-fg-brand)";
+    readonly 'fg-info': "var(--color-fg-info)";
+    readonly 'fg-success': "var(--color-fg-success)";
+    readonly 'fg-warning': "var(--color-fg-warning)";
+    readonly 'fg-danger': "var(--color-fg-danger)";
+    readonly 'border-default': "var(--color-border-default)";
+    readonly 'border-subtle': "var(--color-border-subtle)";
+    readonly 'border-strong': "var(--color-border-strong)";
+    readonly 'border-brand': "var(--color-border-brand)";
+    readonly 'icon-primary': "var(--color-icon-primary)";
+    readonly 'icon-secondary': "var(--color-icon-secondary)";
+    readonly 'icon-inverse': "var(--color-icon-inverse)";
+    readonly 'icon-brand': "var(--color-icon-brand)";
+    readonly 'icon-info': "var(--color-icon-info)";
+    readonly 'icon-danger': "var(--color-icon-danger)";
+    readonly 'icon-warning': "var(--color-icon-warning)";
+};
+export declare const tailwindBorderRadius: {
+    readonly xs: "var(--radius-xs)";
+    readonly sm: "var(--radius-sm)";
+    readonly md: "var(--radius-md)";
+    readonly lg: "var(--radius-lg)";
+    readonly xl: "var(--radius-xl)";
+    readonly '2xl': "var(--radius-2xl)";
+    readonly '3xl': "var(--radius-3xl)";
+    readonly full: "var(--radius-full)";
+};
+export declare const tailwindBoxShadow: {
+    readonly z1: "var(--shadow-z1)";
+    readonly z2: "var(--shadow-z2)";
+    readonly z3: "var(--shadow-z3)";
+    readonly z4: "var(--shadow-z4)";
+    readonly z5: "var(--shadow-z5)";
+};
+export declare const tailwindFontFamily: {
+    readonly ps: "var(--font-ps)";
+    readonly sans: "var(--font-sans)";
+};
+export declare const tailwindFontSize: {
+    readonly 'h-xl': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'h-lg': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'h-md': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'h-std': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'h-sm': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'h-xs': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'p-lg': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'p-md': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'p-std': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'p-sm': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'p-xs': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-lg': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-md': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-std': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-sm': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-xs': (string | {
+        lineHeight: string;
+    })[];
+    readonly 'label-xxs': (string | {
+        lineHeight: string;
+    })[];
+};

package/dist/tokens/colors.d.ts

@@ -0,0 +1,286 @@
+/**
+ * Color primitives and semantic theme tokens.
+ *
+ * Ported from the People Space design system
+ * (packages/design-system/src/tokens/colors.css + aliases.css) — this is
+ * the source of truth for the design system's color palette. Values are
+ * mirrored (by hand) into `src/styles/tokens.css` and `src/styles/theme.css`
+ * as CSS custom properties, since the library ships a real Tailwind theme
+ * rather than a JS-only token system.
+ */
+export declare const brand: {
+    readonly 900: "#31531C";
+    readonly 800: "#416E26";
+    readonly 700: "#518A2F";
+    readonly 600: "#61A539";
+    readonly 500: "#72BF44";
+    readonly 400: "#80C557";
+    readonly 300: "#8ECC69";
+    readonly 200: "#9CD27C";
+    readonly 100: "#AAD98F";
+    readonly 50: "#B8DFA2";
+    readonly 40: "#CAE7B9";
+    readonly 30: "#DBEFD1";
+    readonly 20: "#EDF7E8";
+};
+export declare const gray: {
+    readonly 900: "#0e121b";
+    readonly 800: "#222530";
+    readonly 700: "#2b303b";
+    readonly 600: "#525866";
+    readonly 500: "#717784";
+    readonly 400: "#99a0ae";
+    readonly 300: "#cacfd8";
+    readonly 200: "#e1e4ea";
+    readonly 100: "#f2f5f8";
+    readonly 50: "#f5f7fa";
+    readonly 20: "#f7f9fc";
+};
+export declare const white = "#FEFEFE";
+export declare const green: {
+    readonly 900: "#0b4627";
+    readonly 800: "#0f5c33";
+    readonly 700: "#3D8B46";
+    readonly 600: "#199754";
+    readonly 500: "#1fc16b";
+    readonly 400: "#5ed495";
+    readonly 300: "#83dfae";
+    readonly 200: "#aeeacb";
+    readonly 100: "#d0f5e1";
+    readonly 50: "#e0faec";
+};
+export declare const blue: {
+    readonly 900: "#2443B8";
+    readonly 800: "#2E63D6";
+    readonly 700: "#3475E8";
+    readonly 600: "#3C88F7";
+    readonly 500: "#4396F7";
+    readonly 400: "#54A6F8";
+    readonly 300: "#71B6F9";
+    readonly 200: "#9ACAFA";
+    readonly 100: "#C1DEFC";
+    readonly 50: "#E6F2FE";
+};
+export declare const purple: {
+    readonly 900: "#081FA6";
+    readonly 800: "#0E2AB2";
+    readonly 700: "#2431B9";
+    readonly 600: "#3838C1";
+    readonly 500: "#453DC7";
+    readonly 400: "#6559D0";
+    readonly 300: "#8377D7";
+    readonly 200: "#A89DE2";
+    readonly 100: "#CBC4ED";
+    readonly 50: "#EAE7F7";
+    readonly 20: "#F5F3FB";
+};
+export declare const pink: {
+    readonly 900: "#4A0A20";
+    readonly 800: "#79012F";
+    readonly 700: "#A2023F";
+    readonly 600: "#AD0244";
+    readonly 500: "#CA024F";
+    readonly 400: "#F50260";
+    readonly 300: "#FD2779";
+    readonly 200: "#FE7DAF";
+    readonly 100: "#FEA8C9";
+    readonly 50: "#FFD4E4";
+};
+export declare const red: {
+    readonly 900: "#8b1822";
+    readonly 800: "#ad1f2b";
+    readonly 700: "#d02533";
+    readonly 600: "#e93544";
+    readonly 500: "#fb3748";
+    readonly 400: "#ff6875";
+    readonly 300: "#ff97a0";
+    readonly 200: "#ffc0c5";
+    readonly 100: "#ffd5d8";
+    readonly 50: "#ffebec";
+    readonly 20: "#fff4f4";
+};
+export declare const yellow: {
+    readonly 900: "#EB7520";
+    readonly 800: "#ED912A";
+    readonly 700: "#EEA02F";
+    readonly 600: "#F0B134";
+    readonly 500: "#F1BE39";
+    readonly 400: "#F2C74A";
+    readonly 300: "#F4D264";
+    readonly 200: "#F7DE8E";
+    readonly 100: "#FAEBB9";
+    readonly 50: "#FDF7E4";
+};
+export declare const colorPrimitives: {
+    readonly brand: {
+        readonly 900: "#31531C";
+        readonly 800: "#416E26";
+        readonly 700: "#518A2F";
+        readonly 600: "#61A539";
+        readonly 500: "#72BF44";
+        readonly 400: "#80C557";
+        readonly 300: "#8ECC69";
+        readonly 200: "#9CD27C";
+        readonly 100: "#AAD98F";
+        readonly 50: "#B8DFA2";
+        readonly 40: "#CAE7B9";
+        readonly 30: "#DBEFD1";
+        readonly 20: "#EDF7E8";
+    };
+    readonly gray: {
+        readonly 900: "#0e121b";
+        readonly 800: "#222530";
+        readonly 700: "#2b303b";
+        readonly 600: "#525866";
+        readonly 500: "#717784";
+        readonly 400: "#99a0ae";
+        readonly 300: "#cacfd8";
+        readonly 200: "#e1e4ea";
+        readonly 100: "#f2f5f8";
+        readonly 50: "#f5f7fa";
+        readonly 20: "#f7f9fc";
+    };
+    readonly green: {
+        readonly 900: "#0b4627";
+        readonly 800: "#0f5c33";
+        readonly 700: "#3D8B46";
+        readonly 600: "#199754";
+        readonly 500: "#1fc16b";
+        readonly 400: "#5ed495";
+        readonly 300: "#83dfae";
+        readonly 200: "#aeeacb";
+        readonly 100: "#d0f5e1";
+        readonly 50: "#e0faec";
+    };
+    readonly blue: {
+        readonly 900: "#2443B8";
+        readonly 800: "#2E63D6";
+        readonly 700: "#3475E8";
+        readonly 600: "#3C88F7";
+        readonly 500: "#4396F7";
+        readonly 400: "#54A6F8";
+        readonly 300: "#71B6F9";
+        readonly 200: "#9ACAFA";
+        readonly 100: "#C1DEFC";
+        readonly 50: "#E6F2FE";
+    };
+    readonly purple: {
+        readonly 900: "#081FA6";
+        readonly 800: "#0E2AB2";
+        readonly 700: "#2431B9";
+        readonly 600: "#3838C1";
+        readonly 500: "#453DC7";
+        readonly 400: "#6559D0";
+        readonly 300: "#8377D7";
+        readonly 200: "#A89DE2";
+        readonly 100: "#CBC4ED";
+        readonly 50: "#EAE7F7";
+        readonly 20: "#F5F3FB";
+    };
+    readonly pink: {
+        readonly 900: "#4A0A20";
+        readonly 800: "#79012F";
+        readonly 700: "#A2023F";
+        readonly 600: "#AD0244";
+        readonly 500: "#CA024F";
+        readonly 400: "#F50260";
+        readonly 300: "#FD2779";
+        readonly 200: "#FE7DAF";
+        readonly 100: "#FEA8C9";
+        readonly 50: "#FFD4E4";
+    };
+    readonly red: {
+        readonly 900: "#8b1822";
+        readonly 800: "#ad1f2b";
+        readonly 700: "#d02533";
+        readonly 600: "#e93544";
+        readonly 500: "#fb3748";
+        readonly 400: "#ff6875";
+        readonly 300: "#ff97a0";
+        readonly 200: "#ffc0c5";
+        readonly 100: "#ffd5d8";
+        readonly 50: "#ffebec";
+        readonly 20: "#fff4f4";
+    };
+    readonly yellow: {
+        readonly 900: "#EB7520";
+        readonly 800: "#ED912A";
+        readonly 700: "#EEA02F";
+        readonly 600: "#F0B134";
+        readonly 500: "#F1BE39";
+        readonly 400: "#F2C74A";
+        readonly 300: "#F4D264";
+        readonly 200: "#F7DE8E";
+        readonly 100: "#FAEBB9";
+        readonly 50: "#FDF7E4";
+    };
+};
+export type ColorScale = typeof gray;
+export type ColorPrimitives = typeof colorPrimitives;
+/**
+ * Semantic aliases — components and consumer apps reference these, never
+ * the raw scales above directly. Mirrors src/styles/theme.css.
+ */
+export declare const lightTheme: {
+    readonly bgDefault: "#FEFEFE";
+    readonly bgContainer: "#f5f7fa";
+    readonly bgSubtle: "#f2f5f8";
+    readonly bgBrandLighter: "#EDF7E8";
+    readonly bgInfoLighter: "#E6F2FE";
+    readonly bgSuccessLighter: "#e0faec";
+    readonly bgWarningLighter: "#FDF7E4";
+    readonly bgDangerLighter: "#ffebec";
+    readonly fgDefault: "#0e121b";
+    readonly fgSecondary: "#525866";
+    readonly fgTertiary: "#717784";
+    readonly fgDisabled: "#99a0ae";
+    readonly fgInverse: "#FEFEFE";
+    readonly fgBrand: "#72BF44";
+    readonly fgInfo: "#3C88F7";
+    readonly fgSuccess: "#199754";
+    readonly fgWarning: "#ED912A";
+    readonly fgDanger: "#ad1f2b";
+    readonly borderDefault: "#e1e4ea";
+    readonly borderSubtle: "#f2f5f8";
+    readonly borderStrong: "#cacfd8";
+    readonly borderBrand: "#72BF44";
+    readonly iconPrimary: "#0e121b";
+    readonly iconSecondary: "#525866";
+    readonly iconInverse: "#FEFEFE";
+    readonly iconBrand: "#72BF44";
+    readonly iconInfo: "#3C88F7";
+    readonly iconDanger: "#ad1f2b";
+    readonly iconWarning: "#ED912A";
+};
+export declare const darkTheme: {
+    readonly bgDefault: "#0B1120";
+    readonly bgContainer: "#0F172A";
+    readonly bgSubtle: "#121C30";
+    readonly bgBrandLighter: "rgba(114, 191, 68, 0.15)";
+    readonly bgInfoLighter: "rgba(67, 150, 247, 0.15)";
+    readonly bgSuccessLighter: "rgba(31, 193, 107, 0.15)";
+    readonly bgWarningLighter: "rgba(237, 145, 42, 0.15)";
+    readonly bgDangerLighter: "rgba(230, 27, 0, 0.15)";
+    readonly fgDefault: "#FEFEFE";
+    readonly fgSecondary: "#99a0ae";
+    readonly fgTertiary: "#717784";
+    readonly fgDisabled: "#525866";
+    readonly borderDefault: "rgba(255, 255, 255, 0.05)";
+    readonly borderSubtle: "rgba(255, 255, 255, 0.03)";
+    readonly borderStrong: "rgba(255, 255, 255, 0.10)";
+    readonly iconPrimary: "#FEFEFE";
+    readonly iconSecondary: "#99a0ae";
+    readonly fgInverse: "#FEFEFE";
+    readonly fgBrand: "#72BF44";
+    readonly fgInfo: "#3C88F7";
+    readonly fgSuccess: "#199754";
+    readonly fgWarning: "#ED912A";
+    readonly fgDanger: "#ad1f2b";
+    readonly borderBrand: "#72BF44";
+    readonly iconInverse: "#FEFEFE";
+    readonly iconBrand: "#72BF44";
+    readonly iconInfo: "#3C88F7";
+    readonly iconDanger: "#ad1f2b";
+    readonly iconWarning: "#ED912A";
+};
+export type SemanticTheme = typeof lightTheme;

package/dist/tokens/index.d.ts

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './radius';
+export * from './shadows';

package/dist/tokens/radius.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Border radii, mirrored as `--radius-*` in src/styles/tokens.css. Ported
+ * from the People Space design system (packages/design-system/src/tokens/radii.css)
+ * as a fixed step scale rather than a single calc()-derived base value.
+ */
+export declare const radius: {
+    readonly xs: "2px";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "20px";
+    readonly '3xl': "24px";
+    readonly full: "9999px";
+};

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Elevation scale, mirrored as `--shadow-z*` in src/styles/tokens.css.
+ * Ported from the People Space design system
+ * (packages/design-system/src/tokens/shadows.css) — z4 verified from
+ * Figma, others interpolated.
+ */
+export declare const shadows: {
+    readonly z1: "0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    readonly z2: "0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04)";
+    readonly z3: "0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04)";
+    readonly z4: "0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 12px 16px 0 rgba(0, 0, 0, 0.10), 0 3px 5px 0 rgba(0, 0, 0, 0.12)";
+    readonly z5: "0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 24px 32px 0 rgba(0, 0, 0, 0.12)";
+};