@utrecht/design-tokens 3.0.0 → 3.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 +14 -0
  2. package/dist/_mixin-theme.scss +12 -0
  3. package/dist/_mixin.scss +12 -0
  4. package/dist/_variables.scss +12 -0
  5. package/dist/dark/_mixin-theme.scss +12 -0
  6. package/dist/dark/_mixin.scss +12 -0
  7. package/dist/dark/_variables.scss +12 -0
  8. package/dist/dark/index.cjs +12 -0
  9. package/dist/dark/index.css +12 -0
  10. package/dist/dark/index.d.ts +12 -0
  11. package/dist/dark/index.flat.json +12 -0
  12. package/dist/dark/index.json +396 -0
  13. package/dist/dark/index.mjs +12 -0
  14. package/dist/dark/index.tokens.json +77 -0
  15. package/dist/dark/list.json +396 -0
  16. package/dist/dark/list.mjs +396 -0
  17. package/dist/dark/property.css +12 -0
  18. package/dist/dark/root.css +12 -0
  19. package/dist/dark/theme-prince-xml.css +12 -0
  20. package/dist/dark/theme.css +12 -0
  21. package/dist/dark/tokens.cjs +461 -0
  22. package/dist/dark/tokens.d.ts +52 -0
  23. package/dist/dark/tokens.json +461 -0
  24. package/dist/dark/variables.cjs +12 -0
  25. package/dist/dark/variables.css +12 -0
  26. package/dist/dark/variables.d.ts +12 -0
  27. package/dist/dark/variables.json +12 -0
  28. package/dist/dark/variables.less +12 -0
  29. package/dist/dark/variables.mjs +12 -0
  30. package/dist/index.cjs +12 -0
  31. package/dist/index.css +24 -0
  32. package/dist/index.d.ts +12 -0
  33. package/dist/index.flat.json +12 -0
  34. package/dist/index.json +396 -0
  35. package/dist/index.mjs +12 -0
  36. package/dist/index.tokens.json +77 -0
  37. package/dist/list.json +396 -0
  38. package/dist/list.mjs +396 -0
  39. package/dist/property.css +12 -0
  40. package/dist/root.css +12 -0
  41. package/dist/theme-prince-xml.css +12 -0
  42. package/dist/theme.css +12 -0
  43. package/dist/tokens.cjs +461 -0
  44. package/dist/tokens.d.ts +52 -0
  45. package/dist/tokens.json +461 -0
  46. package/dist/variables.cjs +12 -0
  47. package/dist/variables.css +12 -0
  48. package/dist/variables.d.ts +12 -0
  49. package/dist/variables.json +12 -0
  50. package/dist/variables.less +12 -0
  51. package/dist/variables.mjs +12 -0
  52. package/package.json +1 -1
  53. package/src/component/utrecht/breadcrumb-nav.tokens.json +5 -0
  54. package/src/component/utrecht/card.tokens.json +54 -0
package/dist/tokens.json CHANGED
@@ -4016,6 +4016,47 @@
4016
4016
  "type": "textCase"
4017
4017
  },
4018
4018
  "item": {
4019
+ "first": {
4020
+ "padding-inline-start": {
4021
+ "$extensions": {
4022
+ "nl.nldesignsystem.css.property": {
4023
+ "syntax": "<length>",
4024
+ "inherits": true
4025
+ },
4026
+ "nl.nldesignsystem.figma.supports-token": false,
4027
+ "studio.tokens": {
4028
+ "originalType": "spacing"
4029
+ }
4030
+ },
4031
+ "type": "dimension",
4032
+ "value": "0",
4033
+ "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
4034
+ "isSource": true,
4035
+ "original": {
4036
+ "$extensions": {
4037
+ "nl.nldesignsystem.css.property": {
4038
+ "syntax": "<length>",
4039
+ "inherits": true
4040
+ },
4041
+ "nl.nldesignsystem.figma.supports-token": false,
4042
+ "studio.tokens": {
4043
+ "originalType": "spacing"
4044
+ }
4045
+ },
4046
+ "type": "dimension",
4047
+ "value": "0"
4048
+ },
4049
+ "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
4050
+ "attributes": {},
4051
+ "path": [
4052
+ "utrecht",
4053
+ "breadcrumb-nav",
4054
+ "item",
4055
+ "first",
4056
+ "padding-inline-start"
4057
+ ]
4058
+ }
4059
+ },
4019
4060
  "padding-block-start": {
4020
4061
  "$extensions": {
4021
4062
  "nl.nldesignsystem.css.property": {
@@ -10411,6 +10452,425 @@
10411
10452
  }
10412
10453
  }
10413
10454
  },
10455
+ "card": {
10456
+ "background-color": {
10457
+ "$extensions": {
10458
+ "nl.nldesignsystem.css.property": {
10459
+ "syntax": "<color>",
10460
+ "inherits": true
10461
+ },
10462
+ "nl.nldesignsystem.figma.supports-token": false
10463
+ },
10464
+ "type": "color",
10465
+ "value": "hsl(211 60% 90%)",
10466
+ "filePath": "src/component/utrecht/card.tokens.json",
10467
+ "isSource": true,
10468
+ "original": {
10469
+ "$extensions": {
10470
+ "nl.nldesignsystem.css.property": {
10471
+ "syntax": "<color>",
10472
+ "inherits": true
10473
+ },
10474
+ "nl.nldesignsystem.figma.supports-token": false
10475
+ },
10476
+ "type": "color",
10477
+ "value": "{utrecht.color.blue.90}"
10478
+ },
10479
+ "name": "utrechtCardBackgroundColor",
10480
+ "attributes": {},
10481
+ "path": [
10482
+ "utrecht",
10483
+ "card",
10484
+ "background-color"
10485
+ ]
10486
+ },
10487
+ "color": {
10488
+ "$extensions": {
10489
+ "nl.nldesignsystem.css.property": {
10490
+ "syntax": "<color>",
10491
+ "inherits": true
10492
+ },
10493
+ "nl.nldesignsystem.figma.supports-token": false
10494
+ },
10495
+ "type": "color",
10496
+ "value": "hsl(0 0% 0%)",
10497
+ "filePath": "src/component/utrecht/card.tokens.json",
10498
+ "isSource": true,
10499
+ "original": {
10500
+ "$extensions": {
10501
+ "nl.nldesignsystem.css.property": {
10502
+ "syntax": "<color>",
10503
+ "inherits": true
10504
+ },
10505
+ "nl.nldesignsystem.figma.supports-token": false
10506
+ },
10507
+ "type": "color",
10508
+ "value": "{utrecht.color.black}"
10509
+ },
10510
+ "name": "utrechtCardColor",
10511
+ "attributes": {},
10512
+ "path": [
10513
+ "utrecht",
10514
+ "card",
10515
+ "color"
10516
+ ]
10517
+ },
10518
+ "max-inline-size": {
10519
+ "$extensions": {
10520
+ "nl.nldesignsystem.css.property": {
10521
+ "syntax": "<length>",
10522
+ "inherits": true
10523
+ },
10524
+ "nl.nldesignsystem.figma.supports-token": false
10525
+ },
10526
+ "type": "dimension"
10527
+ },
10528
+ "border-radius": {
10529
+ "$extensions": {
10530
+ "nl.nldesignsystem.css.property": {
10531
+ "syntax": "<length>",
10532
+ "inherits": true
10533
+ },
10534
+ "nl.nldesignsystem.figma.supports-token": false
10535
+ },
10536
+ "type": "dimension"
10537
+ },
10538
+ "box-shadow": {
10539
+ "$extensions": {
10540
+ "nl.nldesignsystem.css.property": {
10541
+ "syntax": "<shadow>",
10542
+ "inherits": true
10543
+ },
10544
+ "nl.nldesignsystem.figma.supports-token": false
10545
+ },
10546
+ "type": "shadow"
10547
+ },
10548
+ "inline-size": {
10549
+ "$extensions": {
10550
+ "nl.nldesignsystem.css.property": {
10551
+ "syntax": "<length>",
10552
+ "inherits": true
10553
+ },
10554
+ "nl.nldesignsystem.figma.supports-token": false
10555
+ },
10556
+ "type": "dimension"
10557
+ },
10558
+ "row-gap": {
10559
+ "$extensions": {
10560
+ "nl.nldesignsystem.css.property": {
10561
+ "syntax": "<length>",
10562
+ "inherits": true
10563
+ },
10564
+ "nl.nldesignsystem.figma.supports-token": false
10565
+ },
10566
+ "type": "dimension"
10567
+ },
10568
+ "heading": {
10569
+ "color": {
10570
+ "$extensions": {
10571
+ "nl.nldesignsystem.css.property": {
10572
+ "syntax": "<color>",
10573
+ "inherits": true
10574
+ },
10575
+ "nl.nldesignsystem.figma.supports-token": false
10576
+ },
10577
+ "type": "color",
10578
+ "value": "hsl(211 60% 35%)",
10579
+ "filePath": "src/component/utrecht/card.tokens.json",
10580
+ "isSource": true,
10581
+ "original": {
10582
+ "$extensions": {
10583
+ "nl.nldesignsystem.css.property": {
10584
+ "syntax": "<color>",
10585
+ "inherits": true
10586
+ },
10587
+ "nl.nldesignsystem.figma.supports-token": false
10588
+ },
10589
+ "type": "color",
10590
+ "value": "{utrecht.color.blue.35}"
10591
+ },
10592
+ "name": "utrechtCardHeadingColor",
10593
+ "attributes": {},
10594
+ "path": [
10595
+ "utrecht",
10596
+ "card",
10597
+ "heading",
10598
+ "color"
10599
+ ]
10600
+ },
10601
+ "padding-inline-start": {
10602
+ "$extensions": {
10603
+ "nl.nldesignsystem.css.property": {
10604
+ "syntax": "<length>",
10605
+ "inherits": true
10606
+ },
10607
+ "nl.nldesignsystem.figma.supports-token": false
10608
+ },
10609
+ "type": "dimension",
10610
+ "value": "16px",
10611
+ "filePath": "src/component/utrecht/card.tokens.json",
10612
+ "isSource": true,
10613
+ "original": {
10614
+ "$extensions": {
10615
+ "nl.nldesignsystem.css.property": {
10616
+ "syntax": "<length>",
10617
+ "inherits": true
10618
+ },
10619
+ "nl.nldesignsystem.figma.supports-token": false
10620
+ },
10621
+ "type": "dimension",
10622
+ "value": "{utrecht.space.inline.md}"
10623
+ },
10624
+ "name": "utrechtCardHeadingPaddingInlineStart",
10625
+ "attributes": {},
10626
+ "path": [
10627
+ "utrecht",
10628
+ "card",
10629
+ "heading",
10630
+ "padding-inline-start"
10631
+ ]
10632
+ },
10633
+ "padding-inline-end": {
10634
+ "$extensions": {
10635
+ "nl.nldesignsystem.css.property": {
10636
+ "syntax": "<length>",
10637
+ "inherits": true
10638
+ },
10639
+ "nl.nldesignsystem.figma.supports-token": false
10640
+ },
10641
+ "type": "dimension",
10642
+ "value": "16px",
10643
+ "filePath": "src/component/utrecht/card.tokens.json",
10644
+ "isSource": true,
10645
+ "original": {
10646
+ "$extensions": {
10647
+ "nl.nldesignsystem.css.property": {
10648
+ "syntax": "<length>",
10649
+ "inherits": true
10650
+ },
10651
+ "nl.nldesignsystem.figma.supports-token": false
10652
+ },
10653
+ "type": "dimension",
10654
+ "value": "{utrecht.space.inline.md}"
10655
+ },
10656
+ "name": "utrechtCardHeadingPaddingInlineEnd",
10657
+ "attributes": {},
10658
+ "path": [
10659
+ "utrecht",
10660
+ "card",
10661
+ "heading",
10662
+ "padding-inline-end"
10663
+ ]
10664
+ }
10665
+ },
10666
+ "link": {
10667
+ "hover": {
10668
+ "text-decoration-thickness": {
10669
+ "$extensions": {
10670
+ "nl.nldesignsystem.css.property": {
10671
+ "syntax": "<length>",
10672
+ "inherits": true
10673
+ },
10674
+ "nl.nldesignsystem.figma.supports-token": false,
10675
+ "studio.tokens": {
10676
+ "originalType": "borderWidth"
10677
+ }
10678
+ },
10679
+ "type": "dimension",
10680
+ "value": "3px",
10681
+ "filePath": "src/component/utrecht/card.tokens.json",
10682
+ "isSource": true,
10683
+ "original": {
10684
+ "$extensions": {
10685
+ "nl.nldesignsystem.css.property": {
10686
+ "syntax": "<length>",
10687
+ "inherits": true
10688
+ },
10689
+ "nl.nldesignsystem.figma.supports-token": false,
10690
+ "studio.tokens": {
10691
+ "originalType": "borderWidth"
10692
+ }
10693
+ },
10694
+ "type": "dimension",
10695
+ "value": "3px"
10696
+ },
10697
+ "name": "utrechtCardLinkHoverTextDecorationThickness",
10698
+ "attributes": {},
10699
+ "path": [
10700
+ "utrecht",
10701
+ "card",
10702
+ "link",
10703
+ "hover",
10704
+ "text-decoration-thickness"
10705
+ ]
10706
+ }
10707
+ }
10708
+ },
10709
+ "content": {
10710
+ "row-gap": {
10711
+ "$extensions": {
10712
+ "nl.nldesignsystem.css.property": {
10713
+ "syntax": "<length>",
10714
+ "inherits": true
10715
+ },
10716
+ "nl.nldesignsystem.figma.supports-token": false
10717
+ },
10718
+ "type": "dimension",
10719
+ "value": "16px",
10720
+ "filePath": "src/component/utrecht/card.tokens.json",
10721
+ "isSource": true,
10722
+ "original": {
10723
+ "$extensions": {
10724
+ "nl.nldesignsystem.css.property": {
10725
+ "syntax": "<length>",
10726
+ "inherits": true
10727
+ },
10728
+ "nl.nldesignsystem.figma.supports-token": false
10729
+ },
10730
+ "type": "dimension",
10731
+ "value": "{utrecht.space.row.md}"
10732
+ },
10733
+ "name": "utrechtCardContentRowGap",
10734
+ "attributes": {},
10735
+ "path": [
10736
+ "utrecht",
10737
+ "card",
10738
+ "content",
10739
+ "row-gap"
10740
+ ]
10741
+ },
10742
+ "padding-block-start": {
10743
+ "$extensions": {
10744
+ "nl.nldesignsystem.css.property": {
10745
+ "syntax": "<length>",
10746
+ "inherits": true
10747
+ },
10748
+ "nl.nldesignsystem.figma.supports-token": false
10749
+ },
10750
+ "type": "dimension",
10751
+ "value": "16px",
10752
+ "filePath": "src/component/utrecht/card.tokens.json",
10753
+ "isSource": true,
10754
+ "original": {
10755
+ "$extensions": {
10756
+ "nl.nldesignsystem.css.property": {
10757
+ "syntax": "<length>",
10758
+ "inherits": true
10759
+ },
10760
+ "nl.nldesignsystem.figma.supports-token": false
10761
+ },
10762
+ "type": "dimension",
10763
+ "value": "{utrecht.space.block.md}"
10764
+ },
10765
+ "name": "utrechtCardContentPaddingBlockStart",
10766
+ "attributes": {},
10767
+ "path": [
10768
+ "utrecht",
10769
+ "card",
10770
+ "content",
10771
+ "padding-block-start"
10772
+ ]
10773
+ },
10774
+ "padding-block-end": {
10775
+ "$extensions": {
10776
+ "nl.nldesignsystem.css.property": {
10777
+ "syntax": "<length>",
10778
+ "inherits": true
10779
+ },
10780
+ "nl.nldesignsystem.figma.supports-token": false
10781
+ },
10782
+ "type": "dimension",
10783
+ "value": "16px",
10784
+ "filePath": "src/component/utrecht/card.tokens.json",
10785
+ "isSource": true,
10786
+ "original": {
10787
+ "$extensions": {
10788
+ "nl.nldesignsystem.css.property": {
10789
+ "syntax": "<length>",
10790
+ "inherits": true
10791
+ },
10792
+ "nl.nldesignsystem.figma.supports-token": false
10793
+ },
10794
+ "type": "dimension",
10795
+ "value": "{utrecht.space.block.md}"
10796
+ },
10797
+ "name": "utrechtCardContentPaddingBlockEnd",
10798
+ "attributes": {},
10799
+ "path": [
10800
+ "utrecht",
10801
+ "card",
10802
+ "content",
10803
+ "padding-block-end"
10804
+ ]
10805
+ }
10806
+ },
10807
+ "body": {
10808
+ "padding-inline-start": {
10809
+ "$extensions": {
10810
+ "nl.nldesignsystem.css.property": {
10811
+ "syntax": "<length>",
10812
+ "inherits": true
10813
+ },
10814
+ "nl.nldesignsystem.figma.supports-token": false
10815
+ },
10816
+ "type": "dimension",
10817
+ "value": "16px",
10818
+ "filePath": "src/component/utrecht/card.tokens.json",
10819
+ "isSource": true,
10820
+ "original": {
10821
+ "$extensions": {
10822
+ "nl.nldesignsystem.css.property": {
10823
+ "syntax": "<length>",
10824
+ "inherits": true
10825
+ },
10826
+ "nl.nldesignsystem.figma.supports-token": false
10827
+ },
10828
+ "type": "dimension",
10829
+ "value": "{utrecht.space.inline.md}"
10830
+ },
10831
+ "name": "utrechtCardBodyPaddingInlineStart",
10832
+ "attributes": {},
10833
+ "path": [
10834
+ "utrecht",
10835
+ "card",
10836
+ "body",
10837
+ "padding-inline-start"
10838
+ ]
10839
+ },
10840
+ "padding-inline-end": {
10841
+ "$extensions": {
10842
+ "nl.nldesignsystem.css.property": {
10843
+ "syntax": "<length>",
10844
+ "inherits": true
10845
+ },
10846
+ "nl.nldesignsystem.figma.supports-token": false
10847
+ },
10848
+ "type": "dimension",
10849
+ "value": "16px",
10850
+ "filePath": "src/component/utrecht/card.tokens.json",
10851
+ "isSource": true,
10852
+ "original": {
10853
+ "$extensions": {
10854
+ "nl.nldesignsystem.css.property": {
10855
+ "syntax": "<length>",
10856
+ "inherits": true
10857
+ },
10858
+ "nl.nldesignsystem.figma.supports-token": false
10859
+ },
10860
+ "type": "dimension",
10861
+ "value": "{utrecht.space.inline.md}"
10862
+ },
10863
+ "name": "utrechtCardBodyPaddingInlineEnd",
10864
+ "attributes": {},
10865
+ "path": [
10866
+ "utrecht",
10867
+ "card",
10868
+ "body",
10869
+ "padding-inline-end"
10870
+ ]
10871
+ }
10872
+ }
10873
+ },
10414
10874
  "checkbox": {
10415
10875
  "background-color": {
10416
10876
  "$extensions": {
@@ -36708,6 +37168,7 @@
36708
37168
  }
36709
37169
  }
36710
37170
  },
37171
+ "youtube-video": {},
36711
37172
  "color": {
36712
37173
  "red": {
36713
37174
  "20": {
@@ -95,6 +95,7 @@ module.exports = {
95
95
  "utrechtBodyColor": "hsl(0 0% 0%)",
96
96
  "utrechtBreadcrumbNavMinBlockSize": "34px",
97
97
  "utrechtBreadcrumbNavFontSize": "1rem",
98
+ "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
98
99
  "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
99
100
  "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
100
101
  "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -270,6 +271,17 @@ module.exports = {
270
271
  "utrechtCalendarNavigationLabelColor": "hsl(0 0% 0%)",
271
272
  "utrechtCalendarNavigationLabelFontSize": "1.125rem",
272
273
  "utrechtCalendarIconSize": "24px",
274
+ "utrechtCardBackgroundColor": "hsl(211 60% 90%)",
275
+ "utrechtCardColor": "hsl(0 0% 0%)",
276
+ "utrechtCardHeadingColor": "hsl(211 60% 35%)",
277
+ "utrechtCardHeadingPaddingInlineStart": "16px",
278
+ "utrechtCardHeadingPaddingInlineEnd": "16px",
279
+ "utrechtCardLinkHoverTextDecorationThickness": "3px",
280
+ "utrechtCardContentRowGap": "16px",
281
+ "utrechtCardContentPaddingBlockStart": "16px",
282
+ "utrechtCardContentPaddingBlockEnd": "16px",
283
+ "utrechtCardBodyPaddingInlineStart": "16px",
284
+ "utrechtCardBodyPaddingInlineEnd": "16px",
273
285
  "utrechtCheckboxBackgroundColor": "hsl(0 0% 100%)",
274
286
  "utrechtCheckboxBorderColor": "hsl(0 0% 30%)",
275
287
  "utrechtCheckboxBorderRadius": "0",
@@ -312,6 +312,7 @@
312
312
  --utrecht-checkbox-focus-border-width: 2px;
313
313
  --utrecht-checkbox-border-width: 2px;
314
314
  --utrecht-checkbox-border-radius: 0;
315
+ --utrecht-card-link-hover-text-decoration-thickness: 3px;
315
316
  --utrecht-calendar-table-weeks-item-width: 44px;
316
317
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
317
318
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
@@ -352,6 +353,7 @@
352
353
  --utrecht-breadcrumb-nav-link-text-decoration: none;
353
354
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
354
355
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
356
+ --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
355
357
  --utrecht-breadcrumb-nav-divider-inline-size: 1px;
356
358
  --utrecht-border-width-sm: 1px;
357
359
  --utrecht-border-width-md: 2px;
@@ -692,6 +694,16 @@
692
694
  --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
693
695
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
694
696
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
697
+ --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
698
+ --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
699
+ --utrecht-card-heading-color: var(--utrecht-color-blue-35);
700
+ --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
701
+ --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
702
+ --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
703
+ --utrecht-card-color: var(--utrecht-color-black);
704
+ --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
705
+ --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
706
+ --utrecht-card-background-color: var(--utrecht-color-blue-90);
695
707
  --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
696
708
  --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
697
709
  --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);
@@ -104,6 +104,7 @@ export const utrechtBodyBackgroundColor : string;
104
104
  export const utrechtBodyColor : string;
105
105
  export const utrechtBreadcrumbNavMinBlockSize : string;
106
106
  export const utrechtBreadcrumbNavFontSize : string;
107
+ export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
107
108
  export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
108
109
  export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
109
110
  export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;
@@ -280,6 +281,17 @@ export const utrechtCalendarNavigationLabelMinInlineSize : string;
280
281
  export const utrechtCalendarNavigationLabelColor : string;
281
282
  export const utrechtCalendarNavigationLabelFontSize : string;
282
283
  export const utrechtCalendarIconSize : string;
284
+ export const utrechtCardBackgroundColor : string;
285
+ export const utrechtCardColor : string;
286
+ export const utrechtCardHeadingColor : string;
287
+ export const utrechtCardHeadingPaddingInlineStart : string;
288
+ export const utrechtCardHeadingPaddingInlineEnd : string;
289
+ export const utrechtCardLinkHoverTextDecorationThickness : string;
290
+ export const utrechtCardContentRowGap : string;
291
+ export const utrechtCardContentPaddingBlockStart : string;
292
+ export const utrechtCardContentPaddingBlockEnd : string;
293
+ export const utrechtCardBodyPaddingInlineStart : string;
294
+ export const utrechtCardBodyPaddingInlineEnd : string;
283
295
  export const utrechtCheckboxBackgroundColor : string;
284
296
  export const utrechtCheckboxBorderColor : string;
285
297
  export const utrechtCheckboxBorderRadius : string;
@@ -223,6 +223,7 @@
223
223
  "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
224
224
  "utrechtBreadcrumbNavDividerInlineSize": "1px",
225
225
  "utrechtBreadcrumbNavFontSize": "1rem",
226
+ "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
226
227
  "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
227
228
  "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
228
229
  "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -394,6 +395,17 @@
394
395
  "utrechtCalendarTableWeeksItemPaddingBlockEnd": "10px",
395
396
  "utrechtCalendarTableWeeksItemPaddingBlockStart": "4px",
396
397
  "utrechtCalendarTableWeeksItemWidth": "44px",
398
+ "utrechtCardBackgroundColor": "hsl(211 60% 90%)",
399
+ "utrechtCardBodyPaddingInlineEnd": "16px",
400
+ "utrechtCardBodyPaddingInlineStart": "16px",
401
+ "utrechtCardColor": "hsl(0 0% 0%)",
402
+ "utrechtCardContentPaddingBlockEnd": "16px",
403
+ "utrechtCardContentPaddingBlockStart": "16px",
404
+ "utrechtCardContentRowGap": "16px",
405
+ "utrechtCardHeadingColor": "hsl(211 60% 35%)",
406
+ "utrechtCardHeadingPaddingInlineEnd": "16px",
407
+ "utrechtCardHeadingPaddingInlineStart": "16px",
408
+ "utrechtCardLinkHoverTextDecorationThickness": "3px",
397
409
  "utrechtCheckboxBackgroundColor": "hsl(0 0% 100%)",
398
410
  "utrechtCheckboxBorderColor": "hsl(0 0% 30%)",
399
411
  "utrechtCheckboxBorderRadius": "0",
@@ -335,6 +335,7 @@
335
335
  @utrecht-checkbox-size: 24px;
336
336
  @utrecht-checkbox-border-width: 2px;
337
337
  @utrecht-checkbox-border-radius: 0;
338
+ @utrecht-card-link-hover-text-decoration-thickness: 3px;
338
339
  @utrecht-calendar-icon-size: 24px;
339
340
  @utrecht-calendar-navigation-label-min-inline-size: 200px;
340
341
  @utrecht-calendar-navigation-padding-block-end: 2px;
@@ -375,6 +376,7 @@
375
376
  @utrecht-breadcrumb-nav-link-text-decoration: none;
376
377
  @utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
377
378
  @utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
379
+ @utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
378
380
  @utrecht-breadcrumb-nav-min-block-size: 34px;
379
381
  @utrecht-body-line-height: 1.4;
380
382
  @utrecht-blockquote-margin-block-end: 1.6em;
@@ -777,6 +779,16 @@
777
779
  @utrecht-checkbox-checked-border-color: @utrecht-color-blue-40;
778
780
  @utrecht-checkbox-disabled-background-color: @utrecht-color-grey-80;
779
781
  @utrecht-checkbox-disabled-border-color: @utrecht-color-grey-80;
782
+ @utrecht-card-body-padding-inline-end: @utrecht-space-inline-md;
783
+ @utrecht-card-body-padding-inline-start: @utrecht-space-inline-md;
784
+ @utrecht-card-content-padding-block-end: @utrecht-space-block-md;
785
+ @utrecht-card-content-padding-block-start: @utrecht-space-block-md;
786
+ @utrecht-card-content-row-gap: @utrecht-space-row-md;
787
+ @utrecht-card-heading-padding-inline-end: @utrecht-space-inline-md;
788
+ @utrecht-card-heading-padding-inline-start: @utrecht-space-inline-md;
789
+ @utrecht-card-heading-color: @utrecht-color-blue-35;
790
+ @utrecht-card-color: @utrecht-color-black;
791
+ @utrecht-card-background-color: @utrecht-color-blue-90;
780
792
  @utrecht-calendar-navigation-label-font-size: @utrecht-typography-scale-lg-font-size;
781
793
  @utrecht-calendar-navigation-label-color: @utrecht-color-black;
782
794
  @utrecht-calendar-navigation-color: @utrecht-color-blue-30;
@@ -94,6 +94,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
94
94
  export const utrechtBodyColor = "hsl(0 0% 0%)";
95
95
  export const utrechtBreadcrumbNavMinBlockSize = "34px";
96
96
  export const utrechtBreadcrumbNavFontSize = "1rem";
97
+ export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
97
98
  export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
98
99
  export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
99
100
  export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";
@@ -269,6 +270,17 @@ export const utrechtCalendarNavigationLabelMinInlineSize = "200px";
269
270
  export const utrechtCalendarNavigationLabelColor = "hsl(0 0% 0%)";
270
271
  export const utrechtCalendarNavigationLabelFontSize = "1.125rem";
271
272
  export const utrechtCalendarIconSize = "24px";
273
+ export const utrechtCardBackgroundColor = "hsl(211 60% 90%)";
274
+ export const utrechtCardColor = "hsl(0 0% 0%)";
275
+ export const utrechtCardHeadingColor = "hsl(211 60% 35%)";
276
+ export const utrechtCardHeadingPaddingInlineStart = "16px";
277
+ export const utrechtCardHeadingPaddingInlineEnd = "16px";
278
+ export const utrechtCardLinkHoverTextDecorationThickness = "3px";
279
+ export const utrechtCardContentRowGap = "16px";
280
+ export const utrechtCardContentPaddingBlockStart = "16px";
281
+ export const utrechtCardContentPaddingBlockEnd = "16px";
282
+ export const utrechtCardBodyPaddingInlineStart = "16px";
283
+ export const utrechtCardBodyPaddingInlineEnd = "16px";
272
284
  export const utrechtCheckboxBackgroundColor = "hsl(0 0% 100%)";
273
285
  export const utrechtCheckboxBorderColor = "hsl(0 0% 30%)";
274
286
  export const utrechtCheckboxBorderRadius = "0";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.0",
2
+ "version": "3.2.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "SEE LICENSE IN ./LICENSE.md",
@@ -13,6 +13,11 @@
13
13
  }
14
14
  },
15
15
  "item": {
16
+ "first": {
17
+ "padding-inline-start": {
18
+ "value": "0"
19
+ }
20
+ },
16
21
  "padding-block-start": {
17
22
  "value": "{utrecht.space.block.xs}"
18
23
  },