@amsterdam/design-system-tokens 0.1.7 → 0.1.8

package/dist/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 17 Nov 2023 13:11:48 GMT
+// Generated on Mon, 27 Nov 2023 11:07:10 GMT
 
 @utrecht-button-subtle-disabled-background-color: transparent;
 @utrecht-button-subtle-background-color: transparent;
@@ -35,6 +35,7 @@
 @amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
 @amsterdam-ordered-list-list-style-type: decimal;
 @amsterdam-ordered-list-gap: 0.75rem;
+@amsterdam-logo-height: 2.5rem;
 @amsterdam-link-standalone-hover-text-underline-offset: 7px;
 @amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
 @amsterdam-link-standalone-text-decoration-thickness: 2px;
@@ -53,11 +54,23 @@
 @amsterdam-link-inline-hover-text-decoration: underline;
 @amsterdam-grid-wide-column-count: 12;
 @amsterdam-grid-medium-column-count: 8;
-@amsterdam-grid-density-high-padding-inline: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); // Equals the gap.
-@amsterdam-grid-density-high-gap: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
-@amsterdam-grid-density-low-padding-inline: clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem); // Equals 1.5 times the gap.
-@amsterdam-grid-density-low-gap: clamp(1rem, 3.125vw + 0.375rem, 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
+@amsterdam-grid-density-high-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
+@amsterdam-grid-density-high-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
+@amsterdam-grid-density-low-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); // Equals 1.5 times the gap.
+@amsterdam-grid-density-low-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
 @amsterdam-grid-column-count: 4;
+@amsterdam-dialog-footer-padding-block: 1.5rem 0;
+@amsterdam-dialog-footer-gap: 1rem;
+@amsterdam-dialog-header-gap: 1rem;
+@amsterdam-dialog-article-padding-inline-end: 1.5rem;
+@amsterdam-dialog-form-max-block-size: 75vh;
+@amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
+@amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
+@amsterdam-dialog-form-gap: 1.5rem;
+@amsterdam-dialog-close-background-color: transparent;
+@amsterdam-dialog-backdrop-background: #0006;
+@amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
+@amsterdam-dialog-border: 0;
 @amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
 @amsterdam-alert-close-background-color: transparent;
 @amsterdam-alert-gap: 1rem;
@@ -210,6 +223,9 @@
 @amsterdam-ordered-list-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-ordered-list-font-family: @amsterdam-typography-font-family;
 @amsterdam-ordered-list-color: @amsterdam-color-primary-black;
+@amsterdam-logo-subsite-color: @amsterdam-color-primary-black;
+@amsterdam-logo-title-color: @amsterdam-color-primary-red;
+@amsterdam-logo-emblem-color: @amsterdam-color-primary-red;
 @amsterdam-link-on-background-light-visited-color: @amsterdam-color-primary-black;
 @amsterdam-link-on-background-light-hover-color: @amsterdam-color-primary-black;
 @amsterdam-link-on-background-light-color: @amsterdam-color-primary-black;
@@ -273,7 +289,15 @@
 @amsterdam-form-label-font-weight: @amsterdam-typography-font-weight-bold;
 @amsterdam-form-label-font-family: @amsterdam-typography-font-family;
 @amsterdam-form-label-color: @amsterdam-color-primary-black;
-@amsterdam-footer-top-background-color: @amsterdam-color-primary-blue;
+@amsterdam-dialog-close-hover-fill: @amsterdam-color-primary-blue;
+@amsterdam-dialog-close-fill: @amsterdam-color-primary-black;
+@amsterdam-dialog-title-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
+@amsterdam-dialog-title-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
+@amsterdam-dialog-title-line-height: @amsterdam-typography-text-level-5-line-height;
+@amsterdam-dialog-title-font-weight: @amsterdam-typography-font-weight-bold;
+@amsterdam-dialog-title-font-family: @amsterdam-typography-font-family;
+@amsterdam-dialog-title-color: @amsterdam-color-primary-black;
+@amsterdam-dialog-background-color: @amsterdam-color-primary-white;
 @amsterdam-checkbox-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
 @amsterdam-checkbox-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
 @amsterdam-checkbox-line-height: @amsterdam-typography-text-level-6-line-height;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "Community for NL Design System",
   "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,5 +28,5 @@
     "npm-run-all": "4.1.5",
     "style-dictionary": "3.9.0"
   },
-  "gitHead": "703538926459edf62102d1fe7b6bd15ab511865d"
+  "gitHead": "930baf5f841a4a368c75a7e72e96838ce3f09c79"
 }

package/src/components/amsterdam/dialog.tokens.json

@@ -0,0 +1,47 @@
+{
+  "amsterdam": {
+    "dialog": {
+      "background-color": { "value": "{amsterdam.color.primary-white}" },
+      "border": { "value": "0" },
+      "max-inline-size": { "value": "min(87.69vw, 45rem)" },
+      "title": {
+        "color": { "value": "{amsterdam.color.primary-black}" },
+        "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
+        "narrow": {
+          "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
+        },
+        "wide": {
+          "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
+        }
+      },
+      "backdrop": {
+        "background": { "value": "#0006" }
+      },
+      "close": {
+        "background-color": { "value": "transparent" },
+        "fill": { "value": "{amsterdam.color.primary-black}" },
+        "hover": {
+          "fill": { "value": "{amsterdam.color.primary-blue}" }
+        }
+      },
+      "form": {
+        "gap": { "value": "1.5rem" },
+        "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
+        "padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
+        "max-block-size": { "value": "75vh" }
+      },
+      "article": {
+        "padding-inline-end": { "value": "1.5rem" }
+      },
+      "header": {
+        "gap": { "value": "1rem" }
+      },
+      "footer": {
+        "gap": { "value": "1rem" },
+        "padding-block": { "value": "1.5rem 0" }
+      }
+    }
+  }
+}

package/src/components/amsterdam/grid.tokens.json

@@ -6,21 +6,21 @@
       },
       "density-low": {
         "gap": {
-          "value": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
+          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
           "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
         },
         "padding-inline": {
-          "value": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
+          "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
           "comment": "Equals 1.5 times the gap."
         }
       },
       "density-high": {
         "gap": {
-          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
           "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
         },
         "padding-inline": {
-          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
           "comment": "Equals the gap."
         }
       },

package/src/components/amsterdam/logo.tokens.json

@@ -0,0 +1,10 @@
+{
+  "amsterdam": {
+    "logo": {
+      "height": { "value": "2.5rem" },
+      "emblem": { "color": { "value": "{amsterdam.color.primary-red}" } },
+      "title": { "color": { "value": "{amsterdam.color.primary-red}" } },
+      "subsite": { "color": { "value": "{amsterdam.color.primary-black}" } }
+    }
+  }
+}

package/src/components/amsterdam/footer.tokens.json

@@ -1,11 +0,0 @@
-{
-  "amsterdam": {
-    "footer": {
-      "top": {
-        "background-color": {
-          "value": "{amsterdam.color.primary-blue}"
-        }
-      }
-    }
-  }
-}