@marianmeres/design-tokens 1.0.1 → 1.0.3

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 (2) hide show
  1. package/dist/reboot-bridge.js +36 -27
  2. package/package.json +17 -1
package/dist/reboot-bridge.js CHANGED
@@ -21,50 +21,54 @@ import { hexToRgbTriplet } from "./utils.js";
21
21
  export function generateRebootBridge(tokens, prefix) {
22
22
  const bridge = {};
23
23
  const get = (key) => tokens[`${prefix}color-${key}`];
24
- // Helper: set a --bs-* var and optionally its -rgb triplet companion
25
- const set = (bsKey, value) => {
26
- if (value === undefined)
24
+ const ref = (key) => `var(--${prefix}color-${key})`;
25
+ // Helper: set a --bs-* var to a var() reference
26
+ const set = (bsKey, tokenKey) => {
27
+ if (get(tokenKey) === undefined)
27
28
  return;
28
- bridge[`bs-${bsKey}`] = value;
29
+ bridge[`bs-${bsKey}`] = ref(tokenKey);
29
30
  };
30
- const setWithRgb = (bsKey, value) => {
31
+ // Helper: set a --bs-* var to a var() reference and its -rgb companion
32
+ // to a raw triplet (CSS cannot derive r,g,b from a var() reference)
33
+ const setWithRgb = (bsKey, tokenKey) => {
34
+ const value = get(tokenKey);
31
35
  if (value === undefined)
32
36
  return;
33
- bridge[`bs-${bsKey}`] = value;
37
+ bridge[`bs-${bsKey}`] = ref(tokenKey);
34
38
  const triplet = hexToRgbTriplet(value);
35
39
  if (triplet)
36
40
  bridge[`bs-${bsKey}-rgb`] = triplet;
37
41
  };
38
42
  // Body
39
- setWithRgb("body-bg", get("background"));
40
- setWithRgb("body-color", get("background-foreground"));
43
+ setWithRgb("body-bg", "background");
44
+ setWithRgb("body-color", "background-foreground");
41
45
  // Links
42
- setWithRgb("link-color", get("primary"));
43
- set("link-decoration", undefined); // leave as reboot default
44
- // Link hover — use primary-hover token value
45
- const primaryHover = tokens[`${prefix}color-primary-hover`];
46
- if (primaryHover) {
47
- setWithRgb("link-hover-color", primaryHover);
46
+ setWithRgb("link-color", "primary");
47
+ // Link hover — use primary-hover token
48
+ if (tokens[`${prefix}color-primary-hover`]) {
49
+ bridge[`bs-link-hover-color`] = ref("primary-hover");
50
+ const triplet = hexToRgbTriplet(tokens[`${prefix}color-primary-hover`]);
51
+ if (triplet)
52
+ bridge[`bs-link-hover-color-rgb`] = triplet;
48
53
  }
49
54
  // Border
50
- set("border-color", get("border"));
55
+ set("border-color", "border");
51
56
  // Heading
52
- set("heading-color", get("background-foreground"));
57
+ set("heading-color", "background-foreground");
53
58
  // Code
54
- const accent = get("accent");
55
- if (accent)
56
- set("code-color", accent);
59
+ if (get("accent"))
60
+ set("code-color", "accent");
57
61
  // Semantic colors
58
- set("primary", get("primary"));
59
- set("danger", get("destructive"));
60
- set("warning", get("warning"));
61
- set("success", get("success"));
62
+ set("primary", "primary");
63
+ set("danger", "destructive");
64
+ set("warning", "warning");
65
+ set("success", "success");
62
66
  // Secondary (muted)
63
- set("secondary-color", get("muted-foreground"));
64
- set("secondary-bg", get("muted"));
67
+ set("secondary-color", "muted-foreground");
68
+ set("secondary-bg", "muted");
65
69
  // Highlight
66
- set("highlight-color", get("background-foreground"));
67
- set("highlight-bg", get("warning"));
70
+ set("highlight-color", "background-foreground");
71
+ set("highlight-bg", "warning");
68
72
  return bridge;
69
73
  }
70
74
  /**
@@ -78,12 +82,17 @@ export function generateThemedCss(schema, prefix) {
78
82
  const lightTokens = generateCssTokens(schema.light, prefix, "light");
79
83
  const lightBridge = generateRebootBridge(lightTokens, prefix);
80
84
  let css = toCssString({ ...lightTokens, ...lightBridge });
85
+ // Override reboot's RGB triplet approach for links so that color-mix() values work
86
+ css += "\na { color: var(--bs-link-color); }";
87
+ css += "\na:hover { color: var(--bs-link-hover-color); }";
81
88
  // Dark mode
82
89
  if (schema.dark) {
83
90
  const darkTokens = generateCssTokens(schema.dark, prefix, "dark");
84
91
  const darkBridge = generateRebootBridge(darkTokens, prefix);
85
92
  css += "\n" +
86
93
  toCssString({ ...darkTokens, ...darkBridge }, ":root.dark");
94
+ css += "\n:root.dark a { color: var(--bs-link-color); }";
95
+ css += "\n:root.dark a:hover { color: var(--bs-link-hover-color); }";
87
96
  }
88
97
  return css;
89
98
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/design-tokens",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "type": "module",
5
5
  "main": "dist/mod.js",
6
6
  "types": "dist/mod.d.ts",
@@ -8,6 +8,22 @@
8
8
  ".": {
9
9
  "types": "./dist/mod.d.ts",
10
10
  "import": "./dist/mod.js"
11
+ },
12
+ "./reboot-bridge": {
13
+ "types": "./dist/reboot-bridge.d.ts",
14
+ "import": "./dist/reboot-bridge.js"
15
+ },
16
+ "./themes/mod": {
17
+ "types": "./dist/themes/mod.d.ts",
18
+ "import": "./dist/themes/mod.js"
19
+ },
20
+ "./reboot": {
21
+ "types": "./dist/reboot-bridge.d.ts",
22
+ "import": "./dist/reboot-bridge.js"
23
+ },
24
+ "./themes": {
25
+ "types": "./dist/themes/mod.d.ts",
26
+ "import": "./dist/themes/mod.js"
11
27
  }
12
28
  },
13
29
  "author": "Marian Meres",