@utrecht/design-tokens 6.1.0 → 6.1.1

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 (53) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +2 -0
  3. package/dist/_mixin.scss +2 -0
  4. package/dist/_variables.scss +2 -0
  5. package/dist/dark/_mixin-theme.scss +2 -0
  6. package/dist/dark/_mixin.scss +2 -0
  7. package/dist/dark/_variables.scss +2 -0
  8. package/dist/dark/index.cjs +2 -0
  9. package/dist/dark/index.css +2 -0
  10. package/dist/dark/index.d.ts +2 -0
  11. package/dist/dark/index.flat.json +2 -0
  12. package/dist/dark/index.json +54 -0
  13. package/dist/dark/index.mjs +2 -0
  14. package/dist/dark/index.tokens.json +2 -0
  15. package/dist/dark/list.json +54 -0
  16. package/dist/dark/list.mjs +54 -0
  17. package/dist/dark/property.css +2 -0
  18. package/dist/dark/root.css +2 -0
  19. package/dist/dark/theme-prince-xml.css +2 -0
  20. package/dist/dark/theme.css +2 -0
  21. package/dist/dark/tokens.cjs +46 -0
  22. package/dist/dark/tokens.d.ts +2 -0
  23. package/dist/dark/tokens.json +54 -0
  24. package/dist/dark/variables.cjs +2 -0
  25. package/dist/dark/variables.css +2 -0
  26. package/dist/dark/variables.d.ts +2 -0
  27. package/dist/dark/variables.json +2 -0
  28. package/dist/dark/variables.less +2 -0
  29. package/dist/dark/variables.mjs +2 -0
  30. package/dist/index.cjs +2 -0
  31. package/dist/index.css +4 -0
  32. package/dist/index.d.ts +2 -0
  33. package/dist/index.flat.json +2 -0
  34. package/dist/index.json +54 -0
  35. package/dist/index.mjs +2 -0
  36. package/dist/index.tokens.json +2 -0
  37. package/dist/list.json +54 -0
  38. package/dist/list.mjs +54 -0
  39. package/dist/property.css +2 -0
  40. package/dist/root.css +2 -0
  41. package/dist/theme-prince-xml.css +2 -0
  42. package/dist/theme.css +2 -0
  43. package/dist/tokens.cjs +46 -0
  44. package/dist/tokens.d.ts +2 -0
  45. package/dist/tokens.json +54 -0
  46. package/dist/variables.cjs +2 -0
  47. package/dist/variables.css +2 -0
  48. package/dist/variables.d.ts +2 -0
  49. package/dist/variables.json +2 -0
  50. package/dist/variables.less +2 -0
  51. package/dist/variables.mjs +2 -0
  52. package/package.json +1 -1
  53. package/src/component/utrecht/nav-bar.tokens.json +6 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 6.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 57dee78: Specify background color for Navigation Bar to support sticky positioning.
8
+
3
9
  ## 6.1.0
4
10
 
5
11
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -823,6 +823,8 @@
823
823
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
825
825
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
826
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
827
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
826
828
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
827
829
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
828
830
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/_mixin.scss CHANGED
@@ -823,6 +823,8 @@
823
823
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
825
825
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
826
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
827
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
826
828
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
827
829
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
828
830
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/_variables.scss CHANGED
@@ -821,6 +821,8 @@ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
821
821
  $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
822
822
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
823
823
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
824
+ $utrecht-nav-bar-background-color: $utrecht-color-white;
825
+ $utrecht-nav-bar-color: $utrecht-color-black;
824
826
  $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
825
827
  $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
826
828
  $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -822,6 +822,8 @@
822
822
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
823
823
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
825
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
826
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
825
827
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
826
828
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
827
829
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/_mixin.scss CHANGED
@@ -822,6 +822,8 @@
822
822
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
823
823
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
825
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
826
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
825
827
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
826
828
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
827
829
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/_variables.scss CHANGED
@@ -820,6 +820,8 @@ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
820
820
  $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
821
821
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
822
822
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
823
+ $utrecht-nav-bar-background-color: $utrecht-color-white;
824
+ $utrecht-nav-bar-color: $utrecht-color-black;
823
825
  $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
824
826
  $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
825
827
  $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
package/dist/dark/index.cjs CHANGED
@@ -690,6 +690,8 @@ module.exports = {
690
690
  utrechtMapcontrolbuttonPaddingInlineStart: "4px",
691
691
  utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
692
692
  utrechtMarkColor: "hsl(0 0% 0%)",
693
+ utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
694
+ utrechtNavBarColor: "hsl(0 0% 0%)",
693
695
  utrechtNavBarContentMaxInlineSize: "1184px",
694
696
  utrechtNavBarLinkPaddingBlockEnd: "8px",
695
697
  utrechtNavBarLinkPaddingBlockStart: "8px",
package/dist/dark/index.css CHANGED
@@ -828,6 +828,8 @@
828
828
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
829
829
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
830
830
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
831
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
832
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
831
833
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
832
834
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
833
835
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/index.d.ts CHANGED
@@ -756,6 +756,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd: string;
756
756
  export const utrechtMapcontrolbuttonPaddingInlineStart: string;
757
757
  export const utrechtMarkBackgroundColor: string;
758
758
  export const utrechtMarkColor: string;
759
+ export const utrechtNavBarBackgroundColor: string;
760
+ export const utrechtNavBarColor: string;
759
761
  export const utrechtNavBarContentMaxInlineSize: string;
760
762
  export const utrechtNavBarLinkPaddingBlockEnd: string;
761
763
  export const utrechtNavBarLinkPaddingBlockStart: string;
package/dist/dark/index.flat.json CHANGED
@@ -810,6 +810,8 @@
810
810
  "utrechtMarkColor": "hsl(0 0% 0%)",
811
811
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
812
812
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
813
+ "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
814
+ "utrechtNavBarColor": "hsl(0 0% 0%)",
813
815
  "utrechtNavBarContentMaxInlineSize": "1184px",
814
816
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
815
817
  "utrechtNavBarLinkPaddingBlockStart": "8px",
package/dist/dark/index.json CHANGED
@@ -20465,6 +20465,60 @@
20465
20465
  "color"
20466
20466
  ]
20467
20467
  },
20468
+ {
20469
+ "key": "{utrecht.nav-bar.background-color}",
20470
+ "$extensions": {
20471
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20472
+ "nl.nldesignsystem.figma-implementation": false
20473
+ },
20474
+ "$type": "color",
20475
+ "$value": "hsl(0 0% 100%)",
20476
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20477
+ "isSource": true,
20478
+ "original": {
20479
+ "$extensions": {
20480
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20481
+ "nl.nldesignsystem.figma-implementation": false
20482
+ },
20483
+ "$type": "color",
20484
+ "$value": "{utrecht.color.white}",
20485
+ "key": "{utrecht.nav-bar.background-color}"
20486
+ },
20487
+ "name": "utrechtNavBarBackgroundColor",
20488
+ "attributes": {},
20489
+ "path": [
20490
+ "utrecht",
20491
+ "nav-bar",
20492
+ "background-color"
20493
+ ]
20494
+ },
20495
+ {
20496
+ "key": "{utrecht.nav-bar.color}",
20497
+ "$extensions": {
20498
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20499
+ "nl.nldesignsystem.figma-implementation": false
20500
+ },
20501
+ "$type": "color",
20502
+ "$value": "hsl(0 0% 0%)",
20503
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20504
+ "isSource": true,
20505
+ "original": {
20506
+ "$extensions": {
20507
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20508
+ "nl.nldesignsystem.figma-implementation": false
20509
+ },
20510
+ "$type": "color",
20511
+ "$value": "{utrecht.color.black}",
20512
+ "key": "{utrecht.nav-bar.color}"
20513
+ },
20514
+ "name": "utrechtNavBarColor",
20515
+ "attributes": {},
20516
+ "path": [
20517
+ "utrecht",
20518
+ "nav-bar",
20519
+ "color"
20520
+ ]
20521
+ },
20468
20522
  {
20469
20523
  "key": "{utrecht.nav-bar.content.max-inline-size}",
20470
20524
  "$extensions": {
package/dist/dark/index.mjs CHANGED
@@ -744,6 +744,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
744
744
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
745
745
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
746
746
  export const utrechtMarkColor = "hsl(0 0% 0%)";
747
+ export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
748
+ export const utrechtNavBarColor = "hsl(0 0% 0%)";
747
749
  export const utrechtNavBarContentMaxInlineSize = "1184px";
748
750
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
749
751
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
package/dist/dark/index.tokens.json CHANGED
@@ -1224,6 +1224,8 @@
1224
1224
  "color": "hsl(0 0% 0%)"
1225
1225
  },
1226
1226
  "nav-bar": {
1227
+ "background-color": "hsl(0 0% 100%)",
1228
+ "color": "hsl(0 0% 0%)",
1227
1229
  "content": {
1228
1230
  "max-inline-size": "1184px"
1229
1231
  },
package/dist/dark/list.json CHANGED
@@ -20465,6 +20465,60 @@
20465
20465
  "color"
20466
20466
  ]
20467
20467
  },
20468
+ {
20469
+ "key": "{utrecht.nav-bar.background-color}",
20470
+ "$extensions": {
20471
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20472
+ "nl.nldesignsystem.figma-implementation": false
20473
+ },
20474
+ "$type": "color",
20475
+ "$value": "hsl(0 0% 100%)",
20476
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20477
+ "isSource": true,
20478
+ "original": {
20479
+ "$extensions": {
20480
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20481
+ "nl.nldesignsystem.figma-implementation": false
20482
+ },
20483
+ "$type": "color",
20484
+ "$value": "{utrecht.color.white}",
20485
+ "key": "{utrecht.nav-bar.background-color}"
20486
+ },
20487
+ "name": "utrechtNavBarBackgroundColor",
20488
+ "attributes": {},
20489
+ "path": [
20490
+ "utrecht",
20491
+ "nav-bar",
20492
+ "background-color"
20493
+ ]
20494
+ },
20495
+ {
20496
+ "key": "{utrecht.nav-bar.color}",
20497
+ "$extensions": {
20498
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20499
+ "nl.nldesignsystem.figma-implementation": false
20500
+ },
20501
+ "$type": "color",
20502
+ "$value": "hsl(0 0% 0%)",
20503
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20504
+ "isSource": true,
20505
+ "original": {
20506
+ "$extensions": {
20507
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20508
+ "nl.nldesignsystem.figma-implementation": false
20509
+ },
20510
+ "$type": "color",
20511
+ "$value": "{utrecht.color.black}",
20512
+ "key": "{utrecht.nav-bar.color}"
20513
+ },
20514
+ "name": "utrechtNavBarColor",
20515
+ "attributes": {},
20516
+ "path": [
20517
+ "utrecht",
20518
+ "nav-bar",
20519
+ "color"
20520
+ ]
20521
+ },
20468
20522
  {
20469
20523
  "key": "{utrecht.nav-bar.content.max-inline-size}",
20470
20524
  "$extensions": {
package/dist/dark/list.mjs CHANGED
@@ -20465,6 +20465,60 @@ export default [
20465
20465
  "color"
20466
20466
  ]
20467
20467
  },
20468
+ {
20469
+ "key": "{utrecht.nav-bar.background-color}",
20470
+ "$extensions": {
20471
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20472
+ "nl.nldesignsystem.figma-implementation": false
20473
+ },
20474
+ "$type": "color",
20475
+ "$value": "hsl(0 0% 100%)",
20476
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20477
+ "isSource": true,
20478
+ "original": {
20479
+ "$extensions": {
20480
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20481
+ "nl.nldesignsystem.figma-implementation": false
20482
+ },
20483
+ "$type": "color",
20484
+ "$value": "{utrecht.color.white}",
20485
+ "key": "{utrecht.nav-bar.background-color}"
20486
+ },
20487
+ "name": "utrechtNavBarBackgroundColor",
20488
+ "attributes": {},
20489
+ "path": [
20490
+ "utrecht",
20491
+ "nav-bar",
20492
+ "background-color"
20493
+ ]
20494
+ },
20495
+ {
20496
+ "key": "{utrecht.nav-bar.color}",
20497
+ "$extensions": {
20498
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20499
+ "nl.nldesignsystem.figma-implementation": false
20500
+ },
20501
+ "$type": "color",
20502
+ "$value": "hsl(0 0% 0%)",
20503
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
20504
+ "isSource": true,
20505
+ "original": {
20506
+ "$extensions": {
20507
+ "nl.nldesignsystem.css-property-syntax": "<color>",
20508
+ "nl.nldesignsystem.figma-implementation": false
20509
+ },
20510
+ "$type": "color",
20511
+ "$value": "{utrecht.color.black}",
20512
+ "key": "{utrecht.nav-bar.color}"
20513
+ },
20514
+ "name": "utrechtNavBarColor",
20515
+ "attributes": {},
20516
+ "path": [
20517
+ "utrecht",
20518
+ "nav-bar",
20519
+ "color"
20520
+ ]
20521
+ },
20468
20522
  {
20469
20523
  "key": "{utrecht.nav-bar.content.max-inline-size}",
20470
20524
  "$extensions": {
package/dist/dark/property.css CHANGED
@@ -488,6 +488,8 @@
488
488
  @property --utrecht-mapcontrolbutton-min-inline-size { syntax: '<length>'; inherits: true; }
489
489
  @property --utrecht-mark-background-color { syntax: '<color>'; inherits: true; }
490
490
  @property --utrecht-mark-color { syntax: '<color>'; inherits: true; }
491
+ @property --utrecht-nav-bar-background-color { syntax: '<color>'; inherits: true; }
492
+ @property --utrecht-nav-bar-color { syntax: '<color>'; inherits: true; }
491
493
  @property --utrecht-nav-bar-content-max-inline-size { syntax: '<length>'; inherits: true; }
492
494
  @property --utrecht-nav-bar-link-padding-block-end { syntax: '<length>'; inherits: true; }
493
495
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
package/dist/dark/root.css CHANGED
@@ -911,6 +911,8 @@
911
911
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
912
912
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
913
913
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
914
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
915
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
914
916
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
915
917
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
916
918
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/theme-prince-xml.css CHANGED
@@ -822,6 +822,8 @@
822
822
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
823
823
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
825
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
826
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
825
827
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
826
828
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
827
829
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/theme.css CHANGED
@@ -911,6 +911,8 @@
911
911
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
912
912
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
913
913
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
914
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
915
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
914
916
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
915
917
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
916
918
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/tokens.cjs CHANGED
@@ -16084,6 +16084,52 @@ module.exports = {
16084
16084
  },
16085
16085
  },
16086
16086
  "nav-bar": {
16087
+ "background-color": {
16088
+ key: "{utrecht.nav-bar.background-color}",
16089
+ $extensions: {
16090
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16091
+ "nl.nldesignsystem.figma-implementation": false,
16092
+ },
16093
+ $type: "color",
16094
+ $value: "hsl(0 0% 100%)",
16095
+ filePath: "src/component/utrecht/nav-bar.tokens.json",
16096
+ isSource: true,
16097
+ original: {
16098
+ $extensions: {
16099
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16100
+ "nl.nldesignsystem.figma-implementation": false,
16101
+ },
16102
+ $type: "color",
16103
+ $value: "{utrecht.color.white}",
16104
+ key: "{utrecht.nav-bar.background-color}",
16105
+ },
16106
+ name: "background-color",
16107
+ attributes: {},
16108
+ path: ["utrecht", "nav-bar", "background-color"],
16109
+ },
16110
+ color: {
16111
+ key: "{utrecht.nav-bar.color}",
16112
+ $extensions: {
16113
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16114
+ "nl.nldesignsystem.figma-implementation": false,
16115
+ },
16116
+ $type: "color",
16117
+ $value: "hsl(0 0% 0%)",
16118
+ filePath: "src/component/utrecht/nav-bar.tokens.json",
16119
+ isSource: true,
16120
+ original: {
16121
+ $extensions: {
16122
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16123
+ "nl.nldesignsystem.figma-implementation": false,
16124
+ },
16125
+ $type: "color",
16126
+ $value: "{utrecht.color.black}",
16127
+ key: "{utrecht.nav-bar.color}",
16128
+ },
16129
+ name: "color",
16130
+ attributes: {},
16131
+ path: ["utrecht", "nav-bar", "color"],
16132
+ },
16087
16133
  content: {
16088
16134
  "max-inline-size": {
16089
16135
  key: "{utrecht.nav-bar.content.max-inline-size}",
package/dist/dark/tokens.d.ts CHANGED
@@ -1240,6 +1240,8 @@ declare const tokens: {
1240
1240
  color: DesignToken;
1241
1241
  };
1242
1242
  "nav-bar": {
1243
+ "background-color": DesignToken;
1244
+ color: DesignToken;
1243
1245
  content: {
1244
1246
  "max-inline-size": DesignToken;
1245
1247
  };
package/dist/dark/tokens.json CHANGED
@@ -18877,6 +18877,60 @@
18877
18877
  }
18878
18878
  },
18879
18879
  "nav-bar": {
18880
+ "background-color": {
18881
+ "key": "{utrecht.nav-bar.background-color}",
18882
+ "$extensions": {
18883
+ "nl.nldesignsystem.css-property-syntax": "<color>",
18884
+ "nl.nldesignsystem.figma-implementation": false
18885
+ },
18886
+ "$type": "color",
18887
+ "$value": "hsl(0 0% 100%)",
18888
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
18889
+ "isSource": true,
18890
+ "original": {
18891
+ "$extensions": {
18892
+ "nl.nldesignsystem.css-property-syntax": "<color>",
18893
+ "nl.nldesignsystem.figma-implementation": false
18894
+ },
18895
+ "$type": "color",
18896
+ "$value": "{utrecht.color.white}",
18897
+ "key": "{utrecht.nav-bar.background-color}"
18898
+ },
18899
+ "name": "utrechtNavBarBackgroundColor",
18900
+ "attributes": {},
18901
+ "path": [
18902
+ "utrecht",
18903
+ "nav-bar",
18904
+ "background-color"
18905
+ ]
18906
+ },
18907
+ "color": {
18908
+ "key": "{utrecht.nav-bar.color}",
18909
+ "$extensions": {
18910
+ "nl.nldesignsystem.css-property-syntax": "<color>",
18911
+ "nl.nldesignsystem.figma-implementation": false
18912
+ },
18913
+ "$type": "color",
18914
+ "$value": "hsl(0 0% 0%)",
18915
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
18916
+ "isSource": true,
18917
+ "original": {
18918
+ "$extensions": {
18919
+ "nl.nldesignsystem.css-property-syntax": "<color>",
18920
+ "nl.nldesignsystem.figma-implementation": false
18921
+ },
18922
+ "$type": "color",
18923
+ "$value": "{utrecht.color.black}",
18924
+ "key": "{utrecht.nav-bar.color}"
18925
+ },
18926
+ "name": "utrechtNavBarColor",
18927
+ "attributes": {},
18928
+ "path": [
18929
+ "utrecht",
18930
+ "nav-bar",
18931
+ "color"
18932
+ ]
18933
+ },
18880
18934
  "content": {
18881
18935
  "max-inline-size": {
18882
18936
  "key": "{utrecht.nav-bar.content.max-inline-size}",
package/dist/dark/variables.cjs CHANGED
@@ -690,6 +690,8 @@ module.exports = {
690
690
  utrechtMapcontrolbuttonPaddingInlineStart: "4px",
691
691
  utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
692
692
  utrechtMarkColor: "hsl(0 0% 0%)",
693
+ utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
694
+ utrechtNavBarColor: "hsl(0 0% 0%)",
693
695
  utrechtNavBarContentMaxInlineSize: "1184px",
694
696
  utrechtNavBarLinkPaddingBlockEnd: "8px",
695
697
  utrechtNavBarLinkPaddingBlockStart: "8px",
package/dist/dark/variables.css CHANGED
@@ -911,6 +911,8 @@
911
911
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
912
912
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
913
913
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
914
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
915
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
914
916
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
915
917
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
916
918
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/dark/variables.d.ts CHANGED
@@ -756,6 +756,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd: string;
756
756
  export const utrechtMapcontrolbuttonPaddingInlineStart: string;
757
757
  export const utrechtMarkBackgroundColor: string;
758
758
  export const utrechtMarkColor: string;
759
+ export const utrechtNavBarBackgroundColor: string;
760
+ export const utrechtNavBarColor: string;
759
761
  export const utrechtNavBarContentMaxInlineSize: string;
760
762
  export const utrechtNavBarLinkPaddingBlockEnd: string;
761
763
  export const utrechtNavBarLinkPaddingBlockStart: string;
package/dist/dark/variables.json CHANGED
@@ -810,6 +810,8 @@
810
810
  "utrechtMarkColor": "hsl(0 0% 0%)",
811
811
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
812
812
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
813
+ "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
814
+ "utrechtNavBarColor": "hsl(0 0% 0%)",
813
815
  "utrechtNavBarContentMaxInlineSize": "1184px",
814
816
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
815
817
  "utrechtNavBarLinkPaddingBlockStart": "8px",
package/dist/dark/variables.less CHANGED
@@ -820,6 +820,8 @@
820
820
  @utrecht-mapcontrolbutton-padding-block-start: @utrecht-space-block-2xs;
821
821
  @utrecht-mapcontrolbutton-padding-inline-end: @utrecht-space-inline-2xs;
822
822
  @utrecht-mapcontrolbutton-padding-inline-start: @utrecht-space-inline-2xs;
823
+ @utrecht-nav-bar-background-color: @utrecht-color-white;
824
+ @utrecht-nav-bar-color: @utrecht-color-black;
823
825
  @utrecht-nav-bar-content-max-inline-size: @utrecht-page-max-inline-size;
824
826
  @utrecht-nav-bar-link-padding-block-end: @utrecht-space-block-xs;
825
827
  @utrecht-nav-bar-link-padding-block-start: @utrecht-space-block-xs;
package/dist/dark/variables.mjs CHANGED
@@ -744,6 +744,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
744
744
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
745
745
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
746
746
  export const utrechtMarkColor = "hsl(0 0% 0%)";
747
+ export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
748
+ export const utrechtNavBarColor = "hsl(0 0% 0%)";
747
749
  export const utrechtNavBarContentMaxInlineSize = "1184px";
748
750
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
749
751
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
package/dist/index.cjs CHANGED
@@ -681,6 +681,8 @@ module.exports = {
681
681
  utrechtMapcontrolbuttonPaddingInlineStart: "4px",
682
682
  utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
683
683
  utrechtMarkColor: "hsl(0 0% 0%)",
684
+ utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
685
+ utrechtNavBarColor: "hsl(0 0% 0%)",
684
686
  utrechtNavBarContentMaxInlineSize: "1184px",
685
687
  utrechtNavBarLinkPaddingBlockEnd: "8px",
686
688
  utrechtNavBarLinkPaddingBlockStart: "8px",
package/dist/index.css CHANGED
@@ -851,6 +851,8 @@
851
851
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
852
852
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
853
853
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
854
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
855
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
854
856
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
855
857
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
856
858
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -2137,6 +2139,8 @@
2137
2139
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
2138
2140
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
2139
2141
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
2142
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
2143
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
2140
2144
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
2141
2145
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
2142
2146
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/index.d.ts CHANGED
@@ -747,6 +747,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd: string;
747
747
  export const utrechtMapcontrolbuttonPaddingInlineStart: string;
748
748
  export const utrechtMarkBackgroundColor: string;
749
749
  export const utrechtMarkColor: string;
750
+ export const utrechtNavBarBackgroundColor: string;
751
+ export const utrechtNavBarColor: string;
750
752
  export const utrechtNavBarContentMaxInlineSize: string;
751
753
  export const utrechtNavBarLinkPaddingBlockEnd: string;
752
754
  export const utrechtNavBarLinkPaddingBlockStart: string;
package/dist/index.flat.json CHANGED
@@ -801,6 +801,8 @@
801
801
  "utrechtMarkColor": "hsl(0 0% 0%)",
802
802
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
803
803
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
804
+ "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
805
+ "utrechtNavBarColor": "hsl(0 0% 0%)",
804
806
  "utrechtNavBarContentMaxInlineSize": "1184px",
805
807
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
806
808
  "utrechtNavBarLinkPaddingBlockStart": "8px",
package/dist/index.json CHANGED
@@ -21128,6 +21128,60 @@
21128
21128
  "color"
21129
21129
  ]
21130
21130
  },
21131
+ {
21132
+ "key": "{utrecht.nav-bar.background-color}",
21133
+ "$extensions": {
21134
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21135
+ "nl.nldesignsystem.figma-implementation": false
21136
+ },
21137
+ "$type": "color",
21138
+ "$value": "hsl(0 0% 100%)",
21139
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21140
+ "isSource": true,
21141
+ "original": {
21142
+ "$extensions": {
21143
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21144
+ "nl.nldesignsystem.figma-implementation": false
21145
+ },
21146
+ "$type": "color",
21147
+ "$value": "{utrecht.color.white}",
21148
+ "key": "{utrecht.nav-bar.background-color}"
21149
+ },
21150
+ "name": "utrechtNavBarBackgroundColor",
21151
+ "attributes": {},
21152
+ "path": [
21153
+ "utrecht",
21154
+ "nav-bar",
21155
+ "background-color"
21156
+ ]
21157
+ },
21158
+ {
21159
+ "key": "{utrecht.nav-bar.color}",
21160
+ "$extensions": {
21161
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21162
+ "nl.nldesignsystem.figma-implementation": false
21163
+ },
21164
+ "$type": "color",
21165
+ "$value": "hsl(0 0% 0%)",
21166
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21167
+ "isSource": true,
21168
+ "original": {
21169
+ "$extensions": {
21170
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21171
+ "nl.nldesignsystem.figma-implementation": false
21172
+ },
21173
+ "$type": "color",
21174
+ "$value": "{utrecht.color.black}",
21175
+ "key": "{utrecht.nav-bar.color}"
21176
+ },
21177
+ "name": "utrechtNavBarColor",
21178
+ "attributes": {},
21179
+ "path": [
21180
+ "utrecht",
21181
+ "nav-bar",
21182
+ "color"
21183
+ ]
21184
+ },
21131
21185
  {
21132
21186
  "key": "{utrecht.nav-bar.content.max-inline-size}",
21133
21187
  "$extensions": {
package/dist/index.mjs CHANGED
@@ -731,6 +731,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
731
731
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
732
732
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
733
733
  export const utrechtMarkColor = "hsl(0 0% 0%)";
734
+ export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
735
+ export const utrechtNavBarColor = "hsl(0 0% 0%)";
734
736
  export const utrechtNavBarContentMaxInlineSize = "1184px";
735
737
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
736
738
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
package/dist/index.tokens.json CHANGED
@@ -1213,6 +1213,8 @@
1213
1213
  "color": "hsl(0 0% 0%)"
1214
1214
  },
1215
1215
  "nav-bar": {
1216
+ "background-color": "hsl(0 0% 100%)",
1217
+ "color": "hsl(0 0% 0%)",
1216
1218
  "content": {
1217
1219
  "max-inline-size": "1184px"
1218
1220
  },
package/dist/list.json CHANGED
@@ -21128,6 +21128,60 @@
21128
21128
  "color"
21129
21129
  ]
21130
21130
  },
21131
+ {
21132
+ "key": "{utrecht.nav-bar.background-color}",
21133
+ "$extensions": {
21134
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21135
+ "nl.nldesignsystem.figma-implementation": false
21136
+ },
21137
+ "$type": "color",
21138
+ "$value": "hsl(0 0% 100%)",
21139
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21140
+ "isSource": true,
21141
+ "original": {
21142
+ "$extensions": {
21143
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21144
+ "nl.nldesignsystem.figma-implementation": false
21145
+ },
21146
+ "$type": "color",
21147
+ "$value": "{utrecht.color.white}",
21148
+ "key": "{utrecht.nav-bar.background-color}"
21149
+ },
21150
+ "name": "utrechtNavBarBackgroundColor",
21151
+ "attributes": {},
21152
+ "path": [
21153
+ "utrecht",
21154
+ "nav-bar",
21155
+ "background-color"
21156
+ ]
21157
+ },
21158
+ {
21159
+ "key": "{utrecht.nav-bar.color}",
21160
+ "$extensions": {
21161
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21162
+ "nl.nldesignsystem.figma-implementation": false
21163
+ },
21164
+ "$type": "color",
21165
+ "$value": "hsl(0 0% 0%)",
21166
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21167
+ "isSource": true,
21168
+ "original": {
21169
+ "$extensions": {
21170
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21171
+ "nl.nldesignsystem.figma-implementation": false
21172
+ },
21173
+ "$type": "color",
21174
+ "$value": "{utrecht.color.black}",
21175
+ "key": "{utrecht.nav-bar.color}"
21176
+ },
21177
+ "name": "utrechtNavBarColor",
21178
+ "attributes": {},
21179
+ "path": [
21180
+ "utrecht",
21181
+ "nav-bar",
21182
+ "color"
21183
+ ]
21184
+ },
21131
21185
  {
21132
21186
  "key": "{utrecht.nav-bar.content.max-inline-size}",
21133
21187
  "$extensions": {
package/dist/list.mjs CHANGED
@@ -21128,6 +21128,60 @@ export default [
21128
21128
  "color"
21129
21129
  ]
21130
21130
  },
21131
+ {
21132
+ "key": "{utrecht.nav-bar.background-color}",
21133
+ "$extensions": {
21134
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21135
+ "nl.nldesignsystem.figma-implementation": false
21136
+ },
21137
+ "$type": "color",
21138
+ "$value": "hsl(0 0% 100%)",
21139
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21140
+ "isSource": true,
21141
+ "original": {
21142
+ "$extensions": {
21143
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21144
+ "nl.nldesignsystem.figma-implementation": false
21145
+ },
21146
+ "$type": "color",
21147
+ "$value": "{utrecht.color.white}",
21148
+ "key": "{utrecht.nav-bar.background-color}"
21149
+ },
21150
+ "name": "utrechtNavBarBackgroundColor",
21151
+ "attributes": {},
21152
+ "path": [
21153
+ "utrecht",
21154
+ "nav-bar",
21155
+ "background-color"
21156
+ ]
21157
+ },
21158
+ {
21159
+ "key": "{utrecht.nav-bar.color}",
21160
+ "$extensions": {
21161
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21162
+ "nl.nldesignsystem.figma-implementation": false
21163
+ },
21164
+ "$type": "color",
21165
+ "$value": "hsl(0 0% 0%)",
21166
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
21167
+ "isSource": true,
21168
+ "original": {
21169
+ "$extensions": {
21170
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21171
+ "nl.nldesignsystem.figma-implementation": false
21172
+ },
21173
+ "$type": "color",
21174
+ "$value": "{utrecht.color.black}",
21175
+ "key": "{utrecht.nav-bar.color}"
21176
+ },
21177
+ "name": "utrechtNavBarColor",
21178
+ "attributes": {},
21179
+ "path": [
21180
+ "utrecht",
21181
+ "nav-bar",
21182
+ "color"
21183
+ ]
21184
+ },
21131
21185
  {
21132
21186
  "key": "{utrecht.nav-bar.content.max-inline-size}",
21133
21187
  "$extensions": {
package/dist/property.css CHANGED
@@ -547,6 +547,8 @@
547
547
  @property --utrecht-mapcontrolbutton-min-inline-size { syntax: '<length>'; inherits: true; }
548
548
  @property --utrecht-mark-background-color { syntax: '<color>'; inherits: true; }
549
549
  @property --utrecht-mark-color { syntax: '<color>'; inherits: true; }
550
+ @property --utrecht-nav-bar-background-color { syntax: '<color>'; inherits: true; }
551
+ @property --utrecht-nav-bar-color { syntax: '<color>'; inherits: true; }
550
552
  @property --utrecht-nav-bar-content-max-inline-size { syntax: '<length>'; inherits: true; }
551
553
  @property --utrecht-nav-bar-link-padding-block-end { syntax: '<length>'; inherits: true; }
552
554
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
package/dist/root.css CHANGED
@@ -912,6 +912,8 @@
912
912
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
913
913
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
914
914
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
915
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
916
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
915
917
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
916
918
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
917
919
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/theme-prince-xml.css CHANGED
@@ -823,6 +823,8 @@
823
823
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
824
824
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
825
825
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
826
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
827
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
826
828
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
827
829
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
828
830
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/theme.css CHANGED
@@ -912,6 +912,8 @@
912
912
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
913
913
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
914
914
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
915
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
916
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
915
917
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
916
918
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
917
919
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/tokens.cjs CHANGED
@@ -16671,6 +16671,52 @@ module.exports = {
16671
16671
  },
16672
16672
  },
16673
16673
  "nav-bar": {
16674
+ "background-color": {
16675
+ key: "{utrecht.nav-bar.background-color}",
16676
+ $extensions: {
16677
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16678
+ "nl.nldesignsystem.figma-implementation": false,
16679
+ },
16680
+ $type: "color",
16681
+ $value: "hsl(0 0% 100%)",
16682
+ filePath: "src/component/utrecht/nav-bar.tokens.json",
16683
+ isSource: true,
16684
+ original: {
16685
+ $extensions: {
16686
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16687
+ "nl.nldesignsystem.figma-implementation": false,
16688
+ },
16689
+ $type: "color",
16690
+ $value: "{utrecht.color.white}",
16691
+ key: "{utrecht.nav-bar.background-color}",
16692
+ },
16693
+ name: "background-color",
16694
+ attributes: {},
16695
+ path: ["utrecht", "nav-bar", "background-color"],
16696
+ },
16697
+ color: {
16698
+ key: "{utrecht.nav-bar.color}",
16699
+ $extensions: {
16700
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16701
+ "nl.nldesignsystem.figma-implementation": false,
16702
+ },
16703
+ $type: "color",
16704
+ $value: "hsl(0 0% 0%)",
16705
+ filePath: "src/component/utrecht/nav-bar.tokens.json",
16706
+ isSource: true,
16707
+ original: {
16708
+ $extensions: {
16709
+ "nl.nldesignsystem.css-property-syntax": "<color>",
16710
+ "nl.nldesignsystem.figma-implementation": false,
16711
+ },
16712
+ $type: "color",
16713
+ $value: "{utrecht.color.black}",
16714
+ key: "{utrecht.nav-bar.color}",
16715
+ },
16716
+ name: "color",
16717
+ attributes: {},
16718
+ path: ["utrecht", "nav-bar", "color"],
16719
+ },
16674
16720
  content: {
16675
16721
  "max-inline-size": {
16676
16722
  key: "{utrecht.nav-bar.content.max-inline-size}",
package/dist/tokens.d.ts CHANGED
@@ -1229,6 +1229,8 @@ declare const tokens: {
1229
1229
  color: DesignToken;
1230
1230
  };
1231
1231
  "nav-bar": {
1232
+ "background-color": DesignToken;
1233
+ color: DesignToken;
1232
1234
  content: {
1233
1235
  "max-inline-size": DesignToken;
1234
1236
  };
package/dist/tokens.json CHANGED
@@ -19538,6 +19538,60 @@
19538
19538
  }
19539
19539
  },
19540
19540
  "nav-bar": {
19541
+ "background-color": {
19542
+ "key": "{utrecht.nav-bar.background-color}",
19543
+ "$extensions": {
19544
+ "nl.nldesignsystem.css-property-syntax": "<color>",
19545
+ "nl.nldesignsystem.figma-implementation": false
19546
+ },
19547
+ "$type": "color",
19548
+ "$value": "hsl(0 0% 100%)",
19549
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
19550
+ "isSource": true,
19551
+ "original": {
19552
+ "$extensions": {
19553
+ "nl.nldesignsystem.css-property-syntax": "<color>",
19554
+ "nl.nldesignsystem.figma-implementation": false
19555
+ },
19556
+ "$type": "color",
19557
+ "$value": "{utrecht.color.white}",
19558
+ "key": "{utrecht.nav-bar.background-color}"
19559
+ },
19560
+ "name": "utrechtNavBarBackgroundColor",
19561
+ "attributes": {},
19562
+ "path": [
19563
+ "utrecht",
19564
+ "nav-bar",
19565
+ "background-color"
19566
+ ]
19567
+ },
19568
+ "color": {
19569
+ "key": "{utrecht.nav-bar.color}",
19570
+ "$extensions": {
19571
+ "nl.nldesignsystem.css-property-syntax": "<color>",
19572
+ "nl.nldesignsystem.figma-implementation": false
19573
+ },
19574
+ "$type": "color",
19575
+ "$value": "hsl(0 0% 0%)",
19576
+ "filePath": "src/component/utrecht/nav-bar.tokens.json",
19577
+ "isSource": true,
19578
+ "original": {
19579
+ "$extensions": {
19580
+ "nl.nldesignsystem.css-property-syntax": "<color>",
19581
+ "nl.nldesignsystem.figma-implementation": false
19582
+ },
19583
+ "$type": "color",
19584
+ "$value": "{utrecht.color.black}",
19585
+ "key": "{utrecht.nav-bar.color}"
19586
+ },
19587
+ "name": "utrechtNavBarColor",
19588
+ "attributes": {},
19589
+ "path": [
19590
+ "utrecht",
19591
+ "nav-bar",
19592
+ "color"
19593
+ ]
19594
+ },
19541
19595
  "content": {
19542
19596
  "max-inline-size": {
19543
19597
  "key": "{utrecht.nav-bar.content.max-inline-size}",
package/dist/variables.cjs CHANGED
@@ -681,6 +681,8 @@ module.exports = {
681
681
  utrechtMapcontrolbuttonPaddingInlineStart: "4px",
682
682
  utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
683
683
  utrechtMarkColor: "hsl(0 0% 0%)",
684
+ utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
685
+ utrechtNavBarColor: "hsl(0 0% 0%)",
684
686
  utrechtNavBarContentMaxInlineSize: "1184px",
685
687
  utrechtNavBarLinkPaddingBlockEnd: "8px",
686
688
  utrechtNavBarLinkPaddingBlockStart: "8px",
package/dist/variables.css CHANGED
@@ -912,6 +912,8 @@
912
912
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
913
913
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
914
914
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
915
+ --utrecht-nav-bar-background-color: var(--utrecht-color-white);
916
+ --utrecht-nav-bar-color: var(--utrecht-color-black);
915
917
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
916
918
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
917
919
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
package/dist/variables.d.ts CHANGED
@@ -747,6 +747,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd: string;
747
747
  export const utrechtMapcontrolbuttonPaddingInlineStart: string;
748
748
  export const utrechtMarkBackgroundColor: string;
749
749
  export const utrechtMarkColor: string;
750
+ export const utrechtNavBarBackgroundColor: string;
751
+ export const utrechtNavBarColor: string;
750
752
  export const utrechtNavBarContentMaxInlineSize: string;
751
753
  export const utrechtNavBarLinkPaddingBlockEnd: string;
752
754
  export const utrechtNavBarLinkPaddingBlockStart: string;
package/dist/variables.json CHANGED
@@ -801,6 +801,8 @@
801
801
  "utrechtMarkColor": "hsl(0 0% 0%)",
802
802
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
803
803
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
804
+ "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
805
+ "utrechtNavBarColor": "hsl(0 0% 0%)",
804
806
  "utrechtNavBarContentMaxInlineSize": "1184px",
805
807
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
806
808
  "utrechtNavBarLinkPaddingBlockStart": "8px",
package/dist/variables.less CHANGED
@@ -821,6 +821,8 @@
821
821
  @utrecht-mapcontrolbutton-padding-block-start: @utrecht-space-block-2xs;
822
822
  @utrecht-mapcontrolbutton-padding-inline-end: @utrecht-space-inline-2xs;
823
823
  @utrecht-mapcontrolbutton-padding-inline-start: @utrecht-space-inline-2xs;
824
+ @utrecht-nav-bar-background-color: @utrecht-color-white;
825
+ @utrecht-nav-bar-color: @utrecht-color-black;
824
826
  @utrecht-nav-bar-content-max-inline-size: @utrecht-page-max-inline-size;
825
827
  @utrecht-nav-bar-link-padding-block-end: @utrecht-space-block-xs;
826
828
  @utrecht-nav-bar-link-padding-block-start: @utrecht-space-block-xs;
package/dist/variables.mjs CHANGED
@@ -731,6 +731,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
731
731
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
732
732
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
733
733
  export const utrechtMarkColor = "hsl(0 0% 0%)";
734
+ export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
735
+ export const utrechtNavBarColor = "hsl(0 0% 0%)";
734
736
  export const utrechtNavBarContentMaxInlineSize = "1184px";
735
737
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
736
738
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "6.1.0",
2
+ "version": "6.1.1",
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",
package/src/component/utrecht/nav-bar.tokens.json CHANGED
@@ -1,6 +1,12 @@
1
1
  {
2
2
  "utrecht": {
3
3
  "nav-bar": {
4
+ "background-color": {
5
+ "$value": "{utrecht.color.white}"
6
+ },
7
+ "color": {
8
+ "$value": "{utrecht.color.black}"
9
+ },
4
10
  "content": {
5
11
  "max-inline-size": { "$value": "{utrecht.page.max-inline-size}" }
6
12
  },