@alfalab/core-components-typography 6.0.1 → 6.0.2-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 (37) hide show
  1. package/colors.css +20 -20
  2. package/colors.module.css.js +1 -1
  3. package/cssm/text/index.module.css +40 -13
  4. package/cssm/title/index.module.css +29 -40
  5. package/cssm/title-mobile/index.module.css +28 -45
  6. package/esm/colors.css +20 -20
  7. package/esm/colors.module.css.js +1 -1
  8. package/esm/text/index.css +80 -53
  9. package/esm/text/index.module.css.js +1 -1
  10. package/esm/title/common.css +5 -5
  11. package/esm/title/common.module.css.js +1 -1
  12. package/esm/title/index.css +54 -65
  13. package/esm/title/index.module.css.js +1 -1
  14. package/esm/title-mobile/index.css +53 -70
  15. package/esm/title-mobile/index.module.css.js +1 -1
  16. package/modern/colors.css +20 -20
  17. package/modern/colors.module.css.js +1 -1
  18. package/modern/text/index.css +80 -53
  19. package/modern/text/index.module.css.js +1 -1
  20. package/modern/title/common.css +5 -5
  21. package/modern/title/common.module.css.js +1 -1
  22. package/modern/title/index.css +54 -65
  23. package/modern/title/index.module.css.js +1 -1
  24. package/modern/title-mobile/index.css +53 -70
  25. package/modern/title-mobile/index.module.css.js +1 -1
  26. package/moderncssm/text/index.module.css +37 -11
  27. package/moderncssm/title/index.module.css +26 -35
  28. package/moderncssm/title-mobile/index.module.css +25 -40
  29. package/package.json +6 -6
  30. package/text/index.css +80 -53
  31. package/text/index.module.css.js +1 -1
  32. package/title/common.css +5 -5
  33. package/title/common.module.css.js +1 -1
  34. package/title/index.css +54 -65
  35. package/title/index.module.css.js +1 -1
  36. package/title-mobile/index.css +53 -70
  37. package/title-mobile/index.module.css.js +1 -1
package/colors.css CHANGED
@@ -20,63 +20,63 @@
20
20
  --color-static-text-tertiary-dark: rgba(5, 8, 29, 0.38);
21
21
  --color-static-text-tertiary-light: rgba(233, 233, 250, 0.37);
22
22
  }
23
- .typography__tertiary_1x1uj {
23
+ .typography__tertiary_1bzi5 {
24
24
  color: var(--color-light-text-tertiary);
25
25
  }
26
- .typography__disabled_1x1uj {
26
+ .typography__disabled_1bzi5 {
27
27
  color: var(--color-light-text-quaternary);
28
28
  }
29
- .typography__accent_1x1uj {
29
+ .typography__accent_1bzi5 {
30
30
  color: var(--color-light-accent-primary);
31
31
  }
32
- .typography__primary_1x1uj {
32
+ .typography__primary_1bzi5 {
33
33
  color: var(--color-light-text-primary);
34
34
  }
35
- .typography__attention_1x1uj {
35
+ .typography__attention_1bzi5 {
36
36
  color: var(--color-light-text-attention);
37
37
  }
38
- .typography__positive_1x1uj {
38
+ .typography__positive_1bzi5 {
39
39
  color: var(--color-light-text-positive);
40
40
  }
41
- .typography__secondary_1x1uj {
41
+ .typography__secondary_1bzi5 {
42
42
  color: var(--color-light-text-secondary);
43
43
  }
44
- .typography__tertiary-inverted_1x1uj {
44
+ .typography__tertiary-inverted_1bzi5 {
45
45
  color: var(--color-light-text-tertiary-inverted);
46
46
  }
47
- .typography__primary-inverted_1x1uj {
47
+ .typography__primary-inverted_1bzi5 {
48
48
  color: var(--color-light-text-primary-inverted);
49
49
  }
50
- .typography__secondary-inverted_1x1uj {
50
+ .typography__secondary-inverted_1bzi5 {
51
51
  color: var(--color-light-text-secondary-inverted);
52
52
  }
53
- .typography__link_1x1uj {
53
+ .typography__link_1bzi5 {
54
54
  color: var(--color-light-text-info);
55
55
  }
56
- .typography__negative_1x1uj {
56
+ .typography__negative_1bzi5 {
57
57
  color: var(--color-light-text-negative);
58
58
  }
59
- .typography__static-primary-light_1x1uj {
59
+ .typography__static-primary-light_1bzi5 {
60
60
  color: var(--color-static-text-primary-light);
61
61
  }
62
- .typography__static-secondary-light_1x1uj {
62
+ .typography__static-secondary-light_1bzi5 {
63
63
  color: var(--color-static-text-secondary-light);
64
64
  }
65
- .typography__static-tertiary-light_1x1uj {
65
+ .typography__static-tertiary-light_1bzi5 {
66
66
  color: var(--color-static-text-tertiary-light);
67
67
  }
68
- .typography__static-primary-dark_1x1uj {
68
+ .typography__static-primary-dark_1bzi5 {
69
69
  color: var(--color-static-text-primary-dark);
70
70
  }
71
- .typography__static-secondary-dark_1x1uj {
71
+ .typography__static-secondary-dark_1bzi5 {
72
72
  color: var(--color-static-text-secondary-dark);
73
73
  }
74
- .typography__static-tertiary-dark_1x1uj {
74
+ .typography__static-tertiary-dark_1bzi5 {
75
75
  color: var(--color-static-text-tertiary-dark);
76
76
  }
77
- .typography__static-accent_1x1uj {
77
+ .typography__static-accent_1bzi5 {
78
78
  color: var(--color-static-accent-primary);
79
79
  }
80
- .typography__static-positive_1x1uj {
80
+ .typography__static-positive_1bzi5 {
81
81
  color: var(--color-static-text-positive);
82
82
  }
package/colors.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./colors.css');
4
4
 
5
- var colors = {"tertiary":"typography__tertiary_1x1uj","disabled":"typography__disabled_1x1uj","accent":"typography__accent_1x1uj","primary":"typography__primary_1x1uj","attention":"typography__attention_1x1uj","positive":"typography__positive_1x1uj","secondary":"typography__secondary_1x1uj","tertiary-inverted":"typography__tertiary-inverted_1x1uj","primary-inverted":"typography__primary-inverted_1x1uj","secondary-inverted":"typography__secondary-inverted_1x1uj","link":"typography__link_1x1uj","negative":"typography__negative_1x1uj","static-primary-light":"typography__static-primary-light_1x1uj","static-secondary-light":"typography__static-secondary-light_1x1uj","static-tertiary-light":"typography__static-tertiary-light_1x1uj","static-primary-dark":"typography__static-primary-dark_1x1uj","static-secondary-dark":"typography__static-secondary-dark_1x1uj","static-tertiary-dark":"typography__static-tertiary-dark_1x1uj","static-accent":"typography__static-accent_1x1uj","static-positive":"typography__static-positive_1x1uj"};
5
+ var colors = {"tertiary":"typography__tertiary_1bzi5","disabled":"typography__disabled_1bzi5","accent":"typography__accent_1bzi5","primary":"typography__primary_1bzi5","attention":"typography__attention_1bzi5","positive":"typography__positive_1bzi5","secondary":"typography__secondary_1bzi5","tertiary-inverted":"typography__tertiary-inverted_1bzi5","primary-inverted":"typography__primary-inverted_1bzi5","secondary-inverted":"typography__secondary-inverted_1bzi5","link":"typography__link_1bzi5","negative":"typography__negative_1bzi5","static-primary-light":"typography__static-primary-light_1bzi5","static-secondary-light":"typography__static-secondary-light_1bzi5","static-tertiary-light":"typography__static-tertiary-light_1bzi5","static-primary-dark":"typography__static-primary-dark_1bzi5","static-secondary-dark":"typography__static-secondary-dark_1bzi5","static-tertiary-dark":"typography__static-tertiary-dark_1bzi5","static-accent":"typography__static-accent_1bzi5","static-positive":"typography__static-positive_1bzi5"};
6
6
 
7
7
  module.exports = colors;
8
8
  //# sourceMappingURL=colors.module.css.js.map
package/cssm/text/index.module.css CHANGED
@@ -4,8 +4,9 @@
4
4
  --gap-12: var(--gap-s);
5
5
  }
6
6
  :root {
7
- --font-family-system:
8
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
7
+ --font-family-alfasans:
8
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
9
+ Helvetica, sans-serif;
9
10
  }
10
11
  .transparent {
11
12
  opacity: 0;
@@ -25,13 +26,16 @@
25
26
  font-size: 16px;
26
27
  line-height: 20px;
27
28
  font-weight: 400;
28
- font-family: var(--font-family-system);
29
+ letter-spacing: -0.24px;
30
+ font-family: var(--font-family-alfasans);
29
31
  }
30
32
  .component.bold {
31
33
  font-weight: 700;
34
+ letter-spacing: 0.43px;
32
35
  }
33
36
  .component.medium {
34
37
  font-weight: 500;
38
+ letter-spacing: -0.05px;
35
39
  }
36
40
  .caps {
37
41
  font-size: 12px;
@@ -39,7 +43,7 @@
39
43
  font-weight: 400;
40
44
  letter-spacing: 1.25px;
41
45
  text-transform: uppercase;
42
- font-family: var(--font-family-system);
46
+ font-family: var(--font-family-alfasans);
43
47
  }
44
48
  .caps.bold {
45
49
  font-weight: 700;
@@ -53,7 +57,7 @@
53
57
  font-weight: 400;
54
58
  letter-spacing: 1.25px;
55
59
  text-transform: uppercase;
56
- font-family: var(--font-family-system);
60
+ font-family: var(--font-family-alfasans);
57
61
  }
58
62
  .tagline.bold {
59
63
  font-weight: 700;
@@ -65,97 +69,120 @@
65
69
  font-size: 18px;
66
70
  line-height: 24px;
67
71
  font-weight: 400;
68
- font-family: var(--font-family-system);
72
+ letter-spacing: -0.36px;
73
+ font-family: var(--font-family-alfasans);
69
74
  }
70
75
  .primary-large.bold {
71
76
  font-weight: 700;
77
+ letter-spacing: 0.38px;
72
78
  }
73
79
  .primary-large.medium {
74
80
  font-weight: 500;
81
+ letter-spacing: -0.17px;
75
82
  }
76
83
  .primary-medium {
77
84
  font-size: 16px;
78
85
  line-height: 24px;
79
86
  font-weight: 400;
80
- font-family: var(--font-family-system);
87
+ letter-spacing: -0.24px;
88
+ font-family: var(--font-family-alfasans);
81
89
  }
82
90
  .primary-medium.bold {
83
91
  font-weight: 700;
92
+ letter-spacing: 0.43px;
84
93
  }
85
94
  .primary-medium.medium {
86
95
  font-weight: 500;
96
+ letter-spacing: -0.05px;
87
97
  }
88
98
  .primary-small {
89
99
  font-size: 14px;
90
100
  line-height: 20px;
91
101
  font-weight: 400;
92
- font-family: var(--font-family-system);
102
+ letter-spacing: -0.08px;
103
+ font-family: var(--font-family-alfasans);
93
104
  }
94
105
  .primary-small.bold {
95
106
  font-weight: 700;
107
+ letter-spacing: 0.47px;
96
108
  }
97
109
  .primary-small.medium {
98
110
  font-weight: 500;
111
+ letter-spacing: 0.07px;
99
112
  }
100
113
  .component-primary {
101
114
  font-size: 16px;
102
115
  line-height: 20px;
103
116
  font-weight: 400;
104
- font-family: var(--font-family-system);
117
+ letter-spacing: -0.24px;
118
+ font-family: var(--font-family-alfasans);
105
119
  }
106
120
  .component-primary.bold {
107
121
  font-weight: 700;
122
+ letter-spacing: 0.43px;
108
123
  }
109
124
  .component-primary.medium {
110
125
  font-weight: 500;
126
+ letter-spacing: -0.05px;
111
127
  }
112
128
  .secondary-large {
113
129
  font-size: 13px;
114
130
  line-height: 16px;
115
131
  font-weight: 400;
116
- font-family: var(--font-family-system);
132
+ font-family: var(--font-family-alfasans);
117
133
  }
118
134
  .secondary-large.bold {
119
135
  font-weight: 700;
136
+ letter-spacing: 0.54px;
120
137
  }
121
138
  .secondary-large.medium {
122
139
  font-weight: 500;
140
+ letter-spacing: 0.13px;
123
141
  }
124
142
  .secondary-medium {
125
143
  font-size: 12px;
126
144
  line-height: 16px;
127
145
  font-weight: 400;
128
- font-family: var(--font-family-system);
146
+ letter-spacing: 0.06px;
147
+ font-family: var(--font-family-alfasans);
129
148
  }
130
149
  .secondary-medium.bold {
131
150
  font-weight: 700;
151
+ letter-spacing: 0.57px;
132
152
  }
133
153
  .secondary-medium.medium {
134
154
  font-weight: 500;
155
+ letter-spacing: 0.19px;
135
156
  }
136
157
  .secondary-small {
137
158
  font-size: 11px;
138
159
  line-height: 16px;
139
160
  font-weight: 400;
140
- font-family: var(--font-family-system);
161
+ letter-spacing: 0.15px;
162
+ font-family: var(--font-family-alfasans);
141
163
  }
142
164
  .secondary-small.bold {
143
165
  font-weight: 700;
166
+ letter-spacing: 0.54px;
144
167
  }
145
168
  .secondary-small.medium {
146
169
  font-weight: 500;
170
+ letter-spacing: 0.24px;
147
171
  }
148
172
  .component-secondary {
149
173
  font-size: 14px;
150
174
  line-height: 18px;
151
175
  font-weight: 400;
152
- font-family: var(--font-family-system);
176
+ letter-spacing: -0.08px;
177
+ font-family: var(--font-family-alfasans);
153
178
  }
154
179
  .component-secondary.bold {
155
180
  font-weight: 700;
181
+ letter-spacing: 0.47px;
156
182
  }
157
183
  .component-secondary.medium {
158
184
  font-weight: 500;
185
+ letter-spacing: 0.07px;
159
186
  }
160
187
  .rowLimit1 {
161
188
  -webkit-line-clamp: 1;
package/cssm/title/index.module.css CHANGED
@@ -10,130 +10,119 @@
10
10
  --gap-48: var(--gap-4xl);
11
11
  }
12
12
  :root {
13
- --font-family-system:
14
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
15
- --font-family-styrene:
16
- 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
17
- sans-serif;
13
+ --font-family-alfasans:
14
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
15
+ Helvetica, sans-serif;
18
16
  }
19
17
  .xlarge {
20
18
  font-size: 48px;
21
19
  line-height: 52px;
22
20
  font-weight: 700;
23
- font-family: var(--font-family-system);
21
+ letter-spacing: 0.1px;
22
+ font-family: var(--font-family-alfasans);
24
23
  }
25
24
  .xlarge.font {
26
25
  line-height: 64px;
27
- font-weight: 500;
28
- font-feature-settings: 'ss01';
29
- font-family: var(--font-family-styrene);
30
26
  }
31
27
  .regular-xlarge {
32
28
  font-size: 48px;
33
29
  line-height: 52px;
34
30
  font-weight: 400;
35
- font-family: var(--font-family-system);
31
+ letter-spacing: -2.1px;
32
+ font-family: var(--font-family-alfasans);
36
33
  }
37
34
  .regular-xlarge.font {
38
35
  line-height: 64px;
39
- font-feature-settings: 'ss01';
40
- font-family: var(--font-family-styrene);
41
36
  }
42
37
  .large {
43
38
  font-size: 40px;
44
39
  line-height: 48px;
45
40
  font-weight: 700;
46
- font-family: var(--font-family-system);
41
+ letter-spacing: 0.1px;
42
+ font-family: var(--font-family-alfasans);
47
43
  }
48
44
  .large.font {
49
- font-weight: 500;
50
- font-feature-settings: 'ss01';
51
- font-family: var(--font-family-styrene);
52
45
  }
53
46
  .regular-large {
54
47
  font-size: 40px;
55
48
  line-height: 48px;
56
49
  font-weight: 400;
57
- font-family: var(--font-family-system);
50
+ letter-spacing: -1.7px;
51
+ font-family: var(--font-family-alfasans);
58
52
  }
59
53
  .regular-large.font {
60
- font-feature-settings: 'ss01';
61
- font-family: var(--font-family-styrene);
62
54
  }
63
55
  .medium {
64
56
  font-size: 30px;
65
57
  line-height: 36px;
66
58
  font-weight: 700;
67
- font-family: var(--font-family-system);
59
+ letter-spacing: 0.1px;
60
+ font-family: var(--font-family-alfasans);
68
61
  }
69
62
  .medium.font {
70
63
  font-size: 32px;
71
64
  line-height: 40px;
72
- font-weight: 500;
73
- font-feature-settings: 'ss01';
74
- font-family: var(--font-family-styrene);
65
+ letter-spacing: 0.3px;
75
66
  }
76
67
  .regular-medium {
77
68
  font-size: 30px;
78
69
  line-height: 36px;
79
70
  font-weight: 400;
80
- font-family: var(--font-family-system);
71
+ letter-spacing: -1.25px;
72
+ font-family: var(--font-family-alfasans);
81
73
  }
82
74
  .regular-medium.font {
83
75
  font-size: 32px;
84
76
  line-height: 40px;
85
- font-feature-settings: 'ss01';
86
- font-family: var(--font-family-styrene);
77
+ letter-spacing: -1.36px;
87
78
  }
88
79
  .small {
89
80
  font-size: 22px;
90
81
  line-height: 26px;
91
82
  font-weight: 700;
92
- font-family: var(--font-family-system);
83
+ letter-spacing: 0.2px;
84
+ font-family: var(--font-family-alfasans);
93
85
  }
94
86
  .small.font {
95
87
  font-size: 24px;
96
88
  line-height: 32px;
97
- font-weight: 500;
98
- font-feature-settings: 'ss01';
99
- font-family: var(--font-family-styrene);
89
+ letter-spacing: 0.39px;
100
90
  }
101
91
  .regular-small {
102
92
  font-size: 22px;
103
93
  line-height: 26px;
104
94
  font-weight: 400;
105
- font-family: var(--font-family-system);
95
+ letter-spacing: -0.8px;
96
+ font-family: var(--font-family-alfasans);
106
97
  }
107
98
  .regular-small.font {
108
99
  font-size: 24px;
109
100
  line-height: 32px;
110
- font-feature-settings: 'ss01';
111
- font-family: var(--font-family-styrene);
101
+ letter-spacing: -0.9px;
112
102
  }
113
103
  .xsmall {
114
104
  font-size: 18px;
115
105
  line-height: 22px;
116
106
  font-weight: 700;
117
- font-family: var(--font-family-system);
107
+ letter-spacing: 0.38px;
108
+ font-family: var(--font-family-alfasans);
118
109
  }
119
110
  .xsmall.font {
120
111
  font-size: 20px;
121
112
  line-height: 24px;
122
- font-weight: 500;
123
- font-feature-settings: 'ss01';
124
- font-family: var(--font-family-styrene);
113
+ letter-spacing: 0.33px;
125
114
  }
126
115
  .regular-xsmall {
127
116
  font-size: 18px;
128
117
  line-height: 22px;
129
118
  font-weight: 400;
130
- font-family: var(--font-family-system);
119
+ letter-spacing: -0.36px;
120
+ font-family: var(--font-family-alfasans);
131
121
  }
132
122
  .regular-xsmall.font {
133
123
  font-size: 20px;
134
124
  line-height: 24px;
135
- font-feature-settings: 'ss01';
136
- font-family: var(--font-family-styrene);
125
+ letter-spacing: -0.68px;
137
126
  }
138
127
  .component.margins-xlarge {
139
128
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
package/cssm/title-mobile/index.module.css CHANGED
@@ -8,116 +8,99 @@
8
8
  --gap-40: var(--gap-3xl);
9
9
  }
10
10
  :root {
11
- --font-family-system:
12
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
13
- --font-family-styrene:
14
- 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
15
- sans-serif;
11
+ --font-family-alfasans:
12
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
13
+ Helvetica, sans-serif;
16
14
  }
17
15
  .xlarge {
18
16
  font-size: 34px;
19
17
  line-height: 40px;
20
- font-weight: 600;
21
- font-family: var(--font-family-system);
18
+ font-weight: 500;
19
+ letter-spacing: -0.32px;
20
+ font-family: var(--font-family-alfasans);
22
21
  }
23
22
  .xlarge.font {
24
- font-weight: 500;
25
- font-feature-settings: 'ss01';
26
- font-family: var(--font-family-styrene);
27
23
  }
28
24
  .regular-xlarge {
29
25
  font-size: 34px;
30
26
  line-height: 40px;
31
27
  font-weight: 400;
32
- font-family: var(--font-family-system);
28
+ letter-spacing: -1.36px;
29
+ font-family: var(--font-family-alfasans);
33
30
  }
34
31
  .regular-xlarge.system {
35
- font-feature-settings: 'ss01';
36
- font-family: var(--font-family-styrene);
37
32
  }
38
33
  .large {
39
34
  font-size: 30px;
40
35
  line-height: 36px;
41
- font-weight: 600;
42
- font-family: var(--font-family-system);
36
+ font-weight: 500;
37
+ letter-spacing: -0.25px;
38
+ font-family: var(--font-family-alfasans);
43
39
  }
44
40
  .large.font {
45
- font-weight: 500;
46
- font-feature-settings: 'ss01';
47
- font-family: var(--font-family-styrene);
48
41
  }
49
42
  .regular-large {
50
43
  font-size: 30px;
51
44
  line-height: 36px;
52
45
  font-weight: 400;
53
- font-family: var(--font-family-system);
46
+ letter-spacing: -1.25px;
47
+ font-family: var(--font-family-alfasans);
54
48
  }
55
49
  .regular-large.system {
56
- font-feature-settings: 'ss01';
57
- font-family: var(--font-family-styrene);
58
50
  }
59
51
  .medium {
60
52
  font-size: 26px;
61
53
  line-height: 32px;
62
- font-weight: 600;
63
- font-family: var(--font-family-system);
54
+ font-weight: 500;
55
+ letter-spacing: -0.25px;
56
+ font-family: var(--font-family-alfasans);
64
57
  }
65
58
  .medium.font {
66
- font-weight: 500;
67
- font-feature-settings: 'ss01';
68
- font-family: var(--font-family-styrene);
69
59
  }
70
60
  .regular-medium {
71
61
  font-size: 26px;
72
62
  line-height: 32px;
73
63
  font-weight: 400;
74
- font-family: var(--font-family-system);
64
+ letter-spacing: -1px;
65
+ font-family: var(--font-family-alfasans);
75
66
  }
76
67
  .regular-medium.system {
77
- font-feature-settings: 'ss01';
78
- font-family: var(--font-family-styrene);
79
68
  }
80
69
  .small {
81
70
  font-size: 20px;
82
71
  line-height: 28px;
83
- font-weight: 600;
84
- font-family: var(--font-family-system);
72
+ font-weight: 500;
73
+ letter-spacing: -0.15px;
74
+ font-family: var(--font-family-alfasans);
85
75
  }
86
76
  .small.font {
87
- font-weight: 500;
88
- font-feature-settings: 'ss01';
89
- font-family: var(--font-family-styrene);
90
77
  }
91
78
  .regular-small {
92
79
  font-size: 20px;
93
80
  line-height: 28px;
94
81
  font-weight: 400;
95
- font-family: var(--font-family-system);
82
+ letter-spacing: -0.68px;
83
+ font-family: var(--font-family-alfasans);
96
84
  }
97
85
  .regular-small.system {
98
- font-feature-settings: 'ss01';
99
- font-family: var(--font-family-styrene);
100
86
  }
101
87
  .xsmall {
102
88
  font-size: 16px;
103
89
  line-height: 20px;
104
- font-weight: 600;
105
- font-family: var(--font-family-system);
90
+ font-weight: 500;
91
+ letter-spacing: 0.17px;
92
+ font-family: var(--font-family-alfasans);
106
93
  }
107
94
  .xsmall.font {
108
- font-weight: 500;
109
- font-feature-settings: 'ss01';
110
- font-family: var(--font-family-styrene);
111
95
  }
112
96
  .regular-xsmall {
113
97
  font-size: 16px;
114
98
  line-height: 20px;
115
99
  font-weight: 400;
116
- font-family: var(--font-family-system);
100
+ letter-spacing: -0.24px;
101
+ font-family: var(--font-family-alfasans);
117
102
  }
118
103
  .regular-xsmall.system {
119
- font-feature-settings: 'ss01';
120
- font-family: var(--font-family-styrene);
121
104
  }
122
105
  .component.margins-xlarge {
123
106
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
package/esm/colors.css CHANGED
@@ -20,63 +20,63 @@
20
20
  --color-static-text-tertiary-dark: rgba(5, 8, 29, 0.38);
21
21
  --color-static-text-tertiary-light: rgba(233, 233, 250, 0.37);
22
22
  }
23
- .typography__tertiary_1x1uj {
23
+ .typography__tertiary_1bzi5 {
24
24
  color: var(--color-light-text-tertiary);
25
25
  }
26
- .typography__disabled_1x1uj {
26
+ .typography__disabled_1bzi5 {
27
27
  color: var(--color-light-text-quaternary);
28
28
  }
29
- .typography__accent_1x1uj {
29
+ .typography__accent_1bzi5 {
30
30
  color: var(--color-light-accent-primary);
31
31
  }
32
- .typography__primary_1x1uj {
32
+ .typography__primary_1bzi5 {
33
33
  color: var(--color-light-text-primary);
34
34
  }
35
- .typography__attention_1x1uj {
35
+ .typography__attention_1bzi5 {
36
36
  color: var(--color-light-text-attention);
37
37
  }
38
- .typography__positive_1x1uj {
38
+ .typography__positive_1bzi5 {
39
39
  color: var(--color-light-text-positive);
40
40
  }
41
- .typography__secondary_1x1uj {
41
+ .typography__secondary_1bzi5 {
42
42
  color: var(--color-light-text-secondary);
43
43
  }
44
- .typography__tertiary-inverted_1x1uj {
44
+ .typography__tertiary-inverted_1bzi5 {
45
45
  color: var(--color-light-text-tertiary-inverted);
46
46
  }
47
- .typography__primary-inverted_1x1uj {
47
+ .typography__primary-inverted_1bzi5 {
48
48
  color: var(--color-light-text-primary-inverted);
49
49
  }
50
- .typography__secondary-inverted_1x1uj {
50
+ .typography__secondary-inverted_1bzi5 {
51
51
  color: var(--color-light-text-secondary-inverted);
52
52
  }
53
- .typography__link_1x1uj {
53
+ .typography__link_1bzi5 {
54
54
  color: var(--color-light-text-info);
55
55
  }
56
- .typography__negative_1x1uj {
56
+ .typography__negative_1bzi5 {
57
57
  color: var(--color-light-text-negative);
58
58
  }
59
- .typography__static-primary-light_1x1uj {
59
+ .typography__static-primary-light_1bzi5 {
60
60
  color: var(--color-static-text-primary-light);
61
61
  }
62
- .typography__static-secondary-light_1x1uj {
62
+ .typography__static-secondary-light_1bzi5 {
63
63
  color: var(--color-static-text-secondary-light);
64
64
  }
65
- .typography__static-tertiary-light_1x1uj {
65
+ .typography__static-tertiary-light_1bzi5 {
66
66
  color: var(--color-static-text-tertiary-light);
67
67
  }
68
- .typography__static-primary-dark_1x1uj {
68
+ .typography__static-primary-dark_1bzi5 {
69
69
  color: var(--color-static-text-primary-dark);
70
70
  }
71
- .typography__static-secondary-dark_1x1uj {
71
+ .typography__static-secondary-dark_1bzi5 {
72
72
  color: var(--color-static-text-secondary-dark);
73
73
  }
74
- .typography__static-tertiary-dark_1x1uj {
74
+ .typography__static-tertiary-dark_1bzi5 {
75
75
  color: var(--color-static-text-tertiary-dark);
76
76
  }
77
- .typography__static-accent_1x1uj {
77
+ .typography__static-accent_1bzi5 {
78
78
  color: var(--color-static-accent-primary);
79
79
  }
80
- .typography__static-positive_1x1uj {
80
+ .typography__static-positive_1bzi5 {
81
81
  color: var(--color-static-text-positive);
82
82
  }
package/esm/colors.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './colors.css';
2
2
 
3
- var colors = {"tertiary":"typography__tertiary_1x1uj","disabled":"typography__disabled_1x1uj","accent":"typography__accent_1x1uj","primary":"typography__primary_1x1uj","attention":"typography__attention_1x1uj","positive":"typography__positive_1x1uj","secondary":"typography__secondary_1x1uj","tertiary-inverted":"typography__tertiary-inverted_1x1uj","primary-inverted":"typography__primary-inverted_1x1uj","secondary-inverted":"typography__secondary-inverted_1x1uj","link":"typography__link_1x1uj","negative":"typography__negative_1x1uj","static-primary-light":"typography__static-primary-light_1x1uj","static-secondary-light":"typography__static-secondary-light_1x1uj","static-tertiary-light":"typography__static-tertiary-light_1x1uj","static-primary-dark":"typography__static-primary-dark_1x1uj","static-secondary-dark":"typography__static-secondary-dark_1x1uj","static-tertiary-dark":"typography__static-tertiary-dark_1x1uj","static-accent":"typography__static-accent_1x1uj","static-positive":"typography__static-positive_1x1uj"};
3
+ var colors = {"tertiary":"typography__tertiary_1bzi5","disabled":"typography__disabled_1bzi5","accent":"typography__accent_1bzi5","primary":"typography__primary_1bzi5","attention":"typography__attention_1bzi5","positive":"typography__positive_1bzi5","secondary":"typography__secondary_1bzi5","tertiary-inverted":"typography__tertiary-inverted_1bzi5","primary-inverted":"typography__primary-inverted_1bzi5","secondary-inverted":"typography__secondary-inverted_1bzi5","link":"typography__link_1bzi5","negative":"typography__negative_1bzi5","static-primary-light":"typography__static-primary-light_1bzi5","static-secondary-light":"typography__static-secondary-light_1bzi5","static-tertiary-light":"typography__static-tertiary-light_1bzi5","static-primary-dark":"typography__static-primary-dark_1bzi5","static-secondary-dark":"typography__static-secondary-dark_1bzi5","static-tertiary-dark":"typography__static-tertiary-dark_1bzi5","static-accent":"typography__static-accent_1bzi5","static-positive":"typography__static-positive_1bzi5"};
4
4
 
5
5
  export { colors as default };
6
6
  //# sourceMappingURL=colors.module.css.js.map