@staffbase/design 18.8.1 → 19.0.1

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/v17-migrate-tokens/README.md +176 -0
  2. package/codemods/v17-migrate-tokens/transform.js +428 -0
  3. package/codemods/v19-migrate-button/README.md +94 -0
  4. package/codemods/v19-migrate-button/transform.js +277 -0
  5. package/dist/components.css +1 -1
  6. package/dist/main.cjs +84 -66
  7. package/dist/main.cjs.map +1 -1
  8. package/dist/main.d.ts +22 -5
  9. package/dist/main.js +84 -67
  10. package/dist/main.js.map +1 -1
  11. package/dist/theme.css +38 -23
  12. package/dist/tokens/component.css +36 -21
  13. package/package.json +2 -1
package/dist/theme.css CHANGED
@@ -349,29 +349,39 @@ limitations under the License.
349
349
  --background-color-badge-primary: var(--sb-badge-background-color-primary);
350
350
 
351
351
  /* Component Button colors */
352
- --text-color-button-critical: var(--sb-button-text-color-critical);
353
- --text-color-button-primary: var(--sb-button-text-color-primary);
354
- --text-color-button-secondary: var(--sb-button-text-color-secondary);
355
- --background-color-button-critical: var(--sb-button-background-color-critical);
356
- --background-color-button-critical-hover: var(--sb-button-background-color-critical-hover);
357
- --background-color-button-critical-pressed: var(--sb-button-background-color-critical-pressed);
358
- --background-color-button-primary: var(--sb-button-background-color-primary);
359
- --background-color-button-primary-hover: var(--sb-button-background-color-primary-hover);
360
- --background-color-button-primary-pressed: var(--sb-button-background-color-primary-pressed);
361
- --background-color-button-secondary: var(--sb-button-background-color-secondary);
362
- --background-color-button-secondary-hover: var(--sb-button-background-color-secondary-hover);
363
- --background-color-button-secondary-pressed: var(--sb-button-background-color-secondary-pressed);
364
-
365
- /* Component Ghost Button colors */
366
- --text-color-ghost-button-critical: var(--sb-ghost-button-text-color-critical);
367
- --text-color-ghost-button-primary: var(--sb-ghost-button-text-color-primary);
368
- --text-color-ghost-button-secondary: var(--sb-ghost-button-text-color-secondary);
369
- --background-color-ghost-button-critical-hover: var(--sb-ghost-button-background-color-critical-hover);
370
- --background-color-ghost-button-critical-pressed: var(--sb-ghost-button-background-color-critical-pressed);
371
- --background-color-ghost-button-primary-hover: var(--sb-ghost-button-background-color-primary-hover);
372
- --background-color-ghost-button-primary-pressed: var(--sb-ghost-button-background-color-primary-pressed);
373
- --background-color-ghost-button-secondary-hover: var(--sb-ghost-button-background-color-secondary-hover);
374
- --background-color-ghost-button-secondary-pressed: var(--sb-ghost-button-background-color-secondary-pressed);
352
+ --text-color-button-solid-primary: var(--sb-button-text-color-solid-primary);
353
+ --text-color-button-solid-neutral: var(--sb-button-text-color-solid-neutral);
354
+ --text-color-button-solid-critical: var(--sb-button-text-color-solid-critical);
355
+ --text-color-button-outline-primary: var(--sb-button-text-color-outline-primary);
356
+ --text-color-button-outline-neutral: var(--sb-button-text-color-outline-neutral);
357
+ --text-color-button-outline-critical: var(--sb-button-text-color-outline-critical);
358
+ --text-color-button-ghost-primary: var(--sb-button-text-color-ghost-primary);
359
+ --text-color-button-ghost-neutral: var(--sb-button-text-color-ghost-neutral);
360
+ --text-color-button-ghost-critical: var(--sb-button-text-color-ghost-critical);
361
+ --background-color-button-solid-primary: var(--sb-button-background-color-solid-primary);
362
+ --background-color-button-solid-primary-hover: var(--sb-button-background-color-solid-primary-hover);
363
+ --background-color-button-solid-primary-pressed: var(--sb-button-background-color-solid-primary-pressed);
364
+ --background-color-button-solid-neutral: var(--sb-button-background-color-solid-neutral);
365
+ --background-color-button-solid-neutral-hover: var(--sb-button-background-color-solid-neutral-hover);
366
+ --background-color-button-solid-neutral-pressed: var(--sb-button-background-color-solid-neutral-pressed);
367
+ --background-color-button-solid-critical: var(--sb-button-background-color-solid-critical);
368
+ --background-color-button-solid-critical-hover: var(--sb-button-background-color-solid-critical-hover);
369
+ --background-color-button-solid-critical-pressed: var(--sb-button-background-color-solid-critical-pressed);
370
+ --background-color-button-outline-primary-hover: var(--sb-button-background-color-outline-primary-hover);
371
+ --background-color-button-outline-primary-pressed: var(--sb-button-background-color-outline-primary-pressed);
372
+ --background-color-button-outline-neutral-hover: var(--sb-button-background-color-outline-neutral-hover);
373
+ --background-color-button-outline-neutral-pressed: var(--sb-button-background-color-outline-neutral-pressed);
374
+ --background-color-button-outline-critical-hover: var(--sb-button-background-color-outline-critical-hover);
375
+ --background-color-button-outline-critical-pressed: var(--sb-button-background-color-outline-critical-pressed);
376
+ --background-color-button-ghost-primary-hover: var(--sb-button-background-color-ghost-primary-hover);
377
+ --background-color-button-ghost-primary-pressed: var(--sb-button-background-color-ghost-primary-pressed);
378
+ --background-color-button-ghost-neutral-hover: var(--sb-button-background-color-ghost-neutral-hover);
379
+ --background-color-button-ghost-neutral-pressed: var(--sb-button-background-color-ghost-neutral-pressed);
380
+ --background-color-button-ghost-critical-hover: var(--sb-button-background-color-ghost-critical-hover);
381
+ --background-color-button-ghost-critical-pressed: var(--sb-button-background-color-ghost-critical-pressed);
382
+ --ring-color-button-outline-primary: var(--sb-button-border-color-outline-primary);
383
+ --ring-color-button-outline-neutral: var(--sb-button-border-color-outline-neutral);
384
+ --ring-color-button-outline-critical: var(--sb-button-border-color-outline-critical);
375
385
 
376
386
  /* Component Link colors */
377
387
  --text-color-link-primary: var(--sb-link-text-color-primary);
@@ -390,6 +400,11 @@ limitations under the License.
390
400
  --radius-lg: var(--sb-radius-lg);
391
401
  --radius-xl: var(--sb-radius-xl);
392
402
 
403
+ /* Component Button border radius */
404
+ --radius-button-primary: var(--sb-button-border-radius-primary);
405
+ --radius-button-neutral: var(--sb-button-border-radius-neutral);
406
+ --radius-button-critical: var(--sb-button-border-radius-critical);
407
+
393
408
  /* Fonts */
394
409
  --font-*: initial;
395
410
  --font-default: var(--sb-font-family-default);
package/dist/tokens/component.css CHANGED
@@ -15,30 +15,45 @@ limitations under the License.
15
15
  */
16
16
 
17
17
  :root, :host {
18
+ --sb-button-border-radius-primary: var(--sb-radius-md);
19
+ --sb-button-border-radius-neutral: var(--sb-radius-md);
20
+ --sb-button-border-radius-critical: var(--sb-radius-md);
18
21
  --sb-badge-text-color-critical: var(--sb-text-color-critical-inverse);
19
22
  --sb-badge-background-color-critical: var(--sb-background-color-critical-vivid);
20
- --sb-button-text-color-critical: var(--sb-text-color-critical-inverse);
21
- --sb-button-text-color-secondary: var(--sb-text-color-neutral-strong);
22
- --sb-button-background-color-critical: var(--sb-background-color-critical-vivid);
23
- --sb-button-background-color-critical-hover: var(--sb-background-color-critical-vivid-hover);
24
- --sb-button-background-color-critical-pressed: var(--sb-background-color-critical-vivid-pressed);
25
- --sb-button-background-color-secondary: var(--sb-background-color-neutral-medium);
26
- --sb-button-background-color-secondary-hover: var(--sb-background-color-neutral-medium-hover);
27
- --sb-button-background-color-secondary-pressed: var(--sb-background-color-neutral-medium-pressed);
28
- --sb-ghost-button-text-color-critical: var(--sb-text-color-critical-vivid);
29
- --sb-ghost-button-text-color-secondary: var(--sb-text-color-neutral-strong);
30
- --sb-ghost-button-background-color-critical-hover: var(--sb-background-color-critical-inverse-hover);
31
- --sb-ghost-button-background-color-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
32
- --sb-ghost-button-background-color-secondary-hover: var(--sb-background-color-neutral-surface-hover);
33
- --sb-ghost-button-background-color-secondary-pressed: var(--sb-background-color-neutral-surface-pressed);
23
+ --sb-button-text-color-solid-neutral: var(--sb-text-color-neutral-strong);
24
+ --sb-button-text-color-solid-critical: var(--sb-text-color-critical-inverse);
25
+ --sb-button-text-color-outline-neutral: var(--sb-text-color-neutral-strong);
26
+ --sb-button-text-color-outline-critical: var(--sb-text-color-critical-vivid);
27
+ --sb-button-text-color-ghost-neutral: var(--sb-text-color-neutral-strong);
28
+ --sb-button-text-color-ghost-critical: var(--sb-text-color-critical-vivid);
29
+ --sb-button-background-color-solid-neutral: var(--sb-background-color-neutral-medium);
30
+ --sb-button-background-color-solid-neutral-hover: var(--sb-background-color-neutral-medium-hover);
31
+ --sb-button-background-color-solid-neutral-pressed: var(--sb-background-color-neutral-medium-pressed);
32
+ --sb-button-background-color-solid-critical: var(--sb-background-color-critical-vivid);
33
+ --sb-button-background-color-solid-critical-hover: var(--sb-background-color-critical-vivid-hover);
34
+ --sb-button-background-color-solid-critical-pressed: var(--sb-background-color-critical-vivid-pressed);
35
+ --sb-button-background-color-outline-neutral-hover: var(--sb-background-color-neutral-surface-hover);
36
+ --sb-button-background-color-outline-neutral-pressed: var(--sb-background-color-neutral-surface-pressed);
37
+ --sb-button-background-color-outline-critical-hover: var(--sb-background-color-critical-inverse-hover);
38
+ --sb-button-background-color-outline-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
39
+ --sb-button-background-color-ghost-neutral-hover: var(--sb-background-color-neutral-surface-hover);
40
+ --sb-button-background-color-ghost-neutral-pressed: var(--sb-background-color-neutral-surface-pressed);
41
+ --sb-button-background-color-ghost-critical-hover: var(--sb-background-color-critical-inverse-hover);
42
+ --sb-button-background-color-ghost-critical-pressed: var(--sb-background-color-critical-inverse-pressed);
43
+ --sb-button-border-color-outline-neutral: var(--sb-border-color-neutral-medium);
44
+ --sb-button-border-color-outline-critical: var(--sb-border-color-critical);
34
45
  --sb-badge-text-color-primary: var(--sb-text-color-primary-inverse);
35
46
  --sb-badge-background-color-primary: var(--sb-background-color-primary-vivid);
36
- --sb-button-text-color-primary: var(--sb-text-color-primary-inverse);
37
- --sb-button-background-color-primary: var(--sb-background-color-primary-vivid);
38
- --sb-button-background-color-primary-hover: var(--sb-background-color-primary-vivid-hover);
39
- --sb-button-background-color-primary-pressed: var(--sb-background-color-primary-vivid-pressed);
40
- --sb-ghost-button-text-color-primary: var(--sb-text-color-primary-vivid);
41
- --sb-ghost-button-background-color-primary-hover: var(--sb-background-color-primary-inverse-hover);
42
- --sb-ghost-button-background-color-primary-pressed: var(--sb-background-color-primary-inverse-pressed);
47
+ --sb-button-text-color-solid-primary: var(--sb-text-color-primary-inverse);
48
+ --sb-button-text-color-outline-primary: var(--sb-text-color-primary-vivid);
49
+ --sb-button-text-color-ghost-primary: var(--sb-text-color-primary-vivid);
50
+ --sb-button-background-color-solid-primary: var(--sb-background-color-primary-vivid);
51
+ --sb-button-background-color-solid-primary-hover: var(--sb-background-color-primary-vivid-hover);
52
+ --sb-button-background-color-solid-primary-pressed: var(--sb-background-color-primary-vivid-pressed);
53
+ --sb-button-background-color-outline-primary-hover: var(--sb-background-color-primary-inverse-hover);
54
+ --sb-button-background-color-outline-primary-pressed: var(--sb-background-color-primary-inverse-pressed);
55
+ --sb-button-background-color-ghost-primary-hover: var(--sb-background-color-primary-inverse-hover);
56
+ --sb-button-background-color-ghost-primary-pressed: var(--sb-background-color-primary-inverse-pressed);
57
+ --sb-button-border-color-outline-primary: var(--sb-border-color-primary);
43
58
  --sb-link-text-color-primary: var(--sb-text-color-primary-vivid);
44
59
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@staffbase/design",
3
- "version": "18.8.1",
3
+ "version": "19.0.1",
4
4
  "description": "Staffbase Design System: Components, patterns, icons and tokens",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -26,6 +26,7 @@
26
26
  },
27
27
  "files": [
28
28
  "dist/**",
29
+ "codemods/**",
29
30
  "AGENTS.md",
30
31
  "docs/package_instructions.md"
31
32
  ],