@amsterdam/design-system-tokens 0.1.2 → 0.1.3

package/dist/variables.less

@@ -1,10 +1,17 @@
 
 // Do not edit directly
-// Generated on Wed, 05 Jul 2023 07:52:43 GMT
+// Generated on Wed, 12 Jul 2023 11:08:54 GMT
 
 @utrecht-button-subtle-disabled-background-color: transparent;
 @utrecht-button-subtle-background-color: transparent;
 @utrecht-button-disabled-border-color: transparent;
+@amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
+@amsterdam-unordered-list-unordered-list-list-style-type: '–';
+@amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
+@amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
+@amsterdam-unordered-list-item-padding-inline: 3px 0;
+@amsterdam-unordered-list-list-style: square;
+@amsterdam-unordered-list-gap: 0.5rem;
 @amsterdam-link-on-background-light-hover-text-decoration: none;
 @amsterdam-link-on-background-light-focus-text-decoration: underline;
 @amsterdam-link-on-background-light-text-underline-offset: 9px;
@@ -38,12 +45,12 @@
 @amsterdam-typography-text-level-6-line-height: 1.6;
 @amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
 @amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
-@amsterdam-typography-text-level-5-line-height: 1.4;
-@amsterdam-typography-text-level-5-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
-@amsterdam-typography-text-level-5-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
-@amsterdam-typography-text-level-4-line-height: 1.5;
-@amsterdam-typography-text-level-4-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
-@amsterdam-typography-text-level-4-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
+@amsterdam-typography-text-level-5-line-height: 1.5;
+@amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
+@amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
+@amsterdam-typography-text-level-4-line-height: 1.4;
+@amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
+@amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
 @amsterdam-typography-text-level-3-line-height: 1.4;
 @amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
 @amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
@@ -103,9 +110,15 @@
 @utrecht-button-font-family: @amsterdam-typography-font-family;
 @utrecht-button-color: @amsterdam-color-primary-white;
 @utrecht-button-background-color: @amsterdam-color-primary-blue;
-@amsterdam-paragraph-large-line-height: @amsterdam-typography-text-level-4-line-height;
-@amsterdam-paragraph-large-font-size-wide: @amsterdam-typography-text-level-4-font-size-wide;
-@amsterdam-paragraph-large-font-size-narrow: @amsterdam-typography-text-level-4-font-size-narrow;
+@amsterdam-unordered-list-line-height: @amsterdam-typography-text-level-6-line-height;
+@amsterdam-unordered-list-font-weight: 400;
+@amsterdam-unordered-list-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
+@amsterdam-unordered-list-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
+@amsterdam-unordered-list-font-family: @amsterdam-typography-font-family;
+@amsterdam-unordered-list-color: @amsterdam-color-primary-black;
+@amsterdam-paragraph-large-line-height: @amsterdam-typography-text-level-5-line-height;
+@amsterdam-paragraph-large-font-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
+@amsterdam-paragraph-large-font-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
 @amsterdam-paragraph-small-line-height: @amsterdam-typography-text-level-7-line-height;
 @amsterdam-paragraph-small-font-size-wide: @amsterdam-typography-text-level-7-font-size-wide;
 @amsterdam-paragraph-small-font-size-narrow: @amsterdam-typography-text-level-7-font-size-narrow;
@@ -158,9 +171,9 @@
 @amsterdam-heading-font-weight: 800;
 @amsterdam-heading-font-family: @amsterdam-typography-font-family;
 @amsterdam-heading-color: @amsterdam-color-primary-black;
-@amsterdam-heading-4-line-height: @amsterdam-typography-text-level-5-line-height;
-@amsterdam-heading-4-font-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
-@amsterdam-heading-4-font-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
+@amsterdam-heading-4-line-height: @amsterdam-typography-text-level-4-line-height;
+@amsterdam-heading-4-font-size-wide: @amsterdam-typography-text-level-4-font-size-wide;
+@amsterdam-heading-4-font-size-narrow: @amsterdam-typography-text-level-4-font-size-narrow;
 @amsterdam-heading-3-line-height: @amsterdam-typography-text-level-3-line-height;
 @amsterdam-heading-3-font-size-wide: @amsterdam-typography-text-level-3-font-size-wide;
 @amsterdam-heading-3-font-size-narrow: @amsterdam-typography-text-level-3-font-size-narrow;
@@ -179,3 +192,11 @@
 @amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px @amsterdam-color-dark-blue;
 @amsterdam-button-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
 @amsterdam-button-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
+@amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
+@amsterdam-accordion-button-line-height: @amsterdam-typography-text-level-5-line-height;
+@amsterdam-accordion-button-font-weight: 800;
+@amsterdam-accordion-button-font-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
+@amsterdam-accordion-button-font-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
+@amsterdam-accordion-button-font-family: @amsterdam-typography-font-family;
+@amsterdam-accordion-button-focus-outline-offset: @amsterdam-focus-outline-offset;
+@amsterdam-accordion-button-color: @amsterdam-color-primary-blue;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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.8.0"
   },
-  "gitHead": "c11658e889d52c6a48a058bbbe332d4fe170c3c4"
+  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
 }

package/src/brand/amsterdam/typography.tokens.json

@@ -37,17 +37,17 @@
         },
         "4": {
           "font-size": {
-            "narrow": { "value": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)" },
-            "wide": { "value": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)" }
+            "narrow": { "value": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)" },
+            "wide": { "value": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)" }
           },
-          "line-height": { "value": "1.5" }
+          "line-height": { "value": "1.4" }
         },
         "5": {
           "font-size": {
-            "narrow": { "value": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)" },
-            "wide": { "value": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)" }
+            "narrow": { "value": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)" },
+            "wide": { "value": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)" }
           },
-          "line-height": { "value": "1.4" }
+          "line-height": { "value": "1.5" }
         },
         "6": {
           "font-size": {

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

@@ -0,0 +1,24 @@
+{
+  "amsterdam": {
+    "accordion": {
+      "button": {
+        "color": { "value": "{amsterdam.color.primary-blue}" },
+        "focus": {
+          "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
+        },
+        "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": {
+          "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
+          "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
+        },
+        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
+        "hover": {
+          "box-shadow": {
+            "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -27,10 +27,10 @@
       },
       "4": {
         "font-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
-          "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
+          "narrow": { "value": "{amsterdam.typography.text-level.4.font-size.narrow}" },
+          "wide": { "value": "{amsterdam.typography.text-level.4.font-size.wide}" }
         },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
       }
     }
   }

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

@@ -18,10 +18,10 @@
       },
       "large": {
         "font-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.4.font-size.narrow}" },
-          "wide": { "value": "{amsterdam.typography.text-level.4.font-size.wide}" }
+          "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
+          "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
         },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       }
     }
   }

package/src/components/amsterdam/unordered-list.tokens.json

@@ -0,0 +1,27 @@
+{
+  "amsterdam": {
+    "unordered-list": {
+      "color": { "value": "{amsterdam.color.primary-black}" },
+      "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": {
+        "narrow": { "value": "{amsterdam.typography.text-level.6.font-size.narrow}" },
+        "wide": { "value": "{amsterdam.typography.text-level.6.font-size.wide}" }
+      },
+      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "gap": { "value": "0.5rem" },
+      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
+      "list-style": { "value": "square" },
+      "item": {
+        "padding-inline": { "value": "3px 0" }
+      },
+      "unordered-list": {
+        "padding-block": { "value": "4px 0" },
+        "padding-inline": { "value": "14px 0" },
+        "list-style-type": { "value": "'–'" },
+        "item": {
+          "padding-inline": { "value": "11px 0" }
+        }
+      }
+    }
+  }
+}