npm - @eluan/tokens - Versions diffs - 0.1.0 - Mend

@eluan/tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LICENSE +21 -0
package/README.md +46 -0
package/dist/curves.css +32 -0
package/dist/fonts-base.css +7 -0
package/dist/fonts-industrial-retro.css +3 -0
package/dist/fonts-minimal.css +3 -0
package/dist/fonts.css +17 -0
package/dist/index.d.ts +460 -0
package/dist/index.js +568 -0
package/dist/modes.css +333 -0
package/dist/primitives.css +359 -0
package/dist/spacing.css +101 -0
package/dist/themes.css +316 -0
package/dist/tokens.css +155 -0
package/package.json +57 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Eluan contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,46 @@
+# @eluan/tokens
+> Design tokens, CSS variables, themes, and fonts for the [Eluan](https://github.com/vasfio/eluan) design system.
+A three-layer token architecture (primitives → modes → themes) exposed as CSS custom properties scoped to `[data-theme]`, `[data-mode]`, `[data-spacing]`, and `[data-curves]` attributes.
+## Install
+```bash
+npm install @eluan/tokens
+yarn add @eluan/tokens
+pnpm add @eluan/tokens
+bun add @eluan/tokens
+```
+## Use
+Import the full token CSS once at the root of your app:
+```ts
+import "@eluan/tokens/css"
+```
+Then activate a theme by setting attributes on `<html>` (or use `<EluanProvider>` from `@eluan/core`, which wires this up automatically):
+```html
+<html data-theme="industrial-retro" data-mode="light" data-spacing="standard" data-curves="slight">
+```
+## Subpath exports
+```ts
+import "@eluan/tokens/css"                        // all tokens
+import "@eluan/tokens/fonts/all"                  // every theme's fonts
+import "@eluan/tokens/fonts/industrial-retro"     // single theme's fonts
+import "@eluan/tokens/fonts/minimal"
+import { themes, modes, type Theme } from "@eluan/tokens"
+```
+## Built-in themes
+`industrial-retro`, `minimal`. Define your own via `createTheme()` from `@eluan/core`. See the [theming guide](https://github.com/vasfio/eluan/blob/main/docs/theming.md).
+## License
+MIT

package/dist/curves.css ADDED Viewed

@@ -0,0 +1,32 @@
+/* ============================================
+ * Curve Scales
+ * Semantic border-radius tokens that adapt to Sharp, Slight, Sweeping, and Rounded
+ * These reference primitive radius tokens from Layer 1
+ * ============================================ */
+[data-curves="sharp"] {
+  --curves-xxs: var(--radius-radius-none);
+  --curves-xs: var(--radius-radius-none);
+  --curves-sm: var(--radius-radius-none);
+  --curves-md: var(--radius-radius-none);
+  --curves-lg: var(--radius-radius-none);
+  --curves-xl: var(--radius-radius-none);
+}
+[data-curves="slight"] {
+  --curves-xxs: var(--radius-radius-1);
+  --curves-xs: var(--radius-radius-2);
+  --curves-sm: var(--radius-radius-4);
+  --curves-md: var(--radius-radius-8);
+  --curves-lg: var(--radius-radius-12);
+  --curves-xl: var(--radius-radius-16);
+}
+[data-curves="sweeping"] {
+  --curves-xxs: var(--radius-radius-2);
+  --curves-xs: var(--radius-radius-4);
+  --curves-sm: var(--radius-radius-8);
+  --curves-md: var(--radius-radius-12);
+  --curves-lg: var(--radius-radius-16);
+  --curves-xl: var(--radius-radius-24);
+}

package/dist/fonts-base.css ADDED Viewed

@@ -0,0 +1,7 @@
+/*
+  Eluan Design System — Base fonts (shared across all themes)
+  Geist Mono is used by every theme for monospace.
+*/
+@import "@fontsource/geist-mono/400.css";
+@import "@fontsource/geist-mono/500.css";

package/dist/fonts-industrial-retro.css ADDED Viewed

@@ -0,0 +1,3 @@
+/* industrial-retro theme — Geist (heading + body) */
+@import "@fontsource/geist/400.css";
+@import "@fontsource/geist/500.css";

package/dist/fonts-minimal.css ADDED Viewed

@@ -0,0 +1,3 @@
+/* minimal theme — Inter (heading + body) */
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";

package/dist/fonts.css ADDED Viewed

@@ -0,0 +1,17 @@
+/*
+  Eluan Design System — Google Fonts via @fontsource
+  Self-hosted, no CDN dependency.
+  Only medium weight loaded (max weight across all themes = 500).
+*/
+/* Geist — industrial-retro heading + body */
+@import "@fontsource/geist/400.css";
+@import "@fontsource/geist/500.css";
+/* Geist Mono — all themes mono */
+@import "@fontsource/geist-mono/400.css";
+@import "@fontsource/geist-mono/500.css";
+/* Inter — minimal heading + body */
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,460 @@
+export declare const modes: readonly ["light", "dim", "dark"];
+export type Mode = (typeof modes)[number];
+export declare const themes: readonly ["industrial-retro", "minimal"];
+export type Theme = (typeof themes)[number];
+export declare const spacingScales: readonly ["compact", "standard", "wide"];
+export type SpacingScale = (typeof spacingScales)[number];
+export declare const curveScales: readonly ["sharp", "slight", "sweeping"];
+export type CurveScale = (typeof curveScales)[number];
+export declare const colorPalettes: readonly ["blazeorange", "bluechill", "blueribbon", "bostonblue", "cerise", "crimson", "electriclime", "electricviolet", "forestgreen", "gossamer", "lochmara", "maitai", "mono", "purpleheart", "redviolet", "rockspray", "seagreen", "teak", "torchred", "violeteggplant"];
+export type ColorPalette = (typeof colorPalettes)[number];
+export declare const colorShades: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+export type ColorShade = (typeof colorShades)[number];
+export declare const monoShades: readonly ["0", "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+export type MonoShade = (typeof monoShades)[number];
+export declare const primitiveColors: {
+    readonly blazeorange: {
+        readonly 50: "#fff6ed";
+        readonly 100: "#ffead3";
+        readonly 200: "#ffd1a7";
+        readonly 300: "#ffaf69";
+        readonly 400: "#ff7900";
+        readonly 500: "#ff5100";
+        readonly 600: "#fd2900";
+        readonly 700: "#d11600";
+        readonly 800: "#a61a00";
+        readonly 900: "#842007";
+        readonly 950: "#470d04";
+    };
+    readonly bluechill: {
+        readonly 50: "#edfefd";
+        readonly 100: "#cbfbfa";
+        readonly 200: "#99f6f5";
+        readonly 300: "#3decef";
+        readonly 400: "#00d6e0";
+        readonly 500: "#00bbc9";
+        readonly 600: "#0096a9";
+        readonly 700: "#007888";
+        readonly 800: "#00606e";
+        readonly 900: "#00505c";
+        readonly 950: "#00333d";
+    };
+    readonly blueribbon: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeaff";
+        readonly 200: "#bedaff";
+        readonly 300: "#8dc4ff";
+        readonly 400: "#529fff";
+        readonly 500: "#317aff";
+        readonly 600: "#2355ff";
+        readonly 700: "#213eef";
+        readonly 800: "#2135bf";
+        readonly 900: "#1f3593";
+        readonly 950: "#182258";
+    };
+    readonly bostonblue: {
+        readonly 50: "#ecfdff";
+        readonly 100: "#d2f8ff";
+        readonly 200: "#a6f0ff";
+        readonly 300: "#57e4ff";
+        readonly 400: "#00cdfa";
+        readonly 500: "#00b4e5";
+        readonly 600: "#008fc2";
+        readonly 700: "#00729c";
+        readonly 800: "#005d7e";
+        readonly 900: "#0a4d69";
+        readonly 950: "#043247";
+    };
+    readonly cerise: {
+        readonly 50: "#fdf2f6";
+        readonly 100: "#fce7ef";
+        readonly 200: "#fbcfe0";
+        readonly 300: "#fba7c7";
+        readonly 400: "#f76da2";
+        readonly 500: "#f14285";
+        readonly 600: "#df2066";
+        readonly 700: "#bf1751";
+        readonly 800: "#9d1945";
+        readonly 900: "#821d3e";
+        readonly 950: "#4d0c20";
+    };
+    readonly crimson: {
+        readonly 50: "#fdf2f2";
+        readonly 100: "#fde3e4";
+        readonly 200: "#fcccce";
+        readonly 300: "#fca5a9";
+        readonly 400: "#f96c74";
+        readonly 500: "#f33f4b";
+        readonly 600: "#df1d30";
+        readonly 700: "#bb1727";
+        readonly 800: "#9a1b26";
+        readonly 900: "#7f1f27";
+        readonly 950: "#450c10";
+    };
+    readonly electriclime: {
+        readonly 50: "#f9fee2";
+        readonly 100: "#f1fcbf";
+        readonly 200: "#e2f87e";
+        readonly 300: "#ccf100";
+        readonly 400: "#b3e200";
+        readonly 500: "#98cb00";
+        readonly 600: "#79a200";
+        readonly 700: "#5e7a00";
+        readonly 800: "#4d6100";
+        readonly 900: "#425100";
+        readonly 950: "#222d00";
+    };
+    readonly electricviolet: {
+        readonly 50: "#f9f5ff";
+        readonly 100: "#f2e8fe";
+        readonly 200: "#e7d5ff";
+        readonly 300: "#d7b4ff";
+        readonly 400: "#bd7fff";
+        readonly 500: "#a750ff";
+        readonly 600: "#9329f4";
+        readonly 700: "#7d1ad5";
+        readonly 800: "#6a1eac";
+        readonly 900: "#561d88";
+        readonly 950: "#390b63";
+    };
+    readonly forestgreen: {
+        readonly 50: "#eeffec";
+        readonly 100: "#d6ffd5";
+        readonly 200: "#adffad";
+        readonly 300: "#60fd6a";
+        readonly 400: "#00ed00";
+        readonly 500: "#00d500";
+        readonly 600: "#00ae00";
+        readonly 700: "#008700";
+        readonly 800: "#006a00";
+        readonly 900: "#005806";
+        readonly 950: "#003102";
+    };
+    readonly gossamer: {
+        readonly 50: "#effefa";
+        readonly 100: "#c5fdf1";
+        readonly 200: "#87fae4";
+        readonly 300: "#00f0d5";
+        readonly 400: "#00d9be";
+        readonly 500: "#00bea8";
+        readonly 600: "#00998a";
+        readonly 700: "#007a70";
+        readonly 800: "#00615b";
+        readonly 900: "#00504b";
+        readonly 950: "#00302f";
+    };
+    readonly lochmara: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#def1ff";
+        readonly 200: "#b8e5ff";
+        readonly 300: "#77d2ff";
+        readonly 400: "#00b8ff";
+        readonly 500: "#00a0fb";
+        readonly 600: "#007fdb";
+        readonly 700: "#0066b4";
+        readonly 800: "#005693";
+        readonly 900: "#014877";
+        readonly 950: "#072d4d";
+    };
+    readonly maitai: {
+        readonly 50: "#fefaef";
+        readonly 100: "#fdf1d4";
+        readonly 200: "#fbe1a6";
+        readonly 300: "#f9cd75";
+        readonly 400: "#f4b24b";
+        readonly 500: "#ef973f";
+        readonly 600: "#d57634";
+        readonly 700: "#ae562c";
+        readonly 800: "#8c4426";
+        readonly 900: "#713923";
+        readonly 950: "#3f1d0f";
+    };
+    readonly mono: {
+        readonly 0: "#ffffff";
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a1a1a1";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly purpleheart: {
+        readonly 50: "#f0f2ff";
+        readonly 100: "#e4e7ff";
+        readonly 200: "#ced2ff";
+        readonly 300: "#aeb3ff";
+        readonly 400: "#8b85ff";
+        readonly 500: "#715aff";
+        readonly 600: "#6032f9";
+        readonly 700: "#5225dc";
+        readonly 800: "#4324b2";
+        readonly 900: "#3a278b";
+        readonly 950: "#231854";
+    };
+    readonly redviolet: {
+        readonly 50: "#fcf4fe";
+        readonly 100: "#fae8f6";
+        readonly 200: "#f7d0ee";
+        readonly 300: "#f5aae2";
+        readonly 400: "#f06fcc";
+        readonly 500: "#e944b7";
+        readonly 600: "#d62098";
+        readonly 700: "#b7177b";
+        readonly 800: "#971965";
+        readonly 900: "#7c1d55";
+        readonly 950: "#4d0b32";
+    };
+    readonly rockspray: {
+        readonly 50: "#fff6ef";
+        readonly 100: "#feebda";
+        readonly 200: "#fdd584";
+        readonly 300: "#fdb782";
+        readonly 400: "#f88b4a";
+        readonly 500: "#f66e31";
+        readonly 600: "#e65527";
+        readonly 700: "#bd4122";
+        readonly 800: "#963621";
+        readonly 900: "#78301f";
+        readonly 950: "#40160e";
+    };
+    readonly seagreen: {
+        readonly 50: "#eafef4";
+        readonly 100: "#ccfbe3";
+        readonly 200: "#9cf6cd";
+        readonly 300: "#44ecb2";
+        readonly 400: "#00d88d";
+        readonly 500: "#00c078";
+        readonly 600: "#009b62";
+        readonly 700: "#007c53";
+        readonly 800: "#006243";
+        readonly 900: "#00503a";
+        readonly 950: "#002d22";
+    };
+    readonly teak: {
+        readonly 50: "#fcfbf3";
+        readonly 100: "#f9f7e0";
+        readonly 200: "#f6ecc2";
+        readonly 300: "#eedda2";
+        readonly 400: "#e0c787";
+        readonly 500: "#ceaf78";
+        readonly 600: "#ac8b5f";
+        readonly 700: "#876747";
+        readonly 800: "#6d503a";
+        readonly 900: "#5a4231";
+        readonly 950: "#332319";
+    };
+    readonly torchred: {
+        readonly 50: "#fff1f1";
+        readonly 100: "#ffe0e0";
+        readonly 200: "#ffc5c5";
+        readonly 300: "#ff999a";
+        readonly 400: "#ff4855";
+        readonly 500: "#ff0000";
+        readonly 600: "#fd0000";
+        readonly 700: "#d30000";
+        readonly 800: "#ad0000";
+        readonly 900: "#8e0002";
+        readonly 950: "#4d0000";
+    };
+    readonly violeteggplant: {
+        readonly 50: "#fcf4fe";
+        readonly 100: "#f9e9fd";
+        readonly 200: "#f3d2fa";
+        readonly 300: "#eeadf9";
+        readonly 400: "#e578f5";
+        readonly 500: "#d84aec";
+        readonly 600: "#bf2bd0";
+        readonly 700: "#a024ac";
+        readonly 800: "#84218b";
+        readonly 900: "#6d2271";
+        readonly 950: "#470d4a";
+    };
+};
+export declare const radius: {
+    readonly none: "0rem";
+    readonly 1: "0.0625rem";
+    readonly 2: "0.125rem";
+    readonly 4: "0.25rem";
+    readonly 8: "0.5rem";
+    readonly 12: "0.75rem";
+    readonly 16: "1rem";
+    readonly 20: "1.25rem";
+    readonly 24: "1.5rem";
+    readonly 32: "2rem";
+    readonly 40: "2.5rem";
+    readonly 80: "5rem";
+    readonly full: "62.4375rem";
+};
+export declare const sizing: {
+    readonly none: "0rem";
+    readonly xxs: "0.5rem";
+    readonly xs: "1rem";
+    readonly s: "1.5rem";
+    readonly m: "2rem";
+    readonly l: "2.5rem";
+    readonly xl: "3rem";
+    readonly xxl: "5rem";
+    readonly xxxl: "10rem";
+};
+export declare const spacing: {
+    readonly 0: "0rem";
+    readonly 2: "0.125rem";
+    readonly 4: "0.25rem";
+    readonly 8: "0.5rem";
+    readonly 12: "0.75rem";
+    readonly 16: "1rem";
+    readonly 20: "1.25rem";
+    readonly 24: "1.5rem";
+    readonly 32: "2rem";
+    readonly 40: "2.5rem";
+    readonly 48: "3rem";
+    readonly 56: "3.5rem";
+    readonly 64: "4rem";
+    readonly 72: "4.5rem";
+    readonly 80: "5rem";
+    readonly 88: "5.5rem";
+    readonly 96: "6rem";
+    readonly 104: "6.5rem";
+    readonly 112: "7rem";
+    readonly 120: "7.5rem";
+    readonly 144: "9rem";
+    readonly 160: "10rem";
+    readonly 240: "15rem";
+    readonly 320: "20rem";
+};
+export declare const viewports: {
+    readonly xxs: "20rem";
+    readonly xs: "25.875rem";
+    readonly s: "30rem";
+    readonly m: "46.75rem";
+    readonly l: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "90rem";
+    readonly "3xl": "120rem";
+    readonly "4xl": "161.25rem";
+};
+export declare const fontSizes: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly "2xl": 24;
+    readonly "3xl": 30;
+    readonly "4xl": 36;
+    readonly "5xl": 48;
+    readonly "6xl": 60;
+    readonly "7xl": 72;
+    readonly "8xl": 96;
+    readonly "9xl": 128;
+};
+export declare const fontWeights: {
+    readonly thin: "100";
+    readonly extralight: "200";
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+export declare const lineHeights: {
+    readonly none: 1;
+    readonly tight: 1.25;
+    readonly snug: 1.375;
+    readonly normal: 1.5;
+    readonly relaxed: 1.625;
+    readonly loose: 2;
+};
+export declare const letterSpacing: {
+    readonly tighter: -0.8;
+    readonly tight: -0.4;
+    readonly normal: 0;
+    readonly wide: 0.4;
+    readonly wider: 0.8;
+    readonly widest: 1.6;
+};
+export declare const fontFamilies: {
+    readonly heading: "var(--font-heading)";
+    readonly body: "var(--font-body)";
+    readonly mono: "var(--font-mono)";
+};
+export declare const themeFonts: Record<Theme, {
+    heading: string;
+    body: string;
+}>;
+/**
+ * Dynamically load the font CSS for a given theme.
+ * Fonts are loaded once and cached — switching back to a previously
+ * loaded theme is instant.
+ *
+ * Importing is handled via dynamic import() so the consumer's bundler
+ * (Vite, webpack, etc.) can code-split each theme's fonts into a
+ * separate chunk.
+ */
+export declare function loadThemeFonts(theme: Theme): Promise<void>;
+export declare const shadows: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly none: "0 0 #0000";
+};
+export declare const durations: {
+    readonly fastest: 50;
+    readonly faster: 100;
+    readonly fast: 150;
+    readonly normal: 200;
+    readonly slow: 300;
+    readonly slower: 400;
+    readonly slowest: 500;
+};
+export declare const easings: {
+    readonly linear: "linear";
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+};
+export declare const zIndices: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly docked: 10;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly banner: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly skipLink: 1600;
+    readonly toast: 1700;
+    readonly tooltip: 1800;
+};
+export declare const breakpoints: {
+    readonly xxs: 320;
+    readonly xs: 414;
+    readonly s: 480;
+    readonly m: 748;
+    readonly l: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1440;
+    readonly "3xl": 1920;
+    readonly "4xl": 2580;
+};
+export type PrimitiveColor = typeof primitiveColors;
+export type RadiusToken = keyof typeof radius;
+export type SizingToken = keyof typeof sizing;
+export type SpacingToken = keyof typeof spacing;
+export type ViewportToken = keyof typeof viewports;
+export type FontSizeToken = keyof typeof fontSizes;
+export type FontWeightToken = keyof typeof fontWeights;
+export type ShadowToken = keyof typeof shadows;
+export type BreakpointToken = keyof typeof breakpoints;