@rainersoft/design-tokens 1.0.0
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/LICENSE +149 -0
- package/README.md +544 -0
- package/dist/index.cjs +944 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +4623 -0
- package/dist/index.d.ts +4623 -0
- package/dist/index.js +898 -0
- package/dist/index.js.map +1 -0
- package/formats/css-vars.css +237 -0
- package/formats/tailwind.config.ts +247 -0
- package/formats/tokens.json +46 -0
- package/package.json +118 -0
- package/themes/dark.ts +89 -0
- package/themes/index.ts +99 -0
- package/themes/light.ts +88 -0
- package/tokens/accessibility.ts +280 -0
- package/tokens/colors/dark.json +173 -0
- package/tokens/colors/light.json +149 -0
- package/tokens/index.ts +263 -0
- package/tokens/radius.json +16 -0
- package/tokens/shadows.json +33 -0
- package/tokens/spacing.json +42 -0
- package/tokens/typography.json +264 -0
- package/tokens/utilities.ts +177 -0
package/tokens/index.ts
ADDED
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Ponto de entrada dos tokens de design
|
|
3
|
+
*
|
|
4
|
+
* @description
|
|
5
|
+
* Tokens de design tecnologicamente agnósticos que definem a linguagem visual
|
|
6
|
+
* do Rainer Design System. Estes tokens podem ser utilizados em qualquer
|
|
7
|
+
* framework ou tecnologia, garantindo consistência visual.
|
|
8
|
+
*
|
|
9
|
+
* @module tokens
|
|
10
|
+
* @version 4.0.0
|
|
11
|
+
* @author Rainer Teixeira
|
|
12
|
+
* @since 1.0.0
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
import lightColors from './colors/light.json';
|
|
16
|
+
import darkColors from './colors/dark.json';
|
|
17
|
+
import typography from './typography.json';
|
|
18
|
+
import spacing from './spacing.json';
|
|
19
|
+
import radius from './radius.json';
|
|
20
|
+
import shadows from './shadows.json';
|
|
21
|
+
|
|
22
|
+
// Utility tokens (Tailwind CSS classes)
|
|
23
|
+
export * from './utilities';
|
|
24
|
+
|
|
25
|
+
// Accessibility utilities (WCAG contrast checking)
|
|
26
|
+
export * from './accessibility';
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Todos os tokens de design organizados por categoria
|
|
30
|
+
*
|
|
31
|
+
* @description
|
|
32
|
+
* Objeto principal contendo todos os tokens de design do sistema,
|
|
33
|
+
* organizados em categorias lógicas para fácil acesso e manutenção.
|
|
34
|
+
*
|
|
35
|
+
* @type {Object}
|
|
36
|
+
* @property {Object} colors - Tokens de cores para temas claro e escuro
|
|
37
|
+
* @property {Object} colors.light - Cores do tema claro
|
|
38
|
+
* @property {Object} colors.dark - Cores do tema escuro
|
|
39
|
+
* @property {Object} typography - Tokens de tipografia (fontes, tamanhos, pesos, etc.)
|
|
40
|
+
* @property {Object} spacing - Tokens de espaçamento (margens, paddings)
|
|
41
|
+
* @property {Object} radius - Tokens de raio de borda
|
|
42
|
+
* @property {Object} shadows - Tokens de sombras para ambos os temas
|
|
43
|
+
*
|
|
44
|
+
* @constant
|
|
45
|
+
* @readonly
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* import { tokens } from 'rainer-design-tokens';
|
|
50
|
+
*
|
|
51
|
+
* // Acessar cor primária do tema claro
|
|
52
|
+
* const primaryColor = tokens.colors.light.brand.primary;
|
|
53
|
+
*
|
|
54
|
+
* // Acessar espaçamento padrão
|
|
55
|
+
* const spacing = tokens.spacing.md;
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export const tokens = {
|
|
59
|
+
colors: {
|
|
60
|
+
light: lightColors.colors,
|
|
61
|
+
dark: darkColors.colors,
|
|
62
|
+
},
|
|
63
|
+
typography: typography.typography,
|
|
64
|
+
spacing: spacing.spacing,
|
|
65
|
+
radius: radius.radius,
|
|
66
|
+
shadows: shadows.shadows,
|
|
67
|
+
} as const;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Cores do tema claro
|
|
71
|
+
*
|
|
72
|
+
* @description
|
|
73
|
+
* Exporta apenas as cores do tema claro para uso direto.
|
|
74
|
+
*
|
|
75
|
+
* @type {Object}
|
|
76
|
+
* @constant
|
|
77
|
+
* @readonly
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```typescript
|
|
81
|
+
* import { lightThemeColors } from 'rainer-design-tokens';
|
|
82
|
+
*
|
|
83
|
+
* const primaryColor = lightThemeColors.brand.primary;
|
|
84
|
+
* ```
|
|
85
|
+
*/
|
|
86
|
+
export const lightThemeColors = lightColors.colors;
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Cores do tema escuro
|
|
90
|
+
*
|
|
91
|
+
* @description
|
|
92
|
+
* Exporta apenas as cores do tema escuro (estilo cyberpunk) para uso direto.
|
|
93
|
+
*
|
|
94
|
+
* @type {Object}
|
|
95
|
+
* @constant
|
|
96
|
+
* @readonly
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```typescript
|
|
100
|
+
* import { darkThemeColors } from 'rainer-design-tokens';
|
|
101
|
+
*
|
|
102
|
+
* const neonColor = darkThemeColors.accent.cyan;
|
|
103
|
+
* ```
|
|
104
|
+
*/
|
|
105
|
+
export const darkThemeColors = darkColors.colors;
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Tokens de tipografia
|
|
109
|
+
*
|
|
110
|
+
* @description
|
|
111
|
+
* Exporta todos os tokens relacionados à tipografia, incluindo
|
|
112
|
+
* famílias de fontes, tamanhos, pesos, alturas de linha e espaçamento entre letras.
|
|
113
|
+
*
|
|
114
|
+
* @type {Object}
|
|
115
|
+
* @constant
|
|
116
|
+
* @readonly
|
|
117
|
+
*
|
|
118
|
+
* @example
|
|
119
|
+
* ```typescript
|
|
120
|
+
* import { typographyTokens } from 'rainer-design-tokens';
|
|
121
|
+
*
|
|
122
|
+
* const fontSize = typographyTokens.fontSize.lg;
|
|
123
|
+
* const fontFamily = typographyTokens.fontFamily.sans;
|
|
124
|
+
* ```
|
|
125
|
+
*/
|
|
126
|
+
export const typographyTokens = typography.typography;
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Tokens de espaçamento
|
|
130
|
+
*
|
|
131
|
+
* @description
|
|
132
|
+
* Exporta todos os tokens de espaçamento padronizados do sistema.
|
|
133
|
+
* Utilizados para margens, paddings e gaps consistentes.
|
|
134
|
+
*
|
|
135
|
+
* @type {Object}
|
|
136
|
+
* @constant
|
|
137
|
+
* @readonly
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```typescript
|
|
141
|
+
* import { spacingTokens } from 'rainer-design-tokens';
|
|
142
|
+
*
|
|
143
|
+
* const margin = spacingTokens.md;
|
|
144
|
+
* const padding = spacingTokens.lg;
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
export const spacingTokens = spacing.spacing;
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Tokens de raio de borda
|
|
151
|
+
*
|
|
152
|
+
* @description
|
|
153
|
+
* Exporta todos os tokens de raio de borda (border-radius) padronizados.
|
|
154
|
+
*
|
|
155
|
+
* @type {Object}
|
|
156
|
+
* @constant
|
|
157
|
+
* @readonly
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```typescript
|
|
161
|
+
* import { radiusTokens } from 'rainer-design-tokens';
|
|
162
|
+
*
|
|
163
|
+
* const borderRadius = radiusTokens.md;
|
|
164
|
+
* ```
|
|
165
|
+
*/
|
|
166
|
+
export const radiusTokens = radius.radius;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Tokens de sombras
|
|
170
|
+
*
|
|
171
|
+
* @description
|
|
172
|
+
* Exporta todos os tokens de sombras, incluindo sombras para tema claro
|
|
173
|
+
* e efeitos de brilho (glow) para tema escuro.
|
|
174
|
+
*
|
|
175
|
+
* @type {Object}
|
|
176
|
+
* @constant
|
|
177
|
+
* @readonly
|
|
178
|
+
*
|
|
179
|
+
* @example
|
|
180
|
+
* ```typescript
|
|
181
|
+
* import { shadowTokens } from 'rainer-design-tokens';
|
|
182
|
+
*
|
|
183
|
+
* const shadow = shadowTokens.light.md;
|
|
184
|
+
* const glow = shadowTokens.dark.glow.cyan;
|
|
185
|
+
* ```
|
|
186
|
+
*/
|
|
187
|
+
export const shadowTokens = shadows.shadows;
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* Tipo TypeScript para todos os tokens
|
|
191
|
+
*
|
|
192
|
+
* @typedef {Object} Tokens
|
|
193
|
+
* @description
|
|
194
|
+
* Tipo que representa a estrutura completa de todos os tokens de design.
|
|
195
|
+
* Útil para type-checking e autocomplete em IDEs.
|
|
196
|
+
*/
|
|
197
|
+
export type Tokens = typeof tokens;
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* Tipo TypeScript para cores do tema claro
|
|
201
|
+
*
|
|
202
|
+
* @typedef {Object} LightColors
|
|
203
|
+
* @description
|
|
204
|
+
* Tipo que representa todas as cores disponíveis no tema claro.
|
|
205
|
+
*/
|
|
206
|
+
export type LightColors = typeof lightColors.colors;
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Tipo TypeScript para cores do tema escuro
|
|
210
|
+
*
|
|
211
|
+
* @typedef {Object} DarkColors
|
|
212
|
+
* @description
|
|
213
|
+
* Tipo que representa todas as cores disponíveis no tema escuro (cyberpunk).
|
|
214
|
+
*/
|
|
215
|
+
export type DarkColors = typeof darkColors.colors;
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Tipo TypeScript para tokens de tipografia
|
|
219
|
+
*
|
|
220
|
+
* @typedef {Object} Typography
|
|
221
|
+
* @description
|
|
222
|
+
* Tipo que representa todos os tokens de tipografia.
|
|
223
|
+
*/
|
|
224
|
+
export type Typography = typeof typography.typography;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Tipo TypeScript para tokens de espaçamento
|
|
228
|
+
*
|
|
229
|
+
* @typedef {Object} Spacing
|
|
230
|
+
* @description
|
|
231
|
+
* Tipo que representa todos os tokens de espaçamento.
|
|
232
|
+
*/
|
|
233
|
+
export type Spacing = typeof spacing.spacing;
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* Tipo TypeScript para tokens de raio de borda
|
|
237
|
+
*
|
|
238
|
+
* @typedef {Object} Radius
|
|
239
|
+
* @description
|
|
240
|
+
* Tipo que representa todos os tokens de raio de borda.
|
|
241
|
+
*/
|
|
242
|
+
export type Radius = typeof radius.radius;
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* Tipo TypeScript para tokens de sombras
|
|
246
|
+
*
|
|
247
|
+
* @typedef {Object} Shadows
|
|
248
|
+
* @description
|
|
249
|
+
* Tipo que representa todos os tokens de sombras.
|
|
250
|
+
*/
|
|
251
|
+
export type Shadows = typeof shadows.shadows;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Exportação padrão dos tokens
|
|
255
|
+
*
|
|
256
|
+
* @description
|
|
257
|
+
* Exporta o objeto principal contendo todos os tokens de design.
|
|
258
|
+
*
|
|
259
|
+
* @type {Tokens}
|
|
260
|
+
* @default tokens
|
|
261
|
+
*/
|
|
262
|
+
export default tokens;
|
|
263
|
+
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/theme.json",
|
|
3
|
+
"$description": "Border radius tokens - Consistent corner rounding",
|
|
4
|
+
"radius": {
|
|
5
|
+
"none": "0px",
|
|
6
|
+
"sm": "0.125rem",
|
|
7
|
+
"base": "0.25rem",
|
|
8
|
+
"md": "0.375rem",
|
|
9
|
+
"lg": "0.5rem",
|
|
10
|
+
"xl": "0.75rem",
|
|
11
|
+
"2xl": "1rem",
|
|
12
|
+
"3xl": "1.5rem",
|
|
13
|
+
"full": "9999px"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/theme.json",
|
|
3
|
+
"$description": "Shadow tokens - Elevation and depth",
|
|
4
|
+
"shadows": {
|
|
5
|
+
"light": {
|
|
6
|
+
"xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
7
|
+
"sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
|
|
8
|
+
"base": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
9
|
+
"md": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
|
|
10
|
+
"lg": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
|
|
11
|
+
"xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
12
|
+
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
13
|
+
"inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
|
|
14
|
+
},
|
|
15
|
+
"dark": {
|
|
16
|
+
"xs": "0 1px 2px 0 rgba(0, 0, 0, 0.5)",
|
|
17
|
+
"sm": "0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5)",
|
|
18
|
+
"base": "0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5)",
|
|
19
|
+
"md": "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5)",
|
|
20
|
+
"lg": "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5)",
|
|
21
|
+
"xl": "0 25px 50px -12px rgba(0, 0, 0, 0.75)",
|
|
22
|
+
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.75)",
|
|
23
|
+
"inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.5)",
|
|
24
|
+
"glow": {
|
|
25
|
+
"cyan": "0 0 20px rgba(0, 230, 255, 0.5), 0 0 40px rgba(0, 230, 255, 0.3)",
|
|
26
|
+
"pink": "0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3)",
|
|
27
|
+
"purple": "0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)",
|
|
28
|
+
"green": "0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/theme.json",
|
|
3
|
+
"$description": "Spacing tokens - Consistent spacing scale based on 8pt grid",
|
|
4
|
+
"spacing": {
|
|
5
|
+
"0": "0px",
|
|
6
|
+
"px": "1px",
|
|
7
|
+
"0.5": "0.125rem",
|
|
8
|
+
"1": "0.25rem",
|
|
9
|
+
"1.5": "0.375rem",
|
|
10
|
+
"2": "0.5rem",
|
|
11
|
+
"2.5": "0.625rem",
|
|
12
|
+
"3": "0.75rem",
|
|
13
|
+
"3.5": "0.875rem",
|
|
14
|
+
"4": "1rem",
|
|
15
|
+
"5": "1.25rem",
|
|
16
|
+
"6": "1.5rem",
|
|
17
|
+
"7": "1.75rem",
|
|
18
|
+
"8": "2rem",
|
|
19
|
+
"9": "2.25rem",
|
|
20
|
+
"10": "2.5rem",
|
|
21
|
+
"11": "2.75rem",
|
|
22
|
+
"12": "3rem",
|
|
23
|
+
"14": "3.5rem",
|
|
24
|
+
"16": "4rem",
|
|
25
|
+
"20": "5rem",
|
|
26
|
+
"24": "6rem",
|
|
27
|
+
"28": "7rem",
|
|
28
|
+
"32": "8rem",
|
|
29
|
+
"36": "9rem",
|
|
30
|
+
"40": "10rem",
|
|
31
|
+
"44": "11rem",
|
|
32
|
+
"48": "12rem",
|
|
33
|
+
"52": "13rem",
|
|
34
|
+
"56": "14rem",
|
|
35
|
+
"60": "15rem",
|
|
36
|
+
"64": "16rem",
|
|
37
|
+
"72": "18rem",
|
|
38
|
+
"80": "20rem",
|
|
39
|
+
"96": "24rem"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/theme.json",
|
|
3
|
+
"$description": "Typography tokens - Complete typographic scale with semantic hierarchy (H1-H6, subtitles, body, captions)",
|
|
4
|
+
"typography": {
|
|
5
|
+
"fontFamily": {
|
|
6
|
+
"sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
|
7
|
+
"serif": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
|
|
8
|
+
"mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
|
9
|
+
"display": "var(--font-orbitron, ui-sans-serif)",
|
|
10
|
+
"body": "var(--font-inter, ui-sans-serif)",
|
|
11
|
+
"code": "var(--font-rajdhani, ui-monospace)"
|
|
12
|
+
},
|
|
13
|
+
"fontSize": {
|
|
14
|
+
"xs": "0.75rem",
|
|
15
|
+
"sm": "0.875rem",
|
|
16
|
+
"base": "1rem",
|
|
17
|
+
"lg": "1.125rem",
|
|
18
|
+
"xl": "1.25rem",
|
|
19
|
+
"2xl": "1.5rem",
|
|
20
|
+
"3xl": "1.875rem",
|
|
21
|
+
"4xl": "2.25rem",
|
|
22
|
+
"5xl": "3rem",
|
|
23
|
+
"6xl": "3.75rem",
|
|
24
|
+
"7xl": "4.5rem",
|
|
25
|
+
"8xl": "6rem",
|
|
26
|
+
"9xl": "8rem"
|
|
27
|
+
},
|
|
28
|
+
"fontWeight": {
|
|
29
|
+
"thin": "100",
|
|
30
|
+
"extralight": "200",
|
|
31
|
+
"light": "300",
|
|
32
|
+
"normal": "400",
|
|
33
|
+
"medium": "500",
|
|
34
|
+
"semibold": "600",
|
|
35
|
+
"bold": "700",
|
|
36
|
+
"extrabold": "800",
|
|
37
|
+
"black": "900"
|
|
38
|
+
},
|
|
39
|
+
"lineHeight": {
|
|
40
|
+
"none": "1",
|
|
41
|
+
"tight": "1.25",
|
|
42
|
+
"snug": "1.375",
|
|
43
|
+
"normal": "1.5",
|
|
44
|
+
"relaxed": "1.625",
|
|
45
|
+
"loose": "2"
|
|
46
|
+
},
|
|
47
|
+
"letterSpacing": {
|
|
48
|
+
"tighter": "-0.05em",
|
|
49
|
+
"tight": "-0.025em",
|
|
50
|
+
"normal": "0em",
|
|
51
|
+
"wide": "0.025em",
|
|
52
|
+
"wider": "0.05em",
|
|
53
|
+
"widest": "0.1em"
|
|
54
|
+
},
|
|
55
|
+
"headings": {
|
|
56
|
+
"h1": {
|
|
57
|
+
"fontFamily": "var(--font-display, ui-sans-serif)",
|
|
58
|
+
"fontSize": "clamp(2.25rem, 5vw + 1rem, 4.5rem)",
|
|
59
|
+
"fontSizeMobile": "2.25rem",
|
|
60
|
+
"fontSizeTablet": "3rem",
|
|
61
|
+
"fontSizeDesktop": "4.5rem",
|
|
62
|
+
"fontWeight": "900",
|
|
63
|
+
"lineHeight": "1.1",
|
|
64
|
+
"letterSpacing": "-0.02em",
|
|
65
|
+
"marginBottom": "1rem"
|
|
66
|
+
},
|
|
67
|
+
"h2": {
|
|
68
|
+
"fontFamily": "var(--font-display, ui-sans-serif)",
|
|
69
|
+
"fontSize": "clamp(1.875rem, 4vw + 0.75rem, 3.75rem)",
|
|
70
|
+
"fontSizeMobile": "1.875rem",
|
|
71
|
+
"fontSizeTablet": "2.5rem",
|
|
72
|
+
"fontSizeDesktop": "3.75rem",
|
|
73
|
+
"fontWeight": "800",
|
|
74
|
+
"lineHeight": "1.15",
|
|
75
|
+
"letterSpacing": "-0.015em",
|
|
76
|
+
"marginBottom": "0.875rem"
|
|
77
|
+
},
|
|
78
|
+
"h3": {
|
|
79
|
+
"fontFamily": "var(--font-display, ui-sans-serif)",
|
|
80
|
+
"fontSize": "clamp(1.5rem, 3vw + 0.5rem, 3rem)",
|
|
81
|
+
"fontSizeMobile": "1.5rem",
|
|
82
|
+
"fontSizeTablet": "2rem",
|
|
83
|
+
"fontSizeDesktop": "3rem",
|
|
84
|
+
"fontWeight": "700",
|
|
85
|
+
"lineHeight": "1.2",
|
|
86
|
+
"letterSpacing": "-0.01em",
|
|
87
|
+
"marginBottom": "0.75rem"
|
|
88
|
+
},
|
|
89
|
+
"h4": {
|
|
90
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
91
|
+
"fontSize": "clamp(1.25rem, 2.5vw + 0.5rem, 2.25rem)",
|
|
92
|
+
"fontSizeMobile": "1.25rem",
|
|
93
|
+
"fontSizeTablet": "1.75rem",
|
|
94
|
+
"fontSizeDesktop": "2.25rem",
|
|
95
|
+
"fontWeight": "700",
|
|
96
|
+
"lineHeight": "1.25",
|
|
97
|
+
"letterSpacing": "0em",
|
|
98
|
+
"marginBottom": "0.625rem"
|
|
99
|
+
},
|
|
100
|
+
"h5": {
|
|
101
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
102
|
+
"fontSize": "clamp(1.125rem, 2vw + 0.25rem, 1.875rem)",
|
|
103
|
+
"fontSizeMobile": "1.125rem",
|
|
104
|
+
"fontSizeTablet": "1.5rem",
|
|
105
|
+
"fontSizeDesktop": "1.875rem",
|
|
106
|
+
"fontWeight": "600",
|
|
107
|
+
"lineHeight": "1.3",
|
|
108
|
+
"letterSpacing": "0em",
|
|
109
|
+
"marginBottom": "0.5rem"
|
|
110
|
+
},
|
|
111
|
+
"h6": {
|
|
112
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
113
|
+
"fontSize": "clamp(1rem, 1.5vw + 0.25rem, 1.5rem)",
|
|
114
|
+
"fontSizeMobile": "1rem",
|
|
115
|
+
"fontSizeTablet": "1.25rem",
|
|
116
|
+
"fontSizeDesktop": "1.5rem",
|
|
117
|
+
"fontWeight": "600",
|
|
118
|
+
"lineHeight": "1.35",
|
|
119
|
+
"letterSpacing": "0.01em",
|
|
120
|
+
"marginBottom": "0.5rem"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"subtitle": {
|
|
124
|
+
"large": {
|
|
125
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
126
|
+
"fontSize": "clamp(1.25rem, 2vw + 0.5rem, 2rem)",
|
|
127
|
+
"fontSizeMobile": "1.25rem",
|
|
128
|
+
"fontSizeTablet": "1.5rem",
|
|
129
|
+
"fontSizeDesktop": "2rem",
|
|
130
|
+
"fontWeight": "500",
|
|
131
|
+
"lineHeight": "1.4",
|
|
132
|
+
"letterSpacing": "0em",
|
|
133
|
+
"marginBottom": "0.5rem"
|
|
134
|
+
},
|
|
135
|
+
"medium": {
|
|
136
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
137
|
+
"fontSize": "clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem)",
|
|
138
|
+
"fontSizeMobile": "1.125rem",
|
|
139
|
+
"fontSizeTablet": "1.25rem",
|
|
140
|
+
"fontSizeDesktop": "1.5rem",
|
|
141
|
+
"fontWeight": "500",
|
|
142
|
+
"lineHeight": "1.4",
|
|
143
|
+
"letterSpacing": "0em",
|
|
144
|
+
"marginBottom": "0.5rem"
|
|
145
|
+
},
|
|
146
|
+
"small": {
|
|
147
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
148
|
+
"fontSize": "1rem",
|
|
149
|
+
"fontWeight": "500",
|
|
150
|
+
"lineHeight": "1.4",
|
|
151
|
+
"letterSpacing": "0em",
|
|
152
|
+
"marginBottom": "0.375rem"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
"body": {
|
|
156
|
+
"large": {
|
|
157
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
158
|
+
"fontSize": "1.125rem",
|
|
159
|
+
"fontWeight": "400",
|
|
160
|
+
"lineHeight": "1.625",
|
|
161
|
+
"letterSpacing": "0em"
|
|
162
|
+
},
|
|
163
|
+
"medium": {
|
|
164
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
165
|
+
"fontSize": "1rem",
|
|
166
|
+
"fontWeight": "400",
|
|
167
|
+
"lineHeight": "1.5",
|
|
168
|
+
"letterSpacing": "0em"
|
|
169
|
+
},
|
|
170
|
+
"small": {
|
|
171
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
172
|
+
"fontSize": "0.875rem",
|
|
173
|
+
"fontWeight": "400",
|
|
174
|
+
"lineHeight": "1.5",
|
|
175
|
+
"letterSpacing": "0em"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"caption": {
|
|
179
|
+
"large": {
|
|
180
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
181
|
+
"fontSize": "0.875rem",
|
|
182
|
+
"fontWeight": "400",
|
|
183
|
+
"lineHeight": "1.4",
|
|
184
|
+
"letterSpacing": "0.01em"
|
|
185
|
+
},
|
|
186
|
+
"medium": {
|
|
187
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
188
|
+
"fontSize": "0.75rem",
|
|
189
|
+
"fontWeight": "400",
|
|
190
|
+
"lineHeight": "1.4",
|
|
191
|
+
"letterSpacing": "0.01em"
|
|
192
|
+
},
|
|
193
|
+
"small": {
|
|
194
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
195
|
+
"fontSize": "0.625rem",
|
|
196
|
+
"fontWeight": "400",
|
|
197
|
+
"lineHeight": "1.3",
|
|
198
|
+
"letterSpacing": "0.02em"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
"button": {
|
|
202
|
+
"large": {
|
|
203
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
204
|
+
"fontSize": "1.125rem",
|
|
205
|
+
"fontWeight": "600",
|
|
206
|
+
"lineHeight": "1.5",
|
|
207
|
+
"letterSpacing": "0.01em"
|
|
208
|
+
},
|
|
209
|
+
"medium": {
|
|
210
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
211
|
+
"fontSize": "1rem",
|
|
212
|
+
"fontWeight": "600",
|
|
213
|
+
"lineHeight": "1.5",
|
|
214
|
+
"letterSpacing": "0.01em"
|
|
215
|
+
},
|
|
216
|
+
"small": {
|
|
217
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
218
|
+
"fontSize": "0.875rem",
|
|
219
|
+
"fontWeight": "600",
|
|
220
|
+
"lineHeight": "1.4",
|
|
221
|
+
"letterSpacing": "0.01em"
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
"label": {
|
|
225
|
+
"large": {
|
|
226
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
227
|
+
"fontSize": "0.875rem",
|
|
228
|
+
"fontWeight": "600",
|
|
229
|
+
"lineHeight": "1.4",
|
|
230
|
+
"letterSpacing": "0.01em"
|
|
231
|
+
},
|
|
232
|
+
"medium": {
|
|
233
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
234
|
+
"fontSize": "0.75rem",
|
|
235
|
+
"fontWeight": "600",
|
|
236
|
+
"lineHeight": "1.4",
|
|
237
|
+
"letterSpacing": "0.01em"
|
|
238
|
+
},
|
|
239
|
+
"small": {
|
|
240
|
+
"fontFamily": "var(--font-body, ui-sans-serif)",
|
|
241
|
+
"fontSize": "0.625rem",
|
|
242
|
+
"fontWeight": "600",
|
|
243
|
+
"lineHeight": "1.3",
|
|
244
|
+
"letterSpacing": "0.02em"
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
"code": {
|
|
248
|
+
"inline": {
|
|
249
|
+
"fontFamily": "var(--font-code, ui-monospace)",
|
|
250
|
+
"fontSize": "0.875em",
|
|
251
|
+
"fontWeight": "400",
|
|
252
|
+
"lineHeight": "1.5",
|
|
253
|
+
"letterSpacing": "0em"
|
|
254
|
+
},
|
|
255
|
+
"block": {
|
|
256
|
+
"fontFamily": "var(--font-code, ui-monospace)",
|
|
257
|
+
"fontSize": "0.875rem",
|
|
258
|
+
"fontWeight": "400",
|
|
259
|
+
"lineHeight": "1.6",
|
|
260
|
+
"letterSpacing": "0em"
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
}
|