villa-design-tokens 1.0.141 → 1.0.143

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/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "villa-design-tokens",
3
3
  "description": "Design Tokens published by Design Token Studio with VPRO's Figma Design System",
4
4
  "author": "VPRO",
5
- "version": "1.0.141",
5
+ "version": "1.0.143",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "git+https://github.com/vpro/Design-tokens.git"
@@ -212,50 +212,6 @@
212
212
  "type": "color"
213
213
  }
214
214
  },
215
- "primary": {
216
- "interactive": {
217
- "default": {
218
- "value": "{color.global.salmon.100}",
219
- "type": "color"
220
- },
221
- "hover": {
222
- "value": "{color.global.salmon.150}",
223
- "type": "color"
224
- },
225
- "active": {
226
- "value": "{color.global.salmon.200}",
227
- "type": "color"
228
- }
229
- },
230
- "on-interactive": {
231
- "default": {
232
- "value": "{color.global.grey.100}",
233
- "type": "color"
234
- },
235
- "hover": {
236
- "value": "{color.global.grey.100}",
237
- "type": "color"
238
- },
239
- "active": {
240
- "value": "{color.global.grey.100}",
241
- "type": "color"
242
- }
243
- },
244
- "border": {
245
- "default": {
246
- "value": "{color.global.salmon.100}",
247
- "type": "color"
248
- },
249
- "hover": {
250
- "value": "{color.global.salmon.150}",
251
- "type": "color"
252
- },
253
- "active": {
254
- "value": "{color.global.salmon.200}",
255
- "type": "color"
256
- }
257
- }
258
- },
259
215
  "border": {
260
216
  "default": {
261
217
  "value": "{color.global.mist.200}",
@@ -312,6 +268,50 @@
312
268
  "type": "color"
313
269
  }
314
270
  },
271
+ "primary": {
272
+ "interactive": {
273
+ "default": {
274
+ "value": "{color.global.salmon.100}",
275
+ "type": "color"
276
+ },
277
+ "hover": {
278
+ "value": "{color.global.salmon.150}",
279
+ "type": "color"
280
+ },
281
+ "active": {
282
+ "value": "{color.global.salmon.200}",
283
+ "type": "color"
284
+ }
285
+ },
286
+ "on-interactive": {
287
+ "default": {
288
+ "value": "{color.global.grey.100}",
289
+ "type": "color"
290
+ },
291
+ "hover": {
292
+ "value": "{color.global.grey.100}",
293
+ "type": "color"
294
+ },
295
+ "active": {
296
+ "value": "{color.global.grey.100}",
297
+ "type": "color"
298
+ }
299
+ },
300
+ "border": {
301
+ "default": {
302
+ "value": "{color.global.salmon.100}",
303
+ "type": "color"
304
+ },
305
+ "hover": {
306
+ "value": "{color.global.salmon.150}",
307
+ "type": "color"
308
+ },
309
+ "active": {
310
+ "value": "{color.global.salmon.200}",
311
+ "type": "color"
312
+ }
313
+ }
314
+ },
315
315
  "secondary": {
316
316
  "interactive": {
317
317
  "default": {
@@ -121,7 +121,11 @@
121
121
  }
122
122
  },
123
123
  "surface": {
124
- "default": {
124
+ "brand": {
125
+ "value": "{color.global.neon-yellow.100}",
126
+ "type": "color"
127
+ },
128
+ "primary": {
125
129
  "value": "{color.global.grey.150}",
126
130
  "type": "color"
127
131
  },
@@ -133,16 +137,30 @@
133
137
  "value": "{color.global.grey.300}",
134
138
  "type": "color"
135
139
  },
136
- "disabled": {
137
- "value": "{color.global.grey.300}",
140
+ "dark": {
141
+ "value": "{color.global.grey.500}",
142
+ "type": "color"
143
+ }
144
+ },
145
+ "on-surface": {
146
+ "brand": {
147
+ "value": "{color.global.grey.500}",
138
148
  "type": "color"
139
149
  },
140
- "dark": {
150
+ "primary": {
141
151
  "value": "{color.global.grey.500}",
142
152
  "type": "color"
143
153
  },
144
- "brand": {
145
- "value": "{color.global.neon-yellow.100}",
154
+ "secondary": {
155
+ "value": "{color.global.grey.500}",
156
+ "type": "color"
157
+ },
158
+ "tertiary": {
159
+ "value": "{color.global.grey.500}",
160
+ "type": "color"
161
+ },
162
+ "dark": {
163
+ "value": "{color.global.grey.100}",
146
164
  "type": "color"
147
165
  }
148
166
  },
@@ -194,36 +212,6 @@
194
212
  "type": "color"
195
213
  }
196
214
  },
197
- "primary": {
198
- "interactive": {
199
- "default": {
200
- "value": "{color.brand.primary}",
201
- "type": "color"
202
- },
203
- "hover": {
204
- "value": "{color.global.magenta.150}",
205
- "type": "color"
206
- },
207
- "active": {
208
- "value": "{color.global.grey.550}",
209
- "type": "color"
210
- }
211
- },
212
- "on-interactive": {
213
- "default": {
214
- "value": "{color.global.grey.550}",
215
- "type": "color"
216
- },
217
- "hover": {
218
- "value": "{color.global.grey.550}",
219
- "type": "color"
220
- },
221
- "active": {
222
- "value": "{color.global.grey.100}",
223
- "type": "color"
224
- }
225
- }
226
- },
227
215
  "border": {
228
216
  "default": {
229
217
  "value": "{color.global.grey.250}",
@@ -256,11 +244,11 @@
256
244
  },
257
245
  "link": {
258
246
  "default": {
259
- "value": "{color.global.navy.100}",
247
+ "value": "{color.global.magenta.100}",
260
248
  "type": "color"
261
249
  },
262
250
  "hover": {
263
- "value": "{color.global.dark-blue.150}",
251
+ "value": "{color.global.magenta.150}",
264
252
  "type": "color"
265
253
  },
266
254
  "inverse": {
@@ -280,10 +268,10 @@
280
268
  "type": "color"
281
269
  }
282
270
  },
283
- "secondary": {
271
+ "primary": {
284
272
  "interactive": {
285
273
  "default": {
286
- "value": "{color.brand.secondary}",
274
+ "value": "{color.global.magenta.100}",
287
275
  "type": "color"
288
276
  },
289
277
  "hover": {
@@ -297,47 +285,119 @@
297
285
  },
298
286
  "on-interactive": {
299
287
  "default": {
288
+ "value": "{color.global.grey.500}",
289
+ "type": "color"
290
+ },
291
+ "hover": {
292
+ "value": "{color.global.grey.500}",
293
+ "type": "color"
294
+ },
295
+ "active": {
300
296
  "value": "{color.global.grey.100}",
301
297
  "type": "color"
298
+ }
299
+ },
300
+ "border": {
301
+ "default": {
302
+ "value": "{color.global.magenta.100}",
303
+ "type": "color"
304
+ },
305
+ "hover": {
306
+ "value": "{color.global.magenta.150}",
307
+ "type": "color"
308
+ },
309
+ "active": {
310
+ "value": "{color.global.grey.450}",
311
+ "type": "color"
312
+ }
313
+ }
314
+ },
315
+ "secondary": {
316
+ "interactive": {
317
+ "default": {
318
+ "value": "{color.transparent.100}",
319
+ "type": "color"
320
+ },
321
+ "hover": {
322
+ "value": "{color.global.magenta.150}",
323
+ "type": "color"
324
+ },
325
+ "active": {
326
+ "value": "{color.global.grey.450}",
327
+ "type": "color"
328
+ }
329
+ },
330
+ "on-interactive": {
331
+ "default": {
332
+ "value": "{color.global.magenta.100}",
333
+ "type": "color"
302
334
  },
303
335
  "hover": {
304
- "value": "{color.global.grey.550}",
336
+ "value": "{color.global.grey.500}",
305
337
  "type": "color"
306
338
  },
307
339
  "active": {
308
340
  "value": "{color.global.grey.100}",
309
341
  "type": "color"
310
342
  }
343
+ },
344
+ "border": {
345
+ "default": {
346
+ "value": "{color.global.magenta.100}",
347
+ "type": "color"
348
+ },
349
+ "hover": {
350
+ "value": "{color.global.magenta.150}",
351
+ "type": "color"
352
+ },
353
+ "active": {
354
+ "value": "{color.global.grey.450}",
355
+ "type": "color"
356
+ }
311
357
  }
312
358
  },
313
359
  "tertiary": {
314
360
  "interactive": {
315
361
  "default": {
316
- "value": "{color.background.default}",
362
+ "value": "{color.transparent.100}",
317
363
  "type": "color"
318
364
  },
319
365
  "hover": {
320
- "value": "{color.brand.primary}",
366
+ "value": "{color.global.magenta.150}",
321
367
  "type": "color"
322
368
  },
323
369
  "active": {
324
- "value": "{color.brand.secondary}",
370
+ "value": "{color.global.grey.450}",
325
371
  "type": "color"
326
372
  }
327
373
  },
328
374
  "on-interactive": {
329
375
  "default": {
330
- "value": "{color.global.grey.500}",
376
+ "value": "{color.global.magenta.100}",
331
377
  "type": "color"
332
378
  },
333
379
  "hover": {
334
- "value": "{color.global.grey.100}",
380
+ "value": "{color.global.grey.500}",
335
381
  "type": "color"
336
382
  },
337
383
  "active": {
338
384
  "value": "{color.global.grey.100}",
339
385
  "type": "color"
340
386
  }
387
+ },
388
+ "border": {
389
+ "default": {
390
+ "value": "{color.transparent.100}",
391
+ "type": "color"
392
+ },
393
+ "hover": {
394
+ "value": "{color.global.magenta.150}",
395
+ "type": "color"
396
+ },
397
+ "active": {
398
+ "value": "{color.global.grey.450}",
399
+ "type": "color"
400
+ }
341
401
  }
342
402
  }
343
403
  }
@@ -212,6 +212,62 @@
212
212
  "type": "color"
213
213
  }
214
214
  },
215
+ "border": {
216
+ "default": {
217
+ "value": "{color.global.grey.250}",
218
+ "type": "color"
219
+ },
220
+ "inverse": {
221
+ "value": "{color.global.grey.300}",
222
+ "type": "color"
223
+ },
224
+ "hover": {
225
+ "value": "{color.global.blue.100}",
226
+ "type": "color"
227
+ },
228
+ "active": {
229
+ "value": "{color.global.blue.100}",
230
+ "type": "color"
231
+ },
232
+ "error": {
233
+ "value": "{color.global.red.100}",
234
+ "type": "color"
235
+ },
236
+ "focus": {
237
+ "value": "{color.brand.primary}",
238
+ "type": "color"
239
+ },
240
+ "filled": {
241
+ "value": "{color.global.grey.500}",
242
+ "type": "color"
243
+ }
244
+ },
245
+ "link": {
246
+ "default": {
247
+ "value": "{color.global.blue.150}",
248
+ "type": "color"
249
+ },
250
+ "hover": {
251
+ "value": "{color.global.blue.100}",
252
+ "type": "color"
253
+ },
254
+ "inverse": {
255
+ "value": "{color.global.grey.100}",
256
+ "type": "color"
257
+ },
258
+ "inverse-hover": {
259
+ "value": "{color.global.grey.300}",
260
+ "type": "color"
261
+ },
262
+ "inverse-subtle": {
263
+ "value": "{color.global.grey.300}",
264
+ "type": "color"
265
+ },
266
+ "inverse-subtle-hover": {
267
+ "value": "{color.global.grey.100}",
268
+ "type": "color"
269
+ }
270
+ },
215
271
  "primary": {
216
272
  "interactive": {
217
273
  "default": {
@@ -256,7 +312,7 @@
256
312
  }
257
313
  }
258
314
  },
259
- "xxx-secondary": {
315
+ "secondary": {
260
316
  "interactive": {
261
317
  "default": {
262
318
  "value": "{color.transparent.100}",
@@ -300,7 +356,7 @@
300
356
  }
301
357
  }
302
358
  },
303
- "xxx-tertiary": {
359
+ "tertiary": {
304
360
  "interactive": {
305
361
  "default": {
306
362
  "value": "{color.transparent.100}",
@@ -343,122 +399,6 @@
343
399
  "type": "color"
344
400
  }
345
401
  }
346
- },
347
- "border": {
348
- "default": {
349
- "value": "{color.global.grey.250}",
350
- "type": "color"
351
- },
352
- "inverse": {
353
- "value": "{color.global.grey.300}",
354
- "type": "color"
355
- },
356
- "hover": {
357
- "value": "{color.global.blue.100}",
358
- "type": "color"
359
- },
360
- "active": {
361
- "value": "{color.global.blue.100}",
362
- "type": "color"
363
- },
364
- "error": {
365
- "value": "{color.global.red.100}",
366
- "type": "color"
367
- },
368
- "focus": {
369
- "value": "{color.brand.primary}",
370
- "type": "color"
371
- },
372
- "filled": {
373
- "value": "{color.global.grey.500}",
374
- "type": "color"
375
- }
376
- },
377
- "link": {
378
- "default": {
379
- "value": "{color.global.blue.150}",
380
- "type": "color"
381
- },
382
- "hover": {
383
- "value": "{color.global.blue.100}",
384
- "type": "color"
385
- },
386
- "inverse": {
387
- "value": "{color.global.grey.100}",
388
- "type": "color"
389
- },
390
- "inverse-hover": {
391
- "value": "{color.global.grey.300}",
392
- "type": "color"
393
- },
394
- "inverse-subtle": {
395
- "value": "{color.global.grey.300}",
396
- "type": "color"
397
- },
398
- "inverse-subtle-hover": {
399
- "value": "{color.global.grey.100}",
400
- "type": "color"
401
- }
402
- },
403
- "secondary": {
404
- "interactive": {
405
- "default": {
406
- "value": "{color.brand.secondary}",
407
- "type": "color"
408
- },
409
- "hover": {
410
- "value": "{color.global.blue.100}",
411
- "type": "color"
412
- },
413
- "active": {
414
- "value": "{color.global.grey.450}",
415
- "type": "color"
416
- }
417
- },
418
- "on-interactive": {
419
- "default": {
420
- "value": "{color.global.grey.100}",
421
- "type": "color"
422
- },
423
- "hover": {
424
- "value": "{color.global.grey.100}",
425
- "type": "color"
426
- },
427
- "active": {
428
- "value": "{color.global.grey.100}",
429
- "type": "color"
430
- }
431
- }
432
- },
433
- "tertiary": {
434
- "interactive": {
435
- "default": {
436
- "value": "{color.background.default}",
437
- "type": "color"
438
- },
439
- "hover": {
440
- "value": "{color.global.orange.50}",
441
- "type": "color"
442
- },
443
- "active": {
444
- "value": "{color.global.blue.150}",
445
- "type": "color"
446
- }
447
- },
448
- "on-interactive": {
449
- "default": {
450
- "value": "{color.global.grey.500}",
451
- "type": "color"
452
- },
453
- "hover": {
454
- "value": "{color.global.grey.500}",
455
- "type": "color"
456
- },
457
- "active": {
458
- "value": "{color.global.grey.100}",
459
- "type": "color"
460
- }
461
- }
462
402
  }
463
403
  }
464
404
  }
@@ -121,7 +121,11 @@
121
121
  }
122
122
  },
123
123
  "surface": {
124
- "default": {
124
+ "brand": {
125
+ "value": "{color.brand.primary}",
126
+ "type": "color"
127
+ },
128
+ "primary": {
125
129
  "value": "{color.global.grey.150}",
126
130
  "type": "color"
127
131
  },
@@ -133,16 +137,30 @@
133
137
  "value": "{color.global.grey.300}",
134
138
  "type": "color"
135
139
  },
136
- "disabled": {
137
- "value": "{color.global.grey.300}",
140
+ "dark": {
141
+ "value": "{color.global.grey.500}",
142
+ "type": "color"
143
+ }
144
+ },
145
+ "on-surface": {
146
+ "brand": {
147
+ "value": "{color.global.grey.100}",
138
148
  "type": "color"
139
149
  },
140
- "dark": {
150
+ "primary": {
141
151
  "value": "{color.global.grey.500}",
142
152
  "type": "color"
143
153
  },
144
- "brand": {
145
- "value": "{color.brand.primary}",
154
+ "secondary": {
155
+ "value": "{color.global.grey.500}",
156
+ "type": "color"
157
+ },
158
+ "tertiary": {
159
+ "value": "{color.global.grey.500}",
160
+ "type": "color"
161
+ },
162
+ "dark": {
163
+ "value": "{color.global.grey.100}",
146
164
  "type": "color"
147
165
  }
148
166
  },
@@ -194,36 +212,6 @@
194
212
  "type": "color"
195
213
  }
196
214
  },
197
- "primary": {
198
- "interactive": {
199
- "default": {
200
- "value": "{color.brand.primary}",
201
- "type": "color"
202
- },
203
- "hover": {
204
- "value": "{color.global.dark-blue.150}",
205
- "type": "color"
206
- },
207
- "active": {
208
- "value": "{color.global.grey.550}",
209
- "type": "color"
210
- }
211
- },
212
- "on-interactive": {
213
- "default": {
214
- "value": "{color.global.grey.100}",
215
- "type": "color"
216
- },
217
- "hover": {
218
- "value": "{color.global.grey.100}",
219
- "type": "color"
220
- },
221
- "active": {
222
- "value": "{color.global.grey.100}",
223
- "type": "color"
224
- }
225
- }
226
- },
227
215
  "border": {
228
216
  "default": {
229
217
  "value": "{color.global.grey.250}",
@@ -280,10 +268,10 @@
280
268
  "type": "color"
281
269
  }
282
270
  },
283
- "secondary": {
271
+ "primary": {
284
272
  "interactive": {
285
273
  "default": {
286
- "value": "{color.brand.secondary}",
274
+ "value": "{color.global.dark-blue.100}",
287
275
  "type": "color"
288
276
  },
289
277
  "hover": {
@@ -308,26 +296,84 @@
308
296
  "value": "{color.global.grey.100}",
309
297
  "type": "color"
310
298
  }
299
+ },
300
+ "border": {
301
+ "default": {
302
+ "value": "{color.global.dark-blue.100}",
303
+ "type": "color"
304
+ },
305
+ "hover": {
306
+ "value": "{color.global.dark-blue.150}",
307
+ "type": "color"
308
+ },
309
+ "active": {
310
+ "value": "{color.global.grey.450}",
311
+ "type": "color"
312
+ }
313
+ }
314
+ },
315
+ "secondary": {
316
+ "interactive": {
317
+ "default": {
318
+ "value": "{color.transparent.100}",
319
+ "type": "color"
320
+ },
321
+ "hover": {
322
+ "value": "{color.global.dark-blue.150}",
323
+ "type": "color"
324
+ },
325
+ "active": {
326
+ "value": "{color.global.grey.450}",
327
+ "type": "color"
328
+ }
329
+ },
330
+ "on-interactive": {
331
+ "default": {
332
+ "value": "{color.global.dark-blue.100}",
333
+ "type": "color"
334
+ },
335
+ "hover": {
336
+ "value": "{color.global.grey.100}",
337
+ "type": "color"
338
+ },
339
+ "active": {
340
+ "value": "{color.global.grey.100}",
341
+ "type": "color"
342
+ }
343
+ },
344
+ "border": {
345
+ "default": {
346
+ "value": "{color.global.dark-blue.100}",
347
+ "type": "color"
348
+ },
349
+ "hover": {
350
+ "value": "{color.global.dark-blue.150}",
351
+ "type": "color"
352
+ },
353
+ "active": {
354
+ "value": "{color.global.grey.450}",
355
+ "type": "color"
356
+ }
311
357
  }
312
358
  },
313
359
  "tertiary": {
314
360
  "interactive": {
315
361
  "default": {
316
- "value": "{color.background.default}",
362
+ "value": "{color.transparent.100}",
317
363
  "type": "color"
318
364
  },
319
365
  "hover": {
320
- "value": "{color.brand.primary}",
366
+ "value": "{color.global.dark-blue.150}",
321
367
  "type": "color"
322
368
  },
323
369
  "active": {
324
- "value": "{color.global.dark-blue.150}",
370
+ "value": "{color.global.grey.450}",
325
371
  "type": "color"
326
372
  }
327
373
  },
328
374
  "on-interactive": {
329
375
  "default": {
330
- "value": "{color.global.grey.500}",
376
+ "value": "{color.global.dark-blue.100}",
331
377
  "type": "color"
332
378
  },
333
379
  "hover": {
@@ -338,6 +384,20 @@
338
384
  "value": "{color.global.grey.100}",
339
385
  "type": "color"
340
386
  }
387
+ },
388
+ "border": {
389
+ "default": {
390
+ "value": "{color.transparent.100}",
391
+ "type": "color"
392
+ },
393
+ "hover": {
394
+ "value": "{color.global.dark-blue.150}",
395
+ "type": "color"
396
+ },
397
+ "active": {
398
+ "value": "{color.global.grey.450}",
399
+ "type": "color"
400
+ }
341
401
  }
342
402
  }
343
403
  }
@@ -212,50 +212,6 @@
212
212
  "type": "color"
213
213
  }
214
214
  },
215
- "primary": {
216
- "interactive": {
217
- "default": {
218
- "value": "{color.global.blue.150}",
219
- "type": "color"
220
- },
221
- "hover": {
222
- "value": "{color.global.blue.100}",
223
- "type": "color"
224
- },
225
- "active": {
226
- "value": "{color.global.blue.125}",
227
- "type": "color"
228
- }
229
- },
230
- "on-interactive": {
231
- "default": {
232
- "value": "{color.global.grey.100}",
233
- "type": "color"
234
- },
235
- "hover": {
236
- "value": "{color.global.grey.100}",
237
- "type": "color"
238
- },
239
- "active": {
240
- "value": "{color.global.grey.100}",
241
- "type": "color"
242
- }
243
- },
244
- "border": {
245
- "default": {
246
- "value": "{color.global.blue.150}",
247
- "type": "color"
248
- },
249
- "hover": {
250
- "value": "{color.global.blue.100}",
251
- "type": "color"
252
- },
253
- "active": {
254
- "value": "{color.global.blue.125}",
255
- "type": "color"
256
- }
257
- }
258
- },
259
215
  "border": {
260
216
  "default": {
261
217
  "value": "{color.global.grey.250}",
@@ -312,6 +268,50 @@
312
268
  "type": "color"
313
269
  }
314
270
  },
271
+ "primary": {
272
+ "interactive": {
273
+ "default": {
274
+ "value": "{color.global.blue.150}",
275
+ "type": "color"
276
+ },
277
+ "hover": {
278
+ "value": "{color.global.blue.100}",
279
+ "type": "color"
280
+ },
281
+ "active": {
282
+ "value": "{color.global.blue.125}",
283
+ "type": "color"
284
+ }
285
+ },
286
+ "on-interactive": {
287
+ "default": {
288
+ "value": "{color.global.grey.100}",
289
+ "type": "color"
290
+ },
291
+ "hover": {
292
+ "value": "{color.global.grey.100}",
293
+ "type": "color"
294
+ },
295
+ "active": {
296
+ "value": "{color.global.grey.100}",
297
+ "type": "color"
298
+ }
299
+ },
300
+ "border": {
301
+ "default": {
302
+ "value": "{color.global.blue.150}",
303
+ "type": "color"
304
+ },
305
+ "hover": {
306
+ "value": "{color.global.blue.100}",
307
+ "type": "color"
308
+ },
309
+ "active": {
310
+ "value": "{color.global.blue.125}",
311
+ "type": "color"
312
+ }
313
+ }
314
+ },
315
315
  "secondary": {
316
316
  "interactive": {
317
317
  "default": {