@marianmeres/design-tokens 1.0.0

package/dist/themes/sky-amber.js

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

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

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

package/dist/themes/slate-cyan.js

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

package/dist/themes/slate-teal-ocean.d.ts

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

package/dist/themes/slate-teal-ocean.js

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

package/dist/themes/stone-orange-earth.d.ts

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

package/dist/themes/stone-orange-earth.js

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

package/dist/themes/stone.d.ts

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

package/dist/themes/stone.js

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

package/dist/themes/teal-rose.d.ts

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

package/dist/themes/teal-rose.js

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

package/dist/themes/violet-lime.d.ts

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