@utrecht/design-tokens 2.4.0 → 2.5.0

package/dist/variables.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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.0",
+  "version": "2.5.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/component/signalen/signalen.tokens.json

@@ -0,0 +1,17 @@
+{
+  "signalen": {
+    "modal-dialog": {
+      "background-color": {
+        "value": "{utrecht.body.background-color}"
+      },
+      "color": {
+        "value": "{utrecht.body.color}"
+      }
+    },
+    "progress-bar": {
+      "border-radius": {
+        "value": "4px"
+      }
+    }
+  }
+}

package/src/component/utrecht/body.tokens.json

@@ -0,0 +1,11 @@
+{
+  "utrecht": {
+    "body": {
+      "background-color": { "value": "{utrecht.color.white}" },
+      "color": { "value": "{utrecht.color.black}" },
+      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "line-height": { "value": "1.4" }
+    }
+  }
+}

package/src/component/utrecht/link-list.tokens.json

@@ -16,6 +16,9 @@
         }
       },
       "icon": {
+        "inset-block-start": {
+          "value": "0.15em"
+        },
         "size": {
           "value": "14px"
         }

package/src/component/utrecht/nav-bar.tokens.json

@@ -1,8 +1,6 @@
 {
   "utrecht": {
     "nav-bar": {
-      "background-color": { "value": "{utrecht.color.white}" },
-      "color": { "value": "{utrecht.color.black}" },
       "content": {
         "max-inline-size": { "value": "{utrecht.page.max-inline-size}" }
       },

package/src/component/utrecht/page-body.tokens.json

@@ -0,0 +1,19 @@
+{
+  "utrecht": {
+    "page-body": {
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "background-color": { "value": "{utrecht.color.white}" },
+        "color": { "value": "{utrecht.color.black}" },
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em" },
+        "padding-inline-start": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "0" }
+      }
+    }
+  }
+}

package/src/component/utrecht/page-footer.tokens.json

@@ -6,10 +6,12 @@
       "background-image": {
         "value": "linear-gradient(45deg, {utrecht.color.red.40}, {utrecht.color.red.40} 50%, #d63433 50%);"
       },
-      "padding-inline-end": { "value": "{utrecht.space.inline.2xl}" },
-      "padding-inline-start": { "value": "{utrecht.space.inline.2xl}" },
-      "padding-block-end": { "value": "{utrecht.space.block.3xl}" },
-      "padding-block-start": { "value": "{utrecht.space.block.3xl}" }
+      "content": {
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline": { "value": "{utrecht.space.inline.2xl}" },
+        "padding-block-end": { "value": "{utrecht.space.block.3xl}" },
+        "padding-block-start": { "value": "{utrecht.space.block.3xl}" }
+      }
     }
   }
 }

package/src/component/utrecht/page-header.tokens.json

@@ -1,10 +1,20 @@
 {
   "utrecht": {
     "page-header": {
-      "padding-inline-end": { "value": "2.4em" },
-      "padding-inline-start": { "value": "2em" },
-      "padding-block-end": { "value": "1em" },
-      "padding-block-start": { "value": "1.8em" }
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "background-color": { "value": "{utrecht.color.white}" },
+        "color": { "value": "{utrecht.color.black}" },
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em", "$comment": "Legacy design token" },
+        "padding-inline-start": { "value": "2em", "$comment": "Legacy design token" },
+        "padding-inline": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "1.8em" }
+      }
     }
   }
 }

package/src/component/utrecht/page.tokens.json

@@ -7,9 +7,9 @@
       "margin-inline-end": { "value": "2em" },
       "max-inline-size": { "value": "1184px" },
       "padding-block-start": { "value": "1.8em" },
-      "padding-inline-end": { "value": "2em" },
+      "padding-inline-end": { "value": "0" },
       "padding-block-end": { "value": "1em" },
-      "padding-inline-start": { "value": "2em" }
+      "padding-inline-start": { "value": "0" }
     }
   }
 }

package/src/component/utrecht/root.tokens.json

@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "root": {
+      "background-color": { "value": "{utrecht.color.grey.95}" },
+      "color": { "value": "{utrecht.color.grey.10}" }
+    }
+  }
+}

package/project.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "root": "{workspaceRoot}/proprietary/design-tokens",
-  "sourceRoot": "{projectRoot}",
-  "projectType": "library",
-  "targets": {
-    "build": {
-      "executor": "@nrwl/workspace:run-commands",
-      "outputs": ["{projectRoot}/dist"],
-      "options": {
-        "command": "pnpm run build",
-        "cwd": "proprietary/design-tokens",
-        "outputPath": "proprietary/design-tokens/dist"
-      },
-      "dependsOn": ["^build"]
-    },
-    "watch": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "command": "pnpm run watch",
-        "cwd": "proprietary/design-tokens"
-      }
-    }
-  }
-}