@utrecht/design-tokens 2.4.0 → 2.5.0

package/dist/dark/index.mjs

@@ -84,6 +84,11 @@ export const utrechtBlockquoteContentFontSize = "1.125rem";
 export const utrechtBlockquoteCaptionFontSize = "0.875rem";
 export const utrechtBlockquoteMarginBlockStart = "1.6em";
 export const utrechtBlockquoteMarginBlockEnd = "1.6em";
+export const utrechtBodyFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const utrechtBodyFontSize = "1rem";
+export const utrechtBodyLineHeight = "1.4";
+export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
@@ -552,6 +557,7 @@ export const utrechtLinkListLinkColumnGap = "8px";
 export const utrechtLinkListLinkFontWeight = "700";
 export const utrechtLinkListLinkTextDecoration = "none";
 export const utrechtLinkListIconSize = "14px";
+export const utrechtLinkListIconInsetBlockStart = "0.15em";
 export const utrechtLinkSocialBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtLinkSocialBorderColor = "hsl(0 0% 100%)";
 export const utrechtLinkSocialBorderWidth = "2px";
@@ -633,8 +639,6 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
 export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
 export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
 export const utrechtMarkColor = "hsl(0 0% 0%)";
-export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
-export const utrechtNavBarColor = "hsl(0 0% 0%)";
 export const utrechtNavBarContentMaxInlineSize = "1184px";
 export const utrechtNavBarLinkPaddingBlockEnd = "8px";
 export const utrechtNavBarLinkPaddingBlockStart = "8px";
@@ -674,28 +678,47 @@ export const utrechtOrderedListPaddingInlineStart = "28.8px";
 export const utrechtOrderedListItemMarginBlockStart = "0.25em";
 export const utrechtOrderedListItemMarginBlockEnd = "0.25em";
 export const utrechtOrderedListItemPaddingInlineStart = "0";
+export const utrechtPageBodyContentBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtPageBodyContentColor = "hsl(0 0% 0%)";
+export const utrechtPageBodyContentPaddingBlockStart = "0";
+export const utrechtPageBodyContentPaddingBlockEnd = "1em";
+export const utrechtPageBodyContentPaddingInlineStart = "2em";
+export const utrechtPageBodyContentMaxInlineSize = "1184px";
+export const utrechtPageBodyContentPaddingInlineEnd = "2.4em";
+export const utrechtPageBodyPaddingInlineEnd = "0";
+export const utrechtPageBodyPaddingInlineStart = "0";
+export const utrechtPageBodyPaddingBlockEnd = "0";
+export const utrechtPageBodyPaddingBlockStart = "0";
 export const utrechtPageContentPaddingBlockStart = "2em";
 export const utrechtPageContentPaddingBlockEnd = "2em";
 export const utrechtPageFooterColor = "hsl(0 0% 100%)";
 export const utrechtPageFooterBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtPageFooterBackgroundImage = "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);";
-export const utrechtPageFooterPaddingInlineEnd = "28px";
-export const utrechtPageFooterPaddingInlineStart = "28px";
-export const utrechtPageFooterPaddingBlockEnd = "48px";
-export const utrechtPageFooterPaddingBlockStart = "48px";
-export const utrechtPageHeaderPaddingBlockStart = "1.8em";
-export const utrechtPageHeaderPaddingBlockEnd = "1em";
-export const utrechtPageHeaderPaddingInlineStart = "2em";
-export const utrechtPageHeaderPaddingInlineEnd = "2.4em";
+export const utrechtPageFooterContentPaddingBlockEnd = "48px";
+export const utrechtPageFooterContentPaddingBlockStart = "48px";
+export const utrechtPageFooterContentMaxInlineSize = "1184px";
+export const utrechtPageFooterContentPaddingInline = "28px";
+export const utrechtPageHeaderPaddingBlockStart = "0";
+export const utrechtPageHeaderPaddingBlockEnd = "0";
+export const utrechtPageHeaderPaddingInlineStart = "0";
+export const utrechtPageHeaderPaddingInlineEnd = "0";
+export const utrechtPageHeaderContentBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtPageHeaderContentColor = "hsl(0 0% 0%)";
+export const utrechtPageHeaderContentPaddingBlockStart = "1.8em";
+export const utrechtPageHeaderContentPaddingBlockEnd = "1em";
+export const utrechtPageHeaderContentPaddingInlineStart = "2em";
+export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
+export const utrechtPageHeaderContentMaxInlineSize = "1184px";
+export const utrechtPageHeaderContentPaddingInline = "2em";
 export const utrechtPageBackgroundColor = "hsl(0 0% 15%)";
 export const utrechtPageColor = "hsl(0 0% 95%)";
 export const utrechtPageMarginInlineStart = "2em";
 export const utrechtPageMarginInlineEnd = "2em";
 export const utrechtPageMaxInlineSize = "1184px";
 export const utrechtPagePaddingBlockStart = "1.8em";
-export const utrechtPagePaddingInlineEnd = "2em";
+export const utrechtPagePaddingInlineEnd = "0";
 export const utrechtPagePaddingBlockEnd = "1em";
-export const utrechtPagePaddingInlineStart = "2em";
+export const utrechtPagePaddingInlineStart = "0";
 export const utrechtPaginationFontSize = "0.875rem";
 export const utrechtPaginationMarginBlockStart = "0";
 export const utrechtPaginationMarginBlockEnd = "1em";
@@ -747,6 +770,7 @@ export const utrechtPreHeadingMarginBlockStart = "28px";
 export const utrechtRadioButtonBackgroundColor = "hsl(0 0% 20%)";
 export const utrechtRadioButtonBorderColor = "hsl(0 0% 95%)";
 export const utrechtRadioButtonBorderWidth = "2px";
+export const utrechtRadioButtonColor = "hsl(0 0% 100%)";
 export const utrechtRadioButtonSize = "24px";
 export const utrechtRadioButtonMarginInlineEnd = "12px";
 export const utrechtRadioButtonIconSize = "42%";
@@ -765,13 +789,14 @@ export const utrechtRadioButtonDisabledBorderColor = "hsl(0 0% 80%)";
 export const utrechtRadioButtonDisabledColor = "hsl(0 0% 100%)";
 export const utrechtRadioButtonInvalidBorderColor = "#990000";
 export const utrechtRadioButtonInvalidBorderWidth = "2px";
-export const utrechtRadioButtonColor = "hsl(0 0% 100%)";
 export const utrechtRadioButtonBorderRadius = "0";
 export const utrechtRichTextStrangerMarginBlockEnd = "32px";
 export const utrechtRichTextAcquaintanceMarginBlockEnd = "16px";
 export const utrechtRichTextFriendMarginBlockEnd = "8px";
 export const utrechtRichTextBestFriendMarginBlockEnd = "4px";
 export const utrechtRichTextConfidantMarginBlockEnd = 0;
+export const utrechtRootBackgroundColor = "hsl(0 0% 95%)";
+export const utrechtRootColor = "hsl(0 0% 10%)";
 export const utrechtSearchBarButtonBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtSearchBarButtonBorderColor = "hsl(0 100% 40%)";
 export const utrechtSearchBarButtonColor = "hsl(0 0% 100%)";
@@ -1077,3 +1102,6 @@ export const ofPageFooterBg = "hsl(0 100% 40%)";
 export const ofPageFooterFg = "hsl(0 0% 100%)";
 export const ofProgressIndicatorBackgroundColor = "hsl(0 0% 15%)";
 export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0 0 0 / 20%)";
+export const signalenModalDialogBackgroundColor = "hsl(0 0% 100%)";
+export const signalenModalDialogColor = "hsl(0 0% 0%)";
+export const signalenProgressBarBorderRadius = "4px";

package/dist/dark/index.tokens.json

@@ -845,26 +845,8 @@
       "margin-block-end": "1.6em"
     },
     "body": {
-      "font-family": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "*",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontFamilies"
-      },
-      "font-size": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontSizes"
-      },
+      "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+      "font-size": "1rem",
       "font-weight": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -875,19 +857,9 @@
         },
         "type": "fontWeights"
       },
-      "line-height": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": [
-              "<length>",
-              "<number>"
-            ],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "lineHeights"
-      }
+      "line-height": "1.4",
+      "background-color": "hsl(0 0% 100%)",
+      "color": "hsl(0 0% 0%)"
     },
     "breadcrumb-nav": {
       "min-block-size": "34px",
@@ -4107,16 +4079,7 @@
       },
       "icon": {
         "size": "14px",
-        "inset-block-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "spacing"
-        }
+        "inset-block-start": "0.15em"
       }
     },
     "link-social": {
@@ -4681,8 +4644,26 @@
     },
     "multiline-data": {},
     "nav-bar": {
-      "background-color": "hsl(0 0% 100%)",
-      "color": "hsl(0 0% 0%)",
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
       "content": {
         "background-color": {
           "$extensions": {
@@ -4925,56 +4906,11 @@
         "type": "color"
       },
       "content": {
-        "background-color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        },
-        "color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        },
-        "padding-block-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-block-end": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-inline-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
+        "padding-block-start": "0",
+        "padding-block-end": "1em",
+        "padding-inline-start": "2em",
         "padding-inine-end": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
@@ -4984,8 +4920,14 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "spacing"
-        }
-      }
+        },
+        "max-inline-size": "1184px",
+        "padding-inline-end": "2.4em"
+      },
+      "padding-inline-end": "0",
+      "padding-inline-start": "0",
+      "padding-block-end": "0",
+      "padding-block-start": "0"
     },
     "page-content": {
       "padding-block-start": "2em",
@@ -5015,10 +4957,46 @@
       "color": "hsl(0 0% 100%)",
       "background-color": "hsl(0 100% 40%)",
       "background-image": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
-      "padding-inline-end": "28px",
-      "padding-inline-start": "28px",
-      "padding-block-end": "48px",
-      "padding-block-start": "48px",
+      "padding-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
       "content": {
         "color": {
           "$extensions": {
@@ -5060,26 +5038,10 @@
           },
           "type": "spacing"
         },
-        "padding-block-end": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-block-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        }
+        "padding-block-end": "48px",
+        "padding-block-start": "48px",
+        "max-inline-size": "1184px",
+        "padding-inline": "28px"
       }
     },
     "page-header": {
@@ -5113,71 +5075,19 @@
         },
         "type": "color"
       },
-      "padding-block-start": "1.8em",
-      "padding-block-end": "1em",
-      "padding-inline-start": "2em",
-      "padding-inline-end": "2.4em",
+      "padding-block-start": "0",
+      "padding-block-end": "0",
+      "padding-inline-start": "0",
+      "padding-inline-end": "0",
       "content": {
-        "background-color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        },
-        "color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "color"
-        },
-        "padding-block-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-block-end": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-inline-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        },
-        "padding-inline-end": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": false
-          },
-          "type": "spacing"
-        }
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
+        "padding-block-start": "1.8em",
+        "padding-block-end": "1em",
+        "padding-inline-start": "2em",
+        "padding-inline-end": "2.4em",
+        "max-inline-size": "1184px",
+        "padding-inline": "2em"
       }
     },
     "page-layout": {},
@@ -5188,9 +5098,9 @@
       "margin-inline-end": "2em",
       "max-inline-size": "1184px",
       "padding-block-start": "1.8em",
-      "padding-inline-end": "2em",
+      "padding-inline-end": "0",
       "padding-block-end": "1em",
-      "padding-inline-start": "2em"
+      "padding-inline-start": "0"
     },
     "pagination": {
       "font-size": "0.875rem",
@@ -5458,6 +5368,7 @@
       "background-color": "hsl(0 0% 20%)",
       "border-color": "hsl(0 0% 95%)",
       "border-width": "2px",
+      "color": "hsl(0 0% 100%)",
       "size": "24px",
       "margin-block-start": {
         "$extensions": {
@@ -5758,13 +5669,12 @@
             },
             "nl.nldesignsystem.fallback": [
               "utrecht.radio-button.color"
-            ]
+            ],
+            "nl.nldesignsystem.figma.supports-token": false
           },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "color"
+          "type": "color"
+        }
       },
-      "color": "hsl(0 0% 100%)",
       "border-radius": "0"
     },
     "rich-text": {
@@ -5785,26 +5695,8 @@
       }
     },
     "root": {
-      "background-color": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<color>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "color"
-      },
-      "color": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<color>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "color"
-      },
+      "background-color": "hsl(0 0% 95%)",
+      "color": "hsl(0 0% 10%)",
       "font-family": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -6511,6 +6403,16 @@
         },
         "type": "color"
       },
+      "border-radius": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length-percentage>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderRadius"
+      },
       "border-width": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -8423,5 +8325,14 @@
         "box-shadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
       }
     }
+  },
+  "signalen": {
+    "modal-dialog": {
+      "background-color": "hsl(0 0% 100%)",
+      "color": "hsl(0 0% 0%)"
+    },
+    "progress-bar": {
+      "border-radius": "4px"
+    }
   }
 }