@alfalab/core-components-steps 3.0.0 → 3.0.1-alfasans

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 (21) hide show
  1. package/components/step/index.css +38 -35
  2. package/components/step/index.module.css.js +1 -1
  3. package/components/step-indicator/index.css +1 -1
  4. package/components/step-indicator/index.module.css.js +1 -1
  5. package/cssm/components/step/index.module.css +7 -4
  6. package/esm/components/step/index.css +38 -35
  7. package/esm/components/step/index.module.css.js +1 -1
  8. package/esm/components/step-indicator/index.css +1 -1
  9. package/esm/components/step-indicator/index.module.css.js +1 -1
  10. package/esm/index.css +2 -2
  11. package/esm/index.module.css.js +1 -1
  12. package/index.css +2 -2
  13. package/index.module.css.js +1 -1
  14. package/modern/components/step/index.css +38 -35
  15. package/modern/components/step/index.module.css.js +1 -1
  16. package/modern/components/step-indicator/index.css +1 -1
  17. package/modern/components/step-indicator/index.module.css.js +1 -1
  18. package/modern/index.css +2 -2
  19. package/modern/index.module.css.js +1 -1
  20. package/moderncssm/components/step/index.module.css +4 -2
  21. package/package.json +5 -5
package/components/step/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
33
34
  --steps-option-svg-color: var(--color-light-status-positive);
34
35
  --steps-dash-border: 2px solid var(--color-light-status-positive);
35
36
  }
36
- .steps__step_1fxnh {
37
+ .steps__step_1perg {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_1fxnh.steps__horizontal_1fxnh {
41
+ .steps__step_1perg.steps__horizontal_1perg {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_1fxnh:not(.steps__vertical_1fxnh) {
44
+ .steps__step_1perg:not(.steps__vertical_1perg) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_1fxnh:last-of-type .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
47
+ .steps__step_1perg:last-of-type .steps__textWrapper_1perg.steps__vertical_1perg {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
50
+ .steps__step_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_1fxnh.steps__disabled_1fxnh:hover .steps__text_1fxnh {
53
+ .steps__step_1perg.steps__disabled_1perg:hover .steps__text_1perg {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_1fxnh.steps__disabled_1fxnh .steps__indicator_1fxnh {
57
+ .steps__step_1perg.steps__disabled_1perg .steps__indicator_1perg {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_1fxnh {
60
+ .steps__indicator_1perg {
60
61
  cursor: pointer;
61
62
  display: flex;
62
63
  align-items: center;
63
64
  margin-right: var(--gap-4);
64
65
  }
65
- .steps__indicator_1fxnh.steps__vertical_1fxnh {
66
+ .steps__indicator_1perg.steps__vertical_1perg {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_1fxnh {
70
+ .steps__option_1perg {
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -81,19 +83,19 @@
81
83
  height: 24px;
82
84
  border-radius: var(--border-radius-circle);
83
85
  }
84
- .steps__option_1fxnh.steps__vertical_1fxnh {
86
+ .steps__option_1perg.steps__vertical_1perg {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_1fxnh {
89
+ .steps__dash_1perg {
88
90
  flex: 1 1 auto;
89
91
  min-width: 24px;
90
92
  border-top: 2px solid var(--color-light-neutral-translucent-300);
91
93
  margin-right: var(--gap-8);
92
94
  }
93
- .steps__dash_1fxnh.steps__completed_1fxnh {
95
+ .steps__dash_1perg.steps__completed_1perg {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_1fxnh.steps__vertical_1fxnh {
98
+ .steps__dash_1perg.steps__vertical_1perg {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,23 +104,24 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_1fxnh.steps__completed_1fxnh.steps__vertical_1fxnh {
107
+ .steps__dash_1perg.steps__completed_1perg.steps__vertical_1perg {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
110
+ .steps__textWrapper_1perg.steps__vertical_1perg {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-24_1fxnh {
113
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-24_1perg {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-32_1fxnh {
116
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-32_1perg {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__text_1fxnh {
119
+ .steps__text_1perg {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
- font-family: var(--font-family-system);
123
+ letter-spacing: -0.24px;
124
+ font-family: var(--font-family-alfasans);
122
125
 
123
126
  transition: background 0.2s;
124
127
  padding: var(--gap-8);
@@ -127,24 +130,24 @@
127
130
  height: -moz-min-content;
128
131
  height: min-content;
129
132
  }
130
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
133
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
131
134
  background: var(--color-light-transparent-default-hover);
132
135
  }
133
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):active {
136
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):active {
134
137
  background: var(--color-light-transparent-default-press);
135
138
  }
136
- .steps__focused_1fxnh {
139
+ .steps__focused_1perg {
137
140
  outline: var(--gap-2) solid var(--focus-color);
138
141
  outline-offset: var(--gap-2);
139
142
  }
140
- .steps__selected_1fxnh .steps__text_1fxnh {
143
+ .steps__selected_1perg .steps__text_1perg {
141
144
  color: var(--color-light-text-primary);
142
145
  }
143
- .steps__selected_1fxnh .steps__option_1fxnh {
146
+ .steps__selected_1perg .steps__option_1perg {
144
147
  color: var(--color-light-text-primary-inverted);
145
148
  background: var(--color-light-neutral-translucent-1300);
146
149
  }
147
- .steps__checkbox_1fxnh {
150
+ .steps__checkbox_1perg {
148
151
  display: flex;
149
152
  justify-content: center;
150
153
  align-items: center;
@@ -153,26 +156,26 @@
153
156
  height: 20px;
154
157
  border: 2px solid var(--color-light-neutral-translucent-300);
155
158
  }
156
- .steps__dot_1fxnh {
159
+ .steps__dot_1perg {
157
160
  width: 10px;
158
161
  height: 10px;
159
162
  border-radius: var(--border-radius-circle);
160
163
  background: var(--color-light-neutral-translucent-300);
161
164
  }
162
- .steps__selected_1fxnh .steps__checkbox_1fxnh {
165
+ .steps__selected_1perg .steps__checkbox_1perg {
163
166
  border: 2px solid var(--color-light-neutral-translucent-1300);
164
167
  }
165
- .steps__selected_1fxnh .steps__checkbox_1fxnh .steps__dot_1fxnh {
168
+ .steps__selected_1perg .steps__checkbox_1perg .steps__dot_1perg {
166
169
  background: var(--color-light-neutral-translucent-1300);
167
170
  }
168
- .steps__option_1fxnh:not(.steps__error_1fxnh).steps__unordered_1fxnh {
171
+ .steps__option_1perg:not(.steps__error_1perg).steps__unordered_1perg {
169
172
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
170
173
  background: initial;
171
174
  }
172
- .steps__completedIndicator_1fxnh > [class*='positive'] {
175
+ .steps__completedIndicator_1perg > [class*='positive'] {
173
176
  color: var(--steps-option-svg-color);
174
177
  background-color: var(--steps-option-svg-color);
175
178
  }
176
- .steps__fullWidth_1fxnh {
179
+ .steps__fullWidth_1perg {
177
180
  width: 100%;
178
181
  }
package/components/step/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"step":"steps__step_1fxnh","horizontal":"steps__horizontal_1fxnh","vertical":"steps__vertical_1fxnh","textWrapper":"steps__textWrapper_1fxnh","interactive":"steps__interactive_1fxnh","disabled":"steps__disabled_1fxnh","text":"steps__text_1fxnh","indicator":"steps__indicator_1fxnh","option":"steps__option_1fxnh","dash":"steps__dash_1fxnh","completed":"steps__completed_1fxnh","gap-24":"steps__gap-24_1fxnh","gap-32":"steps__gap-32_1fxnh","focused":"steps__focused_1fxnh","selected":"steps__selected_1fxnh","checkbox":"steps__checkbox_1fxnh","dot":"steps__dot_1fxnh","error":"steps__error_1fxnh","unordered":"steps__unordered_1fxnh","completedIndicator":"steps__completedIndicator_1fxnh","fullWidth":"steps__fullWidth_1fxnh"};
5
+ var styles = {"step":"steps__step_1perg","horizontal":"steps__horizontal_1perg","vertical":"steps__vertical_1perg","textWrapper":"steps__textWrapper_1perg","interactive":"steps__interactive_1perg","disabled":"steps__disabled_1perg","text":"steps__text_1perg","indicator":"steps__indicator_1perg","option":"steps__option_1perg","dash":"steps__dash_1perg","completed":"steps__completed_1perg","gap-24":"steps__gap-24_1perg","gap-32":"steps__gap-32_1perg","focused":"steps__focused_1perg","selected":"steps__selected_1perg","checkbox":"steps__checkbox_1perg","dot":"steps__dot_1perg","error":"steps__error_1perg","unordered":"steps__unordered_1perg","completedIndicator":"steps__completedIndicator_1perg","fullWidth":"steps__fullWidth_1perg"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/components/step-indicator/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
3
  }
4
- .steps__component_1s664.steps__component_1s664 {
4
+ .steps__component_110jm.steps__component_110jm {
5
5
  padding: var(--gap-0);
6
6
  }
package/components/step-indicator/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"steps__component_1s664"};
5
+ var styles = {"component":"steps__component_110jm"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/cssm/components/step/index.module.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -70,7 +71,8 @@
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -118,7 +120,8 @@
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
- font-family: var(--font-family-system);
123
+ letter-spacing: -0.24px;
124
+ font-family: var(--font-family-alfasans);
122
125
 
123
126
  transition: background 0.2s;
124
127
  padding: var(--gap-8);
package/esm/components/step/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
33
34
  --steps-option-svg-color: var(--color-light-status-positive);
34
35
  --steps-dash-border: 2px solid var(--color-light-status-positive);
35
36
  }
36
- .steps__step_1fxnh {
37
+ .steps__step_1perg {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_1fxnh.steps__horizontal_1fxnh {
41
+ .steps__step_1perg.steps__horizontal_1perg {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_1fxnh:not(.steps__vertical_1fxnh) {
44
+ .steps__step_1perg:not(.steps__vertical_1perg) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_1fxnh:last-of-type .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
47
+ .steps__step_1perg:last-of-type .steps__textWrapper_1perg.steps__vertical_1perg {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
50
+ .steps__step_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_1fxnh.steps__disabled_1fxnh:hover .steps__text_1fxnh {
53
+ .steps__step_1perg.steps__disabled_1perg:hover .steps__text_1perg {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_1fxnh.steps__disabled_1fxnh .steps__indicator_1fxnh {
57
+ .steps__step_1perg.steps__disabled_1perg .steps__indicator_1perg {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_1fxnh {
60
+ .steps__indicator_1perg {
60
61
  cursor: pointer;
61
62
  display: flex;
62
63
  align-items: center;
63
64
  margin-right: var(--gap-4);
64
65
  }
65
- .steps__indicator_1fxnh.steps__vertical_1fxnh {
66
+ .steps__indicator_1perg.steps__vertical_1perg {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_1fxnh {
70
+ .steps__option_1perg {
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -81,19 +83,19 @@
81
83
  height: 24px;
82
84
  border-radius: var(--border-radius-circle);
83
85
  }
84
- .steps__option_1fxnh.steps__vertical_1fxnh {
86
+ .steps__option_1perg.steps__vertical_1perg {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_1fxnh {
89
+ .steps__dash_1perg {
88
90
  flex: 1 1 auto;
89
91
  min-width: 24px;
90
92
  border-top: 2px solid var(--color-light-neutral-translucent-300);
91
93
  margin-right: var(--gap-8);
92
94
  }
93
- .steps__dash_1fxnh.steps__completed_1fxnh {
95
+ .steps__dash_1perg.steps__completed_1perg {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_1fxnh.steps__vertical_1fxnh {
98
+ .steps__dash_1perg.steps__vertical_1perg {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,23 +104,24 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_1fxnh.steps__completed_1fxnh.steps__vertical_1fxnh {
107
+ .steps__dash_1perg.steps__completed_1perg.steps__vertical_1perg {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
110
+ .steps__textWrapper_1perg.steps__vertical_1perg {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-24_1fxnh {
113
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-24_1perg {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-32_1fxnh {
116
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-32_1perg {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__text_1fxnh {
119
+ .steps__text_1perg {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
- font-family: var(--font-family-system);
123
+ letter-spacing: -0.24px;
124
+ font-family: var(--font-family-alfasans);
122
125
 
123
126
  transition: background 0.2s;
124
127
  padding: var(--gap-8);
@@ -127,24 +130,24 @@
127
130
  height: -moz-min-content;
128
131
  height: min-content;
129
132
  }
130
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
133
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
131
134
  background: var(--color-light-transparent-default-hover);
132
135
  }
133
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):active {
136
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):active {
134
137
  background: var(--color-light-transparent-default-press);
135
138
  }
136
- .steps__focused_1fxnh {
139
+ .steps__focused_1perg {
137
140
  outline: var(--gap-2) solid var(--focus-color);
138
141
  outline-offset: var(--gap-2);
139
142
  }
140
- .steps__selected_1fxnh .steps__text_1fxnh {
143
+ .steps__selected_1perg .steps__text_1perg {
141
144
  color: var(--color-light-text-primary);
142
145
  }
143
- .steps__selected_1fxnh .steps__option_1fxnh {
146
+ .steps__selected_1perg .steps__option_1perg {
144
147
  color: var(--color-light-text-primary-inverted);
145
148
  background: var(--color-light-neutral-translucent-1300);
146
149
  }
147
- .steps__checkbox_1fxnh {
150
+ .steps__checkbox_1perg {
148
151
  display: flex;
149
152
  justify-content: center;
150
153
  align-items: center;
@@ -153,26 +156,26 @@
153
156
  height: 20px;
154
157
  border: 2px solid var(--color-light-neutral-translucent-300);
155
158
  }
156
- .steps__dot_1fxnh {
159
+ .steps__dot_1perg {
157
160
  width: 10px;
158
161
  height: 10px;
159
162
  border-radius: var(--border-radius-circle);
160
163
  background: var(--color-light-neutral-translucent-300);
161
164
  }
162
- .steps__selected_1fxnh .steps__checkbox_1fxnh {
165
+ .steps__selected_1perg .steps__checkbox_1perg {
163
166
  border: 2px solid var(--color-light-neutral-translucent-1300);
164
167
  }
165
- .steps__selected_1fxnh .steps__checkbox_1fxnh .steps__dot_1fxnh {
168
+ .steps__selected_1perg .steps__checkbox_1perg .steps__dot_1perg {
166
169
  background: var(--color-light-neutral-translucent-1300);
167
170
  }
168
- .steps__option_1fxnh:not(.steps__error_1fxnh).steps__unordered_1fxnh {
171
+ .steps__option_1perg:not(.steps__error_1perg).steps__unordered_1perg {
169
172
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
170
173
  background: initial;
171
174
  }
172
- .steps__completedIndicator_1fxnh > [class*='positive'] {
175
+ .steps__completedIndicator_1perg > [class*='positive'] {
173
176
  color: var(--steps-option-svg-color);
174
177
  background-color: var(--steps-option-svg-color);
175
178
  }
176
- .steps__fullWidth_1fxnh {
179
+ .steps__fullWidth_1perg {
177
180
  width: 100%;
178
181
  }
package/esm/components/step/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"step":"steps__step_1fxnh","horizontal":"steps__horizontal_1fxnh","vertical":"steps__vertical_1fxnh","textWrapper":"steps__textWrapper_1fxnh","interactive":"steps__interactive_1fxnh","disabled":"steps__disabled_1fxnh","text":"steps__text_1fxnh","indicator":"steps__indicator_1fxnh","option":"steps__option_1fxnh","dash":"steps__dash_1fxnh","completed":"steps__completed_1fxnh","gap-24":"steps__gap-24_1fxnh","gap-32":"steps__gap-32_1fxnh","focused":"steps__focused_1fxnh","selected":"steps__selected_1fxnh","checkbox":"steps__checkbox_1fxnh","dot":"steps__dot_1fxnh","error":"steps__error_1fxnh","unordered":"steps__unordered_1fxnh","completedIndicator":"steps__completedIndicator_1fxnh","fullWidth":"steps__fullWidth_1fxnh"};
3
+ var styles = {"step":"steps__step_1perg","horizontal":"steps__horizontal_1perg","vertical":"steps__vertical_1perg","textWrapper":"steps__textWrapper_1perg","interactive":"steps__interactive_1perg","disabled":"steps__disabled_1perg","text":"steps__text_1perg","indicator":"steps__indicator_1perg","option":"steps__option_1perg","dash":"steps__dash_1perg","completed":"steps__completed_1perg","gap-24":"steps__gap-24_1perg","gap-32":"steps__gap-32_1perg","focused":"steps__focused_1perg","selected":"steps__selected_1perg","checkbox":"steps__checkbox_1perg","dot":"steps__dot_1perg","error":"steps__error_1perg","unordered":"steps__unordered_1perg","completedIndicator":"steps__completedIndicator_1perg","fullWidth":"steps__fullWidth_1perg"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/components/step-indicator/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
3
  }
4
- .steps__component_1s664.steps__component_1s664 {
4
+ .steps__component_110jm.steps__component_110jm {
5
5
  padding: var(--gap-0);
6
6
  }
package/esm/components/step-indicator/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"steps__component_1s664"};
3
+ var styles = {"component":"steps__component_110jm"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_65lpv {
1
+ .steps__component_1x58x {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_65lpv.steps__vertical_65lpv {
6
+ .steps__component_1x58x.steps__vertical_1x58x {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"steps__component_65lpv","vertical":"steps__vertical_65lpv"};
3
+ var styles = {"component":"steps__component_1x58x","vertical":"steps__vertical_1x58x"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_65lpv {
1
+ .steps__component_1x58x {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_65lpv.steps__vertical_65lpv {
6
+ .steps__component_1x58x.steps__vertical_1x58x {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"steps__component_65lpv","vertical":"steps__vertical_65lpv"};
5
+ var styles = {"component":"steps__component_1x58x","vertical":"steps__vertical_1x58x"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/step/index.css CHANGED
@@ -23,8 +23,9 @@
23
23
  --gap-16: var(--gap-m);
24
24
  }
25
25
  :root {
26
- --font-family-system:
27
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
28
29
  }
29
30
  :root {
30
31
  --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
33
34
  --steps-option-svg-color: var(--color-light-status-positive);
34
35
  --steps-dash-border: 2px solid var(--color-light-status-positive);
35
36
  }
36
- .steps__step_1fxnh {
37
+ .steps__step_1perg {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_1fxnh.steps__horizontal_1fxnh {
41
+ .steps__step_1perg.steps__horizontal_1perg {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_1fxnh:not(.steps__vertical_1fxnh) {
44
+ .steps__step_1perg:not(.steps__vertical_1perg) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_1fxnh:last-of-type .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
47
+ .steps__step_1perg:last-of-type .steps__textWrapper_1perg.steps__vertical_1perg {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
50
+ .steps__step_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_1fxnh.steps__disabled_1fxnh:hover .steps__text_1fxnh {
53
+ .steps__step_1perg.steps__disabled_1perg:hover .steps__text_1perg {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_1fxnh.steps__disabled_1fxnh .steps__indicator_1fxnh {
57
+ .steps__step_1perg.steps__disabled_1perg .steps__indicator_1perg {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_1fxnh {
60
+ .steps__indicator_1perg {
60
61
  cursor: pointer;
61
62
  display: flex;
62
63
  align-items: center;
63
64
  margin-right: var(--gap-4);
64
65
  }
65
- .steps__indicator_1fxnh.steps__vertical_1fxnh {
66
+ .steps__indicator_1perg.steps__vertical_1perg {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_1fxnh {
70
+ .steps__option_1perg {
70
71
  font-size: 14px;
71
72
  line-height: 20px;
72
73
  font-weight: 700;
73
- font-family: var(--font-family-system);
74
+ letter-spacing: 0.47px;
75
+ font-family: var(--font-family-alfasans);
74
76
 
75
77
  display: flex;
76
78
  align-items: center;
@@ -81,19 +83,19 @@
81
83
  height: 24px;
82
84
  border-radius: var(--border-radius-circle);
83
85
  }
84
- .steps__option_1fxnh.steps__vertical_1fxnh {
86
+ .steps__option_1perg.steps__vertical_1perg {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_1fxnh {
89
+ .steps__dash_1perg {
88
90
  flex: 1 1 auto;
89
91
  min-width: 24px;
90
92
  border-top: 2px solid var(--color-light-neutral-translucent-300);
91
93
  margin-right: var(--gap-8);
92
94
  }
93
- .steps__dash_1fxnh.steps__completed_1fxnh {
95
+ .steps__dash_1perg.steps__completed_1perg {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_1fxnh.steps__vertical_1fxnh {
98
+ .steps__dash_1perg.steps__vertical_1perg {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,23 +104,24 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_1fxnh.steps__completed_1fxnh.steps__vertical_1fxnh {
107
+ .steps__dash_1perg.steps__completed_1perg.steps__vertical_1perg {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh {
110
+ .steps__textWrapper_1perg.steps__vertical_1perg {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-24_1fxnh {
113
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-24_1perg {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_1fxnh.steps__vertical_1fxnh.steps__gap-32_1fxnh {
116
+ .steps__textWrapper_1perg.steps__vertical_1perg.steps__gap-32_1perg {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__text_1fxnh {
119
+ .steps__text_1perg {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
- font-family: var(--font-family-system);
123
+ letter-spacing: -0.24px;
124
+ font-family: var(--font-family-alfasans);
122
125
 
123
126
  transition: background 0.2s;
124
127
  padding: var(--gap-8);
@@ -127,24 +130,24 @@
127
130
  height: -moz-min-content;
128
131
  height: min-content;
129
132
  }
130
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):hover {
133
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):hover {
131
134
  background: var(--color-light-transparent-default-hover);
132
135
  }
133
- .steps__text_1fxnh.steps__interactive_1fxnh:not(.steps__disabled_1fxnh):active {
136
+ .steps__text_1perg.steps__interactive_1perg:not(.steps__disabled_1perg):active {
134
137
  background: var(--color-light-transparent-default-press);
135
138
  }
136
- .steps__focused_1fxnh {
139
+ .steps__focused_1perg {
137
140
  outline: var(--gap-2) solid var(--focus-color);
138
141
  outline-offset: var(--gap-2);
139
142
  }
140
- .steps__selected_1fxnh .steps__text_1fxnh {
143
+ .steps__selected_1perg .steps__text_1perg {
141
144
  color: var(--color-light-text-primary);
142
145
  }
143
- .steps__selected_1fxnh .steps__option_1fxnh {
146
+ .steps__selected_1perg .steps__option_1perg {
144
147
  color: var(--color-light-text-primary-inverted);
145
148
  background: var(--color-light-neutral-translucent-1300);
146
149
  }
147
- .steps__checkbox_1fxnh {
150
+ .steps__checkbox_1perg {
148
151
  display: flex;
149
152
  justify-content: center;
150
153
  align-items: center;
@@ -153,26 +156,26 @@
153
156
  height: 20px;
154
157
  border: 2px solid var(--color-light-neutral-translucent-300);
155
158
  }
156
- .steps__dot_1fxnh {
159
+ .steps__dot_1perg {
157
160
  width: 10px;
158
161
  height: 10px;
159
162
  border-radius: var(--border-radius-circle);
160
163
  background: var(--color-light-neutral-translucent-300);
161
164
  }
162
- .steps__selected_1fxnh .steps__checkbox_1fxnh {
165
+ .steps__selected_1perg .steps__checkbox_1perg {
163
166
  border: 2px solid var(--color-light-neutral-translucent-1300);
164
167
  }
165
- .steps__selected_1fxnh .steps__checkbox_1fxnh .steps__dot_1fxnh {
168
+ .steps__selected_1perg .steps__checkbox_1perg .steps__dot_1perg {
166
169
  background: var(--color-light-neutral-translucent-1300);
167
170
  }
168
- .steps__option_1fxnh:not(.steps__error_1fxnh).steps__unordered_1fxnh {
171
+ .steps__option_1perg:not(.steps__error_1perg).steps__unordered_1perg {
169
172
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
170
173
  background: initial;
171
174
  }
172
- .steps__completedIndicator_1fxnh > [class*='positive'] {
175
+ .steps__completedIndicator_1perg > [class*='positive'] {
173
176
  color: var(--steps-option-svg-color);
174
177
  background-color: var(--steps-option-svg-color);
175
178
  }
176
- .steps__fullWidth_1fxnh {
179
+ .steps__fullWidth_1perg {
177
180
  width: 100%;
178
181
  }
package/modern/components/step/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"step":"steps__step_1fxnh","horizontal":"steps__horizontal_1fxnh","vertical":"steps__vertical_1fxnh","textWrapper":"steps__textWrapper_1fxnh","interactive":"steps__interactive_1fxnh","disabled":"steps__disabled_1fxnh","text":"steps__text_1fxnh","indicator":"steps__indicator_1fxnh","option":"steps__option_1fxnh","dash":"steps__dash_1fxnh","completed":"steps__completed_1fxnh","gap-24":"steps__gap-24_1fxnh","gap-32":"steps__gap-32_1fxnh","focused":"steps__focused_1fxnh","selected":"steps__selected_1fxnh","checkbox":"steps__checkbox_1fxnh","dot":"steps__dot_1fxnh","error":"steps__error_1fxnh","unordered":"steps__unordered_1fxnh","completedIndicator":"steps__completedIndicator_1fxnh","fullWidth":"steps__fullWidth_1fxnh"};
3
+ const styles = {"step":"steps__step_1perg","horizontal":"steps__horizontal_1perg","vertical":"steps__vertical_1perg","textWrapper":"steps__textWrapper_1perg","interactive":"steps__interactive_1perg","disabled":"steps__disabled_1perg","text":"steps__text_1perg","indicator":"steps__indicator_1perg","option":"steps__option_1perg","dash":"steps__dash_1perg","completed":"steps__completed_1perg","gap-24":"steps__gap-24_1perg","gap-32":"steps__gap-32_1perg","focused":"steps__focused_1perg","selected":"steps__selected_1perg","checkbox":"steps__checkbox_1perg","dot":"steps__dot_1perg","error":"steps__error_1perg","unordered":"steps__unordered_1perg","completedIndicator":"steps__completedIndicator_1perg","fullWidth":"steps__fullWidth_1perg"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/step-indicator/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --gap-0: 0px;
3
3
  }
4
- .steps__component_1s664.steps__component_1s664 {
4
+ .steps__component_110jm.steps__component_110jm {
5
5
  padding: var(--gap-0);
6
6
  }
package/modern/components/step-indicator/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"steps__component_1s664"};
3
+ const styles = {"component":"steps__component_110jm"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.css CHANGED
@@ -1,9 +1,9 @@
1
- .steps__component_65lpv {
1
+ .steps__component_1x58x {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_65lpv.steps__vertical_65lpv {
6
+ .steps__component_1x58x.steps__vertical_1x58x {
7
7
  flex-direction: column;
8
8
  align-items: flex-start;
9
9
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"steps__component_65lpv","vertical":"steps__vertical_65lpv"};
3
+ const styles = {"component":"steps__component_1x58x","vertical":"steps__vertical_1x58x"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/moderncssm/components/step/index.module.css CHANGED
@@ -51,7 +51,8 @@
51
51
  font-size: 14px;
52
52
  line-height: 20px;
53
53
  font-weight: 700;
54
- font-family: var(--font-family-system);
54
+ letter-spacing: 0.47px;
55
+ font-family: var(--font-family-alfasans);
55
56
 
56
57
  display: flex;
57
58
  align-items: center;
@@ -108,7 +109,8 @@
108
109
  font-size: 16px;
109
110
  line-height: 24px;
110
111
  font-weight: 400;
111
- font-family: var(--font-family-system);
112
+ letter-spacing: -0.24px;
113
+ font-family: var(--font-family-alfasans);
112
114
 
113
115
  transition: background 0.2s;
114
116
  padding: var(--gap-8);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-steps",
3
- "version": "3.0.0",
3
+ "version": "3.0.1-alfasans",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,8 +10,8 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-badge": "^7.0.0",
14
- "@alfalab/core-components-shared": "^2.0.0",
13
+ "@alfalab/core-components-badge": "7.0.1-alfasans",
14
+ "@alfalab/core-components-shared": "2.0.1-alfasans",
15
15
  "@alfalab/hooks": "^1.13.1",
16
16
  "@alfalab/icons-glyph": "^2.260.0",
17
17
  "classnames": "^2.5.1",
@@ -25,6 +25,6 @@
25
25
  "access": "public",
26
26
  "directory": "dist"
27
27
  },
28
- "themesVersion": "15.0.0",
29
- "varsVersion": "11.0.0"
28
+ "themesVersion": "15.0.1-alfasans",
29
+ "varsVersion": "11.0.1-alfasans"
30
30
  }