@utrecht/design-tokens 2.4.0 → 2.5.0

package/dist/index.mjs

@@ -82,6 +82,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";
@@ -543,6 +548,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";
@@ -624,8 +630,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";
@@ -665,28 +669,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% 100%)";
 export const utrechtPageColor = "hsl(0 0% 0%)";
 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";
@@ -738,6 +761,7 @@ export const utrechtPreHeadingMarginBlockStart = "28px";
 export const utrechtRadioButtonBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtRadioButtonBorderColor = "hsl(0 0% 30%)";
 export const utrechtRadioButtonBorderWidth = "2px";
+export const utrechtRadioButtonColor = "hsl(0 0% 100%)";
 export const utrechtRadioButtonSize = "24px";
 export const utrechtRadioButtonMarginInlineEnd = "12px";
 export const utrechtRadioButtonIconSize = "42%";
@@ -756,13 +780,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%)";
@@ -1066,3 +1091,6 @@ export const ofPageFooterBg = "hsl(0 100% 40%)";
 export const ofPageFooterFg = "hsl(0 0% 100%)";
 export const ofProgressIndicatorBackgroundColor = "hsl(0 0% 100%)";
 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/index.tokens.json

@@ -841,26 +841,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": {
@@ -871,19 +853,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",
@@ -4103,16 +4075,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": {
@@ -4677,8 +4640,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": {
@@ -4921,56 +4902,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": {
@@ -4980,8 +4916,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",
@@ -5011,10 +4953,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": {
@@ -5056,26 +5034,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": {
@@ -5109,71 +5071,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": {},
@@ -5184,9 +5094,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",
@@ -5454,6 +5364,7 @@
       "background-color": "hsl(0 0% 100%)",
       "border-color": "hsl(0 0% 30%)",
       "border-width": "2px",
+      "color": "hsl(0 0% 100%)",
       "size": "24px",
       "margin-block-start": {
         "$extensions": {
@@ -5754,13 +5665,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": {
@@ -5781,26 +5691,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": {
@@ -6507,6 +6399,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": {
@@ -8437,5 +8339,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"
+    }
   }
 }