@digiko-npm/designsystem 0.9.29 → 0.9.31

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digiko-npm/designsystem",
3
- "version": "0.9.29",
3
+ "version": "0.9.31",
4
4
  "description": "Design system — installable, extensible, indestructible.",
5
5
  "main": "dist/designsystem.css",
6
6
  "style": "dist/designsystem.css",
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  &:hover {
94
- background-color: var(--ds-color-overlay-hover);
94
+ background-color: var(--ds-color-surface-hover);
95
95
  }
96
96
 
97
97
  &:focus-visible {
@@ -80,7 +80,7 @@
80
80
 
81
81
  &:hover {
82
82
  color: var(--ds-color-text);
83
- background-color: var(--ds-color-overlay-hover);
83
+ background-color: var(--ds-color-surface-hover);
84
84
  opacity: 1;
85
85
  }
86
86
  }
@@ -44,7 +44,7 @@
44
44
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
45
45
 
46
46
  &:hover {
47
- background: var(--ds-color-overlay-hover);
47
+ background: var(--ds-color-surface-hover);
48
48
  }
49
49
  }
50
50
 
@@ -73,7 +73,7 @@
73
73
 
74
74
  &:hover {
75
75
  color: var(--ds-color-text);
76
- background: var(--ds-color-overlay-hover);
76
+ background: var(--ds-color-surface-hover);
77
77
  }
78
78
  }
79
79
  }
@@ -35,7 +35,7 @@
35
35
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
36
36
 
37
37
  &:hover {
38
- background-color: var(--ds-color-overlay-hover);
38
+ background-color: var(--ds-color-surface-hover);
39
39
  }
40
40
 
41
41
  &:focus-visible {
@@ -148,12 +148,12 @@
148
148
 
149
149
  /* Item hover & active states */
150
150
  &:hover {
151
- background-color: var(--ds-color-overlay-hover);
151
+ background-color: var(--ds-color-bg-muted-hover);
152
152
  color: var(--ds-color-text);
153
153
  }
154
154
 
155
155
  &--active {
156
- background-color: var(--ds-color-overlay-active);
156
+ background-color: var(--ds-color-bg-elevated);
157
157
  color: var(--ds-color-text);
158
158
 
159
159
  & .ds-command__item-icon,
@@ -119,7 +119,7 @@
119
119
  transition: all var(--ds-duration-fast) var(--ds-ease-default);
120
120
 
121
121
  &:hover {
122
- background-color: var(--ds-color-overlay-hover);
122
+ background-color: var(--ds-color-bg-muted-hover);
123
123
  color: var(--ds-color-text);
124
124
  }
125
125
 
@@ -170,7 +170,7 @@
170
170
  user-select: none;
171
171
 
172
172
  &:hover {
173
- background-color: var(--ds-color-overlay-hover);
173
+ background-color: var(--ds-color-bg-muted-hover);
174
174
  }
175
175
 
176
176
  &:focus-visible {
@@ -224,7 +224,7 @@
224
224
  transition: all var(--ds-duration-fast) var(--ds-ease-default);
225
225
 
226
226
  &:hover {
227
- background-color: var(--ds-color-overlay-hover);
227
+ background-color: var(--ds-color-bg-muted-hover);
228
228
  color: var(--ds-color-text);
229
229
  border-color: var(--ds-color-border-hover);
230
230
  }
@@ -253,7 +253,7 @@
253
253
  flex-shrink: 0;
254
254
 
255
255
  &:hover {
256
- background-color: var(--ds-color-overlay-hover);
256
+ background-color: var(--ds-color-bg-muted-hover);
257
257
  color: var(--ds-color-text);
258
258
  }
259
259
 
@@ -103,7 +103,7 @@
103
103
  background-color var(--ds-duration-fast) var(--ds-ease-default);
104
104
 
105
105
  &:hover {
106
- background-color: var(--ds-color-overlay-hover);
106
+ background-color: var(--ds-color-bg-muted-hover);
107
107
  color: var(--ds-color-text);
108
108
  }
109
109
 
@@ -114,7 +114,7 @@
114
114
  }
115
115
 
116
116
  &--active {
117
- background-color: var(--ds-color-overlay-active);
117
+ background-color: var(--ds-color-bg-elevated);
118
118
  color: var(--ds-color-text);
119
119
  }
120
120
 
@@ -96,7 +96,7 @@
96
96
  @media (hover: hover) {
97
97
  &:hover {
98
98
  color: var(--ds-color-text);
99
- background-color: var(--ds-color-overlay-hover);
99
+ background-color: var(--ds-color-surface-hover);
100
100
  }
101
101
  }
102
102
 
@@ -177,7 +177,7 @@
177
177
  @media (hover: hover) {
178
178
  &:hover {
179
179
  color: var(--ds-color-text);
180
- background-color: var(--ds-color-overlay-hover);
180
+ background-color: var(--ds-color-surface-hover);
181
181
  }
182
182
  }
183
183
 
@@ -57,7 +57,7 @@
57
57
  appearance: none;
58
58
 
59
59
  &:hover {
60
- background-color: var(--ds-color-overlay-hover);
60
+ background-color: var(--ds-color-surface-hover);
61
61
  color: var(--ds-color-text);
62
62
  }
63
63
 
@@ -115,7 +115,7 @@
115
115
  appearance: none;
116
116
 
117
117
  &:hover {
118
- background-color: var(--ds-color-overlay-hover);
118
+ background-color: var(--ds-color-surface-hover);
119
119
  color: var(--ds-color-text);
120
120
  }
121
121
 
@@ -178,7 +178,7 @@
178
178
  }
179
179
 
180
180
  .ds-search__result--active {
181
- background: var(--ds-color-overlay-active);
181
+ background: var(--ds-color-bg-elevated);
182
182
  }
183
183
 
184
184
  .ds-search__result:focus-visible {
@@ -48,7 +48,7 @@
48
48
 
49
49
  &:hover {
50
50
  color: var(--ds-color-text);
51
- background-color: var(--ds-color-overlay-hover);
51
+ background-color: var(--ds-color-surface-hover);
52
52
  }
53
53
 
54
54
  &:focus-visible {
@@ -236,7 +236,7 @@
236
236
  }
237
237
 
238
238
  .ds-table--striped tbody tr:hover {
239
- background-color: var(--ds-color-overlay-hover);
239
+ background-color: var(--ds-color-surface-hover);
240
240
  }
241
241
 
242
242
  /* --- Bordered modifier --- */
@@ -34,7 +34,7 @@
34
34
 
35
35
  @media (hover: hover) {
36
36
  &:hover {
37
- background-color: var(--ds-color-overlay-hover);
37
+ background-color: var(--ds-color-surface-hover);
38
38
  }
39
39
  }
40
40
 
@@ -64,7 +64,7 @@
64
64
 
65
65
  @media (hover: hover) {
66
66
  &:hover {
67
- background-color: var(--ds-color-overlay-hover);
67
+ background-color: var(--ds-color-surface-hover);
68
68
  }
69
69
  }
70
70
 
@@ -202,7 +202,7 @@
202
202
 
203
203
  &--active &__count {
204
204
  color: var(--ds-color-text-secondary);
205
- background-color: var(--ds-color-overlay-active);
205
+ background-color: var(--ds-color-bg-elevated);
206
206
  }
207
207
  }
208
208
 
@@ -120,7 +120,7 @@
120
120
 
121
121
  &:hover {
122
122
  opacity: 1;
123
- background-color: var(--ds-color-overlay-hover);
123
+ background-color: var(--ds-color-surface-hover);
124
124
  }
125
125
 
126
126
  &:focus-visible {