@marianmeres/design-tokens 1.0.0 → 1.0.2

package/dist/generate.d.ts

@@ -1,5 +1,4 @@
-import type { ColorPair, ColorValue, GeneratedTokens, SingleColor, ThemeSchema, TokenSchema } from "./types.js";
-export type { ColorPair, ColorValue, GeneratedTokens, SingleColor, ThemeSchema, TokenSchema, };
+import type { GeneratedTokens, ThemeSchema, TokenSchema } from "./types.js";
 /**
  * Generate CSS token key-value pairs from a TokenSchema.
  *

package/dist/reboot-bridge.js

@@ -21,50 +21,54 @@ import { hexToRgbTriplet } from "./utils.js";
 export function generateRebootBridge(tokens, prefix) {
     const bridge = {};
     const get = (key) => tokens[`${prefix}color-${key}`];
-    // Helper: set a --bs-* var and optionally its -rgb triplet companion
-    const set = (bsKey, value) => {
-        if (value === undefined)
+    const ref = (key) => `var(--${prefix}color-${key})`;
+    // Helper: set a --bs-* var to a var() reference
+    const set = (bsKey, tokenKey) => {
+        if (get(tokenKey) === undefined)
             return;
-        bridge[`bs-${bsKey}`] = value;
+        bridge[`bs-${bsKey}`] = ref(tokenKey);
     };
-    const setWithRgb = (bsKey, value) => {
+    // Helper: set a --bs-* var to a var() reference and its -rgb companion
+    // to a raw triplet (CSS cannot derive r,g,b from a var() reference)
+    const setWithRgb = (bsKey, tokenKey) => {
+        const value = get(tokenKey);
         if (value === undefined)
             return;
-        bridge[`bs-${bsKey}`] = value;
+        bridge[`bs-${bsKey}`] = ref(tokenKey);
         const triplet = hexToRgbTriplet(value);
         if (triplet)
             bridge[`bs-${bsKey}-rgb`] = triplet;
     };
     // Body
-    setWithRgb("body-bg", get("background"));
-    setWithRgb("body-color", get("background-foreground"));
+    setWithRgb("body-bg", "background");
+    setWithRgb("body-color", "background-foreground");
     // Links
-    setWithRgb("link-color", get("primary"));
-    set("link-decoration", undefined); // leave as reboot default
-    // Link hover — use primary-hover token value
-    const primaryHover = tokens[`${prefix}color-primary-hover`];
-    if (primaryHover) {
-        setWithRgb("link-hover-color", primaryHover);
+    setWithRgb("link-color", "primary");
+    // Link hover — use primary-hover token
+    if (tokens[`${prefix}color-primary-hover`]) {
+        bridge[`bs-link-hover-color`] = ref("primary-hover");
+        const triplet = hexToRgbTriplet(tokens[`${prefix}color-primary-hover`]);
+        if (triplet)
+            bridge[`bs-link-hover-color-rgb`] = triplet;
     }
     // Border
-    set("border-color", get("border"));
+    set("border-color", "border");
     // Heading
-    set("heading-color", get("background-foreground"));
+    set("heading-color", "background-foreground");
     // Code
-    const accent = get("accent");
-    if (accent)
-        set("code-color", accent);
+    if (get("accent"))
+        set("code-color", "accent");
     // Semantic colors
-    set("primary", get("primary"));
-    set("danger", get("destructive"));
-    set("warning", get("warning"));
-    set("success", get("success"));
+    set("primary", "primary");
+    set("danger", "destructive");
+    set("warning", "warning");
+    set("success", "success");
     // Secondary (muted)
-    set("secondary-color", get("muted-foreground"));
-    set("secondary-bg", get("muted"));
+    set("secondary-color", "muted-foreground");
+    set("secondary-bg", "muted");
     // Highlight
-    set("highlight-color", get("background-foreground"));
-    set("highlight-bg", get("warning"));
+    set("highlight-color", "background-foreground");
+    set("highlight-bg", "warning");
     return bridge;
 }
 /**

package/dist/themes/blue-orange.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Blue primary / orange accent theme. */
 export default theme;

package/dist/themes/blue-orange.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Blue primary / orange accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Cyan primary / red accent theme. */
 export default theme;

package/dist/themes/cyan-red.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Cyan primary / red accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Cyan primary / slate accent theme. */
 export default theme;

package/dist/themes/cyan-slate.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Cyan primary / slate accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Emerald primary / amber accent forest theme. */
 export default theme;

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

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Emerald primary / amber accent forest theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Emerald primary / pink accent theme. */
 export default theme;

package/dist/themes/emerald-pink.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Emerald primary / pink accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Fuchsia primary / emerald accent theme. */
 export default theme;

package/dist/themes/fuchsia-emerald.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Fuchsia primary / emerald accent theme. */
 export default theme;

package/dist/themes/gray.d.ts

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

package/dist/themes/gray.js

@@ -63,4 +63,5 @@ const theme = {
         },
     },
 };
+/** Neutral gray monochrome theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Indigo primary / amber accent theme. */
 export default theme;

package/dist/themes/indigo-amber.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Indigo primary / amber accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Lime primary / fuchsia accent neon theme. */
 export default theme;

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

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Lime primary / fuchsia accent neon theme. */
 export default theme;

package/dist/themes/mod.d.ts

@@ -7,6 +7,7 @@
  *
  * @module
  */
+/** A complete theme definition with required light mode and optional dark mode. */
 export type { ThemeSchema } from "../types.js";
 /** Blue primary / orange accent theme. */
 export { default as blueOrange } from "./blue-orange.js";

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Monokai-inspired theme with cyan accent. */
 export default theme;

package/dist/themes/monokai-cyan.js

@@ -116,4 +116,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Monokai-inspired theme with cyan accent. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Monokai-inspired theme with green accent. */
 export default theme;

package/dist/themes/monokai-green.js

@@ -116,4 +116,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Monokai-inspired theme with green accent. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Monokai-inspired theme with pink accent. */
 export default theme;

package/dist/themes/monokai-pink.js

@@ -116,4 +116,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Monokai-inspired theme with pink accent. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Orange primary / pink accent sunset theme. */
 export default theme;

package/dist/themes/orange-pink-sunset.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Orange primary / pink accent sunset theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Pink primary / emerald accent theme. */
 export default theme;

package/dist/themes/pink-emerald.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Pink primary / emerald accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Pink primary / teal accent theme. */
 export default theme;

package/dist/themes/pink-teal.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Pink primary / teal accent theme. */
 export default theme;

package/dist/themes/purple-yellow.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Purple primary / yellow accent theme. */
 export default theme;

package/dist/themes/purple-yellow.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Purple primary / yellow accent theme. */
 export default theme;

package/dist/themes/rainbow.d.ts

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

package/dist/themes/rainbow.js

@@ -119,4 +119,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Multi-color rainbow theme. */
 export default theme;

package/dist/themes/red-blue.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Red primary / blue accent theme. */
 export default theme;

package/dist/themes/red-blue.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Red primary / blue accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Red primary / cyan accent theme. */
 export default theme;

package/dist/themes/red-cyan.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Red primary / cyan accent theme. */
 export default theme;

package/dist/themes/red-sky-slate.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Red primary / sky accent / slate base theme. */
 export default theme;

package/dist/themes/red-sky-slate.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Red primary / sky accent / slate base theme. */
 export default theme;

package/dist/themes/red-sky.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Red primary / sky accent theme. */
 export default theme;

package/dist/themes/red-sky.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Red primary / sky accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Rose primary / teal accent theme. */
 export default theme;

package/dist/themes/rose-teal.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Rose primary / teal accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Sky primary / amber accent theme. */
 export default theme;

package/dist/themes/sky-amber.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Sky primary / amber accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Slate primary / cyan accent theme. */
 export default theme;

package/dist/themes/slate-cyan.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Slate primary / cyan accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Slate primary / teal accent ocean theme. */
 export default theme;

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

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Slate primary / teal accent ocean theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Stone primary / orange accent earth theme. */
 export default theme;

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

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Stone primary / orange accent earth theme. */
 export default theme;

package/dist/themes/stone.d.ts

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

package/dist/themes/stone.js

@@ -69,4 +69,5 @@ const theme = {
         },
     },
 };
+/** Neutral stone monochrome theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Teal primary / rose accent theme. */
 export default theme;

package/dist/themes/teal-rose.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Teal primary / rose accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Violet primary / lime accent theme. */
 export default theme;

package/dist/themes/violet-lime.js

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Violet primary / lime accent theme. */
 export default theme;

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

@@ -1,3 +1,4 @@
 import type { ThemeSchema } from "../types.js";
 declare const theme: ThemeSchema;
+/** Violet primary / rose accent dusk theme. */
 export default theme;

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

@@ -114,4 +114,5 @@ const dark = {
     },
 };
 const theme = { light, dark };
+/** Violet primary / rose accent dusk theme. */
 export default theme;

package/dist/themes/zinc.d.ts

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

package/dist/themes/zinc.js

@@ -63,4 +63,5 @@ const theme = {
         },
     },
 };
+/** Neutral zinc monochrome theme. */
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/design-tokens",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"type": "module",
 	"main": "dist/mod.js",
 	"types": "dist/mod.d.ts",