@ethereal-design/ds-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/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # 🪽Ethereal Design Tokens
2
+ O **ethereal-design-tokens** é o repositório central de design tokens do ecossistema Ethereal. Ele serve como a única fonte de verdade (single source of truth) para as nossas propriedades de design.
3
+
4
+ ---
5
+
6
+ ## Proposta
7
+ Esta biblioteca é **totalmente agnóstica de plataforma e linguagem**. O projeto foi estruturado utilizando o **Style Dictionary** sob o capô, permitindo transformar dados brutos de design em formatos nativos para qualquer plataforma (Web, Mobile, etc.).
8
+
9
+ ## Governança & Sincronização
10
+ O repositório foi arquitetado prevendo uma colaboração fluida entre design e engenharia:
11
+ * **Design:** Mantido via **Figma** com o plugin **Tokens Studio**.
12
+ * **Devs:** Infraestrutura automatizada para ler os arquivos de design, compilar para código e publicar o pacote.
13
+
14
+ ---
15
+
16
+ ## Comandos Essenciais
17
+
18
+ ### `build:tokens`
19
+ Lê a origem dos tokens e gera os arquivos finais nos formatos especificados no `sd.config.js`.
20
+ ```bash
21
+ npm run build:tokens
22
+ ```
23
+
24
+ ### `build:package`
25
+ Executa o build:tokens e, em seguida, copia as declarações de tipo (.d.ts) dos tokens para a pasta dist, preparando o pacote para consumo.
26
+
27
+ ```bash
28
+ npm run build:package
29
+ ```
30
+
31
+
32
+ ## Observação importante
33
+ Caso precise realizar merge na branch main (como ajustes de documentação ou configurações pontuais) mas não queira disparar o pipeline de release para gerar uma nova versão do pacote, adicione a flag [skip ci] na mensagem do seu commit.
34
+
35
+ ```bash
36
+ git commit -m "docs: atualiza observações de CI [skip ci]"
37
+ ```
@@ -0,0 +1,303 @@
1
+ interface IDesignTokens {
2
+ colors: {
3
+ brand: {
4
+ primary: {
5
+ /** `#F2F5F0` */
6
+ "50": string;
7
+ /** `#E1E7DC` */
8
+ "100": string;
9
+ /** `#CCD7C4` */
10
+ "200": string;
11
+ /** `#BACAB0` */
12
+ "300": string;
13
+ /** `#8EA77F` */
14
+ "400": string;
15
+ /** `#5A6E4B` */
16
+ "500": string;
17
+ /** `#4F6141` */
18
+ "600": string;
19
+ /** `#435237` */
20
+ "700": string;
21
+ /** `#36422C` */
22
+ "800": string;
23
+ /** `#232B1D` */
24
+ "900": string;
25
+ };
26
+ secondary: {
27
+ /** `#FAF0EF` */
28
+ "50": string;
29
+ /** `#F3DBDA` */
30
+ "100": string;
31
+ /** `#EBC5C3` */
32
+ "200": string;
33
+ /** `#E4B4B1` */
34
+ "300": string;
35
+ /** `#DC8984` */
36
+ "400": string;
37
+ /** `#D49A97` */
38
+ "500": string;
39
+ /** `#C96E69` */
40
+ "600": string;
41
+ /** `#BA7A77` */
42
+ "700": string;
43
+ /** `#8C4643` */
44
+ "800": string;
45
+ /** `#593230` */
46
+ "900": string;
47
+ };
48
+ accent: {
49
+ /** `#F9F2F0` */
50
+ "50": string;
51
+ /** `#F2DDD8` */
52
+ "100": string;
53
+ /** `#E6C4BC` */
54
+ "200": string;
55
+ /** `#D9AA9F` */
56
+ "300": string;
57
+ /** `#CC9183` */
58
+ "400": string;
59
+ /** `#A36A5E` */
60
+ "500": string;
61
+ /** `#8F5A4F` */
62
+ "600": string;
63
+ /** `#7A4A40` */
64
+ "700": string;
65
+ /** `#663B32` */
66
+ "800": string;
67
+ /** `#40221C` */
68
+ "900": string;
69
+ };
70
+ };
71
+ neutral: {
72
+ /** `#F9F6F0` */
73
+ "50": string;
74
+ /** `#F4EFE6` */
75
+ "100": string;
76
+ /** `#EAE2D5` */
77
+ "200": string;
78
+ /** `#C8B195` */
79
+ "300": string;
80
+ /** `#AFA08F` */
81
+ "400": string;
82
+ /** `#7A6B63` */
83
+ "500": string;
84
+ /** `#63564F` */
85
+ "600": string;
86
+ /** `#4F433E` */
87
+ "700": string;
88
+ /** `#3C322E` */
89
+ "800": string;
90
+ /** `#2B1B17` */
91
+ "900": string;
92
+ };
93
+ feedback: {
94
+ success: {
95
+ /** `#E8F5E9` */
96
+ light: string;
97
+ /** `#4A7C59` */
98
+ base: string;
99
+ /** `#2E4F37` */
100
+ dark: string;
101
+ };
102
+ warning: {
103
+ /** `#FEF3C7` */
104
+ light: string;
105
+ /** `#D97706` */
106
+ base: string;
107
+ /** `#92400E` */
108
+ dark: string;
109
+ };
110
+ error: {
111
+ /** `#FFE4E6` */
112
+ light: string;
113
+ /** `#BE123C` */
114
+ base: string;
115
+ /** `#9F1239` */
116
+ dark: string;
117
+ };
118
+ info: {
119
+ /** `#E0F2FE` */
120
+ light: string;
121
+ /** `#0284C7` */
122
+ base: string;
123
+ /** `#075985` */
124
+ dark: string;
125
+ };
126
+ };
127
+ };
128
+ fontSize: {
129
+ /** `12` */
130
+ xs: string;
131
+ /** `16` */
132
+ base: string;
133
+ /** `20` */
134
+ sm: string;
135
+ /** `24` */
136
+ md: string;
137
+ /** `28` */
138
+ lg: string;
139
+ /** `32` */
140
+ xl: string;
141
+ /** `36` */
142
+ "2xl": string;
143
+ /** `40` */
144
+ "3xl": string;
145
+ /** `44` */
146
+ "4xl": string;
147
+ /** `48` */
148
+ "5xl": string;
149
+ /** `52` */
150
+ "6xl": string;
151
+ /** `56` */
152
+ "7xl": string;
153
+ };
154
+ fontFamily: {
155
+ platforms: {
156
+ expo: {
157
+ /** `Jomhuria_400Regular` */
158
+ mainTitle: string;
159
+
160
+ body: {
161
+ /** `Jost_400Regular` */
162
+ "400": string;
163
+ /** `Jost_500Medium` */
164
+ "500": string;
165
+ /** `Jost_600SemiBold` */
166
+ "600": string;
167
+ /** `Jost_700Bold` */
168
+ "700": string;
169
+ /** `Jost_800ExtraBold` */
170
+ "800": string;
171
+ /** `Jost_900Black` */
172
+ "900": string;
173
+ };
174
+ };
175
+ web: {
176
+ /** `Jomhuria` */
177
+ mainTitle: string;
178
+ /** `Jost` */
179
+ body: string;
180
+ };
181
+ };
182
+ };
183
+ spacing: {
184
+ /** `0` */
185
+ none: string;
186
+ /** `4` */
187
+ base: string;
188
+ /** `8` */
189
+ sm: string;
190
+ /** `16` */
191
+ md: string;
192
+ /** `20` */
193
+ lg: string;
194
+ /** `24` */
195
+ xl: string;
196
+ /** `28` */
197
+ "2xl": string;
198
+ /** `32` */
199
+ "3xl": string;
200
+ /** `36` */
201
+ "4xl": string;
202
+ /** `40` */
203
+ "5xl": string;
204
+ /** `44` */
205
+ "6xl": string;
206
+ /** `48` */
207
+ "7xl": string;
208
+ };
209
+ boxShadow: {
210
+ /** x: 0, y: 0, blur: 0, spread: 0, color: #00000026, type: dropShadow */
211
+ none: {
212
+ x: string;
213
+ y: string;
214
+ blur: string;
215
+ spread: string;
216
+ color: string;
217
+ type: string;
218
+ };
219
+ /** x: 0, y: 2, blur: 4, spread: 0, color: #00000026, type: dropShadow */
220
+ sm: {
221
+ x: string;
222
+ y: string;
223
+ blur: string;
224
+ spread: string;
225
+ color: string;
226
+ type: string;
227
+ };
228
+ /** x: 0, y: 4, blur: 12, spread: 2, color: #00000033, type: dropShadow */
229
+ md: {
230
+ x: string;
231
+ y: string;
232
+ blur: string;
233
+ spread: string;
234
+ color: string;
235
+ type: string;
236
+ };
237
+ /** x: 0, y: 12, blur: 24, spread: 4, color: #00000040, type: dropShadow */
238
+ lg: {
239
+ x: string;
240
+ y: string;
241
+ blur: string;
242
+ spread: string;
243
+ color: string;
244
+ type: string;
245
+ };
246
+ };
247
+ borderRadius: {
248
+ /** `0` */
249
+ none: string;
250
+ /** `4` */
251
+ sm: string;
252
+ /** `8` */
253
+ md: string;
254
+ /** `16` */
255
+ lg: string;
256
+ /** `9999` */
257
+ full: string;
258
+ };
259
+ fontWeight: {
260
+ /** `400` */
261
+ regular: string;
262
+ /** `500` */
263
+ medium: string;
264
+ /** `600` */
265
+ semibold: string;
266
+ /** `700` */
267
+ bold: string;
268
+ /** `800` */
269
+ extrabold: string;
270
+ /** `900` */
271
+ black: string;
272
+ };
273
+ lineHeight: {
274
+ /** `18` */
275
+ xs: string;
276
+ /** `24` */
277
+ base: string;
278
+ /** `30` */
279
+ sm: string;
280
+ /** `36` */
281
+ md: string;
282
+ /** `42` */
283
+ lg: string;
284
+ /** `48` */
285
+ xl: string;
286
+ /** `54` */
287
+ "2xl": string;
288
+ /** `60` */
289
+ "3xl": string;
290
+ /** `66` */
291
+ "4xl": string;
292
+ /** `72` */
293
+ "5xl": string;
294
+ /** `78` */
295
+ "6xl": string;
296
+ /** `84` */
297
+ "7xl": string;
298
+ };
299
+ }
300
+
301
+ declare const tokens: IDesignTokens;
302
+ export default tokens;
303
+
@@ -0,0 +1,190 @@
1
+ {
2
+ "global": {
3
+ "colors": {
4
+ "brand": {
5
+ "primary": {
6
+ "50": "#F2F5F0",
7
+ "100": "#E1E7DC",
8
+ "200": "#CCD7C4",
9
+ "300": "#BACAB0",
10
+ "400": "#8EA77F",
11
+ "500": "#5A6E4B",
12
+ "600": "#4F6141",
13
+ "700": "#435237",
14
+ "800": "#36422C",
15
+ "900": "#232B1D"
16
+ },
17
+ "secondary": {
18
+ "50": "#FAF0EF",
19
+ "100": "#F3DBDA",
20
+ "200": "#EBC5C3",
21
+ "300": "#E4B4B1",
22
+ "400": "#DC8984",
23
+ "500": "#D49A97",
24
+ "600": "#C96E69",
25
+ "700": "#BA7A77",
26
+ "800": "#8C4643",
27
+ "900": "#593230"
28
+ },
29
+ "accent": {
30
+ "50": "#F9F2F0",
31
+ "100": "#F2DDD8",
32
+ "200": "#E6C4BC",
33
+ "300": "#D9AA9F",
34
+ "400": "#CC9183",
35
+ "500": "#A36A5E",
36
+ "600": "#8F5A4F",
37
+ "700": "#7A4A40",
38
+ "800": "#663B32",
39
+ "900": "#40221C"
40
+ }
41
+ },
42
+ "neutral": {
43
+ "50": "#F9F6F0",
44
+ "100": "#F4EFE6",
45
+ "200": "#EAE2D5",
46
+ "300": "#C8B195",
47
+ "400": "#AFA08F",
48
+ "500": "#7A6B63",
49
+ "600": "#63564F",
50
+ "700": "#4F433E",
51
+ "800": "#3C322E",
52
+ "900": "#2B1B17"
53
+ },
54
+ "feedback": {
55
+ "success": {
56
+ "light": "#E8F5E9",
57
+ "base": "#4A7C59",
58
+ "dark": "#2E4F37"
59
+ },
60
+ "warning": {
61
+ "light": "#FEF3C7",
62
+ "base": "#D97706",
63
+ "dark": "#92400E"
64
+ },
65
+ "error": {
66
+ "light": "#FFE4E6",
67
+ "base": "#BE123C",
68
+ "dark": "#9F1239"
69
+ },
70
+ "info": {
71
+ "light": "#E0F2FE",
72
+ "base": "#0284C7",
73
+ "dark": "#075985"
74
+ }
75
+ }
76
+ },
77
+ "fontSize": {
78
+ "xs": 12,
79
+ "base": 16,
80
+ "sm": 20,
81
+ "md": 24,
82
+ "lg": 28,
83
+ "xl": 32,
84
+ "2xl": 36,
85
+ "3xl": 40,
86
+ "4xl": 44,
87
+ "5xl": 48,
88
+ "6xl": 52,
89
+ "7xl": 56
90
+ },
91
+ "fontFamily": {
92
+ "platforms": {
93
+ "expo": {
94
+ "mainTitle": "Jomhuria_400Regular",
95
+ "body": {
96
+ "400": "Jost_400Regular",
97
+ "500": "Jost_500Medium",
98
+ "600": "Jost_600SemiBold",
99
+ "700": "Jost_700Bold",
100
+ "800": "Jost_800ExtraBold",
101
+ "900": "Jost_900Black"
102
+ }
103
+ },
104
+ "web": {
105
+ "mainTitle": "Jomhuria",
106
+ "body": "Jost"
107
+ }
108
+ }
109
+ },
110
+ "spacing": {
111
+ "none": 0,
112
+ "base": 4,
113
+ "sm": 8,
114
+ "md": 16,
115
+ "lg": 20,
116
+ "xl": 24,
117
+ "2xl": 28,
118
+ "3xl": 32,
119
+ "4xl": 36,
120
+ "5xl": 40,
121
+ "6xl": 44,
122
+ "7xl": 48
123
+ },
124
+ "boxShadow": {
125
+ "none": {
126
+ "x": 0,
127
+ "y": 0,
128
+ "blur": 0,
129
+ "spread": 0,
130
+ "color": "#00000026"
131
+ },
132
+ "sm": {
133
+ "x": 0,
134
+ "y": 2,
135
+ "blur": 4,
136
+ "spread": 0,
137
+ "color": "#00000026"
138
+ },
139
+ "md": {
140
+ "x": 0,
141
+ "y": 4,
142
+ "blur": 12,
143
+ "spread": 2,
144
+ "color": "#00000033"
145
+ },
146
+ "lg": {
147
+ "x": 0,
148
+ "y": 12,
149
+ "blur": 24,
150
+ "spread": 4,
151
+ "color": "#00000040"
152
+ }
153
+ },
154
+ "borderRadius": {
155
+ "none": 0,
156
+ "sm": 4,
157
+ "md": 8,
158
+ "lg": 16,
159
+ "full": 9999
160
+ },
161
+ "fontWeight": {
162
+ "regular": 400,
163
+ "medium": 500,
164
+ "semibold": 600,
165
+ "bold": 700,
166
+ "extrabold": 800,
167
+ "black": 900
168
+ },
169
+ "lineHeight": {
170
+ "xs": 18,
171
+ "base": 24,
172
+ "sm": 30,
173
+ "md": 36,
174
+ "lg": 42,
175
+ "xl": 48,
176
+ "2xl": 54,
177
+ "3xl": 60,
178
+ "4xl": 66,
179
+ "5xl": 72,
180
+ "6xl": 78,
181
+ "7xl": 84
182
+ }
183
+ },
184
+ "$themes": [],
185
+ "$metadata": {
186
+ "tokenSetOrder": [
187
+ "global"
188
+ ]
189
+ }
190
+ }
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@ethereal-design/ds-tokens",
3
+ "version": "1.0.0",
4
+ "main": "./dist/index.json",
5
+ "types": "./dist/index.d.ts",
6
+ "type": "module",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "increase-version": "npm version minor -m 'chore(package): update version to %s [skip ci]' ",
12
+ "build:tokens": "style-dictionary build --config sd.config.js --verbose",
13
+ "build:package": "npm run build:tokens && cpy './src/tokens.d.ts' './dist/index.d.ts'"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/Ethereal-Design-System/ethereal-design-tokens.git"
18
+ },
19
+ "publishConfig": {
20
+ "access": "public",
21
+ "registry": "https://registry.npmjs.org/"
22
+ },
23
+ "author": "",
24
+ "license": "ISC",
25
+ "bugs": {
26
+ "url": "https://github.com/Ethereal-Design-System/ethereal-design-tokens/issues"
27
+ },
28
+ "homepage": "https://github.com/Ethereal-Design-System/ethereal-design-tokens#readme",
29
+ "description": "",
30
+ "devDependencies": {
31
+ "style-dictionary": "^4.4.0"
32
+ },
33
+ "dependencies": {
34
+ "cpy-cli": "^7.0.0"
35
+ }
36
+ }