@mcp-b/design-tokens 0.21.0 → 0.23.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 (8) hide show
  1. package/package.json +5 -1
  2. package/src/color-presets.css +146 -0
  3. package/src/elevation.css +3 -3
  4. package/src/semantic-colors.css +82 -160
  5. package/src/spacing.css +5 -5
  6. package/src/style-presets.css +196 -0
  7. package/src/themes.css +8 -0
  8. package/src/typography.css +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.21.0",
3
+ "version": "0.23.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": {
@@ -24,6 +24,8 @@
24
24
  "./index.css": "./src/index.css",
25
25
  "./borders": "./src/borders.css",
26
26
  "./borders.css": "./src/borders.css",
27
+ "./color-presets": "./src/color-presets.css",
28
+ "./color-presets.css": "./src/color-presets.css",
27
29
  "./elevation": "./src/elevation.css",
28
30
  "./elevation.css": "./src/elevation.css",
29
31
  "./focus": "./src/focus.css",
@@ -38,6 +40,8 @@
38
40
  "./semantic-colors.css": "./src/semantic-colors.css",
39
41
  "./spacing": "./src/spacing.css",
40
42
  "./spacing.css": "./src/spacing.css",
43
+ "./style-presets": "./src/style-presets.css",
44
+ "./style-presets.css": "./src/style-presets.css",
41
45
  "./themes": "./src/themes.css",
42
46
  "./themes.css": "./src/themes.css",
43
47
  "./typography": "./src/typography.css",
package/src/color-presets.css ADDED
@@ -0,0 +1,146 @@
1
+ /*
2
+ * Color Presets
3
+ *
4
+ * Opt-in accent presets, activated by a data-preset attribute on the root or
5
+ * any subtree. 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.
8
+ *
9
+ * data-preset re-points the primary semantic pairs at the seeded primary
10
+ * palette using the same contrast recipe as the success family; each named
11
+ * preset then supplies only its seed. Focus rings, selection, and
12
+ * accent-color already resolve through these pairs and follow along.
13
+ *
14
+ * Deliberately not part of index.css: import
15
+ * "@mcp-b/design-tokens/color-presets" after the main tokens to opt in.
16
+ */
17
+
18
+ [data-preset] {
19
+ --sigvelo-color-primary-bg-subtle-light: var(--sigvelo-color-primary-100);
20
+ --sigvelo-color-primary-bg-subtle-dark: color-mix(
21
+ in oklab,
22
+ var(--sigvelo-color-primary-900),
23
+ white 1%
24
+ );
25
+ --sigvelo-color-primary-bg-muted-light: var(--sigvelo-color-primary-200);
26
+ --sigvelo-color-primary-bg-muted-dark: var(--sigvelo-color-primary-800);
27
+ --sigvelo-color-primary-bg-light: color-mix(
28
+ in oklab,
29
+ var(--sigvelo-color-primary-600),
30
+ black 12%
31
+ );
32
+ --sigvelo-color-primary-bg-dark: color-mix(in oklab, var(--sigvelo-color-primary-600), black 16%);
33
+ --sigvelo-color-primary-bg-strong-light: var(--sigvelo-color-primary-800);
34
+ --sigvelo-color-primary-bg-strong-dark: var(--sigvelo-color-primary-200);
35
+ --sigvelo-color-primary-bg-stronger-light: var(--sigvelo-color-primary-900);
36
+ --sigvelo-color-primary-bg-stronger-dark: var(--sigvelo-color-primary-100);
37
+ --sigvelo-color-primary-text-on-subtle-light: var(--sigvelo-color-primary-900);
38
+ --sigvelo-color-primary-text-on-subtle-dark: var(--sigvelo-color-primary-100);
39
+ --sigvelo-color-primary-text-on-bg-light: white;
40
+ --sigvelo-color-primary-text-on-bg-dark: white;
41
+ --sigvelo-color-primary-text-on-strong-light: white;
42
+ --sigvelo-color-primary-text-on-strong-dark: black;
43
+ --sigvelo-color-primary-text-light: color-mix(
44
+ in oklab,
45
+ var(--sigvelo-color-primary-600),
46
+ black 12.5%
47
+ );
48
+ --sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
49
+ --sigvelo-color-primary-border-subtle-light: color-mix(
50
+ in oklab,
51
+ var(--sigvelo-color-primary-100),
52
+ black 3%
53
+ );
54
+ --sigvelo-color-primary-border-subtle-dark: color-mix(
55
+ in oklab,
56
+ var(--sigvelo-color-primary-900),
57
+ white 7.5%
58
+ );
59
+ --sigvelo-color-primary-border-muted-light: var(--sigvelo-color-primary-300);
60
+ --sigvelo-color-primary-border-muted-dark: var(--sigvelo-color-primary-800);
61
+ --sigvelo-color-primary-border-light: var(--sigvelo-color-primary-500);
62
+ --sigvelo-color-primary-border-dark: var(--sigvelo-color-primary-600);
63
+ }
64
+
65
+ /* Red and rose collide with the danger seed, so both shift danger to amber. */
66
+ [data-preset="red"] {
67
+ --sigvelo-color-primary-seed: #ef5655;
68
+ --sigvelo-color-danger-seed: #e89a26;
69
+ }
70
+
71
+ [data-preset="orange"] {
72
+ --sigvelo-color-primary-seed: #f08039;
73
+ }
74
+
75
+ [data-preset="amber"] {
76
+ --sigvelo-color-primary-seed: #e89a26;
77
+ }
78
+
79
+ [data-preset="yellow"] {
80
+ --sigvelo-color-primary-seed: #dcb31e;
81
+ }
82
+
83
+ [data-preset="lime"] {
84
+ --sigvelo-color-primary-seed: #9abb28;
85
+ }
86
+
87
+ [data-preset="green"] {
88
+ --sigvelo-color-primary-seed: #5dbb55;
89
+ }
90
+
91
+ [data-preset="emerald"] {
92
+ --sigvelo-color-primary-seed: #47b873;
93
+ }
94
+
95
+ [data-preset="teal"] {
96
+ --sigvelo-color-primary-seed: #37b995;
97
+ }
98
+
99
+ [data-preset="cyan"] {
100
+ --sigvelo-color-primary-seed: #20b8bc;
101
+ }
102
+
103
+ [data-preset="sky"] {
104
+ --sigvelo-color-primary-seed: #1caedd;
105
+ }
106
+
107
+ [data-preset="blue"] {
108
+ --sigvelo-color-primary-seed: #4a97f4;
109
+ }
110
+
111
+ [data-preset="indigo"] {
112
+ --sigvelo-color-primary-seed: #6e85f8;
113
+ }
114
+
115
+ [data-preset="violet"] {
116
+ --sigvelo-color-primary-seed: #927cfb;
117
+ }
118
+
119
+ [data-preset="purple"] {
120
+ --sigvelo-color-primary-seed: #ae75f6;
121
+ }
122
+
123
+ [data-preset="fuchsia"] {
124
+ --sigvelo-color-primary-seed: #d26ae8;
125
+ }
126
+
127
+ [data-preset="pink"] {
128
+ --sigvelo-color-primary-seed: #e468b0;
129
+ }
130
+
131
+ [data-preset="rose"] {
132
+ --sigvelo-color-primary-seed: #ee6383;
133
+ --sigvelo-color-danger-seed: #e89a26;
134
+ }
135
+
136
+ [data-preset="slate"] {
137
+ --sigvelo-color-primary-seed: #848da0;
138
+ }
139
+
140
+ [data-preset="zinc"] {
141
+ --sigvelo-color-primary-seed: #8b8c93;
142
+ }
143
+
144
+ [data-preset="stone"] {
145
+ --sigvelo-color-primary-seed: #918c87;
146
+ }
package/src/elevation.css CHANGED
@@ -16,13 +16,13 @@
16
16
  /*
17
17
  * Frosted chrome over scrolling content.
18
18
  *
19
- * Held to a single 8px radius, which is what the reference bundles use and as
20
- * far as this can go without being felt. A backdrop filter repaints the whole
19
+ * Held to a single 1px radius, which separates modal chrome without making
20
+ * the page behind it look frosted. A backdrop filter repaints the whole
21
21
  * area behind the element every frame, so a wider radius or a second pass
22
22
  * such as saturate() on a full-viewport scrim costs frames on every dialog
23
23
  * open — measurably, not theoretically: at blur(24px) saturate(180%) the
24
24
  * Storybook suite dropped roughly a third of its runs to timing failures in
25
25
  * stories that had nothing to do with dialogs.
26
26
  */
27
- --sigvelo-glass-filter: blur(8px);
27
+ --sigvelo-glass-filter: blur(1px);
28
28
  }
package/src/semantic-colors.css CHANGED
@@ -6,65 +6,41 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --sigvelo-color-canvas-light: white;
10
- --sigvelo-color-canvas-dark: var(--sigvelo-color-neutral-950);
11
- --sigvelo-color-surface-light: white;
12
- --sigvelo-color-surface-dark: color-mix(in oklab, var(--sigvelo-color-neutral-950), white 2.5%);
13
- --sigvelo-color-text-light: var(--sigvelo-color-neutral-900);
14
- --sigvelo-color-text-dark: var(--sigvelo-color-neutral-200);
15
- --sigvelo-color-text-muted-light: var(--sigvelo-color-neutral-700);
16
- --sigvelo-color-text-muted-dark: var(--sigvelo-color-neutral-500);
17
- /* Two quieter rungs below muted, mixed toward the surface rather than
18
- picked off the neutral ramp so they stay correct on a tinted surface.
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
+ --sigvelo-color-surface-under-light: #f9f9f9;
14
+ --sigvelo-color-surface-under-dark: #000;
15
+ --sigvelo-color-surface-light: #fff;
16
+ --sigvelo-color-surface-dark: #181818;
17
+ --sigvelo-color-text-light: #0d0d0d;
18
+ --sigvelo-color-text-dark: #ececec;
19
+ --sigvelo-color-text-muted-light: #5d5d5d;
20
+ --sigvelo-color-text-muted-dark: #b4b4b4;
21
+ /* Two quieter rungs below muted, measured against the owning surface rather
22
+ than picked off the legacy neutral ramp.
19
23
  subtle: de-emphasized label text, still holds ~4.5:1 against its surface.
20
24
  faint: icons and resting affordances only — it clears the 3:1 needed for
21
25
  a graphic, not the 4.5:1 needed for body copy. */
22
- --sigvelo-color-text-subtle-light: color-mix(
23
- in oklab,
24
- var(--sigvelo-color-text-light),
25
- var(--sigvelo-color-surface-light) 28%
26
- );
27
- --sigvelo-color-text-subtle-dark: color-mix(
28
- in oklab,
29
- var(--sigvelo-color-text-dark),
30
- var(--sigvelo-color-surface-dark) 28%
31
- );
32
- --sigvelo-color-text-faint-light: color-mix(
33
- in oklab,
34
- var(--sigvelo-color-text-light),
35
- var(--sigvelo-color-surface-light) 55%
36
- );
37
- --sigvelo-color-text-faint-dark: color-mix(
38
- in oklab,
39
- var(--sigvelo-color-text-dark),
40
- var(--sigvelo-color-surface-dark) 55%
41
- );
26
+ --sigvelo-color-text-subtle-light: #737373;
27
+ --sigvelo-color-text-subtle-dark: #a6a6a6;
28
+ --sigvelo-color-text-faint-light: #8f8f8f;
29
+ --sigvelo-color-text-faint-dark: #8f8f8f;
42
30
  /* Surfaces that sit above the page. In light mode a raised card is the
43
31
  same white as the surface and is separated by shadow alone; in dark mode
44
32
  shadow does almost nothing, so the card lifts by getting lighter. */
45
- --sigvelo-color-surface-raised-light: var(--sigvelo-color-surface-light);
46
- --sigvelo-color-surface-raised-dark: color-mix(
47
- in oklab,
48
- var(--sigvelo-color-surface-dark),
49
- white 5%
50
- );
51
- --sigvelo-color-surface-sunken-light: color-mix(
52
- in oklab,
53
- var(--sigvelo-color-surface-light),
54
- var(--sigvelo-color-text-light) 3.5%
55
- );
56
- --sigvelo-color-surface-sunken-dark: color-mix(
57
- in oklab,
58
- var(--sigvelo-color-surface-dark),
59
- black 35%
60
- );
33
+ --sigvelo-color-surface-raised-light: #fff;
34
+ --sigvelo-color-surface-raised-dark: #282828;
35
+ --sigvelo-color-surface-sunken-light: #f9f9f9;
36
+ --sigvelo-color-surface-sunken-dark: #171717;
61
37
  /* Translucent counterpart of surface-raised, for panels that blur what is
62
38
  scrolling underneath. Pair with --sigvelo-glass-filter, and fall back to
63
39
  surface-raised where backdrop-filter is unavailable. */
64
40
  --sigvelo-color-surface-glass-light: color-mix(
65
41
  in oklab,
66
42
  var(--sigvelo-color-surface-raised-light),
67
- transparent 28%
43
+ transparent 20%
68
44
  );
69
45
  --sigvelo-color-surface-glass-dark: color-mix(
70
46
  in oklab,
@@ -77,11 +53,10 @@
77
53
  var(--sigvelo-color-focus-light);
78
54
  --sigvelo-focus-ring-dark: var(--sigvelo-border-style) var(--sigvelo-focus-width)
79
55
  var(--sigvelo-color-focus-dark);
80
- /* Paired with --sigvelo-glass-filter on dialog scrims. Blur does most of the
81
- separating, so the sheet itself stays light enough to keep the page behind
82
- it legible. */
83
- --sigvelo-color-backdrop-light: rgb(0 0 0 / 0.32);
84
- --sigvelo-color-backdrop-dark: rgb(0 0 0 / 0.45);
56
+ /* Paired with --sigvelo-glass-filter on dialog scrims. A pale tint and 1px
57
+ blur recede the page without turning it into a dark or frosted sheet. */
58
+ --sigvelo-color-backdrop-light: rgb(238 238 238 / 50%);
59
+ --sigvelo-color-backdrop-dark: rgb(0 0 0 / 50%);
85
60
  --sigvelo-color-selection-bg-light: var(--sigvelo-color-primary-300);
86
61
  --sigvelo-color-selection-bg-dark: var(--sigvelo-color-primary-700);
87
62
  --sigvelo-color-selection-text-light: var(--sigvelo-color-text-light);
@@ -94,16 +69,17 @@
94
69
  edge that survives zoom and keeps a shadowed surface from dissolving into
95
70
  the canvas when the shadow itself is nearly invisible. */
96
71
  --sigvelo-elevation-hairline-light: 0 0 0 var(--sigvelo-border-width-hairline)
97
- color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
72
+ color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
98
73
  --sigvelo-elevation-hairline-dark: 0 0 0 var(--sigvelo-border-width-hairline)
99
74
  color-mix(in oklab, transparent, white 10%);
100
- /* raised: rows, cards, anything one step off the page. */
75
+ /* raised: rows, cards, anything one step off the page. A broad, low-alpha
76
+ shadow separates the surface without drawing a dark line beneath it. */
101
77
  --sigvelo-elevation-raised-light:
102
78
  var(--sigvelo-elevation-hairline-light),
103
- 0 1px 2px -1px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 8%);
79
+ 0 0 15px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 3%);
104
80
  --sigvelo-elevation-raised-dark:
105
81
  var(--sigvelo-elevation-hairline-dark),
106
- 0 1px 2px -1px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 40%);
82
+ 0 0 15px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 3%);
107
83
  /* floating: composers and toolbars that hover over scrolling content. The
108
84
  wide spread-free ambient layer is what reads as "off the page" rather
109
85
  than "outlined". */
@@ -116,110 +92,56 @@
116
92
  0 3px 7.5px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 32%),
117
93
  0 0 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 28%);
118
94
  /* overlay: popovers, menus, dialogs — detached from the page entirely. */
119
- --sigvelo-elevation-overlay-light:
120
- var(--sigvelo-elevation-hairline-light),
121
- 0 8px 16px -4px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 12%),
122
- 0 16px 32px -8px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 19%);
123
- --sigvelo-elevation-overlay-dark:
124
- var(--sigvelo-elevation-hairline-dark),
125
- 0 8px 16px -4px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 44%),
126
- 0 16px 32px -8px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 56%);
127
- --sigvelo-color-primary-bg-subtle-light: var(--sigvelo-color-primary-100);
128
- --sigvelo-color-primary-bg-subtle-dark: color-mix(
129
- in oklab,
130
- var(--sigvelo-color-primary-900),
131
- white 1%
132
- );
133
- --sigvelo-color-primary-bg-muted-light: var(--sigvelo-color-primary-200);
134
- --sigvelo-color-primary-bg-muted-dark: var(--sigvelo-color-primary-800);
135
- --sigvelo-color-primary-bg-light: color-mix(
136
- in oklab,
137
- var(--sigvelo-color-primary-600),
138
- black 2.5%
139
- );
140
- --sigvelo-color-primary-bg-dark: color-mix(
141
- in oklab,
142
- var(--sigvelo-color-primary-600),
143
- black 7.5%
144
- );
145
- --sigvelo-color-primary-bg-strong-light: var(--sigvelo-color-primary-800);
146
- --sigvelo-color-primary-bg-strong-dark: var(--sigvelo-color-primary-200);
147
- --sigvelo-color-primary-bg-stronger-light: var(--sigvelo-color-primary-900);
148
- --sigvelo-color-primary-bg-stronger-dark: var(--sigvelo-color-primary-100);
149
- --sigvelo-color-primary-text-on-subtle-light: var(--sigvelo-color-primary-900);
150
- --sigvelo-color-primary-text-on-subtle-dark: var(--sigvelo-color-primary-100);
151
- --sigvelo-color-primary-text-on-bg-light: white;
152
- --sigvelo-color-primary-text-on-bg-dark: white;
153
- --sigvelo-color-primary-text-on-strong-light: white;
154
- --sigvelo-color-primary-text-on-strong-dark: black;
155
- --sigvelo-color-primary-text-light: color-mix(
156
- in oklab,
157
- var(--sigvelo-color-primary-600),
158
- black 12.5%
159
- );
160
- --sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
161
- --sigvelo-color-primary-border-subtle-light: color-mix(
162
- in oklab,
163
- var(--sigvelo-color-primary-100),
164
- black 3%
165
- );
166
- --sigvelo-color-primary-border-subtle-dark: color-mix(
167
- in oklab,
168
- var(--sigvelo-color-primary-900),
169
- white 7.5%
170
- );
171
- --sigvelo-color-primary-border-muted-light: var(--sigvelo-color-primary-300);
172
- --sigvelo-color-primary-border-muted-dark: var(--sigvelo-color-primary-800);
173
- --sigvelo-color-primary-border-light: var(--sigvelo-color-primary-500);
174
- --sigvelo-color-primary-border-dark: var(--sigvelo-color-primary-600);
175
- --sigvelo-color-neutral-bg-subtle-light: var(--sigvelo-color-neutral-100);
176
- --sigvelo-color-neutral-bg-subtle-dark: color-mix(
177
- in oklab,
178
- var(--sigvelo-color-neutral-900),
179
- white 1%
180
- );
181
- --sigvelo-color-neutral-bg-muted-light: var(--sigvelo-color-neutral-200);
182
- --sigvelo-color-neutral-bg-muted-dark: var(--sigvelo-color-neutral-800);
183
- --sigvelo-color-neutral-bg-light: color-mix(
184
- in oklab,
185
- var(--sigvelo-color-neutral-600),
186
- black 2.5%
187
- );
188
- --sigvelo-color-neutral-bg-dark: color-mix(
189
- in oklab,
190
- var(--sigvelo-color-neutral-600),
191
- black 7.5%
192
- );
193
- --sigvelo-color-neutral-bg-strong-light: var(--sigvelo-color-neutral-800);
194
- --sigvelo-color-neutral-bg-strong-dark: var(--sigvelo-color-neutral-200);
195
- --sigvelo-color-neutral-bg-stronger-light: var(--sigvelo-color-neutral-900);
196
- --sigvelo-color-neutral-bg-stronger-dark: var(--sigvelo-color-neutral-100);
197
- --sigvelo-color-neutral-text-on-subtle-light: var(--sigvelo-color-neutral-900);
198
- --sigvelo-color-neutral-text-on-subtle-dark: var(--sigvelo-color-neutral-100);
199
- --sigvelo-color-neutral-text-on-bg-light: white;
200
- --sigvelo-color-neutral-text-on-bg-dark: white;
201
- --sigvelo-color-neutral-text-on-strong-light: white;
202
- --sigvelo-color-neutral-text-on-strong-dark: black;
203
- --sigvelo-color-neutral-text-light: color-mix(
204
- in oklab,
205
- var(--sigvelo-color-neutral-600),
206
- black 12.5%
207
- );
208
- --sigvelo-color-neutral-text-dark: var(--sigvelo-color-neutral-500);
209
- --sigvelo-color-neutral-border-subtle-light: color-mix(
210
- in oklab,
211
- var(--sigvelo-color-neutral-200),
212
- transparent 40%
213
- );
214
- --sigvelo-color-neutral-border-subtle-dark: color-mix(
215
- in oklab,
216
- var(--sigvelo-color-neutral-900),
217
- white 4%
218
- );
219
- --sigvelo-color-neutral-border-muted-light: var(--sigvelo-color-neutral-300);
220
- --sigvelo-color-neutral-border-muted-dark: var(--sigvelo-color-neutral-800);
221
- --sigvelo-color-neutral-border-light: var(--sigvelo-color-neutral-500);
222
- --sigvelo-color-neutral-border-dark: var(--sigvelo-color-neutral-600);
95
+ --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 8px 12px rgb(0 0 0 / 8%);
96
+ --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 8px 16px rgb(0 0 0 / 35%);
97
+ --sigvelo-color-primary-bg-subtle-light: #f9f9f9;
98
+ --sigvelo-color-primary-bg-subtle-dark: #2f2f2f;
99
+ --sigvelo-color-primary-bg-muted-light: #ececec;
100
+ --sigvelo-color-primary-bg-muted-dark: #424242;
101
+ --sigvelo-color-primary-bg-light: #0d0d0d;
102
+ --sigvelo-color-primary-bg-dark: #fff;
103
+ --sigvelo-color-primary-bg-strong-light: #000;
104
+ --sigvelo-color-primary-bg-strong-dark: #fff;
105
+ --sigvelo-color-primary-bg-stronger-light: #000;
106
+ --sigvelo-color-primary-bg-stronger-dark: #fff;
107
+ --sigvelo-color-primary-text-on-subtle-light: #0d0d0d;
108
+ --sigvelo-color-primary-text-on-subtle-dark: #ececec;
109
+ --sigvelo-color-primary-text-on-bg-light: #fff;
110
+ --sigvelo-color-primary-text-on-bg-dark: #0d0d0d;
111
+ --sigvelo-color-primary-text-on-strong-light: #fff;
112
+ --sigvelo-color-primary-text-on-strong-dark: #0d0d0d;
113
+ --sigvelo-color-primary-text-light: #0d0d0d;
114
+ --sigvelo-color-primary-text-dark: #ececec;
115
+ --sigvelo-color-primary-border-subtle-light: rgb(0 0 0 / 5%);
116
+ --sigvelo-color-primary-border-subtle-dark: rgb(255 255 255 / 10%);
117
+ --sigvelo-color-primary-border-muted-light: rgb(0 0 0 / 10%);
118
+ --sigvelo-color-primary-border-muted-dark: rgb(255 255 255 / 15%);
119
+ --sigvelo-color-primary-border-light: #0d0d0d;
120
+ --sigvelo-color-primary-border-dark: #ececec;
121
+ --sigvelo-color-neutral-bg-subtle-light: rgb(0 0 0 / 5%);
122
+ --sigvelo-color-neutral-bg-subtle-dark: rgb(255 255 255 / 8%);
123
+ --sigvelo-color-neutral-bg-muted-light: #ececec;
124
+ --sigvelo-color-neutral-bg-muted-dark: #424242;
125
+ --sigvelo-color-neutral-bg-light: #5d5d5d;
126
+ --sigvelo-color-neutral-bg-dark: #b4b4b4;
127
+ --sigvelo-color-neutral-bg-strong-light: #333;
128
+ --sigvelo-color-neutral-bg-strong-dark: #ececec;
129
+ --sigvelo-color-neutral-bg-stronger-light: #0d0d0d;
130
+ --sigvelo-color-neutral-bg-stronger-dark: #fff;
131
+ --sigvelo-color-neutral-text-on-subtle-light: #0d0d0d;
132
+ --sigvelo-color-neutral-text-on-subtle-dark: #ececec;
133
+ --sigvelo-color-neutral-text-on-bg-light: #fff;
134
+ --sigvelo-color-neutral-text-on-bg-dark: #0d0d0d;
135
+ --sigvelo-color-neutral-text-on-strong-light: #fff;
136
+ --sigvelo-color-neutral-text-on-strong-dark: #0d0d0d;
137
+ --sigvelo-color-neutral-text-light: #5d5d5d;
138
+ --sigvelo-color-neutral-text-dark: #b4b4b4;
139
+ --sigvelo-color-neutral-border-subtle-light: rgb(0 0 0 / 5%);
140
+ --sigvelo-color-neutral-border-subtle-dark: rgb(255 255 255 / 10%);
141
+ --sigvelo-color-neutral-border-muted-light: rgb(0 0 0 / 10%);
142
+ --sigvelo-color-neutral-border-muted-dark: rgb(255 255 255 / 15%);
143
+ --sigvelo-color-neutral-border-light: #5d5d5d;
144
+ --sigvelo-color-neutral-border-dark: #b4b4b4;
223
145
  --sigvelo-color-success-bg-subtle-light: var(--sigvelo-color-success-100);
224
146
  --sigvelo-color-success-bg-subtle-dark: color-mix(
225
147
  in oklab,
package/src/spacing.css CHANGED
@@ -46,8 +46,8 @@
46
46
  --sigvelo-control-text-xs: 0.75rem;
47
47
  --sigvelo-control-text-sm: 0.8125rem;
48
48
  --sigvelo-control-text-md: 0.875rem;
49
- --sigvelo-control-text-lg: 1rem;
50
- --sigvelo-control-text-xl: 1.125rem;
49
+ --sigvelo-control-text-lg: 0.875rem;
50
+ --sigvelo-control-text-xl: 0.875rem;
51
51
 
52
52
  /* The leading that belongs to each of those sizes, from the type ramp's
53
53
  whole-pixel partners. A ratio applied to a size that is itself a variable
@@ -58,15 +58,15 @@
58
58
  --sigvelo-control-line-height-xs: var(--sigvelo-text-xs-leading); /* 16px */
59
59
  --sigvelo-control-line-height-sm: var(--sigvelo-text-compact-leading); /* 18px */
60
60
  --sigvelo-control-line-height-md: var(--sigvelo-text-sm-leading); /* 20px */
61
- --sigvelo-control-line-height-lg: var(--sigvelo-text-base-leading); /* 24px */
62
- --sigvelo-control-line-height-xl: var(--sigvelo-text-lg-leading); /* 28px */
61
+ --sigvelo-control-line-height-lg: var(--sigvelo-text-sm-leading); /* 20px */
62
+ --sigvelo-control-line-height-xl: var(--sigvelo-text-sm-leading); /* 20px */
63
63
 
64
64
  /* Canonical control geometry derived from the public size scale. */
65
65
  --sigvelo-control-padding-inline-xs: var(--sigvelo-spacing-2);
66
66
  --sigvelo-control-padding-inline-sm: var(--sigvelo-spacing-2-5);
67
67
  --sigvelo-control-padding-inline-md: var(--sigvelo-spacing-3);
68
68
  --sigvelo-control-padding-inline-lg: var(--sigvelo-spacing-4);
69
- --sigvelo-control-padding-inline-xl: var(--sigvelo-spacing-5);
69
+ --sigvelo-control-padding-inline-xl: var(--sigvelo-spacing-4);
70
70
 
71
71
  /* Icons ride the type ramp rather than a scale of their own: a glyph beside
72
72
  a label should be the size of the label, not a nearby round number. */
package/src/style-presets.css ADDED
@@ -0,0 +1,196 @@
1
+ /*
2
+ * Style Presets
3
+ *
4
+ * Opt-in design-language presets, activated by a data-style attribute on the
5
+ * root or any subtree. Each one re-points shape, elevation, typography,
6
+ * density, and focus tokens to evoke a familiar system — the component CSS
7
+ * never changes. Without the attribute everything keeps its defaults.
8
+ *
9
+ * Every preset pins --sigvelo-radius-scale and --sigvelo-corner-shape back to
10
+ * their unscaled round values: the radii below are exact by design, and the
11
+ * squircle compensation in borders.css would distort them.
12
+ *
13
+ * Deliberately not part of index.css: import
14
+ * "@mcp-b/design-tokens/style-presets" after the main tokens to opt in.
15
+ */
16
+
17
+ /* Clean — Radix / shadcn. Balanced radii, system font, understated depth. */
18
+ [data-style="clean"] {
19
+ --sigvelo-radius-scale: 1;
20
+ --sigvelo-corner-shape: round;
21
+ --sigvelo-radius-xs-base: 0.125rem; /* 2px */
22
+ --sigvelo-radius-sm-base: 0.25rem; /* 4px */
23
+ --sigvelo-radius-md-base: 0.375rem; /* 6px */
24
+ --sigvelo-radius-lg-base: 0.5rem; /* 8px */
25
+ --sigvelo-radius-xl-base: 0.75rem; /* 12px */
26
+ --sigvelo-radius-2xl-base: 1rem; /* 16px */
27
+ --sigvelo-radius-3xl-base: 1.25rem; /* 20px */
28
+
29
+ --sigvelo-elevation-raised-light:
30
+ var(--sigvelo-elevation-hairline-light), 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
31
+ --sigvelo-elevation-raised-dark:
32
+ var(--sigvelo-elevation-hairline-dark), 0 1px 3px rgb(0 0 0 / 24%), 0 1px 2px rgb(0 0 0 / 12%);
33
+ --sigvelo-elevation-floating-light:
34
+ var(--sigvelo-elevation-hairline-light), 0 2px 8px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
35
+ --sigvelo-elevation-floating-dark:
36
+ var(--sigvelo-elevation-hairline-dark), 0 2px 8px rgb(0 0 0 / 28%), 0 1px 2px rgb(0 0 0 / 14%);
37
+ --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 4px 16px rgb(0 0 0 / 12%);
38
+ --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 4px 16px rgb(0 0 0 / 35%);
39
+
40
+ --sigvelo-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
41
+ --sigvelo-font-weight-semibold: 500;
42
+
43
+ --sigvelo-control-height-xs: var(--sigvelo-spacing-6); /* 24px */
44
+ --sigvelo-control-height-sm: var(--sigvelo-spacing-8); /* 32px */
45
+ --sigvelo-control-height-md: var(--sigvelo-spacing-10); /* 40px */
46
+ --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
47
+ --sigvelo-control-height-xl: var(--sigvelo-spacing-14); /* 56px */
48
+
49
+ --sigvelo-focus-width: 2px;
50
+ --sigvelo-focus-offset: 2px;
51
+ }
52
+
53
+ /* Material — Material Design 3. Expressive radii, elevation does the work. */
54
+ [data-style="material"] {
55
+ --sigvelo-radius-scale: 1;
56
+ --sigvelo-corner-shape: round;
57
+ --sigvelo-radius-xs-base: 0.25rem; /* 4px */
58
+ --sigvelo-radius-sm-base: 0.5rem; /* 8px */
59
+ --sigvelo-radius-md-base: 0.75rem; /* 12px */
60
+ --sigvelo-radius-lg-base: 1rem; /* 16px */
61
+ --sigvelo-radius-xl-base: 1.75rem; /* 28px */
62
+ --sigvelo-radius-2xl-base: 1.75rem; /* 28px */
63
+ --sigvelo-radius-3xl-base: 1.75rem; /* 28px */
64
+
65
+ --sigvelo-elevation-raised-light: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
66
+ --sigvelo-elevation-raised-dark:
67
+ var(--sigvelo-elevation-hairline-dark), 0 1px 2px rgb(0 0 0 / 30%),
68
+ 0 2px 6px 2px rgb(0 0 0 / 15%);
69
+ --sigvelo-elevation-floating-light: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
70
+ --sigvelo-elevation-floating-dark:
71
+ var(--sigvelo-elevation-hairline-dark), 0 4px 8px 3px rgb(0 0 0 / 15%),
72
+ 0 1px 3px rgb(0 0 0 / 30%);
73
+ --sigvelo-elevation-overlay-light: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);
74
+ --sigvelo-elevation-overlay-dark:
75
+ 0 0 1px rgb(255 255 255 / 14%), 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);
76
+
77
+ --sigvelo-font-sans: Roboto, "Google Sans", system-ui, sans-serif;
78
+ --sigvelo-font-weight-semibold: 500;
79
+
80
+ --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
81
+ --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
82
+ --sigvelo-control-height-md: var(--sigvelo-spacing-11); /* 44px */
83
+ --sigvelo-control-height-lg: var(--sigvelo-spacing-14); /* 56px */
84
+ --sigvelo-control-height-xl: var(--sigvelo-spacing-16); /* 64px */
85
+
86
+ --sigvelo-focus-width: 3px;
87
+ --sigvelo-focus-offset: 2px;
88
+ }
89
+
90
+ /* Fluent — Fluent UI. Restrained radii, compact density, Segoe UI. */
91
+ [data-style="fluent"] {
92
+ --sigvelo-radius-scale: 1;
93
+ --sigvelo-corner-shape: round;
94
+ --sigvelo-radius-xs-base: 0.125rem; /* 2px */
95
+ --sigvelo-radius-sm-base: 0.25rem; /* 4px */
96
+ --sigvelo-radius-md-base: 0.25rem; /* 4px */
97
+ --sigvelo-radius-lg-base: 0.5rem; /* 8px */
98
+ --sigvelo-radius-xl-base: 0.75rem; /* 12px */
99
+ --sigvelo-radius-2xl-base: 1rem; /* 16px */
100
+ --sigvelo-radius-3xl-base: 1rem; /* 16px */
101
+
102
+ --sigvelo-elevation-raised-light: 0 1.6px 3.6px rgb(0 0 0 / 13%), 0 0.3px 0.9px rgb(0 0 0 / 11%);
103
+ --sigvelo-elevation-raised-dark:
104
+ var(--sigvelo-elevation-hairline-dark), 0 1.6px 3.6px rgb(0 0 0 / 13%),
105
+ 0 0.3px 0.9px rgb(0 0 0 / 11%);
106
+ --sigvelo-elevation-floating-light:
107
+ 0 3.2px 7.2px rgb(0 0 0 / 13%), 0 0.6px 1.8px rgb(0 0 0 / 11%);
108
+ --sigvelo-elevation-floating-dark:
109
+ var(--sigvelo-elevation-hairline-dark), 0 3.2px 7.2px rgb(0 0 0 / 13%),
110
+ 0 0.6px 1.8px rgb(0 0 0 / 11%);
111
+ --sigvelo-elevation-overlay-light:
112
+ 0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%);
113
+ --sigvelo-elevation-overlay-dark:
114
+ 0 0 1px rgb(255 255 255 / 14%), 0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%);
115
+
116
+ --sigvelo-font-sans: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
117
+ --sigvelo-font-weight-semibold: 600;
118
+
119
+ --sigvelo-control-height-xs: var(--sigvelo-spacing-6); /* 24px */
120
+ --sigvelo-control-height-sm: var(--sigvelo-spacing-7); /* 28px */
121
+ --sigvelo-control-height-md: var(--sigvelo-spacing-8); /* 32px */
122
+ --sigvelo-control-height-lg: var(--sigvelo-spacing-10); /* 40px */
123
+ --sigvelo-control-height-xl: var(--sigvelo-spacing-12); /* 48px */
124
+
125
+ --sigvelo-focus-width: 2px;
126
+ --sigvelo-focus-offset: 1px;
127
+ }
128
+
129
+ /* Base — Base UI. Sharp edges, hairline separation, zero decoration. */
130
+ [data-style="base"] {
131
+ --sigvelo-radius-scale: 1;
132
+ --sigvelo-corner-shape: round;
133
+ --sigvelo-radius-xs-base: 0px;
134
+ --sigvelo-radius-sm-base: 0px;
135
+ --sigvelo-radius-md-base: 0px;
136
+ --sigvelo-radius-lg-base: 0px;
137
+ --sigvelo-radius-xl-base: 0px;
138
+ --sigvelo-radius-2xl-base: 0px;
139
+ --sigvelo-radius-3xl-base: 0px;
140
+
141
+ /* Shadowless: surfaces separate by ring alone, overlays by a full outline. */
142
+ --sigvelo-elevation-raised-light: var(--sigvelo-elevation-hairline-light);
143
+ --sigvelo-elevation-raised-dark: var(--sigvelo-elevation-hairline-dark);
144
+ --sigvelo-elevation-floating-light: var(--sigvelo-elevation-hairline-light);
145
+ --sigvelo-elevation-floating-dark: var(--sigvelo-elevation-hairline-dark);
146
+ --sigvelo-elevation-overlay-light: 0 0 0 1px rgb(0 0 0 / 15%);
147
+ --sigvelo-elevation-overlay-dark: 0 0 0 1px rgb(255 255 255 / 20%);
148
+
149
+ --sigvelo-font-sans: system-ui, sans-serif;
150
+ --sigvelo-font-weight-semibold: 500;
151
+
152
+ --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
153
+ --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
154
+ --sigvelo-control-height-md: var(--sigvelo-spacing-10); /* 40px */
155
+ --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
156
+ --sigvelo-control-height-xl: var(--sigvelo-spacing-14); /* 56px */
157
+
158
+ --sigvelo-focus-width: 2px;
159
+ --sigvelo-focus-offset: 2px;
160
+ }
161
+
162
+ /* Playful — generous radii, bold type, warm prominent shadows. */
163
+ [data-style="playful"] {
164
+ --sigvelo-radius-scale: 1;
165
+ --sigvelo-corner-shape: round;
166
+ --sigvelo-radius-xs-base: 0.25rem; /* 4px */
167
+ --sigvelo-radius-sm-base: 0.5rem; /* 8px */
168
+ --sigvelo-radius-md-base: 0.5rem; /* 8px */
169
+ --sigvelo-radius-lg-base: 1rem; /* 16px */
170
+ --sigvelo-radius-xl-base: 1.25rem; /* 20px */
171
+ --sigvelo-radius-2xl-base: 1.5rem; /* 24px */
172
+ --sigvelo-radius-3xl-base: 1.75rem; /* 28px */
173
+
174
+ --sigvelo-elevation-raised-light:
175
+ var(--sigvelo-elevation-hairline-light), 0 4px 8px rgb(0 0 0 / 8%);
176
+ --sigvelo-elevation-raised-dark:
177
+ var(--sigvelo-elevation-hairline-dark), 0 4px 8px rgb(0 0 0 / 24%);
178
+ --sigvelo-elevation-floating-light:
179
+ var(--sigvelo-elevation-hairline-light), 0 6px 20px rgb(0 0 0 / 10%);
180
+ --sigvelo-elevation-floating-dark:
181
+ var(--sigvelo-elevation-hairline-dark), 0 6px 20px rgb(0 0 0 / 30%);
182
+ --sigvelo-elevation-overlay-light: 0 0 1px rgb(0 0 0 / 62%), 0 10px 30px rgb(0 0 0 / 14%);
183
+ --sigvelo-elevation-overlay-dark: 0 0 1px rgb(255 255 255 / 14%), 0 10px 30px rgb(0 0 0 / 40%);
184
+
185
+ --sigvelo-font-sans: "Figtree", "Poppins", system-ui, sans-serif;
186
+ --sigvelo-font-weight-semibold: 600;
187
+
188
+ --sigvelo-control-height-xs: var(--sigvelo-spacing-7); /* 28px */
189
+ --sigvelo-control-height-sm: var(--sigvelo-spacing-9); /* 36px */
190
+ --sigvelo-control-height-md: var(--sigvelo-spacing-11); /* 44px */
191
+ --sigvelo-control-height-lg: var(--sigvelo-spacing-12); /* 48px */
192
+ --sigvelo-control-height-xl: var(--sigvelo-spacing-16); /* 64px */
193
+
194
+ --sigvelo-focus-width: 3px;
195
+ --sigvelo-focus-offset: 2px;
196
+ }
package/src/themes.css CHANGED
@@ -8,6 +8,7 @@
8
8
  :root {
9
9
  color-scheme: light dark;
10
10
  --sigvelo-color-canvas: var(--sigvelo-color-canvas-light);
11
+ --sigvelo-color-surface-under: var(--sigvelo-color-surface-under-light);
11
12
  --sigvelo-color-surface: var(--sigvelo-color-surface-light);
12
13
  --sigvelo-color-surface-raised: var(--sigvelo-color-surface-raised-light);
13
14
  --sigvelo-color-surface-sunken: var(--sigvelo-color-surface-sunken-light);
@@ -92,6 +93,7 @@
92
93
  @media (prefers-color-scheme: dark) {
93
94
  :root {
94
95
  --sigvelo-color-canvas: var(--sigvelo-color-canvas-dark);
96
+ --sigvelo-color-surface-under: var(--sigvelo-color-surface-under-dark);
95
97
  --sigvelo-color-surface: var(--sigvelo-color-surface-dark);
96
98
  --sigvelo-color-surface-raised: var(--sigvelo-color-surface-raised-dark);
97
99
  --sigvelo-color-surface-sunken: var(--sigvelo-color-surface-sunken-dark);
@@ -175,6 +177,7 @@
175
177
  [data-theme="light"] {
176
178
  color-scheme: light;
177
179
  --sigvelo-color-canvas: var(--sigvelo-color-canvas-light);
180
+ --sigvelo-color-surface-under: var(--sigvelo-color-surface-under-light);
178
181
  --sigvelo-color-surface: var(--sigvelo-color-surface-light);
179
182
  --sigvelo-color-surface-raised: var(--sigvelo-color-surface-raised-light);
180
183
  --sigvelo-color-surface-sunken: var(--sigvelo-color-surface-sunken-light);
@@ -258,6 +261,7 @@
258
261
  [data-theme="dark"] {
259
262
  color-scheme: dark;
260
263
  --sigvelo-color-canvas: var(--sigvelo-color-canvas-dark);
264
+ --sigvelo-color-surface-under: var(--sigvelo-color-surface-under-dark);
261
265
  --sigvelo-color-surface: var(--sigvelo-color-surface-dark);
262
266
  --sigvelo-color-surface-raised: var(--sigvelo-color-surface-raised-dark);
263
267
  --sigvelo-color-surface-sunken: var(--sigvelo-color-surface-sunken-dark);
@@ -347,6 +351,10 @@
347
351
  var(--sigvelo-color-canvas-light),
348
352
  var(--sigvelo-color-canvas-dark)
349
353
  );
354
+ --sigvelo-color-surface-under: light-dark(
355
+ var(--sigvelo-color-surface-under-light),
356
+ var(--sigvelo-color-surface-under-dark)
357
+ );
350
358
  --sigvelo-color-surface: light-dark(
351
359
  var(--sigvelo-color-surface-light),
352
360
  var(--sigvelo-color-surface-dark)
package/src/typography.css CHANGED
@@ -3,7 +3,9 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --sigvelo-font-sans: system-ui, sans-serif;
6
+ --sigvelo-font-sans:
7
+ -apple-system-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
8
+ Arial, sans-serif;
7
9
  --sigvelo-font-heading: var(--sigvelo-font-sans);
8
10
  --sigvelo-font-mono:
9
11
  SFMono-Regular, Consolas, Menlo, Monaco, "liberation mono", "Courier New", monospace;
@@ -35,7 +37,7 @@
35
37
  --sigvelo-text-lg: 1.125rem;
36
38
  --sigvelo-text-xl: 1.25rem;
37
39
  --sigvelo-text-2xl: 1.5rem;
38
- --sigvelo-text-3xl: 1.875rem;
40
+ --sigvelo-text-3xl: 1.75rem;
39
41
  --sigvelo-text-4xl: 2.25rem;
40
42
  --sigvelo-text-5xl: 3rem;
41
43