@mcp-b/design-tokens 0.51.2 → 0.53.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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/color-presets.css +2 -3
  3. package/src/seeds.css +2 -2
  4. package/src/semantic-colors.css +83 -83
  5. package/src/typography.css +1 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.51.2",
3
+ "version": "0.53.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/color-presets.css CHANGED
@@ -3,8 +3,7 @@
3
3
  *
4
4
  * Opt-in accent presets, activated by a data-preset attribute on the root.
5
5
  * Without the attribute the primary family keeps its default
6
- * monochrome values from semantic-colors.css, so nothing changes for
7
- * consumers who never set it.
6
+ * Sigvelo brand values from semantic-colors.css, for consumers who never set it.
8
7
  *
9
8
  * data-preset re-points the primary semantic pairs at the seeded primary
10
9
  * palette with contrast headroom for hover and pressed states; each named
@@ -45,7 +44,7 @@
45
44
  --sigvelo-color-primary-text-light: color-mix(
46
45
  in oklab,
47
46
  var(--sigvelo-color-primary-600),
48
- black 16%
47
+ black 18%
49
48
  );
50
49
  --sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
51
50
  --sigvelo-color-primary-border-subtle-light: color-mix(
package/src/seeds.css CHANGED
@@ -8,10 +8,10 @@
8
8
  */
9
9
 
10
10
  :root {
11
- --sigvelo-color-primary-seed: #007dba;
11
+ --sigvelo-color-primary-seed: #006d9f;
12
12
  --sigvelo-color-neutral-seed: #8b8c93;
13
13
  /* Success and danger stay desaturated: status color is an accent in an
14
- otherwise monotone app, not a highlight. */
14
+ otherwise quiet app, not a highlight. */
15
15
  --sigvelo-color-success-seed: #5f9d64;
16
16
  --sigvelo-color-warning-seed: #e89a26;
17
17
  --sigvelo-color-danger-seed: #c75d5a;
package/src/semantic-colors.css CHANGED
@@ -6,30 +6,28 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --sigvelo-color-canvas-light: #fff;
10
- --sigvelo-color-canvas-dark: #212121;
11
- /* The quiet window stage visible around bounded application surfaces. It is
12
- not a control fill: canvas remains the neutral base for embedded fields.
13
- Kept one quiet step below the surface in both themes — the light pair is
14
- #f9f9f9/#fff, so the dark pair matches that restraint instead of dropping
15
- to pure black and turning every plane edge into a visible box. */
16
- --sigvelo-color-surface-under-light: #f9f9f9;
17
- --sigvelo-color-surface-under-dark: #111;
18
- --sigvelo-color-surface-light: #fff;
19
- --sigvelo-color-surface-dark: #181818;
20
- --sigvelo-color-text-light: #0d0d0d;
21
- --sigvelo-color-text-dark: #ececec;
22
- --sigvelo-color-text-muted-light: #5d5d5d;
23
- --sigvelo-color-text-muted-dark: #b4b4b4;
9
+ --sigvelo-color-canvas-light: #f7f7f4;
10
+ --sigvelo-color-canvas-dark: #171716;
11
+ /* Sigvelo product planes: warm paper in light mode, neutral charcoal in dark.
12
+ Elevation separates neutral planes without white or blue panel fills.
13
+ Source and mappings: react-components/docs/sigvelo-brand.md. */
14
+ --sigvelo-color-surface-under-light: #f0f0ed;
15
+ --sigvelo-color-surface-under-dark: #20201e;
16
+ --sigvelo-color-surface-light: #f7f7f4;
17
+ --sigvelo-color-surface-dark: #171716;
18
+ --sigvelo-color-text-light: #24241f;
19
+ --sigvelo-color-text-dark: #f3f7f9;
20
+ --sigvelo-color-text-muted-light: #595d57;
21
+ --sigvelo-color-text-muted-dark: #b2c1c9;
24
22
  /* Two quieter rungs below muted, measured against the owning surface rather
25
23
  than picked off the legacy neutral ramp.
26
24
  subtle: de-emphasized label text, still holds ~4.5:1 against its surface.
27
25
  faint: icons and resting affordances only — it clears the 3:1 needed for
28
26
  a graphic, not the 4.5:1 needed for body copy. */
29
- --sigvelo-color-text-subtle-light: #737373;
30
- --sigvelo-color-text-subtle-dark: #a6a6a6;
31
- --sigvelo-color-text-faint-light: #8f8f8f;
32
- --sigvelo-color-text-faint-dark: #8f8f8f;
27
+ --sigvelo-color-text-subtle-light: #656a64;
28
+ --sigvelo-color-text-subtle-dark: #9dafb9;
29
+ --sigvelo-color-text-faint-light: #7b817b;
30
+ --sigvelo-color-text-faint-dark: #7d929f;
33
31
  /* Data-series colors are measured against their owning surface so chart
34
32
  marks clear WCAG 1.4.11 in either theme. The weakest pair is 5.17:1 on
35
33
  the light surface and 6.60:1 on the dark surface. */
@@ -45,13 +43,13 @@
45
43
  --sigvelo-color-viz-series-5-dark: #fb7185;
46
44
  --sigvelo-color-viz-series-6-light: #3f6212;
47
45
  --sigvelo-color-viz-series-6-dark: #a3e635;
48
- /* Surfaces that sit above the page. In light mode a raised card is the
49
- same white as the surface and is separated by shadow alone; in dark mode
50
- shadow does almost nothing, so the card lifts by getting lighter. */
51
- --sigvelo-color-surface-raised-light: #fff;
52
- --sigvelo-color-surface-raised-dark: #282828;
53
- --sigvelo-color-surface-sunken-light: #f9f9f9;
54
- --sigvelo-color-surface-sunken-dark: #171717;
46
+ /* Elevated controls, composers, and menus carry a restrained Sigvelo blue
47
+ tint. Large workspaces use surface so their canvas stays consistent
48
+ between split and compact layouts. */
49
+ --sigvelo-color-surface-raised-light: #f3f6f6;
50
+ --sigvelo-color-surface-raised-dark: #12232d;
51
+ --sigvelo-color-surface-sunken-light: #f0f0ed;
52
+ --sigvelo-color-surface-sunken-dark: #20201e;
55
53
  /* Translucent counterpart of surface-raised, for panels that blur what is
56
54
  scrolling underneath. Pair with --sigvelo-glass-filter, and fall back to
57
55
  surface-raised where backdrop-filter is unavailable. */
@@ -73,10 +71,10 @@
73
71
  var(--sigvelo-color-focus-dark);
74
72
  /* Paired with --sigvelo-glass-filter on dialog scrims. A pale tint and 1px
75
73
  blur recede the page without turning it into a dark or frosted sheet. */
76
- --sigvelo-color-backdrop-light: rgb(238 238 238 / 50%);
77
- --sigvelo-color-backdrop-dark: rgb(0 0 0 / 50%);
78
- --sigvelo-color-selection-bg-light: var(--sigvelo-color-primary-300);
79
- --sigvelo-color-selection-bg-dark: var(--sigvelo-color-primary-700);
74
+ --sigvelo-color-backdrop-light: rgb(240 240 237 / 65%);
75
+ --sigvelo-color-backdrop-dark: rgb(17 17 16 / 65%);
76
+ --sigvelo-color-selection-bg-light: #deded8;
77
+ --sigvelo-color-selection-bg-dark: #3b3b37;
80
78
  --sigvelo-color-selection-text-light: var(--sigvelo-color-text-light);
81
79
  --sigvelo-color-selection-text-dark: var(--sigvelo-color-text-dark);
82
80
  /* One color for both themes. What differs between light and dark is how much
@@ -117,56 +115,58 @@
117
115
  0 3px 7.5px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 32%),
118
116
  0 0 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 28%);
119
117
  /* overlay: popovers, menus, dialogs — detached from the page entirely. */
120
- --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 8px 12px rgb(0 0 0 / 8%);
121
- --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 8px 16px rgb(0 0 0 / 35%);
122
- --sigvelo-color-primary-bg-subtle-light: #f9f9f9;
123
- --sigvelo-color-primary-bg-subtle-dark: #2f2f2f;
124
- --sigvelo-color-primary-bg-muted-light: #ececec;
125
- --sigvelo-color-primary-bg-muted-dark: #424242;
126
- --sigvelo-color-primary-bg-light: #0d0d0d;
127
- --sigvelo-color-primary-bg-dark: #fff;
128
- --sigvelo-color-primary-bg-strong-light: #000;
129
- --sigvelo-color-primary-bg-strong-dark: #fff;
130
- --sigvelo-color-primary-bg-stronger-light: #000;
131
- --sigvelo-color-primary-bg-stronger-dark: #fff;
132
- --sigvelo-color-primary-text-on-subtle-light: #0d0d0d;
133
- --sigvelo-color-primary-text-on-subtle-dark: #ececec;
134
- --sigvelo-color-primary-text-on-bg-light: #fff;
135
- --sigvelo-color-primary-text-on-bg-dark: #0d0d0d;
136
- --sigvelo-color-primary-text-on-strong-light: #fff;
137
- --sigvelo-color-primary-text-on-strong-dark: #0d0d0d;
138
- --sigvelo-color-primary-text-light: #0d0d0d;
139
- --sigvelo-color-primary-text-dark: #ececec;
140
- --sigvelo-color-primary-border-subtle-light: rgb(0 0 0 / 5%);
141
- --sigvelo-color-primary-border-subtle-dark: rgb(255 255 255 / 10%);
142
- --sigvelo-color-primary-border-muted-light: rgb(0 0 0 / 10%);
143
- --sigvelo-color-primary-border-muted-dark: rgb(255 255 255 / 15%);
144
- --sigvelo-color-primary-border-light: #0d0d0d;
145
- --sigvelo-color-primary-border-dark: #ececec;
146
- --sigvelo-color-neutral-bg-subtle-light: rgb(0 0 0 / 5%);
147
- --sigvelo-color-neutral-bg-subtle-dark: rgb(255 255 255 / 8%);
148
- --sigvelo-color-neutral-bg-muted-light: #ececec;
149
- --sigvelo-color-neutral-bg-muted-dark: #424242;
150
- --sigvelo-color-neutral-bg-light: #5d5d5d;
151
- --sigvelo-color-neutral-bg-dark: #b4b4b4;
152
- --sigvelo-color-neutral-bg-strong-light: #333;
153
- --sigvelo-color-neutral-bg-strong-dark: #ececec;
154
- --sigvelo-color-neutral-bg-stronger-light: #0d0d0d;
155
- --sigvelo-color-neutral-bg-stronger-dark: #fff;
156
- --sigvelo-color-neutral-text-on-subtle-light: #0d0d0d;
157
- --sigvelo-color-neutral-text-on-subtle-dark: #ececec;
158
- --sigvelo-color-neutral-text-on-bg-light: #fff;
159
- --sigvelo-color-neutral-text-on-bg-dark: #0d0d0d;
160
- --sigvelo-color-neutral-text-on-strong-light: #fff;
161
- --sigvelo-color-neutral-text-on-strong-dark: #0d0d0d;
162
- --sigvelo-color-neutral-text-light: #5d5d5d;
163
- --sigvelo-color-neutral-text-dark: #b4b4b4;
164
- --sigvelo-color-neutral-border-subtle-light: rgb(0 0 0 / 5%);
165
- --sigvelo-color-neutral-border-subtle-dark: rgb(255 255 255 / 10%);
166
- --sigvelo-color-neutral-border-muted-light: rgb(0 0 0 / 10%);
167
- --sigvelo-color-neutral-border-muted-dark: rgb(255 255 255 / 15%);
168
- --sigvelo-color-neutral-border-light: #5d5d5d;
169
- --sigvelo-color-neutral-border-dark: #b4b4b4;
118
+ --sigvelo-elevation-overlay-light:
119
+ var(--sigvelo-elevation-hairline-light), 0 10px 28px rgb(36 36 31 / 12%);
120
+ --sigvelo-elevation-overlay-dark:
121
+ var(--sigvelo-elevation-hairline-dark), 0 10px 28px rgb(0 0 0 / 32%);
122
+ --sigvelo-color-primary-bg-subtle-light: #e4f0f5;
123
+ --sigvelo-color-primary-bg-subtle-dark: #123443;
124
+ --sigvelo-color-primary-bg-muted-light: #deded8;
125
+ --sigvelo-color-primary-bg-muted-dark: #3b3b37;
126
+ --sigvelo-color-primary-bg-light: #006d9f;
127
+ --sigvelo-color-primary-bg-dark: #8bd9f0;
128
+ --sigvelo-color-primary-bg-strong-light: #00577f;
129
+ --sigvelo-color-primary-bg-strong-dark: #b7eafa;
130
+ --sigvelo-color-primary-bg-stronger-light: #004664;
131
+ --sigvelo-color-primary-bg-stronger-dark: #daf5ff;
132
+ --sigvelo-color-primary-text-on-subtle-light: #00577f;
133
+ --sigvelo-color-primary-text-on-subtle-dark: #b7eafa;
134
+ --sigvelo-color-primary-text-on-bg-light: #ffffff;
135
+ --sigvelo-color-primary-text-on-bg-dark: #061118;
136
+ --sigvelo-color-primary-text-on-strong-light: #ffffff;
137
+ --sigvelo-color-primary-text-on-strong-dark: #061118;
138
+ --sigvelo-color-primary-text-light: #00658f;
139
+ --sigvelo-color-primary-text-dark: #63c7e8;
140
+ --sigvelo-color-primary-border-subtle-light: rgb(0 109 159 / 18%);
141
+ --sigvelo-color-primary-border-subtle-dark: rgb(99 199 232 / 22%);
142
+ --sigvelo-color-primary-border-muted-light: rgb(0 109 159 / 35%);
143
+ --sigvelo-color-primary-border-muted-dark: rgb(99 199 232 / 38%);
144
+ --sigvelo-color-primary-border-light: #006d9f;
145
+ --sigvelo-color-primary-border-dark: #63c7e8;
146
+ --sigvelo-color-neutral-bg-subtle-light: rgb(36 36 31 / 5%);
147
+ --sigvelo-color-neutral-bg-subtle-dark: rgb(247 247 244 / 7%);
148
+ --sigvelo-color-neutral-bg-muted-light: #e4e4df;
149
+ --sigvelo-color-neutral-bg-muted-dark: #343431;
150
+ --sigvelo-color-neutral-bg-light: #62665f;
151
+ --sigvelo-color-neutral-bg-dark: #b2c1c9;
152
+ --sigvelo-color-neutral-bg-strong-light: #3c4546;
153
+ --sigvelo-color-neutral-bg-strong-dark: #e0edf2;
154
+ --sigvelo-color-neutral-bg-stronger-light: #24241f;
155
+ --sigvelo-color-neutral-bg-stronger-dark: #f3f7f9;
156
+ --sigvelo-color-neutral-text-on-subtle-light: #24241f;
157
+ --sigvelo-color-neutral-text-on-subtle-dark: #f3f7f9;
158
+ --sigvelo-color-neutral-text-on-bg-light: #ffffff;
159
+ --sigvelo-color-neutral-text-on-bg-dark: #171716;
160
+ --sigvelo-color-neutral-text-on-strong-light: #ffffff;
161
+ --sigvelo-color-neutral-text-on-strong-dark: #171716;
162
+ --sigvelo-color-neutral-text-light: #62665f;
163
+ --sigvelo-color-neutral-text-dark: #b2c1c9;
164
+ --sigvelo-color-neutral-border-subtle-light: rgb(36 36 31 / 13%);
165
+ --sigvelo-color-neutral-border-subtle-dark: rgb(247 247 244 / 16%);
166
+ --sigvelo-color-neutral-border-muted-light: rgb(36 36 31 / 20%);
167
+ --sigvelo-color-neutral-border-muted-dark: rgb(247 247 244 / 28%);
168
+ --sigvelo-color-neutral-border-light: #62665f;
169
+ --sigvelo-color-neutral-border-dark: #b2c1c9;
170
170
  --sigvelo-color-success-bg-subtle-light: var(--sigvelo-color-success-100);
171
171
  --sigvelo-color-success-bg-subtle-dark: color-mix(
172
172
  in oklab,
@@ -238,7 +238,7 @@
238
238
  --sigvelo-color-warning-text-light: color-mix(
239
239
  in oklab,
240
240
  var(--sigvelo-color-warning-600),
241
- black 12.5%
241
+ black 22%
242
242
  );
243
243
  --sigvelo-color-warning-text-dark: var(--sigvelo-color-warning-500);
244
244
  --sigvelo-color-warning-border-subtle-light: color-mix(
@@ -307,12 +307,12 @@
307
307
  --sigvelo-color-primary-bg-hover: color-mix(
308
308
  in oklab,
309
309
  var(--sigvelo-color-primary-bg),
310
- var(--sigvelo-color-primary-text-on-bg) 10%
310
+ var(--sigvelo-color-primary-text-on-bg) 6%
311
311
  );
312
312
  --sigvelo-color-primary-bg-press: color-mix(
313
313
  in oklab,
314
314
  var(--sigvelo-color-primary-bg),
315
- var(--sigvelo-color-primary-text-on-bg) 16%
315
+ var(--sigvelo-color-primary-text-on-bg) 9%
316
316
  );
317
317
  --sigvelo-color-neutral-bg-hover: color-mix(
318
318
  in oklab,
package/src/typography.css CHANGED
@@ -4,8 +4,7 @@
4
4
 
5
5
  :root {
6
6
  --sigvelo-font-sans:
7
- -apple-system-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
8
- Arial, sans-serif;
7
+ system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
9
8
  --sigvelo-font-heading: var(--sigvelo-font-sans);
10
9
  --sigvelo-font-mono:
11
10
  SFMono-Regular, Consolas, Menlo, Monaco, "liberation mono", "Courier New", monospace;