@rijkshuisstijl-community/design-tokens 1.1.0 → 1.2.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.
Files changed (54) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/_variables.scss +722 -709
  3. package/dist/index.css +722 -709
  4. package/dist/index.d.ts +515 -502
  5. package/dist/index.js +541 -528
  6. package/dist/index.json +540 -527
  7. package/dist/index.tokens.json +1644 -1621
  8. package/dist/root.css +722 -709
  9. package/dist/tokens.d.ts +1580 -1557
  10. package/dist/tokens.js +22186 -21753
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +536 -523
  12. package/dist/uitvoerend-mintgroen-focus/index.css +536 -523
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +713 -700
  14. package/dist/uitvoerend-mintgroen-focus/index.js +713 -700
  15. package/dist/uitvoerend-mintgroen-focus/index.json +712 -699
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1624 -1601
  17. package/dist/uitvoerend-mintgroen-focus/root.css +536 -523
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1543 -1520
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +21505 -21072
  20. package/dist/uitvoerend-violet/_variables.scss +41 -28
  21. package/dist/uitvoerend-violet/index.css +41 -28
  22. package/dist/uitvoerend-violet/index.d.ts +15 -2
  23. package/dist/uitvoerend-violet/index.js +41 -28
  24. package/dist/uitvoerend-violet/index.json +40 -27
  25. package/dist/uitvoerend-violet/index.tokens.json +54 -31
  26. package/dist/uitvoerend-violet/root.css +41 -28
  27. package/dist/uitvoerend-violet/tokens.d.ts +29 -6
  28. package/dist/uitvoerend-violet/tokens.js +551 -118
  29. package/dist/uitvoerend-violet-oud/_variables.scss +41 -28
  30. package/dist/uitvoerend-violet-oud/index.css +41 -28
  31. package/dist/uitvoerend-violet-oud/index.d.ts +15 -2
  32. package/dist/uitvoerend-violet-oud/index.js +41 -28
  33. package/dist/uitvoerend-violet-oud/index.json +40 -27
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +54 -31
  35. package/dist/uitvoerend-violet-oud/root.css +41 -28
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +29 -6
  37. package/dist/uitvoerend-violet-oud/tokens.js +551 -118
  38. package/dist/wetgevend/_variables.scss +41 -28
  39. package/dist/wetgevend/index.css +41 -28
  40. package/dist/wetgevend/index.d.ts +15 -2
  41. package/dist/wetgevend/index.js +41 -28
  42. package/dist/wetgevend/index.json +40 -27
  43. package/dist/wetgevend/index.tokens.json +54 -31
  44. package/dist/wetgevend/root.css +41 -28
  45. package/dist/wetgevend/tokens.d.ts +29 -6
  46. package/dist/wetgevend/tokens.js +551 -118
  47. package/figma/figma.tokens.json +1589 -263
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +4428 -4323
  50. package/src/generated/themes.json +4869 -4449
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +4439 -4334
  52. package/src/generated/uitvoerend-violet/tokens.json +138 -33
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +138 -33
  54. package/src/generated/wetgevend/tokens.json +138 -33
package/src/generated/wetgevend/tokens.json CHANGED
@@ -2075,15 +2075,15 @@
2075
2075
  },
2076
2076
  "button": {
2077
2077
  "background-color": {
2078
- "value": "transparent",
2078
+ "value": "#0F172A",
2079
2079
  "type": "color"
2080
2080
  },
2081
2081
  "border-color": {
2082
- "value": "#334155",
2082
+ "value": "transparent",
2083
2083
  "type": "color"
2084
2084
  },
2085
2085
  "color": {
2086
- "value": "#334155",
2086
+ "value": "#fff",
2087
2087
  "type": "color"
2088
2088
  },
2089
2089
  "border-radius": {
@@ -2138,7 +2138,7 @@
2138
2138
  },
2139
2139
  "disabled": {
2140
2140
  "background-color": {
2141
- "value": "#F8FAFC",
2141
+ "value": "#E2E8F0",
2142
2142
  "type": "color"
2143
2143
  },
2144
2144
  "border-color": {
@@ -2146,13 +2146,13 @@
2146
2146
  "type": "color"
2147
2147
  },
2148
2148
  "color": {
2149
- "value": "#64748B",
2149
+ "value": "#94A3B8",
2150
2150
  "type": "color"
2151
2151
  }
2152
2152
  },
2153
2153
  "focus": {
2154
2154
  "background-color": {
2155
- "value": "#FDDE94",
2155
+ "value": "#475569",
2156
2156
  "type": "color"
2157
2157
  },
2158
2158
  "border-color": {
@@ -2160,35 +2160,35 @@
2160
2160
  "type": "color"
2161
2161
  },
2162
2162
  "color": {
2163
- "value": "#1E293B",
2163
+ "value": "#fff",
2164
2164
  "type": "color"
2165
2165
  }
2166
2166
  },
2167
2167
  "hover": {
2168
2168
  "background-color": {
2169
- "value": "#F8FAFC",
2169
+ "value": "#475569",
2170
2170
  "type": "color"
2171
2171
  },
2172
2172
  "border-color": {
2173
- "value": "#1E293B",
2173
+ "value": "transparent",
2174
2174
  "type": "color"
2175
2175
  },
2176
2176
  "color": {
2177
- "value": "#1E293B",
2177
+ "value": "#fff",
2178
2178
  "type": "color"
2179
2179
  }
2180
2180
  },
2181
2181
  "active": {
2182
2182
  "background-color": {
2183
- "value": "#CBD5E1",
2183
+ "value": "#1E293B",
2184
2184
  "type": "color"
2185
2185
  },
2186
2186
  "border-color": {
2187
- "value": "#0F172A",
2187
+ "value": "transparent",
2188
2188
  "type": "color"
2189
2189
  },
2190
2190
  "color": {
2191
- "value": "#0F172A",
2191
+ "value": "#fff",
2192
2192
  "type": "color"
2193
2193
  }
2194
2194
  },
@@ -2237,7 +2237,7 @@
2237
2237
  "type": "color"
2238
2238
  },
2239
2239
  "border-color": {
2240
- "value": "#95a9c0",
2240
+ "value": "transparent",
2241
2241
  "type": "color"
2242
2242
  },
2243
2243
  "color": {
@@ -2247,7 +2247,7 @@
2247
2247
  },
2248
2248
  "focus": {
2249
2249
  "background-color": {
2250
- "value": "#154273",
2250
+ "value": "#162f50",
2251
2251
  "type": "color"
2252
2252
  },
2253
2253
  "border-color": {
@@ -2293,20 +2293,43 @@
2293
2293
  "line-height": {
2294
2294
  "value": "1.875rem",
2295
2295
  "type": "lineHeights"
2296
+ },
2297
+ "pressed": {
2298
+ "background-color": {
2299
+ "value": "#162945",
2300
+ "type": "color",
2301
+ "$extensions": {
2302
+ "studio.tokens": {
2303
+ "modify": {
2304
+ "type": "darken",
2305
+ "value": "0.4",
2306
+ "space": "lch"
2307
+ }
2308
+ }
2309
+ }
2310
+ },
2311
+ "border-color": {
2312
+ "value": "transparent",
2313
+ "type": "color"
2314
+ },
2315
+ "color": {
2316
+ "value": "#fff",
2317
+ "type": "color"
2318
+ }
2296
2319
  }
2297
2320
  },
2298
2321
  "secondary-action": {
2299
2322
  "hover": {
2300
2323
  "background-color": {
2301
- "value": "#b8c6d5",
2324
+ "value": "#dce3ea",
2302
2325
  "type": "color"
2303
2326
  },
2304
2327
  "border-color": {
2305
- "value": "transparent",
2328
+ "value": "#162f50",
2306
2329
  "type": "color"
2307
2330
  },
2308
2331
  "color": {
2309
- "value": "#154273",
2332
+ "value": "#162f50",
2310
2333
  "type": "color"
2311
2334
  }
2312
2335
  },
@@ -2328,7 +2351,7 @@
2328
2351
  "type": "color"
2329
2352
  },
2330
2353
  "border-color": {
2331
- "value": "#738eab",
2354
+ "value": "#95a9c0",
2332
2355
  "type": "color"
2333
2356
  },
2334
2357
  "color": {
@@ -2338,7 +2361,7 @@
2338
2361
  },
2339
2362
  "focus": {
2340
2363
  "background-color": {
2341
- "value": "#b8c6d5",
2364
+ "value": "#dce3ea",
2342
2365
  "type": "color"
2343
2366
  },
2344
2367
  "border-color": {
@@ -2346,7 +2369,7 @@
2346
2369
  "type": "color"
2347
2370
  },
2348
2371
  "color": {
2349
- "value": "#154273",
2372
+ "value": "#162f50",
2350
2373
  "type": "color"
2351
2374
  }
2352
2375
  },
@@ -2360,11 +2383,20 @@
2360
2383
  "type": "color"
2361
2384
  },
2362
2385
  "border-color": {
2363
- "value": "#154273",
2364
- "type": "color"
2386
+ "value": "#162945",
2387
+ "type": "color",
2388
+ "$extensions": {
2389
+ "studio.tokens": {
2390
+ "modify": {
2391
+ "type": "darken",
2392
+ "value": "0.4",
2393
+ "space": "lch"
2394
+ }
2395
+ }
2396
+ }
2365
2397
  },
2366
2398
  "color": {
2367
- "value": "#154273",
2399
+ "value": "#162f50",
2368
2400
  "type": "color"
2369
2401
  }
2370
2402
  },
@@ -2375,6 +2407,38 @@
2375
2407
  "line-height": {
2376
2408
  "value": "1.875rem",
2377
2409
  "type": "lineHeights"
2410
+ },
2411
+ "pressed": {
2412
+ "background-color": {
2413
+ "value": "#b8c6d5",
2414
+ "type": "color"
2415
+ },
2416
+ "border-color": {
2417
+ "value": "#162945",
2418
+ "type": "color",
2419
+ "$extensions": {
2420
+ "studio.tokens": {
2421
+ "modify": {
2422
+ "type": "darken",
2423
+ "value": "0.4",
2424
+ "space": "lch"
2425
+ }
2426
+ }
2427
+ }
2428
+ },
2429
+ "color": {
2430
+ "value": "#162945",
2431
+ "type": "color",
2432
+ "$extensions": {
2433
+ "studio.tokens": {
2434
+ "modify": {
2435
+ "type": "darken",
2436
+ "value": "0.4",
2437
+ "space": "lch"
2438
+ }
2439
+ }
2440
+ }
2441
+ }
2378
2442
  }
2379
2443
  },
2380
2444
  "subtle": {
@@ -2388,7 +2452,7 @@
2388
2452
  },
2389
2453
  "hover": {
2390
2454
  "background-color": {
2391
- "value": "transparent",
2455
+ "value": "#dce3ea",
2392
2456
  "type": "color"
2393
2457
  },
2394
2458
  "border-color": {
@@ -2436,13 +2500,13 @@
2436
2500
  "type": "color"
2437
2501
  },
2438
2502
  "color": {
2439
- "value": "#154273",
2503
+ "value": "#162f50",
2440
2504
  "type": "color"
2441
2505
  }
2442
2506
  },
2443
2507
  "active": {
2444
2508
  "background-color": {
2445
- "value": "transparent",
2509
+ "value": "#95a9c0",
2446
2510
  "type": "color"
2447
2511
  },
2448
2512
  "border-color": {
@@ -2466,6 +2530,43 @@
2466
2530
  "line-height": {
2467
2531
  "value": "1.875rem",
2468
2532
  "type": "lineHeights"
2533
+ },
2534
+ "pressed": {
2535
+ "background-color": {
2536
+ "value": "#b8c6d5",
2537
+ "type": "color"
2538
+ },
2539
+ "border-color": {
2540
+ "value": "transparent",
2541
+ "type": "color"
2542
+ },
2543
+ "color": {
2544
+ "value": "#162945",
2545
+ "type": "color",
2546
+ "$extensions": {
2547
+ "studio.tokens": {
2548
+ "modify": {
2549
+ "type": "darken",
2550
+ "value": "0.4",
2551
+ "space": "lch"
2552
+ }
2553
+ }
2554
+ }
2555
+ }
2556
+ }
2557
+ },
2558
+ "pressed": {
2559
+ "background-color": {
2560
+ "value": "#1E293B",
2561
+ "type": "color"
2562
+ },
2563
+ "border-color": {
2564
+ "value": "transparent",
2565
+ "type": "color"
2566
+ },
2567
+ "color": {
2568
+ "value": "#fff",
2569
+ "type": "color"
2469
2570
  }
2470
2571
  }
2471
2572
  },
@@ -4577,15 +4678,13 @@
4577
4678
  "type": "color",
4578
4679
  "description": "Gebruik voor content die extra context biedt, maar niet essentieel is om de interface te begrijpen."
4579
4680
  },
4580
- "onEmphasis": {
4581
- "parent": "mode/light",
4582
- "value": "#fff",
4583
- "type": "color",
4584
- "description": "Tekst en iconen die op een sterke achtergrond staan. Zoals het label in de primaire button of links in de footer."
4585
- },
4586
4681
  "link": {
4587
4682
  "value": "#01689b",
4588
4683
  "type": "color"
4684
+ },
4685
+ "onEmphasis": {
4686
+ "value": "#fff",
4687
+ "type": "color"
4589
4688
  }
4590
4689
  },
4591
4690
  "border": {
@@ -4677,6 +4776,12 @@
4677
4776
  "type": "color"
4678
4777
  }
4679
4778
  },
4779
+ "accent-2": {
4780
+ "500": {
4781
+ "value": "#f092cd",
4782
+ "type": "color"
4783
+ }
4784
+ },
4680
4785
  "primary": {
4681
4786
  "50": {
4682
4787
  "value": "#dce3ea",