@mcp-b/design-tokens 0.35.0 → 0.37.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/semantic-colors.css +15 -0
  3. package/src/themes.css +48 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.35.0",
3
+ "version": "0.37.0",
4
4
  "description": "Shared design tokens for MCP-B React applications.",
5
5
  "homepage": "https://mcp-b-design-system-storybook.alexmnahas.workers.dev",
6
6
  "bugs": {
package/src/semantic-colors.css CHANGED
@@ -30,6 +30,21 @@
30
30
  --sigvelo-color-text-subtle-dark: #a6a6a6;
31
31
  --sigvelo-color-text-faint-light: #8f8f8f;
32
32
  --sigvelo-color-text-faint-dark: #8f8f8f;
33
+ /* Data-series colors are measured against their owning surface so chart
34
+ marks clear WCAG 1.4.11 in either theme. The weakest pair is 5.17:1 on
35
+ the light surface and 6.60:1 on the dark surface. */
36
+ --sigvelo-color-viz-series-1-light: #2563eb;
37
+ --sigvelo-color-viz-series-1-dark: #60a5fa;
38
+ --sigvelo-color-viz-series-2-light: #0f766e;
39
+ --sigvelo-color-viz-series-2-dark: #2dd4bf;
40
+ --sigvelo-color-viz-series-3-light: #c2410c;
41
+ --sigvelo-color-viz-series-3-dark: #fb923c;
42
+ --sigvelo-color-viz-series-4-light: #7e22ce;
43
+ --sigvelo-color-viz-series-4-dark: #c084fc;
44
+ --sigvelo-color-viz-series-5-light: #be123c;
45
+ --sigvelo-color-viz-series-5-dark: #fb7185;
46
+ --sigvelo-color-viz-series-6-light: #3f6212;
47
+ --sigvelo-color-viz-series-6-dark: #a3e635;
33
48
  /* Surfaces that sit above the page. In light mode a raised card is the
34
49
  same white as the surface and is separated by shadow alone; in dark mode
35
50
  shadow does almost nothing, so the card lifts by getting lighter. */
package/src/themes.css CHANGED
@@ -17,6 +17,12 @@
17
17
  --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-light);
18
18
  --sigvelo-color-text-subtle: var(--sigvelo-color-text-subtle-light);
19
19
  --sigvelo-color-text-faint: var(--sigvelo-color-text-faint-light);
20
+ --sigvelo-color-viz-series-1: var(--sigvelo-color-viz-series-1-light);
21
+ --sigvelo-color-viz-series-2: var(--sigvelo-color-viz-series-2-light);
22
+ --sigvelo-color-viz-series-3: var(--sigvelo-color-viz-series-3-light);
23
+ --sigvelo-color-viz-series-4: var(--sigvelo-color-viz-series-4-light);
24
+ --sigvelo-color-viz-series-5: var(--sigvelo-color-viz-series-5-light);
25
+ --sigvelo-color-viz-series-6: var(--sigvelo-color-viz-series-6-light);
20
26
  --sigvelo-color-focus: var(--sigvelo-color-focus-light);
21
27
  --sigvelo-focus-ring: var(--sigvelo-focus-ring-light);
22
28
  --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-light);
@@ -102,6 +108,12 @@
102
108
  --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-dark);
103
109
  --sigvelo-color-text-subtle: var(--sigvelo-color-text-subtle-dark);
104
110
  --sigvelo-color-text-faint: var(--sigvelo-color-text-faint-dark);
111
+ --sigvelo-color-viz-series-1: var(--sigvelo-color-viz-series-1-dark);
112
+ --sigvelo-color-viz-series-2: var(--sigvelo-color-viz-series-2-dark);
113
+ --sigvelo-color-viz-series-3: var(--sigvelo-color-viz-series-3-dark);
114
+ --sigvelo-color-viz-series-4: var(--sigvelo-color-viz-series-4-dark);
115
+ --sigvelo-color-viz-series-5: var(--sigvelo-color-viz-series-5-dark);
116
+ --sigvelo-color-viz-series-6: var(--sigvelo-color-viz-series-6-dark);
105
117
  --sigvelo-color-focus: var(--sigvelo-color-focus-dark);
106
118
  --sigvelo-focus-ring: var(--sigvelo-focus-ring-dark);
107
119
  --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-dark);
@@ -186,6 +198,12 @@
186
198
  --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-light);
187
199
  --sigvelo-color-text-subtle: var(--sigvelo-color-text-subtle-light);
188
200
  --sigvelo-color-text-faint: var(--sigvelo-color-text-faint-light);
201
+ --sigvelo-color-viz-series-1: var(--sigvelo-color-viz-series-1-light);
202
+ --sigvelo-color-viz-series-2: var(--sigvelo-color-viz-series-2-light);
203
+ --sigvelo-color-viz-series-3: var(--sigvelo-color-viz-series-3-light);
204
+ --sigvelo-color-viz-series-4: var(--sigvelo-color-viz-series-4-light);
205
+ --sigvelo-color-viz-series-5: var(--sigvelo-color-viz-series-5-light);
206
+ --sigvelo-color-viz-series-6: var(--sigvelo-color-viz-series-6-light);
189
207
  --sigvelo-color-focus: var(--sigvelo-color-focus-light);
190
208
  --sigvelo-focus-ring: var(--sigvelo-focus-ring-light);
191
209
  --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-light);
@@ -270,6 +288,12 @@
270
288
  --sigvelo-color-text-muted: var(--sigvelo-color-text-muted-dark);
271
289
  --sigvelo-color-text-subtle: var(--sigvelo-color-text-subtle-dark);
272
290
  --sigvelo-color-text-faint: var(--sigvelo-color-text-faint-dark);
291
+ --sigvelo-color-viz-series-1: var(--sigvelo-color-viz-series-1-dark);
292
+ --sigvelo-color-viz-series-2: var(--sigvelo-color-viz-series-2-dark);
293
+ --sigvelo-color-viz-series-3: var(--sigvelo-color-viz-series-3-dark);
294
+ --sigvelo-color-viz-series-4: var(--sigvelo-color-viz-series-4-dark);
295
+ --sigvelo-color-viz-series-5: var(--sigvelo-color-viz-series-5-dark);
296
+ --sigvelo-color-viz-series-6: var(--sigvelo-color-viz-series-6-dark);
273
297
  --sigvelo-color-focus: var(--sigvelo-color-focus-dark);
274
298
  --sigvelo-focus-ring: var(--sigvelo-focus-ring-dark);
275
299
  --sigvelo-color-backdrop: var(--sigvelo-color-backdrop-dark);
@@ -387,6 +411,30 @@
387
411
  var(--sigvelo-color-text-faint-light),
388
412
  var(--sigvelo-color-text-faint-dark)
389
413
  );
414
+ --sigvelo-color-viz-series-1: light-dark(
415
+ var(--sigvelo-color-viz-series-1-light),
416
+ var(--sigvelo-color-viz-series-1-dark)
417
+ );
418
+ --sigvelo-color-viz-series-2: light-dark(
419
+ var(--sigvelo-color-viz-series-2-light),
420
+ var(--sigvelo-color-viz-series-2-dark)
421
+ );
422
+ --sigvelo-color-viz-series-3: light-dark(
423
+ var(--sigvelo-color-viz-series-3-light),
424
+ var(--sigvelo-color-viz-series-3-dark)
425
+ );
426
+ --sigvelo-color-viz-series-4: light-dark(
427
+ var(--sigvelo-color-viz-series-4-light),
428
+ var(--sigvelo-color-viz-series-4-dark)
429
+ );
430
+ --sigvelo-color-viz-series-5: light-dark(
431
+ var(--sigvelo-color-viz-series-5-light),
432
+ var(--sigvelo-color-viz-series-5-dark)
433
+ );
434
+ --sigvelo-color-viz-series-6: light-dark(
435
+ var(--sigvelo-color-viz-series-6-light),
436
+ var(--sigvelo-color-viz-series-6-dark)
437
+ );
390
438
  --sigvelo-color-focus: light-dark(
391
439
  var(--sigvelo-color-focus-light),
392
440
  var(--sigvelo-color-focus-dark)