@marianmeres/design-tokens 1.0.0

package/dist/themes/violet-lime.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.violet[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.lime[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.lime[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.lime[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.white,
+                    foreground: colors.neutral[900],
+                },
+                muted: {
+                    DEFAULT: colors.neutral[100],
+                    foreground: colors.neutral[500],
+                },
+                surface: {
+                    DEFAULT: colors.neutral[200],
+                    foreground: colors.neutral[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.neutral[300],
+                    foreground: colors.neutral[900],
+                },
+            },
+            single: {
+                foreground: colors.neutral[900],
+                border: {
+                    DEFAULT: colors.neutral[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.neutral[50],
+                },
+                ring: `color-mix(in srgb, ${colors.violet[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.violet[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.lime[400],
+                foreground: colors.black,
+            },
+            destructive: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.lime[400],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.lime[500],
+                foreground: colors.black,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.neutral[900],
+                    foreground: colors.neutral[50],
+                },
+                muted: {
+                    DEFAULT: colors.neutral[800],
+                    foreground: colors.neutral[400],
+                },
+                surface: {
+                    DEFAULT: colors.neutral[700],
+                    foreground: colors.neutral[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.neutral[600],
+                    foreground: colors.neutral[200],
+                },
+            },
+            single: {
+                foreground: colors.neutral[50],
+                border: {
+                    DEFAULT: colors.neutral[700],
+                },
+                input: {
+                    DEFAULT: colors.neutral[900],
+                    hover: colors.neutral[800],
+                },
+                ring: `color-mix(in srgb, ${colors.violet[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/violet-rose-dusk.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;

package/dist/themes/violet-rose-dusk.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.violet[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.emerald[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.neutral[50],
+                    foreground: colors.zinc[900],
+                },
+                muted: {
+                    DEFAULT: colors.zinc[100],
+                    foreground: colors.zinc[500],
+                },
+                surface: {
+                    DEFAULT: colors.zinc[200],
+                    foreground: colors.zinc[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.zinc[300],
+                    foreground: colors.zinc[900],
+                },
+            },
+            single: {
+                foreground: colors.zinc[900],
+                border: {
+                    DEFAULT: colors.zinc[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.neutral[50],
+                },
+                ring: `color-mix(in srgb, ${colors.violet[500]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.violet[400],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.rose[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[400],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.emerald[500],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.zinc[950],
+                    foreground: colors.neutral[50],
+                },
+                muted: {
+                    DEFAULT: colors.zinc[900],
+                    foreground: colors.zinc[500],
+                },
+                surface: {
+                    DEFAULT: colors.zinc[800],
+                    foreground: colors.zinc[400],
+                },
+                "surface-1": {
+                    DEFAULT: colors.zinc[700],
+                    foreground: colors.zinc[300],
+                },
+            },
+            single: {
+                foreground: colors.neutral[50],
+                border: {
+                    DEFAULT: colors.zinc[700],
+                },
+                input: {
+                    DEFAULT: colors.zinc[950],
+                    hover: colors.zinc[900],
+                },
+                ring: `color-mix(in srgb, ${colors.violet[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/zinc.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;

package/dist/themes/zinc.js

@@ -0,0 +1,66 @@
+import { colors } from "../colors.js";
+const theme = {
+    light: {
+        colors: {
+            intent: {
+                primary: { DEFAULT: colors.zinc[800], foreground: colors.white }, // zinc-800, white
+                accent: { DEFAULT: colors.zinc[500], foreground: colors.white }, // zinc-500, white
+                destructive: { DEFAULT: colors.rose[600], foreground: colors.white }, // rose-600, white
+                warning: { DEFAULT: colors.amber[500], foreground: colors.black }, // amber-500, black
+                success: { DEFAULT: colors.emerald[600], foreground: colors.white }, // emerald-600, white
+            },
+            role: {
+                paired: {
+                    background: {
+                        DEFAULT: colors.zinc[50],
+                        foreground: colors.zinc[900],
+                    }, // zinc-50, zinc-900
+                    muted: { DEFAULT: colors.zinc[100], foreground: colors.zinc[500] }, // zinc-100, zinc-500
+                    surface: { DEFAULT: colors.zinc[200], foreground: colors.zinc[900] }, // zinc-200, zinc-900
+                    "surface-1": {
+                        DEFAULT: colors.zinc[300],
+                        foreground: colors.zinc[900],
+                    }, // zinc-300, zinc-900
+                },
+                single: {
+                    foreground: colors.zinc[900], // zinc-900
+                    border: { DEFAULT: colors.zinc[300] }, // zinc-300
+                    input: { DEFAULT: colors.zinc[50], hover: colors.zinc[100] }, // zinc-50, zinc-100
+                    ring: `color-mix(in srgb, ${colors.zinc[800]} 20%, transparent)`, // zinc-800
+                },
+            },
+        },
+    },
+    dark: {
+        colors: {
+            intent: {
+                primary: { DEFAULT: colors.zinc[200], foreground: colors.black }, // zinc-200, black
+                accent: { DEFAULT: colors.zinc[500], foreground: colors.white }, // zinc-500, white
+                destructive: { DEFAULT: colors.rose[500], foreground: colors.white }, // rose-500, white
+                warning: { DEFAULT: colors.amber[400], foreground: colors.black }, // amber-400, black
+                success: { DEFAULT: colors.emerald[500], foreground: colors.white }, // emerald-500, white
+            },
+            role: {
+                paired: {
+                    background: {
+                        DEFAULT: colors.zinc[900],
+                        foreground: colors.zinc[50],
+                    }, // zinc-900, zinc-50
+                    muted: { DEFAULT: colors.zinc[800], foreground: colors.zinc[400] }, // zinc-800, zinc-400
+                    surface: { DEFAULT: colors.zinc[700], foreground: colors.zinc[300] }, // zinc-700, zinc-300
+                    "surface-1": {
+                        DEFAULT: colors.zinc[600],
+                        foreground: colors.zinc[200],
+                    }, // zinc-600, zinc-200
+                },
+                single: {
+                    foreground: colors.zinc[50], // zinc-50
+                    border: { DEFAULT: colors.zinc[700] }, // zinc-700
+                    input: { DEFAULT: colors.zinc[900], hover: colors.zinc[800] }, // zinc-900, zinc-800
+                    ring: `color-mix(in srgb, ${colors.zinc[200]} 25%, transparent)`, // zinc-200
+                },
+            },
+        },
+    },
+};
+export default theme;

package/dist/types.d.ts

@@ -0,0 +1,48 @@
+/** Base color value with optional pseudo states */
+export type ColorValue = {
+    DEFAULT: string;
+    hover?: string;
+    active?: string;
+};
+/** Color pair enforcing the -foreground convention, with optional pseudo states */
+export type ColorPair = {
+    DEFAULT: string;
+    foreground: string;
+    hover?: string;
+    active?: string;
+};
+/** Single color: either a plain string or an object with pseudo states */
+export type SingleColor = string | ColorValue;
+/** Known intent color keys */
+export type IntentColorKey = "primary" | "accent" | "destructive" | "warning" | "success";
+/** Known role color keys (paired) */
+export type RolePairedKey = "background" | "muted" | "surface";
+/** Known role color keys (single value) */
+export type RoleSingleKey = "foreground" | "border" | "input" | "ring";
+/** Helper: require known keys, allow additional */
+export type WithRequired<TRequired extends string, TValue> = Record<TRequired, TValue> & Record<string, TValue>;
+/** Helper: partial known keys, allow additional */
+export type WithOptional<TKnown extends string, TValue> = Partial<Record<TKnown, TValue>> & Record<string, TValue>;
+/**
+ * Complete token schema for a single mode (light or dark).
+ *
+ * Defines intent colors (primary, accent, destructive, warning, success),
+ * role paired colors (background, muted, surface — each with a foreground),
+ * and role single colors (foreground, border, input, ring).
+ */
+export type TokenSchema = {
+    colors: {
+        intent: WithRequired<IntentColorKey, ColorPair>;
+        role: {
+            paired: WithRequired<RolePairedKey, ColorPair>;
+            single: WithRequired<RoleSingleKey, SingleColor>;
+        };
+    };
+};
+/** Generated CSS token key-value pairs (without the `--` prefix on keys). */
+export type GeneratedTokens = Record<string, string>;
+/** A complete theme definition with required light mode and optional dark mode */
+export type ThemeSchema = {
+    light: TokenSchema;
+    dark?: TokenSchema;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Parse a hex color string to RGB components.
+ * Supports "#abc" (3-digit) and "#aabbcc" (6-digit) formats.
+ * Returns null if the input is not a valid hex color.
+ */
+export declare function hexToRgb(hex: string): [number, number, number] | null;
+/**
+ * Convert a hex color to an "r, g, b" triplet string.
+ * Returns null if the input is not a valid hex color.
+ */
+export declare function hexToRgbTriplet(hex: string): string | null;

package/dist/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Parse a hex color string to RGB components.
+ * Supports "#abc" (3-digit) and "#aabbcc" (6-digit) formats.
+ * Returns null if the input is not a valid hex color.
+ */
+export function hexToRgb(hex) {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map((c) => c + c)
+            .join("");
+    }
+    if (hex.length !== 6)
+        return null;
+    const n = parseInt(hex, 16);
+    if (isNaN(n))
+        return null;
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+/**
+ * Convert a hex color to an "r, g, b" triplet string.
+ * Returns null if the input is not a valid hex color.
+ */
+export function hexToRgbTriplet(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgb.join(", ") : null;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@marianmeres/design-tokens",
+	"version": "1.0.0",
+	"type": "module",
+	"main": "dist/mod.js",
+	"types": "dist/mod.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/mod.d.ts",
+			"import": "./dist/mod.js"
+		}
+	},
+	"author": "Marian Meres",
+	"license": "MIT",
+	"dependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marianmeres/design-tokens.git"
+	},
+	"bugs": {
+		"url": "https://github.com/marianmeres/design-tokens/issues"
+	}
+}