@cloud-ru/ds-stepper 1.0.4 → 1.0.5-preview-d50a3da1.0

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 (9) hide show
  1. package/dist/cjs/helperComponents/DesktopStep/styles.module.css +5 -5
  2. package/dist/cjs/helperComponents/MobileStep/styles.module.css +11 -11
  3. package/dist/cjs/helperComponents/StepIcon/styles.module.css +10 -10
  4. package/dist/cjs/style.css +26 -26
  5. package/dist/esm/helperComponents/DesktopStep/styles.module.css +5 -5
  6. package/dist/esm/helperComponents/MobileStep/styles.module.css +11 -11
  7. package/dist/esm/helperComponents/StepIcon/styles.module.css +10 -10
  8. package/dist/esm/style.css +26 -26
  9. package/package.json +7 -7
package/dist/cjs/helperComponents/DesktopStep/styles.module.css CHANGED
@@ -45,7 +45,7 @@
45
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
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)));
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));
@@ -70,7 +70,7 @@
70
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
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)));
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));
@@ -97,7 +97,7 @@
97
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
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)));
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-primitive-color-gray-80, #e3e5ed)));
142
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
143
143
  }
144
144
  .tail[data-completed] .tailLine{
145
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
145
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
146
146
  }
147
147
 
148
148
  .content{
package/dist/cjs/helperComponents/MobileStep/styles.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  width:100%;
24
24
  height:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-height, var(--sn-primitive-dimension-4, 4px));
25
25
  border-radius:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
26
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
26
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
27
27
  transition:background-color 150ms ease;
28
28
  }
29
29
 
@@ -80,35 +80,35 @@
80
80
  }
81
81
 
82
82
  .step[data-state=current] .track{
83
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
83
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
84
84
  }
85
85
 
86
86
  .step[data-state=completed] .track{
87
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
87
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
88
88
  }
89
89
 
90
90
  .step[data-state=completed] .status{
91
91
  display:flex;
92
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
93
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
92
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
93
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
94
94
  }
95
95
 
96
96
  .step[data-state=loading] .track{
97
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
97
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
98
98
  }
99
99
 
100
100
  .step[data-state=loading] .status{
101
101
  display:flex;
102
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
103
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
102
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
103
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
104
104
  }
105
105
 
106
106
  .step[data-state=rejected] .track{
107
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
107
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
108
108
  }
109
109
 
110
110
  .step[data-state=rejected] .status{
111
111
  display:flex;
112
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
113
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
112
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
113
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
114
114
  }
package/dist/cjs/helperComponents/StepIcon/styles.module.css CHANGED
@@ -8,28 +8,28 @@
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
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-primitive-color-gray-95, #fdfdfd)));
11
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
12
12
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
13
13
  }
14
14
  .icon[data-state=waiting]{
15
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
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-primitive-color-gray-95, #fdfdfd)));
17
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
18
18
  }
19
19
  .icon[data-state=current]{
20
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
21
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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));
22
22
  }
23
23
  .icon[data-state=loading]{
24
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-45, var(--sn-primitive-color-gray-45, #81869c)));
26
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
27
27
  }
28
28
  .icon[data-state=completed]{
29
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
30
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
31
31
  }
32
32
  .icon[data-state=rejected]{
33
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
34
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
33
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
34
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
35
35
  }
package/dist/cjs/style.css CHANGED
@@ -45,7 +45,7 @@
45
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
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)));
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));
@@ -70,7 +70,7 @@
70
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
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)));
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));
@@ -97,7 +97,7 @@
97
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
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)));
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-primitive-color-gray-80, #e3e5ed)));
142
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
143
143
  }
144
144
  .tail[data-completed] .tailLine{
145
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
145
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
146
146
  }
147
147
 
148
148
  .content{
@@ -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-primitive-color-gray-80, #e3e5ed)));
201
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
202
202
  transition:background-color 150ms ease;
203
203
  }
204
204
 
@@ -255,37 +255,37 @@
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
258
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
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, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
262
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
268
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
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-primitive-color-gray-80, #e3e5ed)));
272
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
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-45, var(--sn-primitive-color-gray-45, #81869c)));
278
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
279
279
  }
280
280
 
281
281
  .step[data-state=rejected] .track{
282
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
282
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
283
283
  }
284
284
 
285
285
  .step[data-state=rejected] .status{
286
286
  display:flex;
287
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
288
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
287
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
288
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
289
289
  }
290
290
  .stepper{
291
291
  display:flex;
@@ -329,28 +329,28 @@
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
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-primitive-color-gray-95, #fdfdfd)));
332
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
333
333
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
334
334
  }
335
335
  .icon[data-state=waiting]{
336
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
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-primitive-color-gray-95, #fdfdfd)));
338
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
339
339
  }
340
340
  .icon[data-state=current]{
341
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
342
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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));
343
343
  }
344
344
  .icon[data-state=loading]{
345
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-45, var(--sn-primitive-color-gray-45, #81869c)));
347
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
348
348
  }
349
349
  .icon[data-state=completed]{
350
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
351
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
352
352
  }
353
353
  .icon[data-state=rejected]{
354
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
355
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
354
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
355
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
356
356
  }
package/dist/esm/helperComponents/DesktopStep/styles.module.css CHANGED
@@ -45,7 +45,7 @@
45
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
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)));
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));
@@ -70,7 +70,7 @@
70
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
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)));
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));
@@ -97,7 +97,7 @@
97
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
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)));
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-primitive-color-gray-80, #e3e5ed)));
142
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
143
143
  }
144
144
  .tail[data-completed] .tailLine{
145
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
145
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
146
146
  }
147
147
 
148
148
  .content{
package/dist/esm/helperComponents/MobileStep/styles.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  width:100%;
24
24
  height:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-height, var(--sn-primitive-dimension-4, 4px));
25
25
  border-radius:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
26
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
26
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
27
27
  transition:background-color 150ms ease;
28
28
  }
29
29
 
@@ -80,35 +80,35 @@
80
80
  }
81
81
 
82
82
  .step[data-state=current] .track{
83
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
83
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
84
84
  }
85
85
 
86
86
  .step[data-state=completed] .track{
87
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
87
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
88
88
  }
89
89
 
90
90
  .step[data-state=completed] .status{
91
91
  display:flex;
92
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
93
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
92
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
93
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
94
94
  }
95
95
 
96
96
  .step[data-state=loading] .track{
97
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
97
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
98
98
  }
99
99
 
100
100
  .step[data-state=loading] .status{
101
101
  display:flex;
102
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
103
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
102
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
103
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
104
104
  }
105
105
 
106
106
  .step[data-state=rejected] .track{
107
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
107
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
108
108
  }
109
109
 
110
110
  .step[data-state=rejected] .status{
111
111
  display:flex;
112
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
113
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
112
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
113
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
114
114
  }
package/dist/esm/helperComponents/StepIcon/styles.module.css CHANGED
@@ -8,28 +8,28 @@
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
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-primitive-color-gray-95, #fdfdfd)));
11
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
12
12
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
13
13
  }
14
14
  .icon[data-state=waiting]{
15
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
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-primitive-color-gray-95, #fdfdfd)));
17
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
18
18
  }
19
19
  .icon[data-state=current]{
20
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
21
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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));
22
22
  }
23
23
  .icon[data-state=loading]{
24
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-45, var(--sn-primitive-color-gray-45, #81869c)));
26
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
27
27
  }
28
28
  .icon[data-state=completed]{
29
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
30
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
31
31
  }
32
32
  .icon[data-state=rejected]{
33
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
34
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
33
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
34
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
35
35
  }
package/dist/esm/style.css CHANGED
@@ -45,7 +45,7 @@
45
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
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)));
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));
@@ -70,7 +70,7 @@
70
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
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)));
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));
@@ -97,7 +97,7 @@
97
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
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)));
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-primitive-color-gray-80, #e3e5ed)));
142
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
143
143
  }
144
144
  .tail[data-completed] .tailLine{
145
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
145
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
146
146
  }
147
147
 
148
148
  .content{
@@ -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-primitive-color-gray-80, #e3e5ed)));
201
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
202
202
  transition:background-color 150ms ease;
203
203
  }
204
204
 
@@ -255,37 +255,37 @@
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
258
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
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, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
262
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
268
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
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-primitive-color-gray-80, #e3e5ed)));
272
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
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-45, var(--sn-primitive-color-gray-45, #81869c)));
278
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
279
279
  }
280
280
 
281
281
  .step[data-state=rejected] .track{
282
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
282
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
283
283
  }
284
284
 
285
285
  .step[data-state=rejected] .status{
286
286
  display:flex;
287
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
288
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
287
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
288
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
289
289
  }
290
290
  .stepper{
291
291
  display:flex;
@@ -329,28 +329,28 @@
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
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-primitive-color-gray-95, #fdfdfd)));
332
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
333
333
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
334
334
  }
335
335
  .icon[data-state=waiting]{
336
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
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-primitive-color-gray-95, #fdfdfd)));
338
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
339
339
  }
340
340
  .icon[data-state=current]{
341
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
342
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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));
343
343
  }
344
344
  .icon[data-state=loading]{
345
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-45, var(--sn-primitive-color-gray-45, #81869c)));
347
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
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)));
348
348
  }
349
349
  .icon[data-state=completed]{
350
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
351
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
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));
352
352
  }
353
353
  .icon[data-state=rejected]{
354
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
355
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
354
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
355
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
356
356
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-stepper",
3
- "version": "1.0.4",
3
+ "version": "1.0.5-preview-d50a3da1.0",
4
4
  "description": "Адаптивный индикатор прогресса для многошаговых сценариев — единый render-prop API, раскладка из AdaptiveProvider.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,12 +34,12 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@cloud-ru/ds-adaptive": "^1.0.1",
38
- "@cloud-ru/ds-icons": "^1.2.0",
39
- "@cloud-ru/ds-loader": "^1.0.1",
40
- "@cloud-ru/ds-materials": "^1.0.1",
41
- "@cloud-ru/ds-typography": "^1.0.0",
42
- "@cloud-ru/ds-utils": "^1.1.0"
37
+ "@cloud-ru/ds-adaptive": "1.0.1",
38
+ "@cloud-ru/ds-icons": "1.2.1-preview-d50a3da1.0",
39
+ "@cloud-ru/ds-materials": "1.0.2-preview-d50a3da1.0",
40
+ "@cloud-ru/ds-typography": "1.0.0",
41
+ "@cloud-ru/ds-loader": "1.0.2-preview-d50a3da1.0",
42
+ "@cloud-ru/ds-utils": "1.1.0"
43
43
  },
44
44
  "publishConfig": {
45
45
  "access": "public"