@inversestudio/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/README.md +339 -0
- package/dist/css/index.css +11 -0
- package/dist/css/tokens.css +123 -0
- package/dist/css/tokens.dark.css +93 -0
- package/dist/css/tokens.light.css +123 -0
- package/dist/esm/index.js +9 -0
- package/dist/esm/tokens.dark.js +80 -0
- package/dist/esm/tokens.js +132 -0
- package/dist/esm/tokens.light.js +132 -0
- package/dist/js/index.js +12 -0
- package/dist/js/tokens.dark.js +80 -0
- package/dist/js/tokens.js +132 -0
- package/dist/js/tokens.light.js +132 -0
- package/dist/json/tokens.dark.json +78 -0
- package/dist/json/tokens.dark.nested.json +110 -0
- package/dist/json/tokens.json +129 -0
- package/dist/json/tokens.light.json +129 -0
- package/dist/json/tokens.light.nested.json +183 -0
- package/dist/json/tokens.nested.json +183 -0
- package/dist/scss/_mixins.scss +59 -0
- package/dist/scss/_tokens.dark.scss +171 -0
- package/dist/scss/_tokens.light.scss +231 -0
- package/dist/scss/_tokens.scss +231 -0
- package/dist/scss/index.scss +13 -0
- package/dist/types/index.d.ts +9 -0
- package/dist/types/tokens.d.ts +441 -0
- package/dist/types/tokens.dark.d.ts +307 -0
- package/dist/types/tokens.light.d.ts +441 -0
- package/package.json +58 -0
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDS Design Tokens - dark Theme
|
|
3
|
+
* Generated by Style Dictionary
|
|
4
|
+
* Do not edit directly
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export interface IDSTokens {
|
|
8
|
+
ids: {
|
|
9
|
+
core: {
|
|
10
|
+
color: {
|
|
11
|
+
neutral: {
|
|
12
|
+
'50': string;
|
|
13
|
+
'100': string;
|
|
14
|
+
'200': string;
|
|
15
|
+
'300': string;
|
|
16
|
+
'400': string;
|
|
17
|
+
'500': string;
|
|
18
|
+
'600': string;
|
|
19
|
+
'700': string;
|
|
20
|
+
'800': string;
|
|
21
|
+
'900': string;
|
|
22
|
+
'950': string;
|
|
23
|
+
'1000': string;
|
|
24
|
+
};
|
|
25
|
+
blue: {
|
|
26
|
+
'50': string;
|
|
27
|
+
'100': string;
|
|
28
|
+
'200': string;
|
|
29
|
+
'300': string;
|
|
30
|
+
'400': string;
|
|
31
|
+
'500': string;
|
|
32
|
+
'600': string;
|
|
33
|
+
'700': string;
|
|
34
|
+
'800': string;
|
|
35
|
+
'900': string;
|
|
36
|
+
'950': string;
|
|
37
|
+
'1000': string;
|
|
38
|
+
};
|
|
39
|
+
red: {
|
|
40
|
+
'50': string;
|
|
41
|
+
'100': string;
|
|
42
|
+
'200': string;
|
|
43
|
+
'300': string;
|
|
44
|
+
'400': string;
|
|
45
|
+
'500': string;
|
|
46
|
+
'600': string;
|
|
47
|
+
'700': string;
|
|
48
|
+
'800': string;
|
|
49
|
+
'900': string;
|
|
50
|
+
'950': string;
|
|
51
|
+
'1000': string;
|
|
52
|
+
};
|
|
53
|
+
green: {
|
|
54
|
+
'50': string;
|
|
55
|
+
'100': string;
|
|
56
|
+
'200': string;
|
|
57
|
+
'300': string;
|
|
58
|
+
'400': string;
|
|
59
|
+
'500': string;
|
|
60
|
+
'600': string;
|
|
61
|
+
'700': string;
|
|
62
|
+
'800': string;
|
|
63
|
+
'900': string;
|
|
64
|
+
'950': string;
|
|
65
|
+
'1000': string;
|
|
66
|
+
};
|
|
67
|
+
transparent: string;
|
|
68
|
+
};
|
|
69
|
+
sizing: {
|
|
70
|
+
REM: string;
|
|
71
|
+
base: string;
|
|
72
|
+
};
|
|
73
|
+
'font-size': {
|
|
74
|
+
base: string;
|
|
75
|
+
};
|
|
76
|
+
font: string;
|
|
77
|
+
lineHeight: {
|
|
78
|
+
base: string;
|
|
79
|
+
};
|
|
80
|
+
borderRadius: {
|
|
81
|
+
base: string;
|
|
82
|
+
};
|
|
83
|
+
borderWidth: {
|
|
84
|
+
slim: string;
|
|
85
|
+
thick: string;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
spacing: {
|
|
89
|
+
'0_13x': string;
|
|
90
|
+
'0_25x': string;
|
|
91
|
+
'0_38x': string;
|
|
92
|
+
'0_5x': string;
|
|
93
|
+
'0_75x': string;
|
|
94
|
+
'1x': string;
|
|
95
|
+
'1_25x': string;
|
|
96
|
+
'1_5x': string;
|
|
97
|
+
'2x': string;
|
|
98
|
+
'2_5x': string;
|
|
99
|
+
};
|
|
100
|
+
dimension: {
|
|
101
|
+
element: {
|
|
102
|
+
'1x': string;
|
|
103
|
+
'1_5x': string;
|
|
104
|
+
'2x': string;
|
|
105
|
+
'3x': string;
|
|
106
|
+
'3_5x': string;
|
|
107
|
+
'4_5x': string;
|
|
108
|
+
};
|
|
109
|
+
icon: {
|
|
110
|
+
'1x': string;
|
|
111
|
+
'1_25x': string;
|
|
112
|
+
'1_5x': string;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export const tokens: IDSTokens = {
|
|
119
|
+
ids: {
|
|
120
|
+
core: {
|
|
121
|
+
color: {
|
|
122
|
+
neutral: {
|
|
123
|
+
'50': '#ffffff',
|
|
124
|
+
'100': '#fafafb',
|
|
125
|
+
'200': '#f5f5f8',
|
|
126
|
+
'300': '#ebebef',
|
|
127
|
+
'400': '#e0e1e4',
|
|
128
|
+
'500': '#c5c6cb',
|
|
129
|
+
'600': '#adaeb3',
|
|
130
|
+
'700': '#8e9099',
|
|
131
|
+
'800': '#707784',
|
|
132
|
+
'900': '#4d5057',
|
|
133
|
+
'950': '#2d2f35',
|
|
134
|
+
'1000': '#101114'
|
|
135
|
+
},
|
|
136
|
+
blue: {
|
|
137
|
+
'50': '#e6edfb',
|
|
138
|
+
'100': '#d1def8',
|
|
139
|
+
'200': '#c3d8ff',
|
|
140
|
+
'300': '#a2bae9',
|
|
141
|
+
'400': '#7eaaff',
|
|
142
|
+
'500': '#5c8fe8',
|
|
143
|
+
'600': '#4a7ad4',
|
|
144
|
+
'700': '#3a64b8',
|
|
145
|
+
'800': '#27447c',
|
|
146
|
+
'900': '#1e3560',
|
|
147
|
+
'950': '#142442',
|
|
148
|
+
'1000': '#0b1526'
|
|
149
|
+
},
|
|
150
|
+
red: {
|
|
151
|
+
'50': '#fef2f2',
|
|
152
|
+
'100': '#fee2e2',
|
|
153
|
+
'200': '#fecaca',
|
|
154
|
+
'300': '#fca5a5',
|
|
155
|
+
'400': '#f87171',
|
|
156
|
+
'500': '#ef4444',
|
|
157
|
+
'600': '#dc2626',
|
|
158
|
+
'700': '#b91c1c',
|
|
159
|
+
'800': '#991b1b',
|
|
160
|
+
'900': '#7f1d1d',
|
|
161
|
+
'950': '#5c1414',
|
|
162
|
+
'1000': '#350a0a'
|
|
163
|
+
},
|
|
164
|
+
green: {
|
|
165
|
+
'50': '#ecfdf5',
|
|
166
|
+
'100': '#d1fae5',
|
|
167
|
+
'200': '#a7f3d0',
|
|
168
|
+
'300': '#6ee7b7',
|
|
169
|
+
'400': '#34d399',
|
|
170
|
+
'500': '#10b981',
|
|
171
|
+
'600': '#059669',
|
|
172
|
+
'700': '#047857',
|
|
173
|
+
'800': '#065f46',
|
|
174
|
+
'900': '#064e3b',
|
|
175
|
+
'950': '#043b2c',
|
|
176
|
+
'1000': '#022419'
|
|
177
|
+
},
|
|
178
|
+
transparent: '#00000000'
|
|
179
|
+
},
|
|
180
|
+
sizing: {
|
|
181
|
+
REM: '16px',
|
|
182
|
+
base: '16px'
|
|
183
|
+
},
|
|
184
|
+
'font-size': {
|
|
185
|
+
base: '16px'
|
|
186
|
+
},
|
|
187
|
+
font: 'Tomato Grotesk',
|
|
188
|
+
lineHeight: {
|
|
189
|
+
base: '16px *1'
|
|
190
|
+
},
|
|
191
|
+
borderRadius: {
|
|
192
|
+
base: '16px'
|
|
193
|
+
},
|
|
194
|
+
borderWidth: {
|
|
195
|
+
slim: '1px',
|
|
196
|
+
thick: '2px'
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
spacing: {
|
|
200
|
+
'0_13x': '2px',
|
|
201
|
+
'0_25x': '4px',
|
|
202
|
+
'0_38x': '6px',
|
|
203
|
+
'0_5x': '8px',
|
|
204
|
+
'0_75x': '12px',
|
|
205
|
+
'1x': '16px',
|
|
206
|
+
'1_25x': '20px',
|
|
207
|
+
'1_5x': '24px',
|
|
208
|
+
'2x': '32px',
|
|
209
|
+
'2_5x': '40px'
|
|
210
|
+
},
|
|
211
|
+
dimension: {
|
|
212
|
+
element: {
|
|
213
|
+
'1x': '16px',
|
|
214
|
+
'1_5x': '24px',
|
|
215
|
+
'2x': '32px',
|
|
216
|
+
'3x': '48px',
|
|
217
|
+
'3_5x': '56px',
|
|
218
|
+
'4_5x': '72px'
|
|
219
|
+
},
|
|
220
|
+
icon: {
|
|
221
|
+
'1x': '16px',
|
|
222
|
+
'1_25x': '20px',
|
|
223
|
+
'1_5x': '24px'
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
// Flat token exports
|
|
230
|
+
export const idsCoreColorNeutral50 = '#ffffff';
|
|
231
|
+
export const idsCoreColorNeutral100 = '#fafafb';
|
|
232
|
+
export const idsCoreColorNeutral200 = '#f5f5f8';
|
|
233
|
+
export const idsCoreColorNeutral300 = '#ebebef';
|
|
234
|
+
export const idsCoreColorNeutral400 = '#e0e1e4';
|
|
235
|
+
export const idsCoreColorNeutral500 = '#c5c6cb';
|
|
236
|
+
export const idsCoreColorNeutral600 = '#adaeb3';
|
|
237
|
+
export const idsCoreColorNeutral700 = '#8e9099';
|
|
238
|
+
export const idsCoreColorNeutral800 = '#707784';
|
|
239
|
+
export const idsCoreColorNeutral900 = '#4d5057';
|
|
240
|
+
export const idsCoreColorNeutral950 = '#2d2f35';
|
|
241
|
+
export const idsCoreColorNeutral1000 = '#101114';
|
|
242
|
+
export const idsCoreColorBlue50 = '#e6edfb';
|
|
243
|
+
export const idsCoreColorBlue100 = '#d1def8';
|
|
244
|
+
export const idsCoreColorBlue200 = '#c3d8ff';
|
|
245
|
+
export const idsCoreColorBlue300 = '#a2bae9';
|
|
246
|
+
export const idsCoreColorBlue400 = '#7eaaff';
|
|
247
|
+
export const idsCoreColorBlue500 = '#5c8fe8';
|
|
248
|
+
export const idsCoreColorBlue600 = '#4a7ad4';
|
|
249
|
+
export const idsCoreColorBlue700 = '#3a64b8';
|
|
250
|
+
export const idsCoreColorBlue800 = '#27447c';
|
|
251
|
+
export const idsCoreColorBlue900 = '#1e3560';
|
|
252
|
+
export const idsCoreColorBlue950 = '#142442';
|
|
253
|
+
export const idsCoreColorBlue1000 = '#0b1526';
|
|
254
|
+
export const idsCoreColorRed50 = '#fef2f2';
|
|
255
|
+
export const idsCoreColorRed100 = '#fee2e2';
|
|
256
|
+
export const idsCoreColorRed200 = '#fecaca';
|
|
257
|
+
export const idsCoreColorRed300 = '#fca5a5';
|
|
258
|
+
export const idsCoreColorRed400 = '#f87171';
|
|
259
|
+
export const idsCoreColorRed500 = '#ef4444';
|
|
260
|
+
export const idsCoreColorRed600 = '#dc2626';
|
|
261
|
+
export const idsCoreColorRed700 = '#b91c1c';
|
|
262
|
+
export const idsCoreColorRed800 = '#991b1b';
|
|
263
|
+
export const idsCoreColorRed900 = '#7f1d1d';
|
|
264
|
+
export const idsCoreColorRed950 = '#5c1414';
|
|
265
|
+
export const idsCoreColorRed1000 = '#350a0a';
|
|
266
|
+
export const idsCoreColorGreen50 = '#ecfdf5';
|
|
267
|
+
export const idsCoreColorGreen100 = '#d1fae5';
|
|
268
|
+
export const idsCoreColorGreen200 = '#a7f3d0';
|
|
269
|
+
export const idsCoreColorGreen300 = '#6ee7b7';
|
|
270
|
+
export const idsCoreColorGreen400 = '#34d399';
|
|
271
|
+
export const idsCoreColorGreen500 = '#10b981';
|
|
272
|
+
export const idsCoreColorGreen600 = '#059669';
|
|
273
|
+
export const idsCoreColorGreen700 = '#047857';
|
|
274
|
+
export const idsCoreColorGreen800 = '#065f46';
|
|
275
|
+
export const idsCoreColorGreen900 = '#064e3b';
|
|
276
|
+
export const idsCoreColorGreen950 = '#043b2c';
|
|
277
|
+
export const idsCoreColorGreen1000 = '#022419';
|
|
278
|
+
export const idsCoreColorTransparent = '#00000000';
|
|
279
|
+
export const idsCoreSizingRem = '16px';
|
|
280
|
+
export const idsCoreSizingBase = '16px';
|
|
281
|
+
export const idsCoreFontSizeBase = '16px';
|
|
282
|
+
export const idsCoreFont = 'Tomato Grotesk';
|
|
283
|
+
export const idsCoreLineheightBase = '16px *1';
|
|
284
|
+
export const idsCoreBorderradiusBase = '16px';
|
|
285
|
+
export const idsCoreBorderwidthSlim = '1px';
|
|
286
|
+
export const idsCoreBorderwidthThick = '2px';
|
|
287
|
+
export const idsSpacing013x = '2px';
|
|
288
|
+
export const idsSpacing025x = '4px';
|
|
289
|
+
export const idsSpacing038x = '6px';
|
|
290
|
+
export const idsSpacing05x = '8px';
|
|
291
|
+
export const idsSpacing075x = '12px';
|
|
292
|
+
export const idsSpacing1x = '16px';
|
|
293
|
+
export const idsSpacing125x = '20px';
|
|
294
|
+
export const idsSpacing15x = '24px';
|
|
295
|
+
export const idsSpacing2x = '32px';
|
|
296
|
+
export const idsSpacing25x = '40px';
|
|
297
|
+
export const idsDimensionElement1x = '16px';
|
|
298
|
+
export const idsDimensionElement15x = '24px';
|
|
299
|
+
export const idsDimensionElement2x = '32px';
|
|
300
|
+
export const idsDimensionElement3x = '48px';
|
|
301
|
+
export const idsDimensionElement35x = '56px';
|
|
302
|
+
export const idsDimensionElement45x = '72px';
|
|
303
|
+
export const idsDimensionIcon1x = '16px';
|
|
304
|
+
export const idsDimensionIcon125x = '20px';
|
|
305
|
+
export const idsDimensionIcon15x = '24px';
|
|
306
|
+
|
|
307
|
+
export default tokens;
|