@alfalab/core-components-steps 3.0.6 → 3.0.7-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 +39 -36
  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 +39 -36
  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 +39 -36
  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 +7 -7
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_13ax5 {
37
+ .steps__step_1cs14 {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_13ax5.steps__horizontal_13ax5 {
41
+ .steps__step_1cs14.steps__horizontal_1cs14 {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_13ax5:not(.steps__vertical_13ax5) {
44
+ .steps__step_1cs14:not(.steps__vertical_1cs14) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_13ax5:last-of-type .steps__textWrapper_13ax5.steps__vertical_13ax5 {
47
+ .steps__step_1cs14:last-of-type .steps__textWrapper_1cs14.steps__vertical_1cs14 {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
50
+ .steps__step_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_13ax5.steps__disabled_13ax5:hover .steps__text_13ax5 {
53
+ .steps__step_1cs14.steps__disabled_1cs14:hover .steps__text_1cs14 {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_13ax5.steps__disabled_13ax5 .steps__indicator_13ax5 {
57
+ .steps__step_1cs14.steps__disabled_1cs14 .steps__indicator_1cs14 {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_13ax5 {
60
+ .steps__indicator_1cs14 {
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_13ax5.steps__vertical_13ax5 {
66
+ .steps__indicator_1cs14.steps__vertical_1cs14 {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_13ax5 {
70
+ .steps__option_1cs14 {
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_13ax5.steps__vertical_13ax5 {
86
+ .steps__option_1cs14.steps__vertical_1cs14 {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_13ax5 {
89
+ .steps__dash_1cs14 {
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_13ax5.steps__completed_13ax5 {
95
+ .steps__dash_1cs14.steps__completed_1cs14 {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_13ax5.steps__vertical_13ax5 {
98
+ .steps__dash_1cs14.steps__vertical_1cs14 {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,26 +104,27 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_13ax5.steps__completed_13ax5.steps__vertical_13ax5 {
107
+ .steps__dash_1cs14.steps__completed_1cs14.steps__vertical_1cs14 {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_13ax5.steps__vertical_13ax5 {
110
+ .steps__textWrapper_1cs14.steps__vertical_1cs14 {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-24_13ax5 {
113
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-24_1cs14 {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-32_13ax5 {
116
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-32_1cs14 {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__fullWidth_13ax5 {
119
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__fullWidth_1cs14 {
118
120
  width: 100%;
119
121
  }
120
- .steps__text_13ax5 {
122
+ .steps__text_1cs14 {
121
123
  font-size: 16px;
122
124
  line-height: 24px;
123
125
  font-weight: 400;
124
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
125
128
 
126
129
  transition: background 0.2s;
127
130
  padding: var(--gap-8);
@@ -131,24 +134,24 @@
131
134
  height: min-content;
132
135
  box-sizing: border-box;
133
136
  }
134
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
137
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
135
138
  background: var(--color-light-transparent-default-hover);
136
139
  }
137
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):active {
140
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):active {
138
141
  background: var(--color-light-transparent-default-press);
139
142
  }
140
- .steps__focused_13ax5 {
143
+ .steps__focused_1cs14 {
141
144
  outline: var(--gap-2) solid var(--focus-color);
142
145
  outline-offset: var(--gap-2);
143
146
  }
144
- .steps__selected_13ax5 .steps__text_13ax5 {
147
+ .steps__selected_1cs14 .steps__text_1cs14 {
145
148
  color: var(--color-light-text-primary);
146
149
  }
147
- .steps__selected_13ax5 .steps__option_13ax5 {
150
+ .steps__selected_1cs14 .steps__option_1cs14 {
148
151
  color: var(--color-light-text-primary-inverted);
149
152
  background: var(--color-light-neutral-translucent-1300);
150
153
  }
151
- .steps__checkbox_13ax5 {
154
+ .steps__checkbox_1cs14 {
152
155
  display: flex;
153
156
  justify-content: center;
154
157
  align-items: center;
@@ -157,25 +160,25 @@
157
160
  height: 20px;
158
161
  border: 2px solid var(--color-light-neutral-translucent-300);
159
162
  }
160
- .steps__dot_13ax5 {
163
+ .steps__dot_1cs14 {
161
164
  width: 10px;
162
165
  height: 10px;
163
166
  border-radius: var(--border-radius-circle);
164
167
  background: var(--color-light-neutral-translucent-300);
165
168
  }
166
- .steps__selected_13ax5 .steps__checkbox_13ax5 {
169
+ .steps__selected_1cs14 .steps__checkbox_1cs14 {
167
170
  border: 2px solid var(--color-light-neutral-translucent-1300);
168
171
  }
169
- .steps__selected_13ax5 .steps__checkbox_13ax5 .steps__dot_13ax5 {
172
+ .steps__selected_1cs14 .steps__checkbox_1cs14 .steps__dot_1cs14 {
170
173
  background: var(--color-light-neutral-translucent-1300);
171
174
  }
172
- .steps__option_13ax5:not(.steps__error_13ax5).steps__unordered_13ax5 {
175
+ .steps__option_1cs14:not(.steps__error_1cs14).steps__unordered_1cs14 {
173
176
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
174
177
  background: initial;
175
178
  }
176
- .steps__completedIndicator_13ax5[class*='positive-checkmark'] {
179
+ .steps__completedIndicator_1cs14[class*='positive-checkmark'] {
177
180
  background-color: var(--steps-option-svg-color);
178
181
  }
179
- .steps__fullWidth_13ax5 {
182
+ .steps__fullWidth_1cs14 {
180
183
  width: 100%;
181
184
  }
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_13ax5","horizontal":"steps__horizontal_13ax5","vertical":"steps__vertical_13ax5","textWrapper":"steps__textWrapper_13ax5","interactive":"steps__interactive_13ax5","disabled":"steps__disabled_13ax5","text":"steps__text_13ax5","indicator":"steps__indicator_13ax5","option":"steps__option_13ax5","dash":"steps__dash_13ax5","completed":"steps__completed_13ax5","gap-24":"steps__gap-24_13ax5","gap-32":"steps__gap-32_13ax5","fullWidth":"steps__fullWidth_13ax5","focused":"steps__focused_13ax5","selected":"steps__selected_13ax5","checkbox":"steps__checkbox_13ax5","dot":"steps__dot_13ax5","error":"steps__error_13ax5","unordered":"steps__unordered_13ax5","completedIndicator":"steps__completedIndicator_13ax5"};
5
+ var styles = {"step":"steps__step_1cs14","horizontal":"steps__horizontal_1cs14","vertical":"steps__vertical_1cs14","textWrapper":"steps__textWrapper_1cs14","interactive":"steps__interactive_1cs14","disabled":"steps__disabled_1cs14","text":"steps__text_1cs14","indicator":"steps__indicator_1cs14","option":"steps__option_1cs14","dash":"steps__dash_1cs14","completed":"steps__completed_1cs14","gap-24":"steps__gap-24_1cs14","gap-32":"steps__gap-32_1cs14","fullWidth":"steps__fullWidth_1cs14","focused":"steps__focused_1cs14","selected":"steps__selected_1cs14","checkbox":"steps__checkbox_1cs14","dot":"steps__dot_1cs14","error":"steps__error_1cs14","unordered":"steps__unordered_1cs14","completedIndicator":"steps__completedIndicator_1cs14"};
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_1fmbv.steps__component_1fmbv {
4
+ .steps__component_ogpd6.steps__component_ogpd6 {
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_1fmbv"};
5
+ var styles = {"component":"steps__component_ogpd6"};
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;
@@ -121,7 +123,8 @@
121
123
  font-size: 16px;
122
124
  line-height: 24px;
123
125
  font-weight: 400;
124
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
125
128
 
126
129
  transition: background 0.2s;
127
130
  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_13ax5 {
37
+ .steps__step_1cs14 {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_13ax5.steps__horizontal_13ax5 {
41
+ .steps__step_1cs14.steps__horizontal_1cs14 {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_13ax5:not(.steps__vertical_13ax5) {
44
+ .steps__step_1cs14:not(.steps__vertical_1cs14) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_13ax5:last-of-type .steps__textWrapper_13ax5.steps__vertical_13ax5 {
47
+ .steps__step_1cs14:last-of-type .steps__textWrapper_1cs14.steps__vertical_1cs14 {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
50
+ .steps__step_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_13ax5.steps__disabled_13ax5:hover .steps__text_13ax5 {
53
+ .steps__step_1cs14.steps__disabled_1cs14:hover .steps__text_1cs14 {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_13ax5.steps__disabled_13ax5 .steps__indicator_13ax5 {
57
+ .steps__step_1cs14.steps__disabled_1cs14 .steps__indicator_1cs14 {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_13ax5 {
60
+ .steps__indicator_1cs14 {
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_13ax5.steps__vertical_13ax5 {
66
+ .steps__indicator_1cs14.steps__vertical_1cs14 {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_13ax5 {
70
+ .steps__option_1cs14 {
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_13ax5.steps__vertical_13ax5 {
86
+ .steps__option_1cs14.steps__vertical_1cs14 {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_13ax5 {
89
+ .steps__dash_1cs14 {
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_13ax5.steps__completed_13ax5 {
95
+ .steps__dash_1cs14.steps__completed_1cs14 {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_13ax5.steps__vertical_13ax5 {
98
+ .steps__dash_1cs14.steps__vertical_1cs14 {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,26 +104,27 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_13ax5.steps__completed_13ax5.steps__vertical_13ax5 {
107
+ .steps__dash_1cs14.steps__completed_1cs14.steps__vertical_1cs14 {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_13ax5.steps__vertical_13ax5 {
110
+ .steps__textWrapper_1cs14.steps__vertical_1cs14 {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-24_13ax5 {
113
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-24_1cs14 {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-32_13ax5 {
116
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-32_1cs14 {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__fullWidth_13ax5 {
119
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__fullWidth_1cs14 {
118
120
  width: 100%;
119
121
  }
120
- .steps__text_13ax5 {
122
+ .steps__text_1cs14 {
121
123
  font-size: 16px;
122
124
  line-height: 24px;
123
125
  font-weight: 400;
124
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
125
128
 
126
129
  transition: background 0.2s;
127
130
  padding: var(--gap-8);
@@ -131,24 +134,24 @@
131
134
  height: min-content;
132
135
  box-sizing: border-box;
133
136
  }
134
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
137
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
135
138
  background: var(--color-light-transparent-default-hover);
136
139
  }
137
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):active {
140
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):active {
138
141
  background: var(--color-light-transparent-default-press);
139
142
  }
140
- .steps__focused_13ax5 {
143
+ .steps__focused_1cs14 {
141
144
  outline: var(--gap-2) solid var(--focus-color);
142
145
  outline-offset: var(--gap-2);
143
146
  }
144
- .steps__selected_13ax5 .steps__text_13ax5 {
147
+ .steps__selected_1cs14 .steps__text_1cs14 {
145
148
  color: var(--color-light-text-primary);
146
149
  }
147
- .steps__selected_13ax5 .steps__option_13ax5 {
150
+ .steps__selected_1cs14 .steps__option_1cs14 {
148
151
  color: var(--color-light-text-primary-inverted);
149
152
  background: var(--color-light-neutral-translucent-1300);
150
153
  }
151
- .steps__checkbox_13ax5 {
154
+ .steps__checkbox_1cs14 {
152
155
  display: flex;
153
156
  justify-content: center;
154
157
  align-items: center;
@@ -157,25 +160,25 @@
157
160
  height: 20px;
158
161
  border: 2px solid var(--color-light-neutral-translucent-300);
159
162
  }
160
- .steps__dot_13ax5 {
163
+ .steps__dot_1cs14 {
161
164
  width: 10px;
162
165
  height: 10px;
163
166
  border-radius: var(--border-radius-circle);
164
167
  background: var(--color-light-neutral-translucent-300);
165
168
  }
166
- .steps__selected_13ax5 .steps__checkbox_13ax5 {
169
+ .steps__selected_1cs14 .steps__checkbox_1cs14 {
167
170
  border: 2px solid var(--color-light-neutral-translucent-1300);
168
171
  }
169
- .steps__selected_13ax5 .steps__checkbox_13ax5 .steps__dot_13ax5 {
172
+ .steps__selected_1cs14 .steps__checkbox_1cs14 .steps__dot_1cs14 {
170
173
  background: var(--color-light-neutral-translucent-1300);
171
174
  }
172
- .steps__option_13ax5:not(.steps__error_13ax5).steps__unordered_13ax5 {
175
+ .steps__option_1cs14:not(.steps__error_1cs14).steps__unordered_1cs14 {
173
176
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
174
177
  background: initial;
175
178
  }
176
- .steps__completedIndicator_13ax5[class*='positive-checkmark'] {
179
+ .steps__completedIndicator_1cs14[class*='positive-checkmark'] {
177
180
  background-color: var(--steps-option-svg-color);
178
181
  }
179
- .steps__fullWidth_13ax5 {
182
+ .steps__fullWidth_1cs14 {
180
183
  width: 100%;
181
184
  }
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_13ax5","horizontal":"steps__horizontal_13ax5","vertical":"steps__vertical_13ax5","textWrapper":"steps__textWrapper_13ax5","interactive":"steps__interactive_13ax5","disabled":"steps__disabled_13ax5","text":"steps__text_13ax5","indicator":"steps__indicator_13ax5","option":"steps__option_13ax5","dash":"steps__dash_13ax5","completed":"steps__completed_13ax5","gap-24":"steps__gap-24_13ax5","gap-32":"steps__gap-32_13ax5","fullWidth":"steps__fullWidth_13ax5","focused":"steps__focused_13ax5","selected":"steps__selected_13ax5","checkbox":"steps__checkbox_13ax5","dot":"steps__dot_13ax5","error":"steps__error_13ax5","unordered":"steps__unordered_13ax5","completedIndicator":"steps__completedIndicator_13ax5"};
3
+ var styles = {"step":"steps__step_1cs14","horizontal":"steps__horizontal_1cs14","vertical":"steps__vertical_1cs14","textWrapper":"steps__textWrapper_1cs14","interactive":"steps__interactive_1cs14","disabled":"steps__disabled_1cs14","text":"steps__text_1cs14","indicator":"steps__indicator_1cs14","option":"steps__option_1cs14","dash":"steps__dash_1cs14","completed":"steps__completed_1cs14","gap-24":"steps__gap-24_1cs14","gap-32":"steps__gap-32_1cs14","fullWidth":"steps__fullWidth_1cs14","focused":"steps__focused_1cs14","selected":"steps__selected_1cs14","checkbox":"steps__checkbox_1cs14","dot":"steps__dot_1cs14","error":"steps__error_1cs14","unordered":"steps__unordered_1cs14","completedIndicator":"steps__completedIndicator_1cs14"};
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_1fmbv.steps__component_1fmbv {
4
+ .steps__component_ogpd6.steps__component_ogpd6 {
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_1fmbv"};
3
+ var styles = {"component":"steps__component_ogpd6"};
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_1e6bh {
1
+ .steps__component_jefst {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1e6bh.steps__vertical_1e6bh {
6
+ .steps__component_jefst.steps__vertical_jefst {
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_1e6bh","vertical":"steps__vertical_1e6bh"};
3
+ var styles = {"component":"steps__component_jefst","vertical":"steps__vertical_jefst"};
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_1e6bh {
1
+ .steps__component_jefst {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1e6bh.steps__vertical_1e6bh {
6
+ .steps__component_jefst.steps__vertical_jefst {
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_1e6bh","vertical":"steps__vertical_1e6bh"};
5
+ var styles = {"component":"steps__component_jefst","vertical":"steps__vertical_jefst"};
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_13ax5 {
37
+ .steps__step_1cs14 {
37
38
  display: flex;
38
39
  outline: none;
39
40
  }
40
- .steps__step_13ax5.steps__horizontal_13ax5 {
41
+ .steps__step_1cs14.steps__horizontal_1cs14 {
41
42
  flex-grow: 1;
42
43
  }
43
- .steps__step_13ax5:not(.steps__vertical_13ax5) {
44
+ .steps__step_1cs14:not(.steps__vertical_1cs14) {
44
45
  align-items: center;
45
46
  }
46
- .steps__step_13ax5:last-of-type .steps__textWrapper_13ax5.steps__vertical_13ax5 {
47
+ .steps__step_1cs14:last-of-type .steps__textWrapper_1cs14.steps__vertical_1cs14 {
47
48
  margin-bottom: var(--gap-0);
48
49
  }
49
- .steps__step_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
50
+ .steps__step_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
50
51
  cursor: pointer;
51
52
  }
52
- .steps__step_13ax5.steps__disabled_13ax5:hover .steps__text_13ax5 {
53
+ .steps__step_1cs14.steps__disabled_1cs14:hover .steps__text_1cs14 {
53
54
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
54
55
  background: initial;
55
56
  }
56
- .steps__step_13ax5.steps__disabled_13ax5 .steps__indicator_13ax5 {
57
+ .steps__step_1cs14.steps__disabled_1cs14 .steps__indicator_1cs14 {
57
58
  cursor: inherit;
58
59
  }
59
- .steps__indicator_13ax5 {
60
+ .steps__indicator_1cs14 {
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_13ax5.steps__vertical_13ax5 {
66
+ .steps__indicator_1cs14.steps__vertical_1cs14 {
66
67
  flex-direction: column;
67
68
  margin-right: var(--gap-8);
68
69
  }
69
- .steps__option_13ax5 {
70
+ .steps__option_1cs14 {
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_13ax5.steps__vertical_13ax5 {
86
+ .steps__option_1cs14.steps__vertical_1cs14 {
85
87
  margin-top: var(--gap-8);
86
88
  }
87
- .steps__dash_13ax5 {
89
+ .steps__dash_1cs14 {
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_13ax5.steps__completed_13ax5 {
95
+ .steps__dash_1cs14.steps__completed_1cs14 {
94
96
  border-top: var(--steps-dash-border);
95
97
  }
96
- .steps__dash_13ax5.steps__vertical_13ax5 {
98
+ .steps__dash_1cs14.steps__vertical_1cs14 {
97
99
  min-width: 0;
98
100
  min-width: initial;
99
101
  min-height: 8px;
@@ -102,26 +104,27 @@
102
104
  border-left: 2px solid var(--color-light-neutral-translucent-300);
103
105
  border-top: none;
104
106
  }
105
- .steps__dash_13ax5.steps__completed_13ax5.steps__vertical_13ax5 {
107
+ .steps__dash_1cs14.steps__completed_1cs14.steps__vertical_1cs14 {
106
108
  border-left: var(--steps-dash-border);
107
109
  }
108
- .steps__textWrapper_13ax5.steps__vertical_13ax5 {
110
+ .steps__textWrapper_1cs14.steps__vertical_1cs14 {
109
111
  min-height: 48px;
110
112
  }
111
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-24_13ax5 {
113
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-24_1cs14 {
112
114
  margin-bottom: var(--gap-8);
113
115
  }
114
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__gap-32_13ax5 {
116
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__gap-32_1cs14 {
115
117
  margin-bottom: var(--gap-16);
116
118
  }
117
- .steps__textWrapper_13ax5.steps__vertical_13ax5.steps__fullWidth_13ax5 {
119
+ .steps__textWrapper_1cs14.steps__vertical_1cs14.steps__fullWidth_1cs14 {
118
120
  width: 100%;
119
121
  }
120
- .steps__text_13ax5 {
122
+ .steps__text_1cs14 {
121
123
  font-size: 16px;
122
124
  line-height: 24px;
123
125
  font-weight: 400;
124
- font-family: var(--font-family-system);
126
+ letter-spacing: -0.24px;
127
+ font-family: var(--font-family-alfasans);
125
128
 
126
129
  transition: background 0.2s;
127
130
  padding: var(--gap-8);
@@ -131,24 +134,24 @@
131
134
  height: min-content;
132
135
  box-sizing: border-box;
133
136
  }
134
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):hover {
137
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):hover {
135
138
  background: var(--color-light-transparent-default-hover);
136
139
  }
137
- .steps__text_13ax5.steps__interactive_13ax5:not(.steps__disabled_13ax5):active {
140
+ .steps__text_1cs14.steps__interactive_1cs14:not(.steps__disabled_1cs14):active {
138
141
  background: var(--color-light-transparent-default-press);
139
142
  }
140
- .steps__focused_13ax5 {
143
+ .steps__focused_1cs14 {
141
144
  outline: var(--gap-2) solid var(--focus-color);
142
145
  outline-offset: var(--gap-2);
143
146
  }
144
- .steps__selected_13ax5 .steps__text_13ax5 {
147
+ .steps__selected_1cs14 .steps__text_1cs14 {
145
148
  color: var(--color-light-text-primary);
146
149
  }
147
- .steps__selected_13ax5 .steps__option_13ax5 {
150
+ .steps__selected_1cs14 .steps__option_1cs14 {
148
151
  color: var(--color-light-text-primary-inverted);
149
152
  background: var(--color-light-neutral-translucent-1300);
150
153
  }
151
- .steps__checkbox_13ax5 {
154
+ .steps__checkbox_1cs14 {
152
155
  display: flex;
153
156
  justify-content: center;
154
157
  align-items: center;
@@ -157,25 +160,25 @@
157
160
  height: 20px;
158
161
  border: 2px solid var(--color-light-neutral-translucent-300);
159
162
  }
160
- .steps__dot_13ax5 {
163
+ .steps__dot_1cs14 {
161
164
  width: 10px;
162
165
  height: 10px;
163
166
  border-radius: var(--border-radius-circle);
164
167
  background: var(--color-light-neutral-translucent-300);
165
168
  }
166
- .steps__selected_13ax5 .steps__checkbox_13ax5 {
169
+ .steps__selected_1cs14 .steps__checkbox_1cs14 {
167
170
  border: 2px solid var(--color-light-neutral-translucent-1300);
168
171
  }
169
- .steps__selected_13ax5 .steps__checkbox_13ax5 .steps__dot_13ax5 {
172
+ .steps__selected_1cs14 .steps__checkbox_1cs14 .steps__dot_1cs14 {
170
173
  background: var(--color-light-neutral-translucent-1300);
171
174
  }
172
- .steps__option_13ax5:not(.steps__error_13ax5).steps__unordered_13ax5 {
175
+ .steps__option_1cs14:not(.steps__error_1cs14).steps__unordered_1cs14 {
173
176
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
174
177
  background: initial;
175
178
  }
176
- .steps__completedIndicator_13ax5[class*='positive-checkmark'] {
179
+ .steps__completedIndicator_1cs14[class*='positive-checkmark'] {
177
180
  background-color: var(--steps-option-svg-color);
178
181
  }
179
- .steps__fullWidth_13ax5 {
182
+ .steps__fullWidth_1cs14 {
180
183
  width: 100%;
181
184
  }
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_13ax5","horizontal":"steps__horizontal_13ax5","vertical":"steps__vertical_13ax5","textWrapper":"steps__textWrapper_13ax5","interactive":"steps__interactive_13ax5","disabled":"steps__disabled_13ax5","text":"steps__text_13ax5","indicator":"steps__indicator_13ax5","option":"steps__option_13ax5","dash":"steps__dash_13ax5","completed":"steps__completed_13ax5","gap-24":"steps__gap-24_13ax5","gap-32":"steps__gap-32_13ax5","fullWidth":"steps__fullWidth_13ax5","focused":"steps__focused_13ax5","selected":"steps__selected_13ax5","checkbox":"steps__checkbox_13ax5","dot":"steps__dot_13ax5","error":"steps__error_13ax5","unordered":"steps__unordered_13ax5","completedIndicator":"steps__completedIndicator_13ax5"};
3
+ const styles = {"step":"steps__step_1cs14","horizontal":"steps__horizontal_1cs14","vertical":"steps__vertical_1cs14","textWrapper":"steps__textWrapper_1cs14","interactive":"steps__interactive_1cs14","disabled":"steps__disabled_1cs14","text":"steps__text_1cs14","indicator":"steps__indicator_1cs14","option":"steps__option_1cs14","dash":"steps__dash_1cs14","completed":"steps__completed_1cs14","gap-24":"steps__gap-24_1cs14","gap-32":"steps__gap-32_1cs14","fullWidth":"steps__fullWidth_1cs14","focused":"steps__focused_1cs14","selected":"steps__selected_1cs14","checkbox":"steps__checkbox_1cs14","dot":"steps__dot_1cs14","error":"steps__error_1cs14","unordered":"steps__unordered_1cs14","completedIndicator":"steps__completedIndicator_1cs14"};
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_1fmbv.steps__component_1fmbv {
4
+ .steps__component_ogpd6.steps__component_ogpd6 {
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_1fmbv"};
3
+ const styles = {"component":"steps__component_ogpd6"};
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_1e6bh {
1
+ .steps__component_jefst {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  flex-direction: row;
5
5
  }
6
- .steps__component_1e6bh.steps__vertical_1e6bh {
6
+ .steps__component_jefst.steps__vertical_jefst {
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_1e6bh","vertical":"steps__vertical_1e6bh"};
3
+ const styles = {"component":"steps__component_jefst","vertical":"steps__vertical_jefst"};
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;
@@ -112,7 +113,8 @@
112
113
  font-size: 16px;
113
114
  line-height: 24px;
114
115
  font-weight: 400;
115
- font-family: var(--font-family-system);
116
+ letter-spacing: -0.24px;
117
+ font-family: var(--font-family-alfasans);
116
118
 
117
119
  transition: background 0.2s;
118
120
  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.6",
3
+ "version": "3.0.7-alfasans",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -13,10 +13,10 @@
13
13
  "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
14
14
  },
15
15
  "dependencies": {
16
- "@alfalab/core-components-badge": "^7.0.2",
17
- "@alfalab/core-components-shared": "^2.2.0",
18
- "@alfalab/core-components-status-badge": "^3.0.2",
19
- "@alfalab/hooks": "^1.13.1",
16
+ "@alfalab/core-components-badge": "7.0.2-alfasans",
17
+ "@alfalab/core-components-shared": "2.2.1-alfasans",
18
+ "@alfalab/core-components-status-badge": "3.0.2-alfasans",
19
+ "@alfalab/hooks": "^1.17.0",
20
20
  "classnames": "^2.5.1",
21
21
  "tslib": "^2.4.0"
22
22
  },
@@ -28,6 +28,6 @@
28
28
  "access": "public",
29
29
  "directory": "dist"
30
30
  },
31
- "themesVersion": "15.1.0",
32
- "varsVersion": "11.0.2"
31
+ "themesVersion": "15.1.0-alfasans",
32
+ "varsVersion": "11.1.0-alfasans"
33
33
  }