@aziontech/theme 2.0.2 → 2.0.3
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.
- package/README.md +1 -1
- package/dist/v3/globals.css +150 -135
- package/dist/v3/globals.scss +150 -135
- package/dist/v3/tailwind-preset.js +24 -3
- package/dist/v3/tailwind.config.js +24 -3
- package/dist/v4/globals.css +58 -40
- package/dist/v4/globals.scss +58 -40
- package/package.json +1 -1
- package/src/scripts/build-tokens.mjs +5 -10
- package/src/tokens/primitives/colors/alpha.js +10 -10
- package/src/tokens/primitives/colors/brand.js +4 -4
- package/src/tokens/primitives/colors/colors.js +15 -15
- package/src/tokens/primitives/typography/font-family.js +3 -3
- package/src/tokens/semantic/texts.data.js +44 -22
- package/src/tokens/semantic/texts.js +84 -84
- package/src/tokens/theme/background.js +9 -9
- package/src/tokens/theme/border.js +4 -4
- package/src/tokens/theme/feedback/info.js +6 -6
- package/src/tokens/theme/secondary.js +4 -4
- package/src/tokens/theme/text.js +4 -4
|
@@ -12,92 +12,114 @@
|
|
|
12
12
|
* old `mobile` (default, applied >768) → `md` (≥768)
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
import { fontFamily } from '../primitives/typography/font-family.js'
|
|
16
|
+
|
|
15
17
|
export const textsData = {
|
|
16
18
|
'text-big-number-md': {
|
|
17
19
|
fontSize: { _: '1.25rem', sm: '1.5rem', md: '2.25rem' },
|
|
18
20
|
lineHeight: '1.20',
|
|
21
|
+
fontFamily: fontFamily.display
|
|
19
22
|
},
|
|
20
23
|
'text-big-number-sm': {
|
|
21
24
|
fontSize: { _: '1rem', sm: '1.25rem' },
|
|
22
25
|
lineHeight: '1.20',
|
|
26
|
+
fontFamily: fontFamily.display
|
|
23
27
|
},
|
|
24
28
|
'text-big-number-lg': {
|
|
25
29
|
fontSize: { _: '1.5rem', sm: '2.25rem', md: '3.75rem' },
|
|
26
30
|
lineHeight: '1.20',
|
|
31
|
+
fontFamily: fontFamily.display
|
|
27
32
|
},
|
|
28
33
|
'text-heading-2xl': {
|
|
29
34
|
fontSize: { _: '1.875rem', sm: '3rem', md: '3.75rem' },
|
|
30
|
-
lineHeight: '1.2'
|
|
35
|
+
lineHeight: '1.2'
|
|
31
36
|
},
|
|
32
37
|
'text-heading-xl': {
|
|
33
38
|
fontSize: { _: '1.25rem', sm: '1.875rem', md: '2.25rem' },
|
|
34
|
-
lineHeight: '1.2'
|
|
39
|
+
lineHeight: '1.2'
|
|
35
40
|
},
|
|
36
41
|
'text-heading-lg': {
|
|
37
42
|
fontSize: { _: '1.125rem', md: '1.875rem' },
|
|
38
|
-
lineHeight: '1.2'
|
|
43
|
+
lineHeight: '1.2'
|
|
39
44
|
},
|
|
40
45
|
'text-heading-md': {
|
|
41
46
|
fontSize: { _: '1rem', sm: '1.25rem', md: '1.5rem' },
|
|
42
|
-
lineHeight: '1.2'
|
|
47
|
+
lineHeight: '1.2'
|
|
43
48
|
},
|
|
44
49
|
'text-heading-sm': {
|
|
45
50
|
fontSize: { _: '0.875rem', sm: '1rem', md: '1.125rem' },
|
|
46
|
-
lineHeight: '1.2'
|
|
51
|
+
lineHeight: '1.2'
|
|
52
|
+
},
|
|
53
|
+
'text-label-lg': {
|
|
54
|
+
fontSize: '1rem',
|
|
55
|
+
lineHeight: '1.5',
|
|
56
|
+
fontWeight: '500'
|
|
57
|
+
},
|
|
58
|
+
'text-label-md': {
|
|
59
|
+
fontSize: '0.875rem',
|
|
60
|
+
lineHeight: '1.5',
|
|
61
|
+
fontWeight: '500'
|
|
62
|
+
},
|
|
63
|
+
'text-label-sm': {
|
|
64
|
+
fontSize: '0.75rem',
|
|
65
|
+
lineHeight: '1.5',
|
|
66
|
+
fontWeight: '500'
|
|
47
67
|
},
|
|
48
68
|
'text-body-lg': {
|
|
49
69
|
fontSize: { _: '1rem', md: '1.125rem' },
|
|
50
|
-
lineHeight: '1.5'
|
|
70
|
+
lineHeight: '1.5'
|
|
51
71
|
},
|
|
52
72
|
'text-body-md': {
|
|
53
73
|
fontSize: '1rem',
|
|
54
|
-
lineHeight: '1.5'
|
|
74
|
+
lineHeight: '1.5'
|
|
55
75
|
},
|
|
56
76
|
'text-body-sm': {
|
|
57
77
|
fontSize: '0.875rem',
|
|
58
|
-
lineHeight: '1.5'
|
|
78
|
+
lineHeight: '1.5'
|
|
59
79
|
},
|
|
60
80
|
'text-body-xs': {
|
|
61
81
|
fontSize: '0.75rem',
|
|
62
|
-
lineHeight: '1.5'
|
|
82
|
+
lineHeight: '1.5'
|
|
63
83
|
},
|
|
64
|
-
'text-body-
|
|
84
|
+
'text-body-xxs': {
|
|
65
85
|
fontSize: '0.625rem',
|
|
66
|
-
lineHeight: '1.5'
|
|
86
|
+
lineHeight: '1.5'
|
|
67
87
|
},
|
|
68
88
|
'text-overline-md': {
|
|
89
|
+
fontFamily: fontFamily.display,
|
|
69
90
|
fontSize: { _: '0.75rem', sm: '0.875rem' },
|
|
70
91
|
lineHeight: '1.4',
|
|
71
92
|
letterSpacing: '0.08em',
|
|
72
|
-
textTransform: 'uppercase'
|
|
93
|
+
textTransform: 'uppercase'
|
|
73
94
|
},
|
|
74
95
|
'text-overline-sm': {
|
|
96
|
+
fontFamily: fontFamily.display,
|
|
75
97
|
fontSize: '0.75rem',
|
|
76
98
|
lineHeight: '1.4',
|
|
77
99
|
letterSpacing: '0.08em',
|
|
78
|
-
textTransform: 'uppercase'
|
|
100
|
+
textTransform: 'uppercase'
|
|
79
101
|
},
|
|
80
102
|
'text-overline-xs': {
|
|
103
|
+
fontFamily: fontFamily.display,
|
|
81
104
|
fontSize: '0.625rem',
|
|
82
105
|
lineHeight: '1.4',
|
|
83
106
|
letterSpacing: '0.08em',
|
|
84
|
-
textTransform: 'uppercase'
|
|
107
|
+
textTransform: 'uppercase'
|
|
85
108
|
},
|
|
86
109
|
'text-button-lg': {
|
|
87
|
-
fontFamily:
|
|
110
|
+
fontFamily: fontFamily.sans,
|
|
88
111
|
fontSize: '0.875rem',
|
|
89
112
|
fontWeight: '600',
|
|
90
113
|
lineHeight: '1',
|
|
91
|
-
letterSpacing: '0'
|
|
114
|
+
letterSpacing: '0'
|
|
92
115
|
},
|
|
93
116
|
'text-button-md': {
|
|
94
|
-
fontFamily:
|
|
117
|
+
fontFamily: fontFamily.sans,
|
|
95
118
|
fontSize: '0.75rem',
|
|
96
119
|
fontWeight: '600',
|
|
97
120
|
lineHeight: '1',
|
|
98
|
-
letterSpacing: '0'
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
121
|
+
letterSpacing: '0'
|
|
122
|
+
}
|
|
123
|
+
}
|
|
102
124
|
|
|
103
|
-
export default { textsData }
|
|
125
|
+
export default { textsData }
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
// `src/scripts/build-tokens.mjs`. Remover quando consumers migrarem.
|
|
4
4
|
const plugin = (() => {
|
|
5
5
|
try {
|
|
6
|
-
return require('tailwindcss/plugin')
|
|
6
|
+
return require('tailwindcss/plugin')
|
|
7
7
|
} catch {
|
|
8
|
-
return (handler) => handler
|
|
8
|
+
return (handler) => handler
|
|
9
9
|
}
|
|
10
|
-
})()
|
|
10
|
+
})()
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Generate semantic typography style components
|
|
@@ -20,280 +20,280 @@ export const semanticTexts = () => {
|
|
|
20
20
|
fontSize: '3rem',
|
|
21
21
|
lineHeight: '1.10',
|
|
22
22
|
fontFamily: 'Sora',
|
|
23
|
-
letterSpacing: '-.05rem'
|
|
23
|
+
letterSpacing: '-.05rem'
|
|
24
24
|
},
|
|
25
25
|
'.display-2': {
|
|
26
26
|
fontSize: '2rem',
|
|
27
27
|
lineHeight: '1.2',
|
|
28
28
|
fontFamily: 'Sora',
|
|
29
|
-
letterSpacing: '-.05rem'
|
|
29
|
+
letterSpacing: '-.05rem'
|
|
30
30
|
},
|
|
31
31
|
'.display-3': {
|
|
32
32
|
fontSize: '1.75rem',
|
|
33
33
|
lineHeight: '1.25',
|
|
34
34
|
fontFamily: 'Sora',
|
|
35
|
-
letterSpacing: '-.05rem'
|
|
35
|
+
letterSpacing: '-.05rem'
|
|
36
36
|
},
|
|
37
37
|
'.display-4': {
|
|
38
38
|
fontSize: '1.5rem',
|
|
39
39
|
lineHeight: '1.3',
|
|
40
40
|
fontFamily: 'Sora',
|
|
41
|
-
letterSpacing: '-.05rem'
|
|
41
|
+
letterSpacing: '-.05rem'
|
|
42
42
|
},
|
|
43
43
|
'.display-5': {
|
|
44
44
|
fontSize: '1.25rem',
|
|
45
45
|
lineHeight: '1.4',
|
|
46
46
|
fontFamily: 'Sora',
|
|
47
|
-
letterSpacing: '-.05rem'
|
|
47
|
+
letterSpacing: '-.05rem'
|
|
48
48
|
},
|
|
49
49
|
'.display-1-mobile': {
|
|
50
50
|
fontSize: '2.5rem',
|
|
51
51
|
lineHeight: '1.15',
|
|
52
52
|
fontFamily: 'Sora',
|
|
53
|
-
letterSpacing: '-.05rem'
|
|
53
|
+
letterSpacing: '-.05rem'
|
|
54
54
|
},
|
|
55
55
|
'.display-2-mobile': {
|
|
56
56
|
fontSize: '1.875rem',
|
|
57
57
|
lineHeight: '1.20',
|
|
58
58
|
fontFamily: 'Sora',
|
|
59
|
-
letterSpacing: '-.05rem'
|
|
59
|
+
letterSpacing: '-.05rem'
|
|
60
60
|
},
|
|
61
61
|
'.display-3-mobile': {
|
|
62
62
|
fontSize: '1.375rem',
|
|
63
63
|
lineHeight: '1.3',
|
|
64
64
|
fontFamily: 'Sora',
|
|
65
|
-
letterSpacing: '-.05rem'
|
|
65
|
+
letterSpacing: '-.05rem'
|
|
66
66
|
},
|
|
67
67
|
'.display-4-mobile': {
|
|
68
68
|
fontSize: '1.25rem',
|
|
69
69
|
lineHeight: '1.35',
|
|
70
70
|
fontFamily: 'Sora',
|
|
71
|
-
letterSpacing: '-.05rem'
|
|
71
|
+
letterSpacing: '-.05rem'
|
|
72
72
|
},
|
|
73
73
|
'.display-5-mobile': {
|
|
74
74
|
fontSize: '1.125rem',
|
|
75
75
|
lineHeight: '1.35',
|
|
76
76
|
fontFamily: 'Sora',
|
|
77
|
-
letterSpacing: '-.05rem'
|
|
77
|
+
letterSpacing: '-.05rem'
|
|
78
78
|
},
|
|
79
79
|
'.body-1': {
|
|
80
80
|
fontSize: '1rem',
|
|
81
81
|
lineHeight: '1.4rem',
|
|
82
82
|
fontFamily: 'Sora',
|
|
83
|
-
letterSpacing: '-.05rem'
|
|
83
|
+
letterSpacing: '-.05rem'
|
|
84
84
|
},
|
|
85
85
|
'.body-2': {
|
|
86
86
|
fontSize: '0.875rem',
|
|
87
87
|
lineHeight: '1.4rem',
|
|
88
88
|
fontFamily: 'Sora',
|
|
89
|
-
letterSpacing: '-.05rem'
|
|
90
|
-
}
|
|
91
|
-
}
|
|
89
|
+
letterSpacing: '-.05rem'
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
92
|
|
|
93
93
|
const mobile = {
|
|
94
94
|
...deprecatedTexts,
|
|
95
95
|
'.text-big-number-md': {
|
|
96
96
|
fontSize: '2.25rem',
|
|
97
|
-
lineHeight: '1.20'
|
|
97
|
+
lineHeight: '1.20'
|
|
98
98
|
},
|
|
99
99
|
'.text-big-number-sm': {
|
|
100
100
|
fontSize: '1.25rem',
|
|
101
|
-
lineHeight: '1.20'
|
|
101
|
+
lineHeight: '1.20'
|
|
102
102
|
},
|
|
103
103
|
'.text-big-number-lg': {
|
|
104
104
|
fontSize: '3.75rem',
|
|
105
|
-
lineHeight: '1.20'
|
|
105
|
+
lineHeight: '1.20'
|
|
106
106
|
},
|
|
107
107
|
'.text-heading-2xl': {
|
|
108
108
|
fontSize: '3.75rem',
|
|
109
|
-
lineHeight: '1.2'
|
|
109
|
+
lineHeight: '1.2'
|
|
110
110
|
},
|
|
111
111
|
'.text-heading-xl': {
|
|
112
112
|
fontSize: '2.25rem',
|
|
113
|
-
lineHeight: '1.2'
|
|
113
|
+
lineHeight: '1.2'
|
|
114
114
|
},
|
|
115
115
|
'.text-heading-lg': {
|
|
116
116
|
fontSize: '1.875rem',
|
|
117
|
-
lineHeight: '1.2'
|
|
117
|
+
lineHeight: '1.2'
|
|
118
118
|
},
|
|
119
119
|
'.text-heading-md': {
|
|
120
120
|
fontSize: '1.5rem',
|
|
121
|
-
lineHeight: '1.2'
|
|
121
|
+
lineHeight: '1.2'
|
|
122
122
|
},
|
|
123
123
|
'.text-heading-sm': {
|
|
124
124
|
fontSize: '1.125rem',
|
|
125
|
-
lineHeight: '1.2'
|
|
125
|
+
lineHeight: '1.2'
|
|
126
126
|
},
|
|
127
127
|
'.text-body-lg': {
|
|
128
128
|
fontSize: '1.125rem',
|
|
129
|
-
lineHeight: '1.5'
|
|
129
|
+
lineHeight: '1.5'
|
|
130
130
|
},
|
|
131
131
|
'.text-body-md': {
|
|
132
132
|
fontSize: '1rem',
|
|
133
|
-
lineHeight: '1.5'
|
|
133
|
+
lineHeight: '1.5'
|
|
134
134
|
},
|
|
135
135
|
'.text-body-sm': {
|
|
136
136
|
fontSize: '0.875rem',
|
|
137
|
-
lineHeight: '1.5'
|
|
137
|
+
lineHeight: '1.5'
|
|
138
138
|
},
|
|
139
139
|
'.text-body-xs': {
|
|
140
140
|
fontSize: '0.75rem',
|
|
141
|
-
lineHeight: '1.5'
|
|
141
|
+
lineHeight: '1.5'
|
|
142
142
|
},
|
|
143
|
-
'.text-body-
|
|
143
|
+
'.text-body-xs': {
|
|
144
144
|
fontSize: '0.625rem',
|
|
145
|
-
lineHeight: '1.5'
|
|
145
|
+
lineHeight: '1.5'
|
|
146
146
|
},
|
|
147
147
|
'.text-overline-md': {
|
|
148
148
|
fontSize: '0.875rem',
|
|
149
149
|
lineHeight: '1.4',
|
|
150
150
|
letterSpacing: '0.08em',
|
|
151
|
-
textTransform: 'uppercase'
|
|
151
|
+
textTransform: 'uppercase'
|
|
152
152
|
},
|
|
153
153
|
'.text-overline-sm': {
|
|
154
154
|
fontSize: '0.75rem',
|
|
155
155
|
lineHeight: '1.4',
|
|
156
156
|
letterSpacing: '0.08em',
|
|
157
|
-
textTransform: 'uppercase'
|
|
157
|
+
textTransform: 'uppercase'
|
|
158
158
|
},
|
|
159
159
|
'.text-overline-xs': {
|
|
160
160
|
fontSize: '0.625rem',
|
|
161
161
|
lineHeight: '1.4',
|
|
162
162
|
letterSpacing: '0.08em',
|
|
163
|
-
textTransform: 'uppercase'
|
|
163
|
+
textTransform: 'uppercase'
|
|
164
164
|
},
|
|
165
165
|
'.text-button-lg': {
|
|
166
166
|
fontFamily: 'Proto Mono',
|
|
167
167
|
fontSize: '0.875rem',
|
|
168
168
|
fontWeight: '600',
|
|
169
169
|
lineHeight: '1',
|
|
170
|
-
letterSpacing: '0'
|
|
170
|
+
letterSpacing: '0'
|
|
171
171
|
},
|
|
172
172
|
'.text-button-md': {
|
|
173
173
|
fontFamily: 'Proto Mono',
|
|
174
174
|
fontSize: '0.75rem',
|
|
175
175
|
fontWeight: '600',
|
|
176
176
|
lineHeight: '1',
|
|
177
|
-
letterSpacing: '0'
|
|
178
|
-
}
|
|
179
|
-
}
|
|
177
|
+
letterSpacing: '0'
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
180
|
|
|
181
181
|
const medium = {
|
|
182
182
|
[`@media (max-width: ${theme('screens.md', '768px')})`]: {
|
|
183
183
|
'.text-big-number-md': {
|
|
184
184
|
fontSize: '1.5rem',
|
|
185
|
-
lineHeight: '1.20'
|
|
185
|
+
lineHeight: '1.20'
|
|
186
186
|
},
|
|
187
187
|
'.text-big-number-sm': {
|
|
188
188
|
fontSize: '1.25rem',
|
|
189
|
-
lineHeight: '1.20'
|
|
189
|
+
lineHeight: '1.20'
|
|
190
190
|
},
|
|
191
191
|
'.text-big-number-lg': {
|
|
192
192
|
fontSize: '2.25rem',
|
|
193
|
-
lineHeight: '1.20'
|
|
193
|
+
lineHeight: '1.20'
|
|
194
194
|
},
|
|
195
195
|
'.text-heading-2xl': {
|
|
196
|
-
fontSize: '3rem'
|
|
196
|
+
fontSize: '3rem'
|
|
197
197
|
},
|
|
198
198
|
'.text-heading-xl': {
|
|
199
|
-
fontSize: '1.875rem'
|
|
199
|
+
fontSize: '1.875rem'
|
|
200
200
|
},
|
|
201
201
|
'.text-heading-lg': {
|
|
202
|
-
fontSize: '1.125rem'
|
|
202
|
+
fontSize: '1.125rem'
|
|
203
203
|
},
|
|
204
204
|
'.text-heading-md': {
|
|
205
|
-
fontSize: '1.25rem'
|
|
205
|
+
fontSize: '1.25rem'
|
|
206
206
|
},
|
|
207
207
|
'.text-heading-sm': {
|
|
208
|
-
fontSize: '1rem'
|
|
208
|
+
fontSize: '1rem'
|
|
209
209
|
},
|
|
210
210
|
'.text-body-lg': {
|
|
211
|
-
fontSize: '1rem'
|
|
211
|
+
fontSize: '1rem'
|
|
212
212
|
},
|
|
213
213
|
'.text-body-md': {
|
|
214
|
-
fontSize: '1rem'
|
|
214
|
+
fontSize: '1rem'
|
|
215
215
|
},
|
|
216
216
|
'.text-body-sm': {
|
|
217
|
-
fontSize: '0.875rem'
|
|
217
|
+
fontSize: '0.875rem'
|
|
218
218
|
},
|
|
219
219
|
'.text-body-xs': {
|
|
220
|
-
fontSize: '0.75rem'
|
|
220
|
+
fontSize: '0.75rem'
|
|
221
221
|
},
|
|
222
|
-
'.text-body-
|
|
223
|
-
fontSize: '0.625rem'
|
|
222
|
+
'.text-body-xs': {
|
|
223
|
+
fontSize: '0.625rem'
|
|
224
224
|
},
|
|
225
225
|
'.text-overline-md': {
|
|
226
|
-
fontSize: '0.875rem'
|
|
226
|
+
fontSize: '0.875rem'
|
|
227
227
|
},
|
|
228
228
|
'.text-overline-sm': {
|
|
229
|
-
fontSize: '0.75rem'
|
|
229
|
+
fontSize: '0.75rem'
|
|
230
230
|
},
|
|
231
231
|
'.text-overline-xs': {
|
|
232
|
-
fontSize: '0.625rem'
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}
|
|
232
|
+
fontSize: '0.625rem'
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
236
|
|
|
237
237
|
const large = {
|
|
238
238
|
[`@media (max-width: ${theme('screens.sm', '640px')})`]: {
|
|
239
239
|
'.text-big-number-md': {
|
|
240
240
|
fontSize: '1.25rem',
|
|
241
|
-
lineHeight: '1.20'
|
|
241
|
+
lineHeight: '1.20'
|
|
242
242
|
},
|
|
243
243
|
'.text-big-number-sm': {
|
|
244
244
|
fontSize: '1rem',
|
|
245
|
-
lineHeight: '1.20'
|
|
245
|
+
lineHeight: '1.20'
|
|
246
246
|
},
|
|
247
247
|
'.text-big-number-lg': {
|
|
248
248
|
fontSize: '1.5rem',
|
|
249
|
-
lineHeight: '1.20'
|
|
249
|
+
lineHeight: '1.20'
|
|
250
250
|
},
|
|
251
251
|
'.text-heading-2xl': {
|
|
252
|
-
fontSize: '1.875rem'
|
|
252
|
+
fontSize: '1.875rem'
|
|
253
253
|
},
|
|
254
254
|
'.text-heading-xl': {
|
|
255
|
-
fontSize: '1.25rem'
|
|
255
|
+
fontSize: '1.25rem'
|
|
256
256
|
},
|
|
257
257
|
'.text-heading-lg': {
|
|
258
|
-
fontSize: '1.125rem'
|
|
258
|
+
fontSize: '1.125rem'
|
|
259
259
|
},
|
|
260
260
|
'.text-heading-md': {
|
|
261
|
-
fontSize: '1rem'
|
|
261
|
+
fontSize: '1rem'
|
|
262
262
|
},
|
|
263
263
|
'.text-heading-sm': {
|
|
264
|
-
fontSize: '0.875rem'
|
|
264
|
+
fontSize: '0.875rem'
|
|
265
265
|
},
|
|
266
266
|
'.text-body-lg': {
|
|
267
|
-
fontSize: '1rem'
|
|
267
|
+
fontSize: '1rem'
|
|
268
268
|
},
|
|
269
269
|
'.text-body-md': {
|
|
270
|
-
fontSize: '1rem'
|
|
270
|
+
fontSize: '1rem'
|
|
271
271
|
},
|
|
272
272
|
'.text-body-sm': {
|
|
273
|
-
fontSize: '0.875rem'
|
|
273
|
+
fontSize: '0.875rem'
|
|
274
274
|
},
|
|
275
275
|
'.text-body-xs': {
|
|
276
|
-
fontSize: '0.75rem'
|
|
276
|
+
fontSize: '0.75rem'
|
|
277
277
|
},
|
|
278
|
-
'.text-body-
|
|
279
|
-
fontSize: '0.625rem'
|
|
278
|
+
'.text-body-xs': {
|
|
279
|
+
fontSize: '0.625rem'
|
|
280
280
|
},
|
|
281
281
|
'.text-overline-md': {
|
|
282
|
-
fontSize: '0.75rem'
|
|
282
|
+
fontSize: '0.75rem'
|
|
283
283
|
},
|
|
284
284
|
'.text-overline-sm': {
|
|
285
|
-
fontSize: '0.75rem'
|
|
285
|
+
fontSize: '0.75rem'
|
|
286
286
|
},
|
|
287
287
|
'.text-overline-xs': {
|
|
288
|
-
fontSize: '0.625rem'
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
}
|
|
288
|
+
fontSize: '0.625rem'
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
292
|
|
|
293
|
-
addComponents(mobile)
|
|
294
|
-
addComponents(medium)
|
|
295
|
-
addComponents(large)
|
|
296
|
-
})
|
|
297
|
-
}
|
|
293
|
+
addComponents(mobile)
|
|
294
|
+
addComponents(medium)
|
|
295
|
+
addComponents(large)
|
|
296
|
+
})
|
|
297
|
+
}
|
|
298
298
|
|
|
299
|
-
export default semanticTexts
|
|
299
|
+
export default semanticTexts
|
|
@@ -2,30 +2,30 @@ import { tokenRef } from '../../scripts/refs.js';
|
|
|
2
2
|
|
|
3
3
|
export const background = {
|
|
4
4
|
light: {
|
|
5
|
-
'bg-canvas': tokenRef('theme.surfaces.surface-
|
|
5
|
+
'bg-canvas': tokenRef('theme.surfaces.surface-50'),
|
|
6
6
|
'bg-surface': tokenRef('theme.surfaces.surface-0'),
|
|
7
7
|
'bg-surface-raised': tokenRef('theme.surfaces.surface-0'),
|
|
8
8
|
'bg-mask': tokenRef('primitives.alpha.black.50'),
|
|
9
9
|
'bg-surface-overlay': tokenRef('theme.surfaces.surface-50'),
|
|
10
10
|
'bg-hover': tokenRef('primitives.alpha.black.100'),
|
|
11
11
|
'bg-active': tokenRef('primitives.alpha.black.50'),
|
|
12
|
-
'bg-backdrop': tokenRef('primitives.alpha.black.
|
|
12
|
+
'bg-backdrop': tokenRef('primitives.alpha.black.800'),
|
|
13
13
|
'bg-selected': tokenRef('theme.surfaces.surface-200'),
|
|
14
14
|
'bg-contrast': tokenRef('theme.surfaces.surface-900'),
|
|
15
|
-
'bg-disabled': tokenRef('
|
|
15
|
+
'bg-disabled': tokenRef('theme.surfaces.surface-200'),
|
|
16
16
|
},
|
|
17
17
|
dark: {
|
|
18
18
|
'bg-canvas': tokenRef('theme.surfaces.surface-950'),
|
|
19
|
-
'bg-surface': tokenRef('theme.surfaces.surface-
|
|
20
|
-
'bg-surface-raised': tokenRef('theme.surfaces.surface-
|
|
19
|
+
'bg-surface': tokenRef('theme.surfaces.surface-950'),
|
|
20
|
+
'bg-surface-raised': tokenRef('theme.surfaces.surface-900'),
|
|
21
21
|
'bg-mask': tokenRef('primitives.alpha.white.50'),
|
|
22
22
|
'bg-surface-overlay': tokenRef('theme.surfaces.surface-700'),
|
|
23
|
-
'bg-hover': tokenRef('primitives.alpha.
|
|
24
|
-
'bg-active': tokenRef('primitives.alpha.
|
|
25
|
-
'bg-backdrop': tokenRef('primitives.alpha.black.
|
|
23
|
+
'bg-hover': tokenRef('primitives.alpha.black.200'),
|
|
24
|
+
'bg-active': tokenRef('primitives.alpha.black.100'),
|
|
25
|
+
'bg-backdrop': tokenRef('primitives.alpha.black.800'),
|
|
26
26
|
'bg-selected': tokenRef('theme.surfaces.surface-950'),
|
|
27
27
|
'bg-contrast': tokenRef('theme.surfaces.surface-50'),
|
|
28
|
-
'bg-disabled': tokenRef('
|
|
28
|
+
'bg-disabled': tokenRef('theme.surfaces.surface-800'),
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -2,14 +2,14 @@ import { tokenRef } from '../../scripts/refs.js';
|
|
|
2
2
|
|
|
3
3
|
export const border = {
|
|
4
4
|
light: {
|
|
5
|
-
'border-default': tokenRef('
|
|
6
|
-
'border-muted': tokenRef('
|
|
5
|
+
'border-default': tokenRef('primitives.alpha.black.200'),
|
|
6
|
+
'border-muted': tokenRef('primitives.alpha.black.100'),
|
|
7
7
|
'border-strong': tokenRef('primitives.base.black'),
|
|
8
8
|
'border-selected': tokenRef('brand.primary.primary-500'),
|
|
9
9
|
},
|
|
10
10
|
dark: {
|
|
11
|
-
'border-default': tokenRef('
|
|
12
|
-
'border-muted': tokenRef('
|
|
11
|
+
'border-default': tokenRef('primitives.alpha.white.100'),
|
|
12
|
+
'border-muted': tokenRef('primitives.alpha.white.50'),
|
|
13
13
|
'border-strong': tokenRef('primitives.base.white'),
|
|
14
14
|
'border-selected': tokenRef('brand.primary.primary-500'),
|
|
15
15
|
},
|
|
@@ -2,14 +2,14 @@ import { tokenRef } from '../../../scripts/refs.js';
|
|
|
2
2
|
|
|
3
3
|
export const info = {
|
|
4
4
|
light: {
|
|
5
|
-
info: tokenRef('
|
|
6
|
-
'info-border': tokenRef('primitives.
|
|
7
|
-
'info-contrast': tokenRef('
|
|
5
|
+
info: tokenRef('primitives.blue.100'),
|
|
6
|
+
'info-border': tokenRef('primitives.blue.200'),
|
|
7
|
+
'info-contrast': tokenRef('primitives.blue.500'),
|
|
8
8
|
},
|
|
9
9
|
dark: {
|
|
10
|
-
info: tokenRef('
|
|
11
|
-
'info-border': tokenRef('primitives.alpha.
|
|
12
|
-
'info-contrast': tokenRef('primitives.
|
|
10
|
+
info: tokenRef('primitives.blue.900'),
|
|
11
|
+
'info-border': tokenRef('primitives.alpha.blue.500'),
|
|
12
|
+
'info-contrast': tokenRef('primitives.blue.300'),
|
|
13
13
|
},
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -2,15 +2,15 @@ import { tokenRef } from '../../scripts/refs.js';
|
|
|
2
2
|
|
|
3
3
|
export const secondary = {
|
|
4
4
|
light: {
|
|
5
|
-
secondary: tokenRef('
|
|
5
|
+
secondary: tokenRef('theme.surfaces.surface-950'),
|
|
6
6
|
'secondary-mask': tokenRef('primitives.alpha.black.50'),
|
|
7
|
-
'secondary-selected': tokenRef('
|
|
7
|
+
'secondary-selected': tokenRef('theme.surfaces.surface-950'),
|
|
8
8
|
'secondary-contrast': tokenRef('primitives.base.white'),
|
|
9
9
|
},
|
|
10
10
|
dark: {
|
|
11
|
-
secondary: tokenRef('
|
|
11
|
+
secondary: tokenRef('theme.surfaces.surface-0'),
|
|
12
12
|
'secondary-mask': tokenRef('primitives.alpha.white.100'),
|
|
13
|
-
'secondary-selected': tokenRef('
|
|
13
|
+
'secondary-selected': tokenRef('theme.surfaces.surface-0'),
|
|
14
14
|
'secondary-contrast': tokenRef('primitives.base.black'),
|
|
15
15
|
},
|
|
16
16
|
};
|
package/src/tokens/theme/text.js
CHANGED
|
@@ -4,14 +4,14 @@ export const text = {
|
|
|
4
4
|
light: {
|
|
5
5
|
'text-default': tokenRef('primitives.gray.900'),
|
|
6
6
|
'text-muted': tokenRef('primitives.gray.600'),
|
|
7
|
-
'text-disabled': tokenRef('primitives.gray.
|
|
8
|
-
'text-link': tokenRef('
|
|
7
|
+
'text-disabled': tokenRef('primitives.gray.400'),
|
|
8
|
+
'text-link': tokenRef('primitives.blue.600'),
|
|
9
9
|
},
|
|
10
10
|
dark: {
|
|
11
11
|
'text-default': tokenRef('primitives.gray.50'),
|
|
12
12
|
'text-muted': tokenRef('primitives.gray.400'),
|
|
13
|
-
'text-disabled': tokenRef('primitives.gray.
|
|
14
|
-
'text-link': tokenRef('
|
|
13
|
+
'text-disabled': tokenRef('primitives.gray.700'),
|
|
14
|
+
'text-link': tokenRef('primitives.blue.400'),
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
|