@staffbase/design 20.4.0 → 21.2.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 (13) hide show
  1. package/codemods/v21-migrate-toggle/README.md +52 -0
  2. package/codemods/v21-migrate-toggle/transform.js +99 -0
  3. package/dist/components.css +1 -1
  4. package/dist/main.cjs +137 -157
  5. package/dist/main.cjs.map +1 -1
  6. package/dist/main.d.ts +72 -111
  7. package/dist/main.js +137 -154
  8. package/dist/main.js.map +1 -1
  9. package/dist/theme.css +4 -1
  10. package/dist/tokens/component.css +4 -3
  11. package/dist/tokens/primitive.css +9 -16
  12. package/dist/tokens/semantic.css +50 -46
  13. package/package.json +6 -8
package/dist/theme.css CHANGED
@@ -173,6 +173,9 @@ limitations under the License.
173
173
  --background-color-neutral-medium: var(--sb-background-color-neutral-medium);
174
174
  --background-color-neutral-medium-hover: var(--sb-background-color-neutral-medium-hover);
175
175
  --background-color-neutral-medium-pressed: var(--sb-background-color-neutral-medium-pressed);
176
+ --background-color-neutral-weak: var(--sb-background-color-neutral-weak);
177
+ --background-color-neutral-weak-hover: var(--sb-background-color-neutral-weak-hover);
178
+ --background-color-neutral-weak-pressed: var(--sb-background-color-neutral-weak-pressed);
176
179
  --background-color-neutral-base: var(--sb-background-color-neutral-base);
177
180
  --background-color-neutral-base-hover: var(--sb-background-color-neutral-base-hover);
178
181
  --background-color-neutral-base-pressed: var(--sb-background-color-neutral-base-pressed);
@@ -407,7 +410,7 @@ limitations under the License.
407
410
 
408
411
  /* Fonts */
409
412
  --font-*: initial;
410
- --font-default: var(--sb-font-family-default);
413
+ --font-sans: var(--sb-font-family-sans);
411
414
  --font-display: var(--sb-font-family-display);
412
415
 
413
416
  /* Font weights */
package/dist/tokens/component.css CHANGED
@@ -14,12 +14,15 @@ limitations under the License.
14
14
  * Do not edit directly, this file was auto-generated.
15
15
  */
16
16
 
17
- :root, :host {
17
+ :root,
18
+ :host {
18
19
  --sb-button-border-radius-primary: var(--sb-radius-md);
19
20
  --sb-button-border-radius-neutral: var(--sb-radius-md);
20
21
  --sb-button-border-radius-critical: var(--sb-radius-md);
21
22
  --sb-badge-text-color-critical: var(--sb-text-color-critical-inverse);
23
+ --sb-badge-text-color-primary: var(--sb-text-color-primary-inverse);
22
24
  --sb-badge-background-color-critical: var(--sb-background-color-critical-vivid);
25
+ --sb-button-text-color-solid-primary: var(--sb-text-color-primary-inverse);
23
26
  --sb-button-text-color-solid-neutral: var(--sb-text-color-neutral-strong);
24
27
  --sb-button-text-color-solid-critical: var(--sb-text-color-critical-inverse);
25
28
  --sb-button-text-color-outline-neutral: var(--sb-text-color-neutral-strong);
@@ -42,9 +45,7 @@ limitations under the License.
42
45
  --sb-button-background-color-ghost-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
43
46
  --sb-button-border-color-outline-neutral: var(--sb-border-color-neutral-medium);
44
47
  --sb-button-border-color-outline-critical: var(--sb-border-color-critical);
45
- --sb-badge-text-color-primary: var(--sb-text-color-primary-inverse);
46
48
  --sb-badge-background-color-primary: var(--sb-background-color-primary-vivid);
47
- --sb-button-text-color-solid-primary: var(--sb-text-color-primary-inverse);
48
49
  --sb-button-text-color-outline-primary: var(--sb-text-color-primary-vivid);
49
50
  --sb-button-text-color-ghost-primary: var(--sb-text-color-primary-vivid);
50
51
  --sb-button-background-color-solid-primary: var(--sb-background-color-primary-vivid);
package/dist/tokens/primitive.css CHANGED
@@ -14,7 +14,8 @@ limitations under the License.
14
14
  * Do not edit directly, this file was auto-generated.
15
15
  */
16
16
 
17
- :root, :host {
17
+ :root,
18
+ :host {
18
19
  --sb-color-black: oklch(0 0 0);
19
20
  --sb-color-white: oklch(1 0 0);
20
21
  --sb-color-blue-25: oklch(0.9835 0.0079 253.85);
@@ -43,7 +44,7 @@ limitations under the License.
43
44
  --sb-color-cyan-950: oklch(0.2123 0.0365 191.66);
44
45
  --sb-color-green-25: oklch(0.9792 0.0311 157.21);
45
46
  --sb-color-green-50: oklch(0.942 0.0573 155.96);
46
- --sb-color-green-100: oklch(0.8926 0.1486 152.95);
47
+ --sb-color-green-100: oklch(0.9007 0.1089 154.47);
47
48
  --sb-color-green-200: oklch(0.836 0.1622 152.29);
48
49
  --sb-color-green-300: oklch(0.7248 0.220256 146.1938);
49
50
  --sb-color-green-400: oklch(0.6729 0.2043 146.22);
@@ -102,18 +103,6 @@ limitations under the License.
102
103
  --sb-color-red-800: oklch(0.434 0.1764 26);
103
104
  --sb-color-red-900: oklch(0.326 0.132 24.66);
104
105
  --sb-color-red-950: oklch(0.2274 0.0916 21.7);
105
- --sb-color-sbBlue-25: oklch(0.9835 0.0079 253.85);
106
- --sb-color-sbBlue-50: oklch(0.9479 0.0251 255.56);
107
- --sb-color-sbBlue-100: oklch(0.9098 0.044 256.79);
108
- --sb-color-sbBlue-200: oklch(0.8551 0.0723 256.23);
109
- --sb-color-sbBlue-300: oklch(0.7469 0.1317 256.33);
110
- --sb-color-sbBlue-400: oklch(0.6974 0.1605 256.52);
111
- --sb-color-sbBlue-500: oklch(0.6388 0.1952 257.61);
112
- --sb-color-sbBlue-600: oklch(0.5749 0.233917 259.9541);
113
- --sb-color-sbBlue-700: oklch(0.5188 0.208265 259.698);
114
- --sb-color-sbBlue-800: oklch(0.418 0.16526 259.4015);
115
- --sb-color-sbBlue-900: oklch(0.3163 0.1179 258.16);
116
- --sb-color-sbBlue-950: oklch(0.218 0.0736 255.69);
117
106
  --sb-color-teal-25: oklch(0.9793 0.0285 177.76);
118
107
  --sb-color-teal-50: oklch(0.9353 0.0949 175.03);
119
108
  --sb-color-teal-100: oklch(0.8882 0.1806 166.67);
@@ -158,8 +147,12 @@ limitations under the License.
158
147
  --sb-radius-md: 0.375rem;
159
148
  --sb-radius-lg: 0.5rem;
160
149
  --sb-radius-xl: 1rem;
161
- --sb-font-family-default: 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
162
- --sb-font-family-display: 'Epilogue', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
150
+ --sb-font-family-sans:
151
+ 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
152
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
153
+ --sb-font-family-display:
154
+ 'Epilogue', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
155
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
163
156
  --sb-font-weight-normal: 400;
164
157
  --sb-font-weight-medium: 500;
165
158
  --sb-font-weight-semibold: 600;
package/dist/tokens/semantic.css CHANGED
@@ -14,7 +14,8 @@ limitations under the License.
14
14
  * Do not edit directly, this file was auto-generated.
15
15
  */
16
16
 
17
- :root, :host {
17
+ :root,
18
+ :host {
18
19
  --sb-chart-color-neutral-50: var(--sb-color-grey-50);
19
20
  --sb-chart-color-neutral-100: var(--sb-color-grey-100);
20
21
  --sb-chart-color-neutral-200: var(--sb-color-grey-200);
@@ -48,35 +49,36 @@ limitations under the License.
48
49
  --sb-text-color-critical-strong: var(--sb-color-red-900);
49
50
  --sb-text-color-critical-vivid: var(--sb-color-red-700);
50
51
  --sb-text-color-critical-weak: var(--sb-color-red-200);
51
- --sb-text-color-critical-inverse: var(--sb-color-red-50);
52
+ --sb-text-color-critical-inverse: var(--sb-color-white);
52
53
  --sb-text-color-success-strong: var(--sb-color-green-900);
53
54
  --sb-text-color-success-vivid: var(--sb-color-green-700);
54
55
  --sb-text-color-success-weak: var(--sb-color-green-200);
55
- --sb-text-color-success-inverse: var(--sb-color-green-50);
56
+ --sb-text-color-success-inverse: var(--sb-color-white);
56
57
  --sb-text-color-warning-strong: var(--sb-color-orange-900);
57
58
  --sb-text-color-warning-vivid: var(--sb-color-orange-700);
58
59
  --sb-text-color-warning-weak: var(--sb-color-orange-200);
59
- --sb-text-color-warning-inverse: var(--sb-color-orange-50);
60
+ --sb-text-color-warning-inverse: var(--sb-color-white);
60
61
  --sb-text-color-purple-strong: var(--sb-color-purple-900);
61
62
  --sb-text-color-purple-vivid: var(--sb-color-purple-700);
62
63
  --sb-text-color-purple-weak: var(--sb-color-purple-200);
63
- --sb-text-color-purple-inverse: var(--sb-color-purple-50);
64
+ --sb-text-color-purple-inverse: var(--sb-color-white);
64
65
  --sb-text-color-pink-strong: var(--sb-color-pink-900);
65
66
  --sb-text-color-pink-vivid: var(--sb-color-pink-700);
66
67
  --sb-text-color-pink-weak: var(--sb-color-pink-200);
67
- --sb-text-color-pink-inverse: var(--sb-color-pink-50);
68
+ --sb-text-color-pink-inverse: var(--sb-color-white);
68
69
  --sb-text-color-cyan-strong: var(--sb-color-cyan-900);
69
70
  --sb-text-color-cyan-vivid: var(--sb-color-cyan-700);
70
71
  --sb-text-color-cyan-weak: var(--sb-color-cyan-200);
71
- --sb-text-color-cyan-inverse: var(--sb-color-cyan-50);
72
+ --sb-text-color-cyan-inverse: var(--sb-color-white);
72
73
  --sb-text-color-teal-strong: var(--sb-color-teal-900);
73
74
  --sb-text-color-teal-vivid: var(--sb-color-teal-700);
74
75
  --sb-text-color-teal-weak: var(--sb-color-teal-200);
75
- --sb-text-color-teal-inverse: var(--sb-color-teal-50);
76
+ --sb-text-color-teal-inverse: var(--sb-color-white);
76
77
  --sb-text-color-yellow-strong: var(--sb-color-yellow-900);
77
78
  --sb-text-color-yellow-vivid: var(--sb-color-yellow-700);
78
79
  --sb-text-color-yellow-weak: var(--sb-color-yellow-200);
79
- --sb-text-color-yellow-inverse: var(--sb-color-yellow-50);
80
+ --sb-text-color-yellow-inverse: var(--sb-color-white);
81
+ --sb-text-color-primary-inverse: var(--sb-color-white);
80
82
  --sb-icon-color-neutral-weak: var(--sb-color-grey-300);
81
83
  --sb-icon-color-neutral-medium: var(--sb-color-grey-600);
82
84
  --sb-icon-color-neutral-strong: var(--sb-color-grey-900);
@@ -92,14 +94,14 @@ limitations under the License.
92
94
  --sb-border-color-neutral-strong: var(--sb-color-grey-900);
93
95
  --sb-border-color-neutral-medium: var(--sb-color-grey-600);
94
96
  --sb-border-color-neutral-weak: var(--sb-color-grey-100);
95
- --sb-border-color-critical: var(--sb-color-red-600);
96
- --sb-border-color-success: var(--sb-color-green-600);
97
- --sb-border-color-warning: var(--sb-color-orange-600);
98
- --sb-border-color-purple: var(--sb-color-purple-600);
99
- --sb-border-color-pink: var(--sb-color-pink-600);
100
- --sb-border-color-yellow: var(--sb-color-yellow-600);
101
- --sb-border-color-cyan: var(--sb-color-cyan-600);
102
- --sb-border-color-teal: var(--sb-color-teal-600);
97
+ --sb-border-color-critical: var(--sb-color-red-700);
98
+ --sb-border-color-success: var(--sb-color-green-700);
99
+ --sb-border-color-warning: var(--sb-color-orange-700);
100
+ --sb-border-color-purple: var(--sb-color-purple-700);
101
+ --sb-border-color-pink: var(--sb-color-pink-700);
102
+ --sb-border-color-yellow: var(--sb-color-yellow-700);
103
+ --sb-border-color-cyan: var(--sb-color-cyan-700);
104
+ --sb-border-color-teal: var(--sb-color-teal-700);
103
105
  --sb-border-color-inverse: var(--sb-color-white);
104
106
  --sb-background-color-neutral-dark: var(--sb-color-grey-1000);
105
107
  --sb-background-color-neutral-dark-hover: var(--sb-color-grey-900);
@@ -110,6 +112,9 @@ limitations under the License.
110
112
  --sb-background-color-neutral-medium: var(--sb-color-grey-100);
111
113
  --sb-background-color-neutral-medium-hover: var(--sb-color-grey-200);
112
114
  --sb-background-color-neutral-medium-pressed: var(--sb-color-grey-300);
115
+ --sb-background-color-neutral-weak: var(--sb-color-grey-50);
116
+ --sb-background-color-neutral-weak-hover: var(--sb-color-grey-100);
117
+ --sb-background-color-neutral-weak-pressed: var(--sb-color-grey-200);
113
118
  --sb-background-color-neutral-base: var(--sb-color-grey-25);
114
119
  --sb-background-color-neutral-base-hover: var(--sb-color-grey-50);
115
120
  --sb-background-color-neutral-base-pressed: var(--sb-color-grey-100);
@@ -122,9 +127,9 @@ limitations under the License.
122
127
  --sb-background-color-critical-strong: var(--sb-color-red-900);
123
128
  --sb-background-color-critical-strong-hover: var(--sb-color-red-800);
124
129
  --sb-background-color-critical-strong-pressed: var(--sb-color-red-700);
125
- --sb-background-color-critical-vivid: var(--sb-color-red-800);
126
- --sb-background-color-critical-vivid-hover: var(--sb-color-red-900);
127
- --sb-background-color-critical-vivid-pressed: var(--sb-color-red-950);
130
+ --sb-background-color-critical-vivid: var(--sb-color-red-700);
131
+ --sb-background-color-critical-vivid-hover: var(--sb-color-red-800);
132
+ --sb-background-color-critical-vivid-pressed: var(--sb-color-red-900);
128
133
  --sb-background-color-critical-medium: var(--sb-color-red-200);
129
134
  --sb-background-color-critical-medium-hover: var(--sb-color-red-300);
130
135
  --sb-background-color-critical-medium-pressed: var(--sb-color-red-400);
@@ -140,9 +145,9 @@ limitations under the License.
140
145
  --sb-background-color-success-strong: var(--sb-color-green-900);
141
146
  --sb-background-color-success-strong-hover: var(--sb-color-green-800);
142
147
  --sb-background-color-success-strong-pressed: var(--sb-color-green-700);
143
- --sb-background-color-success-vivid: var(--sb-color-green-800);
144
- --sb-background-color-success-vivid-hover: var(--sb-color-green-900);
145
- --sb-background-color-success-vivid-pressed: var(--sb-color-green-950);
148
+ --sb-background-color-success-vivid: var(--sb-color-green-700);
149
+ --sb-background-color-success-vivid-hover: var(--sb-color-green-800);
150
+ --sb-background-color-success-vivid-pressed: var(--sb-color-green-900);
146
151
  --sb-background-color-success-medium: var(--sb-color-green-200);
147
152
  --sb-background-color-success-medium-hover: var(--sb-color-green-300);
148
153
  --sb-background-color-success-medium-pressed: var(--sb-color-green-400);
@@ -158,9 +163,9 @@ limitations under the License.
158
163
  --sb-background-color-warning-strong: var(--sb-color-orange-900);
159
164
  --sb-background-color-warning-strong-hover: var(--sb-color-orange-800);
160
165
  --sb-background-color-warning-strong-pressed: var(--sb-color-orange-700);
161
- --sb-background-color-warning-vivid: var(--sb-color-orange-800);
162
- --sb-background-color-warning-vivid-hover: var(--sb-color-orange-900);
163
- --sb-background-color-warning-vivid-pressed: var(--sb-color-orange-950);
166
+ --sb-background-color-warning-vivid: var(--sb-color-orange-700);
167
+ --sb-background-color-warning-vivid-hover: var(--sb-color-orange-800);
168
+ --sb-background-color-warning-vivid-pressed: var(--sb-color-orange-900);
164
169
  --sb-background-color-warning-medium: var(--sb-color-orange-200);
165
170
  --sb-background-color-warning-medium-hover: var(--sb-color-orange-300);
166
171
  --sb-background-color-warning-medium-pressed: var(--sb-color-orange-400);
@@ -176,9 +181,9 @@ limitations under the License.
176
181
  --sb-background-color-purple-strong: var(--sb-color-purple-900);
177
182
  --sb-background-color-purple-strong-hover: var(--sb-color-purple-800);
178
183
  --sb-background-color-purple-strong-pressed: var(--sb-color-purple-700);
179
- --sb-background-color-purple-vivid: var(--sb-color-purple-800);
180
- --sb-background-color-purple-vivid-hover: var(--sb-color-purple-900);
181
- --sb-background-color-purple-vivid-pressed: var(--sb-color-purple-950);
184
+ --sb-background-color-purple-vivid: var(--sb-color-purple-700);
185
+ --sb-background-color-purple-vivid-hover: var(--sb-color-purple-800);
186
+ --sb-background-color-purple-vivid-pressed: var(--sb-color-purple-900);
182
187
  --sb-background-color-purple-medium: var(--sb-color-purple-200);
183
188
  --sb-background-color-purple-medium-hover: var(--sb-color-purple-300);
184
189
  --sb-background-color-purple-medium-pressed: var(--sb-color-purple-400);
@@ -194,9 +199,9 @@ limitations under the License.
194
199
  --sb-background-color-pink-strong: var(--sb-color-pink-900);
195
200
  --sb-background-color-pink-strong-hover: var(--sb-color-pink-800);
196
201
  --sb-background-color-pink-strong-pressed: var(--sb-color-pink-700);
197
- --sb-background-color-pink-vivid: var(--sb-color-pink-800);
198
- --sb-background-color-pink-vivid-hover: var(--sb-color-pink-900);
199
- --sb-background-color-pink-vivid-pressed: var(--sb-color-pink-950);
202
+ --sb-background-color-pink-vivid: var(--sb-color-pink-700);
203
+ --sb-background-color-pink-vivid-hover: var(--sb-color-pink-800);
204
+ --sb-background-color-pink-vivid-pressed: var(--sb-color-pink-900);
200
205
  --sb-background-color-pink-medium: var(--sb-color-pink-200);
201
206
  --sb-background-color-pink-medium-hover: var(--sb-color-pink-300);
202
207
  --sb-background-color-pink-medium-pressed: var(--sb-color-pink-400);
@@ -212,9 +217,9 @@ limitations under the License.
212
217
  --sb-background-color-yellow-strong: var(--sb-color-yellow-900);
213
218
  --sb-background-color-yellow-strong-hover: var(--sb-color-yellow-800);
214
219
  --sb-background-color-yellow-strong-pressed: var(--sb-color-yellow-700);
215
- --sb-background-color-yellow-vivid: var(--sb-color-yellow-800);
216
- --sb-background-color-yellow-vivid-hover: var(--sb-color-yellow-900);
217
- --sb-background-color-yellow-vivid-pressed: var(--sb-color-yellow-950);
220
+ --sb-background-color-yellow-vivid: var(--sb-color-yellow-700);
221
+ --sb-background-color-yellow-vivid-hover: var(--sb-color-yellow-800);
222
+ --sb-background-color-yellow-vivid-pressed: var(--sb-color-yellow-900);
218
223
  --sb-background-color-yellow-medium: var(--sb-color-yellow-200);
219
224
  --sb-background-color-yellow-medium-hover: var(--sb-color-yellow-300);
220
225
  --sb-background-color-yellow-medium-pressed: var(--sb-color-yellow-400);
@@ -230,9 +235,9 @@ limitations under the License.
230
235
  --sb-background-color-cyan-strong: var(--sb-color-cyan-900);
231
236
  --sb-background-color-cyan-strong-hover: var(--sb-color-cyan-800);
232
237
  --sb-background-color-cyan-strong-pressed: var(--sb-color-cyan-700);
233
- --sb-background-color-cyan-vivid: var(--sb-color-cyan-800);
234
- --sb-background-color-cyan-vivid-hover: var(--sb-color-cyan-900);
235
- --sb-background-color-cyan-vivid-pressed: var(--sb-color-cyan-950);
238
+ --sb-background-color-cyan-vivid: var(--sb-color-cyan-700);
239
+ --sb-background-color-cyan-vivid-hover: var(--sb-color-cyan-800);
240
+ --sb-background-color-cyan-vivid-pressed: var(--sb-color-cyan-900);
236
241
  --sb-background-color-cyan-medium: var(--sb-color-cyan-200);
237
242
  --sb-background-color-cyan-medium-hover: var(--sb-color-cyan-300);
238
243
  --sb-background-color-cyan-medium-pressed: var(--sb-color-cyan-400);
@@ -248,9 +253,9 @@ limitations under the License.
248
253
  --sb-background-color-teal-strong: var(--sb-color-teal-900);
249
254
  --sb-background-color-teal-strong-hover: var(--sb-color-teal-800);
250
255
  --sb-background-color-teal-strong-pressed: var(--sb-color-teal-700);
251
- --sb-background-color-teal-vivid: var(--sb-color-teal-800);
252
- --sb-background-color-teal-vivid-hover: var(--sb-color-teal-900);
253
- --sb-background-color-teal-vivid-pressed: var(--sb-color-teal-950);
256
+ --sb-background-color-teal-vivid: var(--sb-color-teal-700);
257
+ --sb-background-color-teal-vivid-hover: var(--sb-color-teal-800);
258
+ --sb-background-color-teal-vivid-pressed: var(--sb-color-teal-900);
254
259
  --sb-background-color-teal-medium: var(--sb-color-teal-200);
255
260
  --sb-background-color-teal-medium-hover: var(--sb-color-teal-300);
256
261
  --sb-background-color-teal-medium-pressed: var(--sb-color-teal-400);
@@ -263,18 +268,17 @@ limitations under the License.
263
268
  --sb-text-color-primary-strong: var(--sb-color-primary-900);
264
269
  --sb-text-color-primary-vivid: var(--sb-color-primary-700);
265
270
  --sb-text-color-primary-weak: var(--sb-color-primary-200);
266
- --sb-text-color-primary-inverse: var(--sb-color-primary-50);
267
271
  --sb-icon-color-primary: var(--sb-color-primary-700);
268
- --sb-border-color-primary: var(--sb-color-primary-600);
272
+ --sb-border-color-primary: var(--sb-color-primary-700);
269
273
  --sb-background-color-primary-dark: var(--sb-color-primary-950);
270
274
  --sb-background-color-primary-dark-hover: var(--sb-color-primary-900);
271
275
  --sb-background-color-primary-dark-pressed: var(--sb-color-primary-800);
272
276
  --sb-background-color-primary-strong: var(--sb-color-primary-900);
273
277
  --sb-background-color-primary-strong-hover: var(--sb-color-primary-800);
274
278
  --sb-background-color-primary-strong-pressed: var(--sb-color-primary-700);
275
- --sb-background-color-primary-vivid: var(--sb-color-primary-800);
276
- --sb-background-color-primary-vivid-hover: var(--sb-color-primary-900);
277
- --sb-background-color-primary-vivid-pressed: var(--sb-color-primary-950);
279
+ --sb-background-color-primary-vivid: var(--sb-color-primary-700);
280
+ --sb-background-color-primary-vivid-hover: var(--sb-color-primary-800);
281
+ --sb-background-color-primary-vivid-pressed: var(--sb-color-primary-900);
278
282
  --sb-background-color-primary-medium: var(--sb-color-primary-200);
279
283
  --sb-background-color-primary-medium-hover: var(--sb-color-primary-300);
280
284
  --sb-background-color-primary-medium-pressed: var(--sb-color-primary-400);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@staffbase/design",
3
- "version": "20.4.0",
3
+ "version": "21.2.0",
4
4
  "description": "Staffbase Design System: Components, patterns, icons and tokens",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -31,15 +31,11 @@
31
31
  },
32
32
  "files": [
33
33
  "dist/**",
34
- "codemods/**",
35
- "AGENTS.md",
36
- "docs/package_instructions.md"
34
+ "codemods/**"
37
35
  ],
38
36
  "dependencies": {
39
37
  "@base-ui/react": "1.5.0",
40
38
  "@floating-ui/react": "^0.27.19",
41
- "@radix-ui/react-popover": "^1.1.16",
42
- "@radix-ui/react-tabs": "^1.1.14",
43
39
  "clsx": "^2.1.1",
44
40
  "es-toolkit": "^1.47.0",
45
41
  "motion": "^12.40.0",
@@ -77,10 +73,11 @@
77
73
  "handlebars": "^4.7.9",
78
74
  "happy-dom": "^20.10.2",
79
75
  "lightningcss": "^1.32.0",
76
+ "prettier": "^3.8.3",
80
77
  "publint": "^0.3.21",
81
78
  "react": "^19.2.7",
82
79
  "react-dom": "^19.2.7",
83
- "style-dictionary": "^5.4.3",
80
+ "style-dictionary": "^5.4.4",
84
81
  "svgo": "^4.0.2",
85
82
  "tailwindcss": "^4.3.0",
86
83
  "tsx": "^4.22.4",
@@ -97,8 +94,9 @@
97
94
  },
98
95
  "sideEffects": false,
99
96
  "scripts": {
100
- "build": "pnpm generate:tokens && vite build --config vite.build.config.ts",
97
+ "build": "pnpm generate:tokens && pnpm generate:c13y && vite build --config vite.build.config.ts",
101
98
  "fix": "eslint --fix .",
99
+ "generate:c13y": "node scripts/c13yGenerator.js",
102
100
  "generate:icons": "node scripts/iconGenerator.js",
103
101
  "generate:illustrations": "node scripts/illustrationGenerator.js",
104
102
  "generate:tokens": "tsx tokens/sd.config.ts && tsx scripts/generateTheme.ts",