@cloud-ru/ds-stepper 1.0.7-preview-22cea22e.0 → 1.0.8

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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/helperComponents/DesktopStep/styles.module.css +13 -13
  3. package/dist/cjs/helperComponents/MobileStep/styles.module.css +11 -11
  4. package/dist/cjs/helperComponents/MobileStepper/styles.module.css +2 -2
  5. package/dist/cjs/helperComponents/StepIcon/styles.module.css +12 -12
  6. package/dist/cjs/style.css +38 -38
  7. package/dist/esm/helperComponents/DesktopStep/styles.module.css +13 -13
  8. package/dist/esm/helperComponents/MobileStep/styles.module.css +11 -11
  9. package/dist/esm/helperComponents/MobileStepper/styles.module.css +2 -2
  10. package/dist/esm/helperComponents/StepIcon/styles.module.css +12 -12
  11. package/dist/esm/style.css +38 -38
  12. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  14. package/package.json +7 -7
package/dist/esm/helperComponents/StepIcon/styles.module.css CHANGED
@@ -7,27 +7,27 @@
7
7
  height:var(--sn-stepper-anatomy-size-m-stepStatus-height, var(--sn-primitive-dimension-32, 32px));
8
8
  border:var(--sn-stepper-anatomy-size-m-stepStatus-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid transparent;
9
9
  border-radius:50%;
10
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
11
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
10
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
11
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
12
12
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
13
13
  }
14
14
  .icon[data-state=waiting]{
15
- border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
16
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
17
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
15
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
16
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
17
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
18
18
  }
19
19
  .icon[data-state=current]{
20
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
21
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
20
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
21
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
22
22
  }
23
23
  .icon[data-state=loading]{
24
- border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
25
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
26
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
24
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
25
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
26
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
27
27
  }
28
28
  .icon[data-state=completed]{
29
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
30
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
29
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
30
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
31
31
  }
32
32
  .icon[data-state=rejected]{
33
33
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
package/dist/esm/style.css CHANGED
@@ -37,15 +37,15 @@
37
37
  border-radius:inherit;
38
38
  }
39
39
  .statusContainer .stateLayer[data-state=borderOnBackground]{
40
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
40
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
41
41
  border-style:solid;
42
42
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
43
43
  }
44
44
  .statusContainer .stateLayer[data-state=emptyNeutralOnBackground]{
45
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
45
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
46
46
  }
47
47
  .statusContainer .stateLayer[data-state=activatedOnBackground]{
48
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
48
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
49
49
  }
50
50
  .statusContainer .stateLayer[data-state=versionOnColor]{
51
51
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -64,13 +64,13 @@
64
64
  }
65
65
  @media (hover: hover){
66
66
  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
67
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
67
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
68
68
  }
69
69
  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
70
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
70
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
71
71
  }
72
72
  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
73
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
73
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
74
74
  }
75
75
  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
76
76
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -91,13 +91,13 @@
91
91
  .statusContainer{
92
92
  }
93
93
  .statusContainer[data-loading] .stateLayer[data-state=borderOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
94
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
94
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
95
95
  }
96
96
  .statusContainer[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
97
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
97
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
98
98
  }
99
99
  .statusContainer[data-loading] .stateLayer[data-state=activatedOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
100
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
100
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
101
101
  }
102
102
  .statusContainer[data-loading] .stateLayer[data-state=versionOnColor], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
103
103
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -139,10 +139,10 @@
139
139
  width:100%;
140
140
  height:100%;
141
141
  border-radius:var(--sn-stepper-anatomy-size-m-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
142
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
142
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
143
143
  }
144
144
  .tail[data-completed] .tailLine{
145
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
145
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
146
146
  }
147
147
 
148
148
  .content{
@@ -155,7 +155,7 @@
155
155
 
156
156
  .title{
157
157
  overflow:hidden;
158
- color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
158
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
159
159
  text-overflow:ellipsis;
160
160
  white-space:nowrap;
161
161
  }
@@ -165,7 +165,7 @@
165
165
  display:-webkit-box;
166
166
  -webkit-box-orient:vertical;
167
167
  -webkit-line-clamp:2;
168
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
168
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
169
169
  }
170
170
  .stepper{
171
171
  display:flex;
@@ -198,7 +198,7 @@
198
198
  width:100%;
199
199
  height:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-height, var(--sn-primitive-dimension-4, 4px));
200
200
  border-radius:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
201
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
201
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
202
202
  transition:background-color 150ms ease;
203
203
  }
204
204
 
@@ -223,7 +223,7 @@
223
223
  position:absolute;
224
224
  inset:0;
225
225
  border-radius:inherit;
226
- background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
226
+ background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
227
227
  transition:background-color 150ms ease;
228
228
  }
229
229
 
@@ -235,12 +235,12 @@
235
235
  @media (hover: hover){
236
236
  .step:not(:disabled):hover .track::after,
237
237
  .step:not(:disabled):hover .status::after{
238
- background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
238
+ background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
239
239
  }
240
240
  }
241
241
  .step:not(:disabled):active .track::after,
242
242
  .step:not(:disabled):active .status::after{
243
- background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
243
+ background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
244
244
  }
245
245
 
246
246
  @media (hover: hover){
@@ -255,27 +255,27 @@
255
255
  }
256
256
 
257
257
  .step[data-state=current] .track{
258
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
258
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
259
259
  }
260
260
 
261
261
  .step[data-state=completed] .track{
262
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
262
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
263
263
  }
264
264
 
265
265
  .step[data-state=completed] .status{
266
266
  display:flex;
267
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
268
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
267
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
268
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
269
269
  }
270
270
 
271
271
  .step[data-state=loading] .track{
272
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
272
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
273
273
  }
274
274
 
275
275
  .step[data-state=loading] .status{
276
276
  display:flex;
277
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
278
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
277
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
278
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
279
279
  }
280
280
 
281
281
  .step[data-state=rejected] .track{
@@ -307,7 +307,7 @@
307
307
 
308
308
  .title{
309
309
  overflow:hidden;
310
- color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
310
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
311
311
  text-overflow:ellipsis;
312
312
  white-space:nowrap;
313
313
  }
@@ -317,7 +317,7 @@
317
317
  display:-webkit-box;
318
318
  -webkit-box-orient:vertical;
319
319
  -webkit-line-clamp:2;
320
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
320
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
321
321
  }
322
322
  .icon{
323
323
  display:flex;
@@ -328,27 +328,27 @@
328
328
  height:var(--sn-stepper-anatomy-size-m-stepStatus-height, var(--sn-primitive-dimension-32, 32px));
329
329
  border:var(--sn-stepper-anatomy-size-m-stepStatus-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid transparent;
330
330
  border-radius:50%;
331
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
332
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
331
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
332
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
333
333
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
334
334
  }
335
335
  .icon[data-state=waiting]{
336
- border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
337
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
338
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
336
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
337
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
338
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
339
339
  }
340
340
  .icon[data-state=current]{
341
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
342
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
341
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
342
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
343
343
  }
344
344
  .icon[data-state=loading]{
345
- border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
346
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
347
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
345
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
346
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
347
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
348
348
  }
349
349
  .icon[data-state=completed]{
350
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
351
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
350
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
351
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
352
352
  }
353
353
  .icon[data-state=rejected]{
354
354
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));