@staffbase/design 18.3.0 → 18.6.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.
package/dist/theme.css CHANGED
@@ -1,3 +1,18 @@
1
+ /*
2
+ Copyright 2026, Staffbase SE and contributors.
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+ Unless required by applicable law or agreed to in writing, software
8
+ distributed under the License is distributed on an "AS IS" BASIS,
9
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10
+ See the License for the specific language governing permissions and
11
+ limitations under the License.
12
+ */
13
+ /**
14
+ * Do not edit directly, this file was auto-generated.
15
+ */
1
16
  @theme inline {
2
17
  /* Alias chart colors */
3
18
  --color-*: initial;
@@ -62,6 +77,10 @@
62
77
  --text-color-teal-vivid: var(--sb-text-color-teal-vivid);
63
78
  --text-color-teal-weak: var(--sb-text-color-teal-weak);
64
79
  --text-color-teal-inverse: var(--sb-text-color-teal-inverse);
80
+ --text-color-yellow-strong: var(--sb-text-color-yellow-strong);
81
+ --text-color-yellow-vivid: var(--sb-text-color-yellow-vivid);
82
+ --text-color-yellow-weak: var(--sb-text-color-yellow-weak);
83
+ --text-color-yellow-inverse: var(--sb-text-color-yellow-inverse);
65
84
  --text-color-primary-strong: var(--sb-text-color-primary-strong);
66
85
  --text-color-primary-vivid: var(--sb-text-color-primary-vivid);
67
86
  --text-color-primary-weak: var(--sb-text-color-primary-weak);
@@ -80,6 +99,7 @@
80
99
  --text-color-icon-pink: var(--sb-icon-color-pink);
81
100
  --text-color-icon-cyan: var(--sb-icon-color-cyan);
82
101
  --text-color-icon-teal: var(--sb-icon-color-teal);
102
+ --text-color-icon-yellow: var(--sb-icon-color-yellow);
83
103
 
84
104
  /* Alias border colors */
85
105
  --border-color-*: initial;
@@ -92,6 +112,7 @@
92
112
  --border-color-warning: var(--sb-border-color-warning);
93
113
  --border-color-purple: var(--sb-border-color-purple);
94
114
  --border-color-pink: var(--sb-border-color-pink);
115
+ --border-color-yellow: var(--sb-border-color-yellow);
95
116
  --border-color-cyan: var(--sb-border-color-cyan);
96
117
  --border-color-teal: var(--sb-border-color-teal);
97
118
  --border-color-inverse: var(--sb-border-color-inverse);
@@ -106,6 +127,7 @@
106
127
  --ring-color-warning: var(--sb-border-color-warning);
107
128
  --ring-color-purple: var(--sb-border-color-purple);
108
129
  --ring-color-pink: var(--sb-border-color-pink);
130
+ --ring-color-yellow: var(--sb-border-color-yellow);
109
131
  --ring-color-cyan: var(--sb-border-color-cyan);
110
132
  --ring-color-teal: var(--sb-border-color-teal);
111
133
  --ring-color-inverse: var(--sb-border-color-inverse);
@@ -120,6 +142,7 @@
120
142
  --outline-color-warning: var(--sb-border-color-warning);
121
143
  --outline-color-purple: var(--sb-border-color-purple);
122
144
  --outline-color-pink: var(--sb-border-color-pink);
145
+ --outline-color-yellow: var(--sb-border-color-yellow);
123
146
  --outline-color-cyan: var(--sb-border-color-cyan);
124
147
  --outline-color-teal: var(--sb-border-color-teal);
125
148
  --outline-color-inverse: var(--sb-border-color-inverse);
@@ -134,12 +157,16 @@
134
157
  --stroke-warning: var(--sb-border-color-warning);
135
158
  --stroke-purple: var(--sb-border-color-purple);
136
159
  --stroke-pink: var(--sb-border-color-pink);
160
+ --stroke-yellow: var(--sb-border-color-yellow);
137
161
  --stroke-cyan: var(--sb-border-color-cyan);
138
162
  --stroke-teal: var(--sb-border-color-teal);
139
163
  --stroke-inverse: var(--sb-border-color-inverse);
140
164
 
141
165
  /* Alias background colors */
142
166
  --background-color-*: initial;
167
+ --background-color-neutral-dark: var(--sb-background-color-neutral-dark);
168
+ --background-color-neutral-dark-hover: var(--sb-background-color-neutral-dark-hover);
169
+ --background-color-neutral-dark-pressed: var(--sb-background-color-neutral-dark-pressed);
143
170
  --background-color-neutral-strong: var(--sb-background-color-neutral-strong);
144
171
  --background-color-neutral-strong-hover: var(--sb-background-color-neutral-strong-hover);
145
172
  --background-color-neutral-strong-pressed: var(--sb-background-color-neutral-strong-pressed);
@@ -152,7 +179,6 @@
152
179
  --background-color-neutral-surface: var(--sb-background-color-neutral-surface);
153
180
  --background-color-neutral-surface-hover: var(--sb-background-color-neutral-surface-hover);
154
181
  --background-color-neutral-surface-pressed: var(--sb-background-color-neutral-surface-pressed);
155
-
156
182
  --background-color-primary-dark: var(--sb-background-color-primary-dark);
157
183
  --background-color-primary-dark-hover: var(--sb-background-color-primary-dark-hover);
158
184
  --background-color-primary-dark-pressed: var(--sb-background-color-primary-dark-pressed);
@@ -171,26 +197,6 @@
171
197
  --background-color-primary-inverse: var(--sb-background-color-primary-inverse);
172
198
  --background-color-primary-inverse-hover: var(--sb-background-color-primary-inverse-hover);
173
199
  --background-color-primary-inverse-pressed: var(--sb-background-color-primary-inverse-pressed);
174
-
175
- --background-color-yellow-dark: var(--sb-background-color-yellow-dark);
176
- --background-color-yellow-dark-hover: var(--sb-background-color-yellow-dark-hover);
177
- --background-color-yellow-dark-pressed: var(--sb-background-color-yellow-dark-pressed);
178
- --background-color-yellow-strong: var(--sb-background-color-yellow-strong);
179
- --background-color-yellow-strong-hover: var(--sb-background-color-yellow-strong-hover);
180
- --background-color-yellow-strong-pressed: var(--sb-background-color-yellow-strong-pressed);
181
- --background-color-yellow-vivid: var(--sb-background-color-yellow-vivid);
182
- --background-color-yellow-vivid-hover: var(--sb-background-color-yellow-vivid-hover);
183
- --background-color-yellow-vivid-pressed: var(--sb-background-color-yellow-vivid-pressed);
184
- --background-color-yellow-medium: var(--sb-background-color-yellow-medium);
185
- --background-color-yellow-medium-hover: var(--sb-background-color-yellow-medium-hover);
186
- --background-color-yellow-medium-pressed: var(--sb-background-color-yellow-medium-pressed);
187
- --background-color-yellow-weak: var(--sb-background-color-yellow-weak);
188
- --background-color-yellow-weak-hover: var(--sb-background-color-yellow-weak-hover);
189
- --background-color-yellow-weak-pressed: var(--sb-background-color-yellow-weak-pressed);
190
- --background-color-yellow-inverse: var(--sb-background-color-yellow-inverse);
191
- --background-color-yellow-inverse-hover: var(--sb-background-color-yellow-inverse-hover);
192
- --background-color-yellow-inverse-pressed: var(--sb-background-color-yellow-inverse-pressed);
193
-
194
200
  --background-color-critical-dark: var(--sb-background-color-critical-dark);
195
201
  --background-color-critical-dark-hover: var(--sb-background-color-critical-dark-hover);
196
202
  --background-color-critical-dark-pressed: var(--sb-background-color-critical-dark-pressed);
@@ -209,7 +215,6 @@
209
215
  --background-color-critical-inverse: var(--sb-background-color-critical-inverse);
210
216
  --background-color-critical-inverse-hover: var(--sb-background-color-critical-inverse-hover);
211
217
  --background-color-critical-inverse-pressed: var(--sb-background-color-critical-inverse-pressed);
212
-
213
218
  --background-color-success-dark: var(--sb-background-color-success-dark);
214
219
  --background-color-success-dark-hover: var(--sb-background-color-success-dark-hover);
215
220
  --background-color-success-dark-pressed: var(--sb-background-color-success-dark-pressed);
@@ -228,7 +233,6 @@
228
233
  --background-color-success-inverse: var(--sb-background-color-success-inverse);
229
234
  --background-color-success-inverse-hover: var(--sb-background-color-success-inverse-hover);
230
235
  --background-color-success-inverse-pressed: var(--sb-background-color-success-inverse-pressed);
231
-
232
236
  --background-color-warning-dark: var(--sb-background-color-warning-dark);
233
237
  --background-color-warning-dark-hover: var(--sb-background-color-warning-dark-hover);
234
238
  --background-color-warning-dark-pressed: var(--sb-background-color-warning-dark-pressed);
@@ -247,7 +251,6 @@
247
251
  --background-color-warning-inverse: var(--sb-background-color-warning-inverse);
248
252
  --background-color-warning-inverse-hover: var(--sb-background-color-warning-inverse-hover);
249
253
  --background-color-warning-inverse-pressed: var(--sb-background-color-warning-inverse-pressed);
250
-
251
254
  --background-color-purple-dark: var(--sb-background-color-purple-dark);
252
255
  --background-color-purple-dark-hover: var(--sb-background-color-purple-dark-hover);
253
256
  --background-color-purple-dark-pressed: var(--sb-background-color-purple-dark-pressed);
@@ -266,7 +269,6 @@
266
269
  --background-color-purple-inverse: var(--sb-background-color-purple-inverse);
267
270
  --background-color-purple-inverse-hover: var(--sb-background-color-purple-inverse-hover);
268
271
  --background-color-purple-inverse-pressed: var(--sb-background-color-purple-inverse-pressed);
269
-
270
272
  --background-color-pink-dark: var(--sb-background-color-pink-dark);
271
273
  --background-color-pink-dark-hover: var(--sb-background-color-pink-dark-hover);
272
274
  --background-color-pink-dark-pressed: var(--sb-background-color-pink-dark-pressed);
@@ -285,7 +287,24 @@
285
287
  --background-color-pink-inverse: var(--sb-background-color-pink-inverse);
286
288
  --background-color-pink-inverse-hover: var(--sb-background-color-pink-inverse-hover);
287
289
  --background-color-pink-inverse-pressed: var(--sb-background-color-pink-inverse-pressed);
288
-
290
+ --background-color-yellow-dark: var(--sb-background-color-yellow-dark);
291
+ --background-color-yellow-dark-hover: var(--sb-background-color-yellow-dark-hover);
292
+ --background-color-yellow-dark-pressed: var(--sb-background-color-yellow-dark-pressed);
293
+ --background-color-yellow-strong: var(--sb-background-color-yellow-strong);
294
+ --background-color-yellow-strong-hover: var(--sb-background-color-yellow-strong-hover);
295
+ --background-color-yellow-strong-pressed: var(--sb-background-color-yellow-strong-pressed);
296
+ --background-color-yellow-vivid: var(--sb-background-color-yellow-vivid);
297
+ --background-color-yellow-vivid-hover: var(--sb-background-color-yellow-vivid-hover);
298
+ --background-color-yellow-vivid-pressed: var(--sb-background-color-yellow-vivid-pressed);
299
+ --background-color-yellow-medium: var(--sb-background-color-yellow-medium);
300
+ --background-color-yellow-medium-hover: var(--sb-background-color-yellow-medium-hover);
301
+ --background-color-yellow-medium-pressed: var(--sb-background-color-yellow-medium-pressed);
302
+ --background-color-yellow-weak: var(--sb-background-color-yellow-weak);
303
+ --background-color-yellow-weak-hover: var(--sb-background-color-yellow-weak-hover);
304
+ --background-color-yellow-weak-pressed: var(--sb-background-color-yellow-weak-pressed);
305
+ --background-color-yellow-inverse: var(--sb-background-color-yellow-inverse);
306
+ --background-color-yellow-inverse-hover: var(--sb-background-color-yellow-inverse-hover);
307
+ --background-color-yellow-inverse-pressed: var(--sb-background-color-yellow-inverse-pressed);
289
308
  --background-color-cyan-dark: var(--sb-background-color-cyan-dark);
290
309
  --background-color-cyan-dark-hover: var(--sb-background-color-cyan-dark-hover);
291
310
  --background-color-cyan-dark-pressed: var(--sb-background-color-cyan-dark-pressed);
@@ -304,7 +323,6 @@
304
323
  --background-color-cyan-inverse: var(--sb-background-color-cyan-inverse);
305
324
  --background-color-cyan-inverse-hover: var(--sb-background-color-cyan-inverse-hover);
306
325
  --background-color-cyan-inverse-pressed: var(--sb-background-color-cyan-inverse-pressed);
307
-
308
326
  --background-color-teal-dark: var(--sb-background-color-teal-dark);
309
327
  --background-color-teal-dark-hover: var(--sb-background-color-teal-dark-hover);
310
328
  --background-color-teal-dark-pressed: var(--sb-background-color-teal-dark-pressed);
@@ -332,12 +350,12 @@
332
350
 
333
351
  /* Component Button colors */
334
352
  --text-color-button-critical: var(--sb-button-text-color-critical);
335
- --text-color-button-critical-icon: var(--sb-button-icon-color-critical);
336
353
  --text-color-button-critical-inverse: var(--sb-button-text-color-critical-inverse);
337
- --text-color-button-critical-icon-inverse: var(--sb-button-icon-color-critical-inverse);
338
354
  --text-color-button-primary: var(--sb-button-text-color-primary);
339
- --text-color-button-primary-icon: var(--sb-button-icon-color-primary);
340
355
  --text-color-button-primary-inverse: var(--sb-button-text-color-primary-inverse);
356
+ --text-color-button-critical-icon: var(--sb-button-icon-color-critical);
357
+ --text-color-button-critical-icon-inverse: var(--sb-button-icon-color-critical-inverse);
358
+ --text-color-button-primary-icon: var(--sb-button-icon-color-primary);
341
359
  --text-color-button-primary-icon-inverse: var(--sb-button-icon-color-primary-inverse);
342
360
  --background-color-button-critical: var(--sb-button-background-color-critical);
343
361
  --background-color-button-critical-hover: var(--sb-button-background-color-critical-hover);
@@ -354,27 +372,21 @@
354
372
 
355
373
  /* Component Ghost Button colors */
356
374
  --text-color-ghost-button-critical: var(--sb-ghost-button-text-color-critical);
357
- --text-color-ghost-button-critical-icon: var(--sb-ghost-button-icon-color-critical);
358
375
  --text-color-ghost-button-critical-inverse: var(--sb-ghost-button-text-color-critical-inverse);
359
- --text-color-ghost-button-critical-icon-inverse: var(--sb-ghost-button-icon-color-critical-inverse);
360
376
  --text-color-ghost-button-primary: var(--sb-ghost-button-text-color-primary);
361
- --text-color-ghost-button-primary-icon: var(--sb-ghost-button-icon-color-primary);
362
377
  --text-color-ghost-button-primary-inverse: var(--sb-ghost-button-text-color-primary-inverse);
378
+ --text-color-ghost-button-critical-icon: var(--sb-ghost-button-icon-color-critical);
379
+ --text-color-ghost-button-critical-icon-inverse: var(--sb-ghost-button-icon-color-critical-inverse);
380
+ --text-color-ghost-button-primary-icon: var(--sb-ghost-button-icon-color-primary);
363
381
  --text-color-ghost-button-primary-icon-inverse: var(--sb-ghost-button-icon-color-primary-inverse);
364
382
  --background-color-ghost-button-critical-hover: var(--sb-ghost-button-background-color-critical-hover);
365
383
  --background-color-ghost-button-critical-pressed: var(--sb-ghost-button-background-color-critical-pressed);
366
- --background-color-ghost-button-critical-inverse-hover: var(
367
- --sb-ghost-button-background-color-critical-inverse-hover
368
- );
369
- --background-color-ghost-button-critical-inverse-pressed: var(
370
- --sb-ghost-button-background-color-critical-inverse-pressed
371
- );
384
+ --background-color-ghost-button-critical-inverse-hover: var(--sb-ghost-button-background-color-critical-inverse-hover);
385
+ --background-color-ghost-button-critical-inverse-pressed: var(--sb-ghost-button-background-color-critical-inverse-pressed);
372
386
  --background-color-ghost-button-primary-hover: var(--sb-ghost-button-background-color-primary-hover);
373
387
  --background-color-ghost-button-primary-pressed: var(--sb-ghost-button-background-color-primary-pressed);
374
388
  --background-color-ghost-button-primary-inverse-hover: var(--sb-ghost-button-background-color-primary-inverse-hover);
375
- --background-color-ghost-button-primary-inverse-pressed: var(
376
- --sb-ghost-button-background-color-primary-inverse-pressed
377
- );
389
+ --background-color-ghost-button-primary-inverse-pressed: var(--sb-ghost-button-background-color-primary-inverse-pressed);
378
390
 
379
391
  /* Component Link colors */
380
392
  --text-color-link-primary: var(--sb-link-text-color-primary);
@@ -1,3 +1,15 @@
1
+ /*
2
+ Copyright 2026, Staffbase SE and contributors.
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+ Unless required by applicable law or agreed to in writing, software
8
+ distributed under the License is distributed on an "AS IS" BASIS,
9
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10
+ See the License for the specific language governing permissions and
11
+ limitations under the License.
12
+ */
1
13
  /**
2
14
  * Do not edit directly, this file was auto-generated.
3
15
  */
@@ -1,3 +1,15 @@
1
+ /*
2
+ Copyright 2026, Staffbase SE and contributors.
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+ Unless required by applicable law or agreed to in writing, software
8
+ distributed under the License is distributed on an "AS IS" BASIS,
9
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10
+ See the License for the specific language governing permissions and
11
+ limitations under the License.
12
+ */
1
13
  /**
2
14
  * Do not edit directly, this file was auto-generated.
3
15
  */
@@ -1,3 +1,15 @@
1
+ /*
2
+ Copyright 2026, Staffbase SE and contributors.
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+ Unless required by applicable law or agreed to in writing, software
8
+ distributed under the License is distributed on an "AS IS" BASIS,
9
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10
+ See the License for the specific language governing permissions and
11
+ limitations under the License.
12
+ */
1
13
  /**
2
14
  * Do not edit directly, this file was auto-generated.
3
15
  */
@@ -85,6 +97,7 @@
85
97
  --sb-border-color-warning: var(--sb-color-orange-600);
86
98
  --sb-border-color-purple: var(--sb-color-purple-600);
87
99
  --sb-border-color-pink: var(--sb-color-pink-600);
100
+ --sb-border-color-yellow: var(--sb-color-yellow-600);
88
101
  --sb-border-color-cyan: var(--sb-color-cyan-600);
89
102
  --sb-border-color-teal: var(--sb-color-teal-600);
90
103
  --sb-border-color-inverse: var(--sb-color-white);
package/package.json CHANGED
@@ -1,20 +1,9 @@
1
1
  {
2
2
  "name": "@staffbase/design",
3
- "version": "18.3.0",
3
+ "version": "18.6.0",
4
4
  "description": "Staffbase Design System: Components, patterns, icons and tokens",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
- "scripts": {
8
- "build": "pnpm generate:tokens && vite build --config vite.build.config.ts",
9
- "fix": "eslint --fix .",
10
- "generate:icons": "node scripts/iconGenerator.js",
11
- "generate:tokens": "tsx tokens/sd.config.ts",
12
- "lint": "eslint --cache .",
13
- "publish:check": "publint",
14
- "test": "vitest run",
15
- "test:coverage": "vitest run --coverage",
16
- "type:check": "tsc -p tsconfig.json"
17
- },
18
7
  "module": "./dist/main.js",
19
8
  "types": "./dist/main.d.ts",
20
9
  "exports": {
@@ -43,8 +32,8 @@
43
32
  "dependencies": {
44
33
  "@base-ui/react": "1.5.0",
45
34
  "@floating-ui/react": "^0.27.19",
46
- "@radix-ui/react-popover": "^1.1.15",
47
- "@radix-ui/react-tabs": "^1.1.13",
35
+ "@radix-ui/react-popover": "^1.1.16",
36
+ "@radix-ui/react-tabs": "^1.1.14",
48
37
  "clsx": "^2.1.1",
49
38
  "es-toolkit": "^1.47.0",
50
39
  "motion": "^12.40.0",
@@ -67,36 +56,48 @@
67
56
  },
68
57
  "devDependencies": {
69
58
  "@microsoft/api-extractor": "^7.58.7",
70
- "@repo/eslint-config": "workspace:*",
71
59
  "@tailwindcss/vite": "^4.3.0",
72
60
  "@testing-library/dom": "^10.4.1",
73
61
  "@testing-library/jest-dom": "^6.9.1",
74
62
  "@testing-library/react": "^16.3.2",
75
63
  "@testing-library/user-event": "^14.6.1",
76
- "@types/react": "^19.2.15",
64
+ "@types/node": "^25.9.3",
65
+ "@types/react": "^19.2.17",
77
66
  "@types/react-dom": "^19.2.3",
78
67
  "@types/tinycolor2": "^1.4.6",
79
68
  "@vitejs/plugin-react": "^6.0.2",
80
- "@vitest/coverage-v8": "^4.1.7",
69
+ "@vitest/coverage-v8": "^4.1.8",
81
70
  "eslint": "^10.4.1",
82
71
  "handlebars": "^4.7.9",
83
- "happy-dom": "^20.9.0",
72
+ "happy-dom": "^20.10.2",
84
73
  "lightningcss": "^1.32.0",
85
74
  "publint": "^0.3.21",
86
- "react": "^19.2.6",
87
- "react-dom": "^19.2.6",
88
- "style-dictionary": "^5.4.2",
75
+ "react": "^19.2.7",
76
+ "react-dom": "^19.2.7",
77
+ "style-dictionary": "^5.4.3",
89
78
  "tailwindcss": "^4.3.0",
90
79
  "tsx": "^4.22.4",
91
80
  "typescript": "^5.9.3",
92
- "unplugin-dts": "^1.0.1",
93
- "vite": "^8.0.10",
94
- "vite-plugin-static-copy": "^4.1.0",
95
- "vitest": "^4.1.7"
81
+ "unplugin-dts": "^1.0.2",
82
+ "vite": "^8.0.16",
83
+ "vite-plugin-static-copy": "^4.1.1",
84
+ "vitest": "^4.1.8",
85
+ "@repo/eslint-config": "0.0.0"
96
86
  },
97
87
  "publishConfig": {
98
88
  "access": "public",
99
89
  "registry": "https://registry.npmjs.org/"
100
90
  },
101
- "sideEffects": false
102
- }
91
+ "sideEffects": false,
92
+ "scripts": {
93
+ "build": "pnpm generate:tokens && vite build --config vite.build.config.ts",
94
+ "fix": "eslint --fix .",
95
+ "generate:icons": "node scripts/iconGenerator.js",
96
+ "generate:tokens": "tsx tokens/sd.config.ts && tsx scripts/generateTheme.ts",
97
+ "lint": "eslint --cache .",
98
+ "publish:check": "publint",
99
+ "test": "vitest run",
100
+ "test:coverage": "vitest run --coverage",
101
+ "type:check": "tsc -p tsconfig.json"
102
+ }
103
+ }