@staffbase/design 18.6.0 → 18.8.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 (9) hide show
  1. package/dist/components.css +1 -1
  2. package/dist/main.cjs +54 -0
  3. package/dist/main.cjs.map +1 -1
  4. package/dist/main.d.ts +6 -0
  5. package/dist/main.js +53 -1
  6. package/dist/main.js.map +1 -1
  7. package/dist/theme.css +9 -18
  8. package/dist/tokens/component.css +9 -18
  9. package/package.json +1 -1
package/dist/theme.css CHANGED
@@ -350,43 +350,34 @@ limitations under the License.
350
350
 
351
351
  /* Component Button colors */
352
352
  --text-color-button-critical: var(--sb-button-text-color-critical);
353
- --text-color-button-critical-inverse: var(--sb-button-text-color-critical-inverse);
354
353
  --text-color-button-primary: var(--sb-button-text-color-primary);
355
- --text-color-button-primary-inverse: var(--sb-button-text-color-primary-inverse);
354
+ --text-color-button-secondary: var(--sb-button-text-color-secondary);
356
355
  --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
356
  --text-color-button-primary-icon: var(--sb-button-icon-color-primary);
359
- --text-color-button-primary-icon-inverse: var(--sb-button-icon-color-primary-inverse);
357
+ --text-color-button-secondary-icon: var(--sb-button-icon-color-secondary);
360
358
  --background-color-button-critical: var(--sb-button-background-color-critical);
361
359
  --background-color-button-critical-hover: var(--sb-button-background-color-critical-hover);
362
360
  --background-color-button-critical-pressed: var(--sb-button-background-color-critical-pressed);
363
- --background-color-button-critical-inverse: var(--sb-button-background-color-critical-inverse);
364
- --background-color-button-critical-inverse-hover: var(--sb-button-background-color-critical-inverse-hover);
365
- --background-color-button-critical-inverse-pressed: var(--sb-button-background-color-critical-inverse-pressed);
366
361
  --background-color-button-primary: var(--sb-button-background-color-primary);
367
362
  --background-color-button-primary-hover: var(--sb-button-background-color-primary-hover);
368
363
  --background-color-button-primary-pressed: var(--sb-button-background-color-primary-pressed);
369
- --background-color-button-primary-inverse: var(--sb-button-background-color-primary-inverse);
370
- --background-color-button-primary-inverse-hover: var(--sb-button-background-color-primary-inverse-hover);
371
- --background-color-button-primary-inverse-pressed: var(--sb-button-background-color-primary-inverse-pressed);
364
+ --background-color-button-secondary: var(--sb-button-background-color-secondary);
365
+ --background-color-button-secondary-hover: var(--sb-button-background-color-secondary-hover);
366
+ --background-color-button-secondary-pressed: var(--sb-button-background-color-secondary-pressed);
372
367
 
373
368
  /* Component Ghost Button colors */
374
369
  --text-color-ghost-button-critical: var(--sb-ghost-button-text-color-critical);
375
- --text-color-ghost-button-critical-inverse: var(--sb-ghost-button-text-color-critical-inverse);
376
370
  --text-color-ghost-button-primary: var(--sb-ghost-button-text-color-primary);
377
- --text-color-ghost-button-primary-inverse: var(--sb-ghost-button-text-color-primary-inverse);
371
+ --text-color-ghost-button-secondary: var(--sb-ghost-button-text-color-secondary);
378
372
  --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
373
  --text-color-ghost-button-primary-icon: var(--sb-ghost-button-icon-color-primary);
381
- --text-color-ghost-button-primary-icon-inverse: var(--sb-ghost-button-icon-color-primary-inverse);
374
+ --text-color-ghost-button-secondary-icon: var(--sb-ghost-button-icon-color-secondary);
382
375
  --background-color-ghost-button-critical-hover: var(--sb-ghost-button-background-color-critical-hover);
383
376
  --background-color-ghost-button-critical-pressed: var(--sb-ghost-button-background-color-critical-pressed);
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);
386
377
  --background-color-ghost-button-primary-hover: var(--sb-ghost-button-background-color-primary-hover);
387
378
  --background-color-ghost-button-primary-pressed: var(--sb-ghost-button-background-color-primary-pressed);
388
- --background-color-ghost-button-primary-inverse-hover: var(--sb-ghost-button-background-color-primary-inverse-hover);
389
- --background-color-ghost-button-primary-inverse-pressed: var(--sb-ghost-button-background-color-primary-inverse-pressed);
379
+ --background-color-ghost-button-secondary-hover: var(--sb-ghost-button-background-color-secondary-hover);
380
+ --background-color-ghost-button-secondary-pressed: var(--sb-ghost-button-background-color-secondary-pressed);
390
381
 
391
382
  /* Component Link colors */
392
383
  --text-color-link-primary: var(--sb-link-text-color-primary);
package/dist/tokens/component.css CHANGED
@@ -18,42 +18,33 @@ limitations under the License.
18
18
  --sb-badge-text-color-critical: var(--sb-text-color-critical-inverse);
19
19
  --sb-badge-background-color-critical: var(--sb-background-color-critical-vivid);
20
20
  --sb-button-text-color-critical: var(--sb-text-color-critical-inverse);
21
- --sb-button-text-color-critical-inverse: var(--sb-text-color-critical-vivid);
21
+ --sb-button-text-color-secondary: var(--sb-text-color-neutral-strong);
22
22
  --sb-button-icon-color-critical: var(--sb-icon-color-critical);
23
- --sb-button-icon-color-critical-inverse: var(--sb-icon-color-inverse);
24
- --sb-button-icon-color-primary-inverse: var(--sb-icon-color-inverse);
23
+ --sb-button-icon-color-secondary: var(--sb-icon-color-neutral-strong);
25
24
  --sb-button-background-color-critical: var(--sb-background-color-critical-vivid);
26
25
  --sb-button-background-color-critical-hover: var(--sb-background-color-critical-vivid-hover);
27
26
  --sb-button-background-color-critical-pressed: var(--sb-background-color-critical-vivid-pressed);
28
- --sb-button-background-color-critical-inverse: var(--sb-background-color-critical-inverse);
29
- --sb-button-background-color-critical-inverse-hover: var(--sb-background-color-critical-inverse-hover);
30
- --sb-button-background-color-critical-inverse-pressed: var(--sb-background-color-critical-inverse-pressed);
27
+ --sb-button-background-color-secondary: var(--sb-background-color-neutral-medium);
28
+ --sb-button-background-color-secondary-hover: var(--sb-background-color-neutral-medium-hover);
29
+ --sb-button-background-color-secondary-pressed: var(--sb-background-color-neutral-medium-pressed);
31
30
  --sb-ghost-button-text-color-critical: var(--sb-text-color-critical-vivid);
32
- --sb-ghost-button-text-color-critical-inverse: var(--sb-text-color-critical-inverse);
31
+ --sb-ghost-button-text-color-secondary: var(--sb-text-color-neutral-strong);
33
32
  --sb-ghost-button-icon-color-critical: var(--sb-icon-color-critical);
34
- --sb-ghost-button-icon-color-critical-inverse: var(--sb-icon-color-inverse);
35
- --sb-ghost-button-icon-color-primary-inverse: var(--sb-icon-color-inverse);
33
+ --sb-ghost-button-icon-color-secondary: var(--sb-icon-color-neutral-strong);
36
34
  --sb-ghost-button-background-color-critical-hover: var(--sb-background-color-critical-inverse-hover);
37
35
  --sb-ghost-button-background-color-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
38
- --sb-ghost-button-background-color-critical-inverse-hover: var(--sb-background-color-critical-vivid-hover);
39
- --sb-ghost-button-background-color-critical-inverse-pressed: var(--sb-background-color-critical-vivid-pressed);
36
+ --sb-ghost-button-background-color-secondary-hover: var(--sb-background-color-neutral-surface-hover);
37
+ --sb-ghost-button-background-color-secondary-pressed: var(--sb-background-color-neutral-surface-pressed);
40
38
  --sb-badge-text-color-primary: var(--sb-text-color-primary-inverse);
41
39
  --sb-badge-background-color-primary: var(--sb-background-color-primary-vivid);
42
40
  --sb-button-text-color-primary: var(--sb-text-color-primary-inverse);
43
- --sb-button-text-color-primary-inverse: var(--sb-text-color-primary-vivid);
44
41
  --sb-button-icon-color-primary: var(--sb-icon-color-primary);
45
42
  --sb-button-background-color-primary: var(--sb-background-color-primary-vivid);
46
43
  --sb-button-background-color-primary-hover: var(--sb-background-color-primary-vivid-hover);
47
44
  --sb-button-background-color-primary-pressed: var(--sb-background-color-primary-vivid-pressed);
48
- --sb-button-background-color-primary-inverse: var(--sb-background-color-primary-inverse);
49
- --sb-button-background-color-primary-inverse-hover: var(--sb-background-color-primary-inverse-hover);
50
- --sb-button-background-color-primary-inverse-pressed: var(--sb-background-color-primary-inverse-pressed);
51
45
  --sb-ghost-button-text-color-primary: var(--sb-text-color-primary-vivid);
52
- --sb-ghost-button-text-color-primary-inverse: var(--sb-text-color-primary-inverse);
53
46
  --sb-ghost-button-icon-color-primary: var(--sb-icon-color-primary);
54
47
  --sb-ghost-button-background-color-primary-hover: var(--sb-background-color-primary-inverse-hover);
55
48
  --sb-ghost-button-background-color-primary-pressed: var(--sb-background-color-primary-inverse-pressed);
56
- --sb-ghost-button-background-color-primary-inverse-hover: var(--sb-background-color-primary-vivid-hover);
57
- --sb-ghost-button-background-color-primary-inverse-pressed: var(--sb-background-color-primary-vivid-pressed);
58
49
  --sb-link-text-color-primary: var(--sb-text-color-primary-vivid);
59
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@staffbase/design",
3
- "version": "18.6.0",
3
+ "version": "18.8.0",
4
4
  "description": "Staffbase Design System: Components, patterns, icons and tokens",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",