@marianmeres/design-tokens 1.0.0

package/dist/themes/dds.js

@@ -0,0 +1,133 @@
+import { colors } from "../colors.js";
+// Custom color palette — hover/active states must be explicit (no auto-derivation)
+const theme = {
+    light: {
+        colors: {
+            intent: {
+                primary: {
+                    DEFAULT: "#13BF89",
+                    foreground: "#2B2A28",
+                    hover: "#42CCA1",
+                    active: "#0F996E",
+                },
+                accent: {
+                    DEFAULT: "#F89B20",
+                    foreground: "#2B2A28",
+                    hover: "#C87F16",
+                    active: "#A56A12",
+                },
+                destructive: {
+                    DEFAULT: "#E60523",
+                    foreground: "#fff",
+                    hover: "#B8041C",
+                    active: "#930316",
+                },
+                warning: {
+                    DEFAULT: "#F37903",
+                    foreground: "#2B2A28",
+                    hover: "#FBB249",
+                    active: "#9E581B",
+                },
+                success: {
+                    DEFAULT: "#0DB064",
+                    foreground: "#fff",
+                    hover: "#00853E",
+                    active: "#006A32",
+                },
+            },
+            role: {
+                paired: {
+                    background: {
+                        DEFAULT: "#fff",
+                        foreground: "#2B2A28",
+                    },
+                    muted: {
+                        DEFAULT: "#E9E8E7",
+                        foreground: "#726F6B",
+                    },
+                    surface: {
+                        DEFAULT: "#DDDCDB",
+                        foreground: "#2B2A28",
+                        hover: "#B1AEAA",
+                        active: "#726F6B",
+                    },
+                    "surface-1": {
+                        DEFAULT: "#B1AEAA",
+                        foreground: "#2B2A28",
+                        hover: "#726F6B",
+                        active: "#5A5855",
+                    },
+                },
+                single: {
+                    foreground: "#2B2A28",
+                    border: {
+                        DEFAULT: "#B1AEAA",
+                    },
+                    input: {
+                        DEFAULT: "#fff",
+                        hover: "#F4F3F3",
+                    },
+                    ring: "color-mix(in srgb, #13BF89 20%, transparent)",
+                },
+            },
+        },
+    },
+    dark: {
+        colors: {
+            intent: {
+                primary: {
+                    DEFAULT: colors.zinc[200], // zinc-200 (neutral)
+                    foreground: colors.black,
+                },
+                accent: {
+                    DEFAULT: colors.amber[400], // amber-400
+                    foreground: colors.black,
+                },
+                destructive: {
+                    DEFAULT: colors.rose[500], // rose-500
+                    foreground: colors.white,
+                },
+                warning: {
+                    DEFAULT: colors.amber[400], // amber-400
+                    foreground: colors.black,
+                },
+                success: {
+                    DEFAULT: colors.teal[500], // teal-500
+                    foreground: colors.white,
+                },
+            },
+            role: {
+                paired: {
+                    background: {
+                        DEFAULT: colors.zinc[900], // zinc-900 (neutral)
+                        foreground: colors.neutral[50], // zinc-50
+                    },
+                    muted: {
+                        DEFAULT: colors.zinc[800], // zinc-800
+                        foreground: colors.zinc[400], // zinc-400
+                    },
+                    surface: {
+                        DEFAULT: colors.zinc[700], // zinc-700
+                        foreground: colors.zinc[300], // zinc-300
+                    },
+                    "surface-1": {
+                        DEFAULT: colors.zinc[600], // zinc-600
+                        foreground: colors.zinc[200], // zinc-200
+                    },
+                },
+                single: {
+                    foreground: colors.neutral[50], // zinc-50
+                    border: {
+                        DEFAULT: colors.zinc[700], // zinc-700
+                    },
+                    input: {
+                        DEFAULT: colors.zinc[900], // zinc-900
+                        hover: colors.zinc[800], // zinc-800
+                    },
+                    ring: `color-mix(in srgb, ${colors.zinc[400]} 25%, transparent)`, // zinc-400
+                },
+            },
+        },
+    },
+};
+export default theme;

package/dist/themes/emerald-amber-forest.d.ts

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

package/dist/themes/emerald-amber-forest.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.emerald[700],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.amber[600],
+                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.amber[50],
+                    foreground: colors.stone[900],
+                },
+                muted: {
+                    DEFAULT: colors.amber[100],
+                    foreground: colors.amber[500],
+                },
+                surface: {
+                    DEFAULT: colors.amber[200],
+                    foreground: colors.amber[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.amber[300],
+                    foreground: colors.amber[900],
+                },
+            },
+            single: {
+                foreground: colors.stone[900],
+                border: {
+                    DEFAULT: colors.stone[300],
+                },
+                input: {
+                    DEFAULT: colors.amber[50],
+                    hover: colors.stone[100],
+                },
+                ring: `color-mix(in srgb, ${colors.emerald[700]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.emerald[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.black,
+            },
+            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.stone[900],
+                    foreground: colors.stone[50],
+                },
+                muted: {
+                    DEFAULT: colors.stone[800],
+                    foreground: colors.stone[400],
+                },
+                surface: {
+                    DEFAULT: colors.stone[700],
+                    foreground: colors.stone[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[600],
+                    foreground: colors.stone[200],
+                },
+            },
+            single: {
+                foreground: colors.stone[50],
+                border: {
+                    DEFAULT: colors.stone[600],
+                },
+                input: {
+                    DEFAULT: colors.stone[900],
+                    hover: colors.stone[800],
+                },
+                ring: `color-mix(in srgb, ${colors.emerald[500]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/emerald-pink.d.ts

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

package/dist/themes/emerald-pink.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.emerald[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.pink[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.pink[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.white,
+                    foreground: colors.stone[900],
+                },
+                muted: {
+                    DEFAULT: colors.stone[100],
+                    foreground: colors.stone[500],
+                },
+                surface: {
+                    DEFAULT: colors.stone[200],
+                    foreground: colors.stone[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[300],
+                    foreground: colors.stone[900],
+                },
+            },
+            single: {
+                foreground: colors.stone[900],
+                border: {
+                    DEFAULT: colors.stone[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.stone[50],
+                },
+                ring: `color-mix(in srgb, ${colors.emerald[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.emerald[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.pink[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.pink[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.stone[900],
+                    foreground: colors.stone[50],
+                },
+                muted: {
+                    DEFAULT: colors.stone[800],
+                    foreground: colors.stone[400],
+                },
+                surface: {
+                    DEFAULT: colors.stone[700],
+                    foreground: colors.stone[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[600],
+                    foreground: colors.stone[200],
+                },
+            },
+            single: {
+                foreground: colors.stone[50],
+                border: {
+                    DEFAULT: colors.stone[700],
+                },
+                input: {
+                    DEFAULT: colors.stone[900],
+                    hover: colors.stone[800],
+                },
+                ring: `color-mix(in srgb, ${colors.emerald[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/fuchsia-emerald.d.ts

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

package/dist/themes/fuchsia-emerald.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.fuchsia[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.emerald[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.fuchsia[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.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.fuchsia[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.fuchsia[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.emerald[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.fuchsia[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.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.fuchsia[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/gray.d.ts

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

package/dist/themes/gray.js

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

package/dist/themes/indigo-amber.d.ts

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

package/dist/themes/indigo-amber.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.indigo[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[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.indigo[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.indigo[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.amber[400],
+                foreground: colors.black,
+            },
+            destructive: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[400],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.teal[500],
+                foreground: colors.white,
+            },
+        },
+        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.indigo[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/lime-fuchsia-neon.d.ts

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