@staffbase/design 21.0.0 → 21.3.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 (11) hide show
  1. package/dist/components.css +1 -1
  2. package/dist/main.cjs +48 -12
  3. package/dist/main.cjs.map +1 -1
  4. package/dist/main.d.ts +12 -6
  5. package/dist/main.js +48 -12
  6. package/dist/main.js.map +1 -1
  7. package/dist/theme.css +3 -0
  8. package/dist/tokens/component.css +4 -3
  9. package/dist/tokens/primitive.css +9 -4
  10. package/dist/tokens/semantic.css +50 -46
  11. package/package.json +2 -2
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);
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);
@@ -146,8 +147,12 @@ limitations under the License.
146
147
  --sb-radius-md: 0.375rem;
147
148
  --sb-radius-lg: 0.5rem;
148
149
  --sb-radius-xl: 1rem;
149
- --sb-font-family-sans: 'Inter', 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
150
- --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;
151
156
  --sb-font-weight-normal: 400;
152
157
  --sb-font-weight-medium: 500;
153
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": "21.0.0",
3
+ "version": "21.3.0",
4
4
  "description": "Staffbase Design System: Components, patterns, icons and tokens",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -36,7 +36,6 @@
36
36
  "dependencies": {
37
37
  "@base-ui/react": "1.5.0",
38
38
  "@floating-ui/react": "^0.27.19",
39
- "@radix-ui/react-tabs": "^1.1.14",
40
39
  "clsx": "^2.1.1",
41
40
  "es-toolkit": "^1.47.0",
42
41
  "motion": "^12.40.0",
@@ -74,6 +73,7 @@
74
73
  "handlebars": "^4.7.9",
75
74
  "happy-dom": "^20.10.2",
76
75
  "lightningcss": "^1.32.0",
76
+ "prettier": "^3.8.3",
77
77
  "publint": "^0.3.21",
78
78
  "react": "^19.2.7",
79
79
  "react-dom": "^19.2.7",