@digiko-npm/designsystem 0.9.16 → 0.9.18

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 (17) hide show
  1. package/dist/designsystem.css +27 -27
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/components/avatar.css +1 -1
  5. package/src/components/badge.css +1 -1
  6. package/src/components/card.css +2 -2
  7. package/src/components/chip.css +1 -1
  8. package/src/components/kbd.css +1 -1
  9. package/src/components/pagination.css +2 -2
  10. package/src/components/prose.css +2 -2
  11. package/src/components/segmented-control.css +1 -1
  12. package/src/components/stat-card.css +1 -1
  13. package/src/components/tabs.css +2 -2
  14. package/src/components/tag.css +7 -7
  15. package/src/components/timeline.css +1 -1
  16. package/src/components/toolbar.css +1 -1
  17. package/src/utilities/interactive.css +3 -3
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.15 */
1
+ /* @ds/designsystem v0.9.17 */
2
2
  /* ==========================================================================
3
3
  @digiko-npm/designsystem
4
4
 
@@ -3529,7 +3529,7 @@ hr {
3529
3529
  border-radius: var(--ds-radius-full);
3530
3530
  white-space: nowrap;
3531
3531
  border: 1px solid var(--ds-color-border);
3532
- background-color: var(--ds-color-bg-elevated);
3532
+ background-color: var(--ds-color-bg-muted);
3533
3533
  color: var(--ds-color-text-secondary);
3534
3534
 
3535
3535
  /* Semantic variants — subtle bg + bright text + subtle border */
@@ -3647,7 +3647,7 @@ hr {
3647
3647
  font-family: var(--ds-font-sans);
3648
3648
  line-height: var(--ds-leading-none);
3649
3649
  border-radius: var(--ds-radius-full);
3650
- background-color: var(--ds-color-bg-elevated);
3650
+ background-color: var(--ds-color-bg-muted);
3651
3651
  border: 1px solid var(--ds-color-border);
3652
3652
  color: var(--ds-color-text-secondary);
3653
3653
  white-space: nowrap;
@@ -3709,37 +3709,37 @@ hr {
3709
3709
  }
3710
3710
  .ds-tag--primary {
3711
3711
 
3712
- background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-elevated));
3712
+ background-color: var(--ds-color-interactive-subtle, var(--ds-color-bg-muted));
3713
3713
  color: var(--ds-color-interactive);
3714
3714
  border-color: var(--ds-color-interactive-border, var(--ds-color-interactive));
3715
3715
  }
3716
3716
  .ds-tag--success {
3717
3717
 
3718
- background-color: var(--ds-color-success-subtle, var(--ds-color-bg-elevated));
3718
+ background-color: var(--ds-color-success-subtle, var(--ds-color-bg-muted));
3719
3719
  color: var(--ds-color-success);
3720
3720
  border-color: var(--ds-color-success-border, var(--ds-color-success));
3721
3721
  }
3722
3722
  .ds-tag--warning {
3723
3723
 
3724
- background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-elevated));
3724
+ background-color: var(--ds-color-warning-subtle, var(--ds-color-bg-muted));
3725
3725
  color: var(--ds-color-warning);
3726
3726
  border-color: var(--ds-color-warning-border, var(--ds-color-warning));
3727
3727
  }
3728
3728
  .ds-tag--error {
3729
3729
 
3730
- background-color: var(--ds-color-error-subtle, var(--ds-color-bg-elevated));
3730
+ background-color: var(--ds-color-error-subtle, var(--ds-color-bg-muted));
3731
3731
  color: var(--ds-color-error);
3732
3732
  border-color: var(--ds-color-error-border, var(--ds-color-error));
3733
3733
  }
3734
3734
  .ds-tag--info {
3735
3735
 
3736
- background-color: var(--ds-color-info-subtle, var(--ds-color-bg-elevated));
3736
+ background-color: var(--ds-color-info-subtle, var(--ds-color-bg-muted));
3737
3737
  color: var(--ds-color-info);
3738
3738
  border-color: var(--ds-color-info-border, var(--ds-color-info));
3739
3739
  }
3740
3740
  .ds-tag--purple {
3741
3741
 
3742
- background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-elevated));
3742
+ background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-muted));
3743
3743
  color: var(--ds-color-accent-purple, var(--ds-color-interactive));
3744
3744
  border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
3745
3745
  }
@@ -3853,7 +3853,7 @@ hr {
3853
3853
  font-size: var(--ds-text-xs);
3854
3854
  font-family: inherit;
3855
3855
  color: var(--ds-color-text-secondary);
3856
- background: var(--ds-color-bg-elevated);
3856
+ background: var(--ds-color-bg-muted);
3857
3857
  border: 1px solid var(--ds-color-border);
3858
3858
  border-radius: var(--ds-radius-full);
3859
3859
  white-space: nowrap;
@@ -3926,7 +3926,7 @@ hr {
3926
3926
  width: var(--ds-size-3);
3927
3927
  height: var(--ds-size-3);
3928
3928
  border-radius: var(--ds-radius-full);
3929
- background-color: var(--ds-color-bg-elevated);
3929
+ background-color: var(--ds-color-bg-muted);
3930
3930
  color: var(--ds-color-text-secondary);
3931
3931
  font-family: var(--ds-font-sans);
3932
3932
  font-size: var(--ds-text-sm);
@@ -4105,7 +4105,7 @@ hr {
4105
4105
  display: flex;
4106
4106
  align-items: center;
4107
4107
  justify-content: center;
4108
- background-color: var(--ds-color-bg-elevated);
4108
+ background-color: var(--ds-color-bg-muted);
4109
4109
  color: var(--ds-color-text-secondary);
4110
4110
  }
4111
4111
 
@@ -4670,7 +4670,7 @@ hr {
4670
4670
  width: 1rem;
4671
4671
  height: 1rem;
4672
4672
  border-radius: var(--ds-radius-full);
4673
- background-color: var(--ds-color-bg-elevated);
4673
+ background-color: var(--ds-color-bg-muted);
4674
4674
  border: 2px solid var(--ds-color-border);
4675
4675
  z-index: 1;
4676
4676
  }
@@ -5728,7 +5728,7 @@ hr {
5728
5728
 
5729
5729
  border-block-end: none;
5730
5730
  gap: var(--ds-space-1);
5731
- background-color: var(--ds-color-bg-elevated);
5731
+ background-color: var(--ds-color-bg-muted);
5732
5732
  border-radius: var(--ds-radius-lg);
5733
5733
  padding: var(--ds-space-1);
5734
5734
 
@@ -5928,7 +5928,7 @@ hr {
5928
5928
  font-weight: var(--ds-weight-medium);
5929
5929
  line-height: var(--ds-leading-snug);
5930
5930
  color: var(--ds-color-text-tertiary);
5931
- background-color: var(--ds-color-bg-elevated);
5931
+ background-color: var(--ds-color-bg-muted);
5932
5932
  border-radius: var(--ds-radius-full);
5933
5933
  min-width: 1.25rem;
5934
5934
  }
@@ -6049,7 +6049,7 @@ hr {
6049
6049
  }
6050
6050
  .ds-pagination__item:hover {
6051
6051
 
6052
- background-color: var(--ds-color-bg-elevated);
6052
+ background-color: var(--ds-color-bg-muted);
6053
6053
  color: var(--ds-color-text);
6054
6054
  }
6055
6055
  .ds-pagination__item:focus-visible {
@@ -6102,7 +6102,7 @@ hr {
6102
6102
  .ds-pagination__prev:hover,
6103
6103
  .ds-pagination__next:hover {
6104
6104
 
6105
- background-color: var(--ds-color-bg-elevated);
6105
+ background-color: var(--ds-color-bg-muted);
6106
6106
  color: var(--ds-color-text);
6107
6107
  }
6108
6108
  .ds-pagination__prev:focus-visible,
@@ -6175,7 +6175,7 @@ hr {
6175
6175
  align-items: center;
6176
6176
  gap: var(--ds-space-0-5);
6177
6177
  padding: var(--ds-space-0-5);
6178
- background-color: var(--ds-color-bg-elevated);
6178
+ background-color: var(--ds-color-bg-muted);
6179
6179
  border-radius: var(--ds-radius-lg);
6180
6180
  border: 1px solid var(--ds-color-border-subtle);
6181
6181
 
@@ -6613,7 +6613,7 @@ hr {
6613
6613
  }
6614
6614
  .ds-toolbar__segmented-btn--active {
6615
6615
 
6616
- background: var(--ds-color-bg-elevated);
6616
+ background: var(--ds-color-bg-muted);
6617
6617
  color: var(--ds-color-text);
6618
6618
  }
6619
6619
 
@@ -8668,7 +8668,7 @@ hr {
8668
8668
  }
8669
8669
  .ds-card--elevated {
8670
8670
 
8671
- background-color: var(--ds-color-bg-elevated);
8671
+ background-color: var(--ds-color-bg-muted);
8672
8672
  box-shadow: var(--ds-shadow-lg);
8673
8673
  }
8674
8674
  .ds-card--hover:hover {
@@ -8714,7 +8714,7 @@ hr {
8714
8714
  width: 100%;
8715
8715
  aspect-ratio: 16/10;
8716
8716
  object-fit: cover;
8717
- background-color: var(--ds-color-bg-elevated);
8717
+ background-color: var(--ds-color-bg-muted);
8718
8718
 
8719
8719
 
8720
8720
 
@@ -10129,13 +10129,13 @@ hr {
10129
10129
  .ds-prose-block code {
10130
10130
  font-family: var(--ds-font-mono);
10131
10131
  font-size: var(--ds-text-sm);
10132
- background-color: var(--ds-color-bg-elevated);
10132
+ background-color: var(--ds-color-bg-muted);
10133
10133
  padding: 0.125em 0.375em;
10134
10134
  border-radius: var(--ds-radius-sm);
10135
10135
  }
10136
10136
 
10137
10137
  .ds-prose-block pre {
10138
- background-color: var(--ds-color-bg-elevated);
10138
+ background-color: var(--ds-color-bg-muted);
10139
10139
  padding: var(--ds-space-4);
10140
10140
  border-radius: var(--ds-radius-lg);
10141
10141
  overflow-x: auto;
@@ -10783,7 +10783,7 @@ hr {
10783
10783
  padding: var(--ds-space-0-5) var(--ds-space-1-5);
10784
10784
  font-family: var(--ds-font-mono);
10785
10785
  font-size: var(--ds-text-xs);
10786
- background-color: var(--ds-color-bg-elevated);
10786
+ background-color: var(--ds-color-bg-muted);
10787
10787
  border: 1px solid var(--ds-color-border);
10788
10788
  border-block-end-width: 2px;
10789
10789
  border-radius: var(--ds-radius-sm);
@@ -12207,7 +12207,7 @@ tr:hover .ds-sortable__handle,
12207
12207
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
12208
12208
  }
12209
12209
  .ds-hover-row:hover {
12210
- background-color: var(--ds-color-bg-elevated);
12210
+ background-color: var(--ds-color-surface-hover);
12211
12211
  }
12212
12212
 
12213
12213
  /* Subtle variant (semi-transparent) */
@@ -12215,7 +12215,7 @@ tr:hover .ds-sortable__handle,
12215
12215
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
12216
12216
  }
12217
12217
  .ds-hover-row--subtle:hover {
12218
- background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
12218
+ background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
12219
12219
  }
12220
12220
 
12221
12221
  /* --- Group Reveal (children appear on parent hover) — .ds-group-reveal --- */
@@ -12281,7 +12281,7 @@ tr:hover .ds-sortable__handle,
12281
12281
 
12282
12282
  /* --- Semi-transparent Backgrounds --- */
12283
12283
  .ds-bg-elevated-50 {
12284
- background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
12284
+ background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
12285
12285
  }
12286
12286
 
12287
12287
  .ds-bg-base-50 {