@digiko-npm/designsystem 0.9.15 → 0.9.17

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 (16) hide show
  1. package/dist/designsystem.css +62 -24
  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 +30 -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
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.14 */
1
+ /* @ds/designsystem v0.9.16 */
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
  }
@@ -5704,6 +5704,10 @@ hr {
5704
5704
 
5705
5705
 
5706
5706
 
5707
+ /* --- Pills flat variant (pills without container background) --- */
5708
+
5709
+
5710
+
5707
5711
  /* --- Vertical variant --- */
5708
5712
 
5709
5713
 
@@ -5724,7 +5728,7 @@ hr {
5724
5728
 
5725
5729
  border-block-end: none;
5726
5730
  gap: var(--ds-space-1);
5727
- background-color: var(--ds-color-bg-elevated);
5731
+ background-color: var(--ds-color-bg-muted);
5728
5732
  border-radius: var(--ds-radius-lg);
5729
5733
  padding: var(--ds-space-1);
5730
5734
 
@@ -5750,6 +5754,40 @@ hr {
5750
5754
  }
5751
5755
  .ds-tabs--pills .ds-tab--active {
5752
5756
 
5757
+ background-color: var(--ds-color-surface);
5758
+ color: var(--ds-color-text);
5759
+ box-shadow: var(--ds-shadow-sm);
5760
+ border-block-end: none;
5761
+ }
5762
+ .ds-tabs--pills-flat {
5763
+
5764
+ border-block-end: none;
5765
+ gap: var(--ds-space-1);
5766
+ background: none;
5767
+ padding: 0;
5768
+
5769
+
5770
+ }
5771
+ .ds-tabs--pills-flat .ds-tab {
5772
+
5773
+ border-block-end: none;
5774
+ border-radius: var(--ds-radius-md);
5775
+ padding: var(--ds-space-1-5) var(--ds-space-3);
5776
+
5777
+
5778
+
5779
+
5780
+ }
5781
+ @media (hover: hover) {
5782
+
5783
+ .ds-tabs--pills-flat .ds-tab:hover {
5784
+
5785
+ background-color: var(--ds-color-overlay-hover);
5786
+ }
5787
+
5788
+ }
5789
+ .ds-tabs--pills-flat .ds-tab--active {
5790
+
5753
5791
  background-color: var(--ds-color-surface);
5754
5792
  color: var(--ds-color-text);
5755
5793
  box-shadow: var(--ds-shadow-sm);
@@ -5890,7 +5928,7 @@ hr {
5890
5928
  font-weight: var(--ds-weight-medium);
5891
5929
  line-height: var(--ds-leading-snug);
5892
5930
  color: var(--ds-color-text-tertiary);
5893
- background-color: var(--ds-color-bg-elevated);
5931
+ background-color: var(--ds-color-bg-muted);
5894
5932
  border-radius: var(--ds-radius-full);
5895
5933
  min-width: 1.25rem;
5896
5934
  }
@@ -6011,7 +6049,7 @@ hr {
6011
6049
  }
6012
6050
  .ds-pagination__item:hover {
6013
6051
 
6014
- background-color: var(--ds-color-bg-elevated);
6052
+ background-color: var(--ds-color-bg-muted);
6015
6053
  color: var(--ds-color-text);
6016
6054
  }
6017
6055
  .ds-pagination__item:focus-visible {
@@ -6064,7 +6102,7 @@ hr {
6064
6102
  .ds-pagination__prev:hover,
6065
6103
  .ds-pagination__next:hover {
6066
6104
 
6067
- background-color: var(--ds-color-bg-elevated);
6105
+ background-color: var(--ds-color-bg-muted);
6068
6106
  color: var(--ds-color-text);
6069
6107
  }
6070
6108
  .ds-pagination__prev:focus-visible,
@@ -6137,7 +6175,7 @@ hr {
6137
6175
  align-items: center;
6138
6176
  gap: var(--ds-space-0-5);
6139
6177
  padding: var(--ds-space-0-5);
6140
- background-color: var(--ds-color-bg-elevated);
6178
+ background-color: var(--ds-color-bg-muted);
6141
6179
  border-radius: var(--ds-radius-lg);
6142
6180
  border: 1px solid var(--ds-color-border-subtle);
6143
6181
 
@@ -6575,7 +6613,7 @@ hr {
6575
6613
  }
6576
6614
  .ds-toolbar__segmented-btn--active {
6577
6615
 
6578
- background: var(--ds-color-bg-elevated);
6616
+ background: var(--ds-color-bg-muted);
6579
6617
  color: var(--ds-color-text);
6580
6618
  }
6581
6619
 
@@ -8630,7 +8668,7 @@ hr {
8630
8668
  }
8631
8669
  .ds-card--elevated {
8632
8670
 
8633
- background-color: var(--ds-color-bg-elevated);
8671
+ background-color: var(--ds-color-bg-muted);
8634
8672
  box-shadow: var(--ds-shadow-lg);
8635
8673
  }
8636
8674
  .ds-card--hover:hover {
@@ -8676,7 +8714,7 @@ hr {
8676
8714
  width: 100%;
8677
8715
  aspect-ratio: 16/10;
8678
8716
  object-fit: cover;
8679
- background-color: var(--ds-color-bg-elevated);
8717
+ background-color: var(--ds-color-bg-muted);
8680
8718
 
8681
8719
 
8682
8720
 
@@ -10091,13 +10129,13 @@ hr {
10091
10129
  .ds-prose-block code {
10092
10130
  font-family: var(--ds-font-mono);
10093
10131
  font-size: var(--ds-text-sm);
10094
- background-color: var(--ds-color-bg-elevated);
10132
+ background-color: var(--ds-color-bg-muted);
10095
10133
  padding: 0.125em 0.375em;
10096
10134
  border-radius: var(--ds-radius-sm);
10097
10135
  }
10098
10136
 
10099
10137
  .ds-prose-block pre {
10100
- background-color: var(--ds-color-bg-elevated);
10138
+ background-color: var(--ds-color-bg-muted);
10101
10139
  padding: var(--ds-space-4);
10102
10140
  border-radius: var(--ds-radius-lg);
10103
10141
  overflow-x: auto;
@@ -10745,7 +10783,7 @@ hr {
10745
10783
  padding: var(--ds-space-0-5) var(--ds-space-1-5);
10746
10784
  font-family: var(--ds-font-mono);
10747
10785
  font-size: var(--ds-text-xs);
10748
- background-color: var(--ds-color-bg-elevated);
10786
+ background-color: var(--ds-color-bg-muted);
10749
10787
  border: 1px solid var(--ds-color-border);
10750
10788
  border-block-end-width: 2px;
10751
10789
  border-radius: var(--ds-radius-sm);