@marianmeres/design-tokens 1.0.0

package/dist/themes/lime-fuchsia-neon.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.lime[600],
+                foreground: colors.black,
+            },
+            accent: {
+                DEFAULT: colors.fuchsia[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.yellow[500],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.lime[600],
+                foreground: colors.black,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.zinc[100],
+                    foreground: colors.zinc[900],
+                },
+                muted: {
+                    DEFAULT: colors.zinc[200],
+                    foreground: colors.zinc[500],
+                },
+                surface: {
+                    DEFAULT: colors.zinc[300],
+                    foreground: colors.zinc[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.zinc[400],
+                    foreground: colors.zinc[900],
+                },
+            },
+            single: {
+                foreground: colors.zinc[900],
+                border: {
+                    DEFAULT: colors.zinc[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.zinc[100],
+                },
+                ring: `color-mix(in srgb, ${colors.lime[500]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.lime[400],
+                foreground: colors.black,
+            },
+            accent: {
+                DEFAULT: colors.fuchsia[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.yellow[400],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.lime[400],
+                foreground: colors.black,
+            },
+        },
+        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.lime[400]} 30%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/mod.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Pre-built {@link ThemeSchema} definitions ready to use with
+ * {@link generateThemeCss} or {@link generateThemedCss}.
+ *
+ * Each theme exports a complete light + dark mode token schema built
+ * from the bundled Tailwind v3 color palette.
+ *
+ * @module
+ */
+export type { ThemeSchema } from "../types.js";
+/** Blue primary / orange accent theme. */
+export { default as blueOrange } from "./blue-orange.js";
+/** Cyan primary / red accent theme. */
+export { default as cyanRed } from "./cyan-red.js";
+/** Cyan primary / slate accent theme. */
+export { default as cyanSlate } from "./cyan-slate.js";
+/** Emerald primary / amber accent forest theme. */
+export { default as emeraldAmberForest } from "./emerald-amber-forest.js";
+/** Emerald primary / pink accent theme. */
+export { default as emeraldPink } from "./emerald-pink.js";
+/** Fuchsia primary / emerald accent theme. */
+export { default as fuchsiaEmerald } from "./fuchsia-emerald.js";
+/** Neutral gray monochrome theme. */
+export { default as gray } from "./gray.js";
+/** Indigo primary / amber accent theme. */
+export { default as indigoAmber } from "./indigo-amber.js";
+/** Lime primary / fuchsia accent neon theme. */
+export { default as limeFuchsiaNeon } from "./lime-fuchsia-neon.js";
+/** Monokai-inspired theme with cyan accent. */
+export { default as monokaiCyan } from "./monokai-cyan.js";
+/** Monokai-inspired theme with green accent. */
+export { default as monokaiGreen } from "./monokai-green.js";
+/** Monokai-inspired theme with pink accent. */
+export { default as monokaiPink } from "./monokai-pink.js";
+/** Orange primary / pink accent sunset theme. */
+export { default as orangePinkSunset } from "./orange-pink-sunset.js";
+/** Pink primary / emerald accent theme. */
+export { default as pinkEmerald } from "./pink-emerald.js";
+/** Pink primary / teal accent theme. */
+export { default as pinkTeal } from "./pink-teal.js";
+/** Purple primary / yellow accent theme. */
+export { default as purpleYellow } from "./purple-yellow.js";
+/** Multi-color rainbow theme. */
+export { default as rainbow } from "./rainbow.js";
+/** Red primary / blue accent theme. */
+export { default as redBlue } from "./red-blue.js";
+/** Red primary / cyan accent theme. */
+export { default as redCyan } from "./red-cyan.js";
+/** Red primary / sky accent theme. */
+export { default as redSky } from "./red-sky.js";
+/** Red primary / sky accent / slate base theme. */
+export { default as redSkySlate } from "./red-sky-slate.js";
+/** Rose primary / teal accent theme. */
+export { default as roseTeal } from "./rose-teal.js";
+/** Sky primary / amber accent theme. */
+export { default as skyAmber } from "./sky-amber.js";
+/** Slate primary / cyan accent theme. */
+export { default as slateCyan } from "./slate-cyan.js";
+/** Slate primary / teal accent ocean theme. */
+export { default as slateTealOcean } from "./slate-teal-ocean.js";
+/** Neutral stone monochrome theme. */
+export { default as stone } from "./stone.js";
+/** Stone primary / orange accent earth theme. */
+export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
+/** Teal primary / rose accent theme. */
+export { default as tealRose } from "./teal-rose.js";
+/** Violet primary / lime accent theme. */
+export { default as violetLime } from "./violet-lime.js";
+/** Violet primary / rose accent dusk theme. */
+export { default as violetRoseDusk } from "./violet-rose-dusk.js";
+/** Neutral zinc monochrome theme. */
+export { default as zinc } from "./zinc.js";

package/dist/themes/mod.js

@@ -0,0 +1,71 @@
+/**
+ * Pre-built {@link ThemeSchema} definitions ready to use with
+ * {@link generateThemeCss} or {@link generateThemedCss}.
+ *
+ * Each theme exports a complete light + dark mode token schema built
+ * from the bundled Tailwind v3 color palette.
+ *
+ * @module
+ */
+/** Blue primary / orange accent theme. */
+export { default as blueOrange } from "./blue-orange.js";
+/** Cyan primary / red accent theme. */
+export { default as cyanRed } from "./cyan-red.js";
+/** Cyan primary / slate accent theme. */
+export { default as cyanSlate } from "./cyan-slate.js";
+/** Emerald primary / amber accent forest theme. */
+export { default as emeraldAmberForest } from "./emerald-amber-forest.js";
+/** Emerald primary / pink accent theme. */
+export { default as emeraldPink } from "./emerald-pink.js";
+/** Fuchsia primary / emerald accent theme. */
+export { default as fuchsiaEmerald } from "./fuchsia-emerald.js";
+/** Neutral gray monochrome theme. */
+export { default as gray } from "./gray.js";
+/** Indigo primary / amber accent theme. */
+export { default as indigoAmber } from "./indigo-amber.js";
+/** Lime primary / fuchsia accent neon theme. */
+export { default as limeFuchsiaNeon } from "./lime-fuchsia-neon.js";
+/** Monokai-inspired theme with cyan accent. */
+export { default as monokaiCyan } from "./monokai-cyan.js";
+/** Monokai-inspired theme with green accent. */
+export { default as monokaiGreen } from "./monokai-green.js";
+/** Monokai-inspired theme with pink accent. */
+export { default as monokaiPink } from "./monokai-pink.js";
+/** Orange primary / pink accent sunset theme. */
+export { default as orangePinkSunset } from "./orange-pink-sunset.js";
+/** Pink primary / emerald accent theme. */
+export { default as pinkEmerald } from "./pink-emerald.js";
+/** Pink primary / teal accent theme. */
+export { default as pinkTeal } from "./pink-teal.js";
+/** Purple primary / yellow accent theme. */
+export { default as purpleYellow } from "./purple-yellow.js";
+/** Multi-color rainbow theme. */
+export { default as rainbow } from "./rainbow.js";
+/** Red primary / blue accent theme. */
+export { default as redBlue } from "./red-blue.js";
+/** Red primary / cyan accent theme. */
+export { default as redCyan } from "./red-cyan.js";
+/** Red primary / sky accent theme. */
+export { default as redSky } from "./red-sky.js";
+/** Red primary / sky accent / slate base theme. */
+export { default as redSkySlate } from "./red-sky-slate.js";
+/** Rose primary / teal accent theme. */
+export { default as roseTeal } from "./rose-teal.js";
+/** Sky primary / amber accent theme. */
+export { default as skyAmber } from "./sky-amber.js";
+/** Slate primary / cyan accent theme. */
+export { default as slateCyan } from "./slate-cyan.js";
+/** Slate primary / teal accent ocean theme. */
+export { default as slateTealOcean } from "./slate-teal-ocean.js";
+/** Neutral stone monochrome theme. */
+export { default as stone } from "./stone.js";
+/** Stone primary / orange accent earth theme. */
+export { default as stoneOrangeEarth } from "./stone-orange-earth.js";
+/** Teal primary / rose accent theme. */
+export { default as tealRose } from "./teal-rose.js";
+/** Violet primary / lime accent theme. */
+export { default as violetLime } from "./violet-lime.js";
+/** Violet primary / rose accent dusk theme. */
+export { default as violetRoseDusk } from "./violet-rose-dusk.js";
+/** Neutral zinc monochrome theme. */
+export { default as zinc } from "./zinc.js";

package/dist/themes/monokai-cyan.d.ts

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

package/dist/themes/monokai-cyan.js

@@ -0,0 +1,119 @@
+import { colors } from "../colors.js";
+// Monokai Cyan — Monokai's cyan/type color as primary with purple accent
+// Approximation of classic Monokai palette to Tailwind colors
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.violet[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.emerald[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.stone[50],
+                    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.stone[50],
+                    hover: colors.stone[100],
+                },
+                ring: `color-mix(in srgb, ${colors.cyan[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[400],
+                foreground: colors.black,
+            },
+            accent: {
+                DEFAULT: colors.violet[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[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.cyan[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/monokai-green.d.ts

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

package/dist/themes/monokai-green.js

@@ -0,0 +1,119 @@
+import { colors } from "../colors.js";
+// Monokai Green — Monokai's bright lime green primary with orange accent
+// Approximation of classic Monokai palette to Tailwind colors
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.lime[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.orange[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.emerald[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.stone[50],
+                    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.stone[50],
+                    hover: colors.stone[100],
+                },
+                ring: `color-mix(in srgb, ${colors.lime[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.lime[400],
+                foreground: colors.black,
+            },
+            accent: {
+                DEFAULT: colors.orange[400],
+                foreground: colors.black,
+            },
+            destructive: {
+                DEFAULT: colors.rose[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.lime[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

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

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

package/dist/themes/monokai-pink.js

@@ -0,0 +1,119 @@
+import { colors } from "../colors.js";
+// Monokai Pink — the iconic Monokai look with hot pink primary and purple accent
+// Approximation of classic Monokai palette to Tailwind colors
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.violet[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.emerald[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.stone[50],
+                    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.stone[50],
+                    hover: colors.stone[100],
+                },
+                ring: `color-mix(in srgb, ${colors.rose[500]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.violet[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[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.rose[500]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/orange-pink-sunset.d.ts

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