@alfalab/core-components-typography 6.0.1-alfasans → 6.0.2

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