@digiko-npm/designsystem 0.9.42 → 0.9.43

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 (38) hide show
  1. package/dist/designsystem.css +232 -76
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/base/typography.css +1 -1
  5. package/src/components/admin-layout.css +3 -3
  6. package/src/components/avatar.css +1 -1
  7. package/src/components/badge.css +1 -1
  8. package/src/components/bottom-sheet.css +1 -1
  9. package/src/components/button.css +2 -2
  10. package/src/components/card.css +2 -2
  11. package/src/components/chip.css +1 -1
  12. package/src/components/combobox.css +3 -3
  13. package/src/components/command.css +3 -3
  14. package/src/components/custom-select.css +3 -3
  15. package/src/components/datepicker.css +5 -5
  16. package/src/components/description-list.css +1 -1
  17. package/src/components/drop-zone.css +1 -1
  18. package/src/components/dropdown.css +3 -3
  19. package/src/components/gallery.css +3 -3
  20. package/src/components/kbd.css +1 -1
  21. package/src/components/nav.css +1 -1
  22. package/src/components/popover.css +1 -1
  23. package/src/components/progress.css +1 -1
  24. package/src/components/prose.css +149 -2
  25. package/src/components/search.css +4 -4
  26. package/src/components/segmented-control.css +2 -2
  27. package/src/components/skeleton.css +1 -1
  28. package/src/components/slider.css +1 -1
  29. package/src/components/stat-card.css +1 -1
  30. package/src/components/table.css +1 -1
  31. package/src/components/tabs.css +4 -4
  32. package/src/components/tag.css +7 -7
  33. package/src/components/timeline.css +1 -1
  34. package/src/components/toggle.css +2 -2
  35. package/src/components/toolbar.css +2 -2
  36. package/src/tokens/typography.css +9 -0
  37. package/src/utilities/states.css +6 -6
  38. package/src/utilities/text.css +3 -3
package/src/components/tag.css CHANGED
@@ -31,7 +31,7 @@
31
31
  font-family: var(--ds-font-sans);
32
32
  line-height: var(--ds-leading-none);
33
33
  border-radius: var(--ds-radius-full);
34
- background-color: var(--ds-color-bg-muted);
34
+ background-color: var(--ds-color-surface-muted);
35
35
  border: 1px solid var(--ds-color-border);
36
36
  color: var(--ds-color-text-secondary);
37
37
  white-space: nowrap;
@@ -48,37 +48,37 @@
48
48
  --------------------------------------------------------------------------- */
49
49
 
50
50
  &--primary {
51
- background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-muted));
51
+ background-color: var(--ds-color-interactive-subtle, var(--ds-color-surface-muted));
52
52
  color: var(--ds-color-interactive);
53
53
  border-color: var(--ds-color-interactive-border, var(--ds-color-interactive));
54
54
  }
55
55
 
56
56
  &--success {
57
- background-color: var(--ds-color-success-subtle, var(--ds-color-bg-muted));
57
+ background-color: var(--ds-color-success-subtle, var(--ds-color-surface-muted));
58
58
  color: var(--ds-color-success);
59
59
  border-color: var(--ds-color-success-border, var(--ds-color-success));
60
60
  }
61
61
 
62
62
  &--warning {
63
- background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-muted));
63
+ background-color: var(--ds-color-warning-subtle, var(--ds-color-surface-muted));
64
64
  color: var(--ds-color-warning);
65
65
  border-color: var(--ds-color-warning-border, var(--ds-color-warning));
66
66
  }
67
67
 
68
68
  &--error {
69
- background-color: var(--ds-color-error-subtle, var(--ds-color-bg-muted));
69
+ background-color: var(--ds-color-error-subtle, var(--ds-color-surface-muted));
70
70
  color: var(--ds-color-error);
71
71
  border-color: var(--ds-color-error-border, var(--ds-color-error));
72
72
  }
73
73
 
74
74
  &--info {
75
- background-color: var(--ds-color-info-subtle, var(--ds-color-bg-muted));
75
+ background-color: var(--ds-color-info-subtle, var(--ds-color-surface-muted));
76
76
  color: var(--ds-color-info);
77
77
  border-color: var(--ds-color-info-border, var(--ds-color-info));
78
78
  }
79
79
 
80
80
  &--purple {
81
- background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-muted));
81
+ background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-surface-muted));
82
82
  color: var(--ds-color-accent-purple, var(--ds-color-interactive));
83
83
  border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
84
84
  }
package/src/components/timeline.css CHANGED
@@ -74,7 +74,7 @@
74
74
  width: 1rem;
75
75
  height: 1rem;
76
76
  border-radius: var(--ds-radius-full);
77
- background-color: var(--ds-color-bg-muted);
77
+ background-color: var(--ds-color-surface-muted);
78
78
  border: 2px solid var(--ds-color-border);
79
79
  z-index: 1;
80
80
  }
package/src/components/toggle.css CHANGED
@@ -32,7 +32,7 @@
32
32
  padding: 2px;
33
33
  border: 1px solid var(--ds-color-border);
34
34
  border-radius: var(--ds-radius-full);
35
- background-color: var(--ds-color-bg-elevated);
35
+ background-color: var(--ds-color-surface-elevated);
36
36
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
37
37
  cursor: pointer;
38
38
  transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
@@ -82,7 +82,7 @@
82
82
  --------------------------------------------------------------------------- */
83
83
 
84
84
  &:hover {
85
- background-color: var(--ds-color-bg-elevated-hover);
85
+ background-color: var(--ds-color-surface-elevated-hover);
86
86
  }
87
87
 
88
88
  &[aria-checked="true"]:hover,
package/src/components/toolbar.css CHANGED
@@ -104,7 +104,7 @@
104
104
  &--active,
105
105
  &--active:hover {
106
106
  color: var(--ds-color-text);
107
- background: var(--ds-color-bg-elevated);
107
+ background: var(--ds-color-surface-elevated);
108
108
  border-color: var(--ds-color-border);
109
109
  }
110
110
  }
@@ -165,7 +165,7 @@
165
165
  }
166
166
 
167
167
  &--active {
168
- background: var(--ds-color-bg-elevated);
168
+ background: var(--ds-color-surface-elevated);
169
169
  color: var(--ds-color-text);
170
170
  }
171
171
  }
package/src/tokens/typography.css CHANGED
@@ -29,6 +29,15 @@
29
29
  --ds-text-6xl: 3.75rem; /* 60px */
30
30
  --ds-text-7xl: 4.5rem; /* 72px */
31
31
 
32
+ /* --- Editorial long-form fluid sizes ---
33
+ Promoted from esys/blog.css on 12 Apr 2026 after the blog incident.
34
+ These target magazine-style article reading, between the functional
35
+ UI scale (ds-text-*) and the display scale (ds-hero-title). Used by
36
+ .ds-editorial-title and .ds-editorial-lede in components/prose.css. */
37
+ --ds-text-editorial-title: clamp(2.5rem, 4vw + 1.5rem, 4.5rem); /* 40 → 72px */
38
+ --ds-text-editorial-lede: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18 → 22px */
39
+ --ds-text-editorial-body: 1.0625rem; /* 17px fixed — sweet spot for long-form body */
40
+
32
41
  /* --- Font Weights --- */
33
42
  --ds-weight-light: 300;
34
43
  --ds-weight-normal: 400;
package/src/utilities/states.css CHANGED
@@ -19,9 +19,9 @@
19
19
 
20
20
  /* --- Hover: Background --- */
21
21
  .hover\:ds-bg-base:hover { background-color: var(--ds-color-bg); }
22
- .hover\:ds-bg-subtle:hover { background-color: var(--ds-color-bg-subtle); }
23
- .hover\:ds-bg-muted:hover { background-color: var(--ds-color-bg-muted); }
24
- .hover\:ds-bg-elevated:hover { background-color: var(--ds-color-bg-elevated); }
22
+ .hover\:ds-bg-subtle:hover { background-color: var(--ds-color-surface); }
23
+ .hover\:ds-bg-muted:hover { background-color: var(--ds-color-surface-muted); }
24
+ .hover\:ds-bg-elevated:hover { background-color: var(--ds-color-surface-elevated); }
25
25
  .hover\:ds-bg-surface:hover { background-color: var(--ds-color-surface); }
26
26
  .hover\:ds-bg-hover:hover { background-color: var(--ds-color-surface-hover); }
27
27
  .hover\:ds-bg-inverted:hover { background-color: var(--ds-color-inverted); }
@@ -100,8 +100,8 @@
100
100
  ========================================================================== */
101
101
 
102
102
  .active\:ds-bg-hover:active { background-color: var(--ds-color-surface-hover); }
103
- .active\:ds-bg-muted:active { background-color: var(--ds-color-bg-muted); }
104
- .active\:ds-bg-elevated:active { background-color: var(--ds-color-bg-elevated); }
103
+ .active\:ds-bg-muted:active { background-color: var(--ds-color-surface-muted); }
104
+ .active\:ds-bg-elevated:active { background-color: var(--ds-color-surface-elevated); }
105
105
  .active\:ds-scale-95:active { transform: scale(0.95); }
106
106
  .active\:ds-scale-98:active { transform: scale(0.98); }
107
107
 
@@ -119,7 +119,7 @@
119
119
  .disabled\:ds-cursor-not-allowed[aria-disabled="true"] { cursor: not-allowed; }
120
120
 
121
121
  .disabled\:ds-bg-subtle:disabled,
122
- .disabled\:ds-bg-subtle[aria-disabled="true"] { background-color: var(--ds-color-bg-subtle); }
122
+ .disabled\:ds-bg-subtle[aria-disabled="true"] { background-color: var(--ds-color-surface); }
123
123
 
124
124
  .disabled\:ds-pointer-events-none:disabled,
125
125
  .disabled\:ds-pointer-events-none[aria-disabled="true"] { pointer-events: none; }
package/src/utilities/text.css CHANGED
@@ -70,11 +70,11 @@
70
70
  /* --- Background Color --- */
71
71
  .ds-bg-base { background-color: var(--ds-color-bg); }
72
72
  .ds-bg-surface { background-color: var(--ds-color-surface); }
73
- .ds-bg-subtle { background-color: var(--ds-color-bg-subtle); }
74
- .ds-bg-elevated { background-color: var(--ds-color-bg-elevated); }
73
+ .ds-bg-subtle { background-color: var(--ds-color-surface); }
74
+ .ds-bg-elevated { background-color: var(--ds-color-surface-elevated); }
75
75
  .ds-bg-inverted { background-color: var(--ds-color-inverted); color: var(--ds-color-on-inverted); }
76
76
  .ds-bg-hover { background-color: var(--ds-color-surface-hover); }
77
- .ds-bg-muted { background-color: var(--ds-color-bg-muted); }
77
+ .ds-bg-muted { background-color: var(--ds-color-surface-muted); }
78
78
  .ds-bg-overlay { background-color: var(--ds-color-overlay); }
79
79
  .ds-bg-nav { background-color: var(--ds-color-nav-bg); }
80
80