@mcp-b/design-tokens 0.22.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 (3) hide show
  1. package/package.json +5 -1
  2. package/src/color-presets.css +146 -0
  3. package/src/style-presets.css +196 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/design-tokens",
3
- "version": "0.22.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/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
+ }