@amsterdam/design-system-tokens 0.1.5 → 0.1.6

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 04 Oct 2023 10:51:08 GMT
+// Generated on Tue, 10 Oct 2023 11:59:10 GMT
 
 $utrecht-button-subtle-disabled-background-color: transparent;
 $utrecht-button-subtle-background-color: transparent;
@@ -50,6 +50,8 @@ $amsterdam-link-inline-font-family: inherit;
 $amsterdam-link-inline-focus-text-underline-offset: 3px;
 $amsterdam-link-inline-focus-text-decoration: underline;
 $amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
+$amsterdam-alert-close-background-color: transparent;
+$amsterdam-alert-gap: 1rem;
 $amsterdam-spacing-inset-xl: 2.5rem;
 $amsterdam-spacing-inset-lg: 1.5rem;
 $amsterdam-spacing-inset-md: 1rem;
@@ -85,6 +87,11 @@ $amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2
 $amsterdam-typography-font-weight-bold: 800;
 $amsterdam-typography-font-weight-normal: 400;
 $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+$amsterdam-proportion-extra-wide: 16 / 9;
+$amsterdam-proportion-wide: 5 / 4;
+$amsterdam-proportion-square: 1 / 1;
+$amsterdam-proportion-tall: 4 / 5;
+$amsterdam-proportion-extra-tall: 9 / 16;
 $amsterdam-color-neutral-grey4: #323232;
 $amsterdam-color-neutral-grey3: #767676;
 $amsterdam-color-neutral-grey2: #B4B4B4;
@@ -288,6 +295,29 @@ $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-blockquote-font-weight: 800;
 $amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
 $amsterdam-blockquote-color: $amsterdam-color-primary-black;
+$amsterdam-aspect-ratio-extra-wide: $amsterdam-proportion-extra-wide;
+$amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
+$amsterdam-aspect-ratio-square: $amsterdam-proportion-square;
+$amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
+$amsterdam-aspect-ratio-extra-tall: $amsterdam-proportion-extra-tall;
+$amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
+$amsterdam-alert-close-fill: $amsterdam-color-primary-black;
+$amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
+$amsterdam-alert-success-background-color: $amsterdam-color-primary-white;
+$amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
+$amsterdam-alert-error-background-color: $amsterdam-color-primary-white;
+$amsterdam-alert-title-wide-font-size: $amsterdam-typography-text-level-5-wide-font-size;
+$amsterdam-alert-title-narrow-font-size: $amsterdam-typography-text-level-5-narrow-font-size;
+$amsterdam-alert-title-line-height: $amsterdam-typography-text-level-5-line-height;
+$amsterdam-alert-title-font-weight: 800;
+$amsterdam-alert-title-font-family: $amsterdam-typography-font-family;
+$amsterdam-alert-title-color: $amsterdam-color-primary-black;
+$amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
+$amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
+$amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
+$amsterdam-alert-padding-block-start: $amsterdam-spacing-inset-md;
+$amsterdam-alert-border: 4px solid $amsterdam-color-yellow;
+$amsterdam-alert-background-color: $amsterdam-color-yellow;
 $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
 $amsterdam-accordion-button-wide-font-size: $amsterdam-typography-text-level-5-wide-font-size;
 $amsterdam-accordion-button-narrow-font-size: $amsterdam-typography-text-level-5-narrow-font-size;

package/dist/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:10 GMT
  */
 
 .amsterdam-theme {
@@ -52,6 +52,8 @@
   --amsterdam-link-inline-focus-text-underline-offset: 3px;
   --amsterdam-link-inline-focus-text-decoration: underline;
   --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
+  --amsterdam-alert-close-background-color: transparent;
+  --amsterdam-alert-gap: 1rem;
   --amsterdam-spacing-inset-xl: 2.5rem;
   --amsterdam-spacing-inset-lg: 1.5rem;
   --amsterdam-spacing-inset-md: 1rem;
@@ -87,6 +89,11 @@
   --amsterdam-typography-font-weight-bold: 800;
   --amsterdam-typography-font-weight-normal: 400;
   --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+  --amsterdam-proportion-extra-wide: 16 / 9;
+  --amsterdam-proportion-wide: 5 / 4;
+  --amsterdam-proportion-square: 1 / 1;
+  --amsterdam-proportion-tall: 4 / 5;
+  --amsterdam-proportion-extra-tall: 9 / 16;
   --amsterdam-color-neutral-grey4: #323232;
   --amsterdam-color-neutral-grey3: #767676;
   --amsterdam-color-neutral-grey2: #B4B4B4;
@@ -290,6 +297,29 @@
   --amsterdam-blockquote-font-weight: 800;
   --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
+  --amsterdam-aspect-ratio-extra-wide: var(--amsterdam-proportion-extra-wide);
+  --amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
+  --amsterdam-aspect-ratio-square: var(--amsterdam-proportion-square);
+  --amsterdam-aspect-ratio-tall: var(--amsterdam-proportion-tall);
+  --amsterdam-aspect-ratio-extra-tall: var(--amsterdam-proportion-extra-tall);
+  --amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
+  --amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
+  --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
+  --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
+  --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
+  --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
+  --amsterdam-alert-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-alert-title-font-weight: 800;
+  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
+  --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
+  --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
+  --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
+  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
+  --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
+  --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
   --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
   --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
   --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:10 GMT
  */
 
 export const amsterdamColorPrimaryBlack : string;
@@ -19,6 +19,11 @@ export const amsterdamColorNeutralGrey1 : string;
 export const amsterdamColorNeutralGrey2 : string;
 export const amsterdamColorNeutralGrey3 : string;
 export const amsterdamColorNeutralGrey4 : string;
+export const amsterdamProportionExtraTall : string;
+export const amsterdamProportionTall : string;
+export const amsterdamProportionSquare : string;
+export const amsterdamProportionWide : string;
+export const amsterdamProportionExtraWide : string;
 export const amsterdamTypographyFontFamily : string;
 export const amsterdamTypographyFontWeightNormal : number;
 export const amsterdamTypographyFontWeightBold : number;
@@ -62,6 +67,31 @@ export const amsterdamAccordionButtonLineHeight : string;
 export const amsterdamAccordionButtonNarrowFontSize : string;
 export const amsterdamAccordionButtonWideFontSize : string;
 export const amsterdamAccordionButtonHoverBoxShadow : string;
+export const amsterdamAlertBackgroundColor : string;
+export const amsterdamAlertBorder : string;
+export const amsterdamAlertGap : string;
+export const amsterdamAlertPaddingBlockStart : string;
+export const amsterdamAlertPaddingBlockEnd : string;
+export const amsterdamAlertPaddingInlineStart : string;
+export const amsterdamAlertPaddingInlineEnd : string;
+export const amsterdamAlertTitleColor : string;
+export const amsterdamAlertTitleFontFamily : string;
+export const amsterdamAlertTitleFontWeight : number;
+export const amsterdamAlertTitleLineHeight : string;
+export const amsterdamAlertTitleNarrowFontSize : string;
+export const amsterdamAlertTitleWideFontSize : string;
+export const amsterdamAlertErrorBackgroundColor : string;
+export const amsterdamAlertErrorBorderColor : string;
+export const amsterdamAlertSuccessBackgroundColor : string;
+export const amsterdamAlertSuccessBorderColor : string;
+export const amsterdamAlertCloseBackgroundColor : string;
+export const amsterdamAlertCloseFill : string;
+export const amsterdamAlertCloseHoverFill : string;
+export const amsterdamAspectRatioExtraTall : string;
+export const amsterdamAspectRatioTall : string;
+export const amsterdamAspectRatioSquare : string;
+export const amsterdamAspectRatioWide : string;
+export const amsterdamAspectRatioExtraWide : string;
 export const amsterdamBlockquoteColor : string;
 export const amsterdamBlockquoteFontFamily : string;
 export const amsterdamBlockquoteFontWeight : number;

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:09 GMT
  */
 
 export const amsterdamColorPrimaryBlack = "#000000";
@@ -19,6 +19,11 @@ export const amsterdamColorNeutralGrey1 = "#E6E6E6";
 export const amsterdamColorNeutralGrey2 = "#B4B4B4";
 export const amsterdamColorNeutralGrey3 = "#767676";
 export const amsterdamColorNeutralGrey4 = "#323232";
+export const amsterdamProportionExtraTall = "9 / 16";
+export const amsterdamProportionTall = "4 / 5";
+export const amsterdamProportionSquare = "1 / 1";
+export const amsterdamProportionWide = "5 / 4";
+export const amsterdamProportionExtraWide = "16 / 9";
 export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTypographyFontWeightNormal = 400;
 export const amsterdamTypographyFontWeightBold = 800;
@@ -62,6 +67,31 @@ export const amsterdamAccordionButtonLineHeight = "1.5";
 export const amsterdamAccordionButtonNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
 export const amsterdamAccordionButtonWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
 export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
+export const amsterdamAlertBackgroundColor = "#FFE600";
+export const amsterdamAlertBorder = "4px solid #FFE600";
+export const amsterdamAlertGap = "1rem";
+export const amsterdamAlertPaddingBlockStart = "1rem";
+export const amsterdamAlertPaddingBlockEnd = "1rem";
+export const amsterdamAlertPaddingInlineStart = "1.5rem";
+export const amsterdamAlertPaddingInlineEnd = "1.5rem";
+export const amsterdamAlertTitleColor = "#000000";
+export const amsterdamAlertTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamAlertTitleFontWeight = 800;
+export const amsterdamAlertTitleLineHeight = "1.5";
+export const amsterdamAlertTitleNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
+export const amsterdamAlertTitleWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
+export const amsterdamAlertErrorBackgroundColor = "#ffffff";
+export const amsterdamAlertErrorBorderColor = "#EC0000";
+export const amsterdamAlertSuccessBackgroundColor = "#ffffff";
+export const amsterdamAlertSuccessBorderColor = "#00A03C";
+export const amsterdamAlertCloseBackgroundColor = "transparent";
+export const amsterdamAlertCloseFill = "#000000";
+export const amsterdamAlertCloseHoverFill = "#004699";
+export const amsterdamAspectRatioExtraTall = "9 / 16";
+export const amsterdamAspectRatioTall = "4 / 5";
+export const amsterdamAspectRatioSquare = "1 / 1";
+export const amsterdamAspectRatioWide = "5 / 4";
+export const amsterdamAspectRatioExtraWide = "16 / 9";
 export const amsterdamBlockquoteColor = "#000000";
 export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBlockquoteFontWeight = 800;

package/dist/index.json

@@ -15,6 +15,11 @@
   "amsterdamColorNeutralGrey2": "#B4B4B4",
   "amsterdamColorNeutralGrey3": "#767676",
   "amsterdamColorNeutralGrey4": "#323232",
+  "amsterdamProportionExtraTall": "9 / 16",
+  "amsterdamProportionTall": "4 / 5",
+  "amsterdamProportionSquare": "1 / 1",
+  "amsterdamProportionWide": "5 / 4",
+  "amsterdamProportionExtraWide": "16 / 9",
   "amsterdamTypographyFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamTypographyFontWeightNormal": 400,
   "amsterdamTypographyFontWeightBold": 800,
@@ -58,6 +63,31 @@
   "amsterdamAccordionButtonNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
   "amsterdamAccordionButtonWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
   "amsterdamAccordionButtonHoverBoxShadow": "inset 0 0 0 2px #767676",
+  "amsterdamAlertBackgroundColor": "#FFE600",
+  "amsterdamAlertBorder": "4px solid #FFE600",
+  "amsterdamAlertGap": "1rem",
+  "amsterdamAlertPaddingBlockStart": "1rem",
+  "amsterdamAlertPaddingBlockEnd": "1rem",
+  "amsterdamAlertPaddingInlineStart": "1.5rem",
+  "amsterdamAlertPaddingInlineEnd": "1.5rem",
+  "amsterdamAlertTitleColor": "#000000",
+  "amsterdamAlertTitleFontFamily": "'Amsterdam Sans', Arial, sans-serif",
+  "amsterdamAlertTitleFontWeight": 800,
+  "amsterdamAlertTitleLineHeight": "1.5",
+  "amsterdamAlertTitleNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
+  "amsterdamAlertTitleWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
+  "amsterdamAlertErrorBackgroundColor": "#ffffff",
+  "amsterdamAlertErrorBorderColor": "#EC0000",
+  "amsterdamAlertSuccessBackgroundColor": "#ffffff",
+  "amsterdamAlertSuccessBorderColor": "#00A03C",
+  "amsterdamAlertCloseBackgroundColor": "transparent",
+  "amsterdamAlertCloseFill": "#000000",
+  "amsterdamAlertCloseHoverFill": "#004699",
+  "amsterdamAspectRatioExtraTall": "9 / 16",
+  "amsterdamAspectRatioTall": "4 / 5",
+  "amsterdamAspectRatioSquare": "1 / 1",
+  "amsterdamAspectRatioWide": "5 / 4",
+  "amsterdamAspectRatioExtraWide": "16 / 9",
   "amsterdamBlockquoteColor": "#000000",
   "amsterdamBlockquoteFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamBlockquoteFontWeight": 800,

package/dist/index.tokens.json

@@ -18,6 +18,13 @@
       "neutral-grey3": "#767676",
       "neutral-grey4": "#323232"
     },
+    "proportion": {
+      "extra-tall": "9 / 16",
+      "tall": "4 / 5",
+      "square": "1 / 1",
+      "wide": "5 / 4",
+      "extra-wide": "16 / 9"
+    },
     "typography": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": {
@@ -135,6 +142,49 @@
         }
       }
     },
+    "alert": {
+      "background-color": "#FFE600",
+      "border": "4px solid #FFE600",
+      "gap": "1rem",
+      "padding-block-start": "1rem",
+      "padding-block-end": "1rem",
+      "padding-inline-start": "1.5rem",
+      "padding-inline-end": "1.5rem",
+      "title": {
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 800,
+        "line-height": "1.5",
+        "narrow": {
+          "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
+        },
+        "wide": {
+          "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
+        }
+      },
+      "error": {
+        "background-color": "#ffffff",
+        "border-color": "#EC0000"
+      },
+      "success": {
+        "background-color": "#ffffff",
+        "border-color": "#00A03C"
+      },
+      "close": {
+        "background-color": "transparent",
+        "fill": "#000000",
+        "hover": {
+          "fill": "#004699"
+        }
+      }
+    },
+    "aspect-ratio": {
+      "extra-tall": "9 / 16",
+      "tall": "4 / 5",
+      "square": "1 / 1",
+      "wide": "5 / 4",
+      "extra-wide": "16 / 9"
+    },
     "blockquote": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",

package/dist/root.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:09 GMT
  */
 
 :root {
@@ -52,6 +52,8 @@
   --amsterdam-link-inline-focus-text-underline-offset: 3px;
   --amsterdam-link-inline-focus-text-decoration: underline;
   --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
+  --amsterdam-alert-close-background-color: transparent;
+  --amsterdam-alert-gap: 1rem;
   --amsterdam-spacing-inset-xl: 2.5rem;
   --amsterdam-spacing-inset-lg: 1.5rem;
   --amsterdam-spacing-inset-md: 1rem;
@@ -87,6 +89,11 @@
   --amsterdam-typography-font-weight-bold: 800;
   --amsterdam-typography-font-weight-normal: 400;
   --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+  --amsterdam-proportion-extra-wide: 16 / 9;
+  --amsterdam-proportion-wide: 5 / 4;
+  --amsterdam-proportion-square: 1 / 1;
+  --amsterdam-proportion-tall: 4 / 5;
+  --amsterdam-proportion-extra-tall: 9 / 16;
   --amsterdam-color-neutral-grey4: #323232;
   --amsterdam-color-neutral-grey3: #767676;
   --amsterdam-color-neutral-grey2: #B4B4B4;
@@ -290,6 +297,29 @@
   --amsterdam-blockquote-font-weight: 800;
   --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
+  --amsterdam-aspect-ratio-extra-wide: var(--amsterdam-proportion-extra-wide);
+  --amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
+  --amsterdam-aspect-ratio-square: var(--amsterdam-proportion-square);
+  --amsterdam-aspect-ratio-tall: var(--amsterdam-proportion-tall);
+  --amsterdam-aspect-ratio-extra-tall: var(--amsterdam-proportion-extra-tall);
+  --amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
+  --amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
+  --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
+  --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
+  --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
+  --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
+  --amsterdam-alert-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-alert-title-font-weight: 800;
+  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
+  --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
+  --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
+  --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
+  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
+  --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
+  --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
   --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
   --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
   --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);

package/dist/tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:10 GMT
  */
 
 export default tokens;
@@ -41,6 +41,13 @@ declare const tokens: {
       "neutral-grey3": DesignToken,
       "neutral-grey4": DesignToken
     },
+    "proportion": {
+      "extra-tall": DesignToken,
+      "tall": DesignToken,
+      "square": DesignToken,
+      "wide": DesignToken,
+      "extra-wide": DesignToken
+    },
     "typography": {
       "font-family": DesignToken,
       "font-weight": {
@@ -158,6 +165,49 @@ declare const tokens: {
         }
       }
     },
+    "alert": {
+      "background-color": DesignToken,
+      "border": DesignToken,
+      "gap": DesignToken,
+      "padding-block-start": DesignToken,
+      "padding-block-end": DesignToken,
+      "padding-inline-start": DesignToken,
+      "padding-inline-end": DesignToken,
+      "title": {
+        "color": DesignToken,
+        "font-family": DesignToken,
+        "font-weight": DesignToken,
+        "line-height": DesignToken,
+        "narrow": {
+          "font-size": DesignToken
+        },
+        "wide": {
+          "font-size": DesignToken
+        }
+      },
+      "error": {
+        "background-color": DesignToken,
+        "border-color": DesignToken
+      },
+      "success": {
+        "background-color": DesignToken,
+        "border-color": DesignToken
+      },
+      "close": {
+        "background-color": DesignToken,
+        "fill": DesignToken,
+        "hover": {
+          "fill": DesignToken
+        }
+      }
+    },
+    "aspect-ratio": {
+      "extra-tall": DesignToken,
+      "tall": DesignToken,
+      "square": DesignToken,
+      "wide": DesignToken,
+      "extra-wide": DesignToken
+    },
     "blockquote": {
       "color": DesignToken,
       "font-family": DesignToken,

package/dist/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 10:51:08 GMT
+ * Generated on Tue, 10 Oct 2023 11:59:09 GMT
  */
 
 module.exports = {
@@ -311,6 +311,103 @@ module.exports = {
         ]
       }
     },
+    "proportion": {
+      "extra-tall": {
+        "value": "9 / 16",
+        "filePath": "./src/brand/amsterdam/proportion.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "9 / 16"
+        },
+        "name": "amsterdamProportionExtraTall",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "proportion",
+          "item": "extra-tall"
+        },
+        "path": [
+          "amsterdam",
+          "proportion",
+          "extra-tall"
+        ]
+      },
+      "tall": {
+        "value": "4 / 5",
+        "filePath": "./src/brand/amsterdam/proportion.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "4 / 5"
+        },
+        "name": "amsterdamProportionTall",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "proportion",
+          "item": "tall"
+        },
+        "path": [
+          "amsterdam",
+          "proportion",
+          "tall"
+        ]
+      },
+      "square": {
+        "value": "1 / 1",
+        "filePath": "./src/brand/amsterdam/proportion.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "1 / 1"
+        },
+        "name": "amsterdamProportionSquare",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "proportion",
+          "item": "square"
+        },
+        "path": [
+          "amsterdam",
+          "proportion",
+          "square"
+        ]
+      },
+      "wide": {
+        "value": "5 / 4",
+        "filePath": "./src/brand/amsterdam/proportion.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "5 / 4"
+        },
+        "name": "amsterdamProportionWide",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "proportion",
+          "item": "wide"
+        },
+        "path": [
+          "amsterdam",
+          "proportion",
+          "wide"
+        ]
+      },
+      "extra-wide": {
+        "value": "16 / 9",
+        "filePath": "./src/brand/amsterdam/proportion.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "16 / 9"
+        },
+        "name": "amsterdamProportionExtraWide",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "proportion",
+          "item": "extra-wide"
+        },
+        "path": [
+          "amsterdam",
+          "proportion",
+          "extra-wide"
+        ]
+      }
+    },
     "typography": {
       "font-family": {
         "value": "'Amsterdam Sans', Arial, sans-serif",
@@ -1350,6 +1447,531 @@ module.exports = {
         }
       }
     },
+    "alert": {
+      "background-color": {
+        "value": "#FFE600",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.color.yellow}"
+        },
+        "name": "amsterdamAlertBackgroundColor",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "background-color"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "background-color"
+        ]
+      },
+      "border": {
+        "value": "4px solid #FFE600",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "4px solid {amsterdam.color.yellow}"
+        },
+        "name": "amsterdamAlertBorder",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "border"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "border"
+        ]
+      },
+      "gap": {
+        "value": "1rem",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "1rem"
+        },
+        "name": "amsterdamAlertGap",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "gap"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "gap"
+        ]
+      },
+      "padding-block-start": {
+        "value": "1rem",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.spacing.inset.md}"
+        },
+        "name": "amsterdamAlertPaddingBlockStart",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "padding-block-start"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "padding-block-start"
+        ]
+      },
+      "padding-block-end": {
+        "value": "1rem",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.spacing.inset.md}"
+        },
+        "name": "amsterdamAlertPaddingBlockEnd",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "padding-block-end"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "padding-block-end"
+        ]
+      },
+      "padding-inline-start": {
+        "value": "1.5rem",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.spacing.inset.lg}"
+        },
+        "name": "amsterdamAlertPaddingInlineStart",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "padding-inline-start"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "padding-inline-start"
+        ]
+      },
+      "padding-inline-end": {
+        "value": "1.5rem",
+        "filePath": "./src/components/amsterdam/alert.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.spacing.inset.lg}"
+        },
+        "name": "amsterdamAlertPaddingInlineEnd",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "alert",
+          "item": "padding-inline-end"
+        },
+        "path": [
+          "amsterdam",
+          "alert",
+          "padding-inline-end"
+        ]
+      },
+      "title": {
+        "color": {
+          "value": "#000000",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.primary-black}"
+          },
+          "name": "amsterdamAlertTitleColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "title",
+            "subitem": "color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "title",
+            "color"
+          ]
+        },
+        "font-family": {
+          "value": "'Amsterdam Sans', Arial, sans-serif",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.typography.font-family}"
+          },
+          "name": "amsterdamAlertTitleFontFamily",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "title",
+            "subitem": "font-family"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "title",
+            "font-family"
+          ]
+        },
+        "font-weight": {
+          "value": 800,
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.typography.font-weight.bold}"
+          },
+          "name": "amsterdamAlertTitleFontWeight",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "title",
+            "subitem": "font-weight"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "title",
+            "font-weight"
+          ]
+        },
+        "line-height": {
+          "value": "1.5",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.typography.text-level.5.line-height}"
+          },
+          "name": "amsterdamAlertTitleLineHeight",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "title",
+            "subitem": "line-height"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "title",
+            "line-height"
+          ]
+        },
+        "narrow": {
+          "font-size": {
+            "value": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
+            "filePath": "./src/components/amsterdam/alert.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{amsterdam.typography.text-level.5.narrow.font-size}"
+            },
+            "name": "amsterdamAlertTitleNarrowFontSize",
+            "attributes": {
+              "category": "amsterdam",
+              "type": "alert",
+              "item": "title",
+              "subitem": "narrow",
+              "state": "font-size"
+            },
+            "path": [
+              "amsterdam",
+              "alert",
+              "title",
+              "narrow",
+              "font-size"
+            ]
+          }
+        },
+        "wide": {
+          "font-size": {
+            "value": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
+            "filePath": "./src/components/amsterdam/alert.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{amsterdam.typography.text-level.5.wide.font-size}"
+            },
+            "name": "amsterdamAlertTitleWideFontSize",
+            "attributes": {
+              "category": "amsterdam",
+              "type": "alert",
+              "item": "title",
+              "subitem": "wide",
+              "state": "font-size"
+            },
+            "path": [
+              "amsterdam",
+              "alert",
+              "title",
+              "wide",
+              "font-size"
+            ]
+          }
+        }
+      },
+      "error": {
+        "background-color": {
+          "value": "#ffffff",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.primary-white}"
+          },
+          "name": "amsterdamAlertErrorBackgroundColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "error",
+            "subitem": "background-color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "error",
+            "background-color"
+          ]
+        },
+        "border-color": {
+          "value": "#EC0000",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.primary-red}"
+          },
+          "name": "amsterdamAlertErrorBorderColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "error",
+            "subitem": "border-color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "error",
+            "border-color"
+          ]
+        }
+      },
+      "success": {
+        "background-color": {
+          "value": "#ffffff",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.primary-white}"
+          },
+          "name": "amsterdamAlertSuccessBackgroundColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "success",
+            "subitem": "background-color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "success",
+            "background-color"
+          ]
+        },
+        "border-color": {
+          "value": "#00A03C",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.dark-green}"
+          },
+          "name": "amsterdamAlertSuccessBorderColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "success",
+            "subitem": "border-color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "success",
+            "border-color"
+          ]
+        }
+      },
+      "close": {
+        "background-color": {
+          "value": "transparent",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "transparent"
+          },
+          "name": "amsterdamAlertCloseBackgroundColor",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "close",
+            "subitem": "background-color"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "close",
+            "background-color"
+          ]
+        },
+        "fill": {
+          "value": "#000000",
+          "filePath": "./src/components/amsterdam/alert.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{amsterdam.color.primary-black}"
+          },
+          "name": "amsterdamAlertCloseFill",
+          "attributes": {
+            "category": "amsterdam",
+            "type": "alert",
+            "item": "close",
+            "subitem": "fill"
+          },
+          "path": [
+            "amsterdam",
+            "alert",
+            "close",
+            "fill"
+          ]
+        },
+        "hover": {
+          "fill": {
+            "value": "#004699",
+            "filePath": "./src/components/amsterdam/alert.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{amsterdam.color.primary-blue}"
+            },
+            "name": "amsterdamAlertCloseHoverFill",
+            "attributes": {
+              "category": "amsterdam",
+              "type": "alert",
+              "item": "close",
+              "subitem": "hover",
+              "state": "fill"
+            },
+            "path": [
+              "amsterdam",
+              "alert",
+              "close",
+              "hover",
+              "fill"
+            ]
+          }
+        }
+      }
+    },
+    "aspect-ratio": {
+      "extra-tall": {
+        "value": "9 / 16",
+        "filePath": "./src/components/amsterdam/aspect-ratio.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.proportion.extra-tall}"
+        },
+        "name": "amsterdamAspectRatioExtraTall",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "aspect-ratio",
+          "item": "extra-tall"
+        },
+        "path": [
+          "amsterdam",
+          "aspect-ratio",
+          "extra-tall"
+        ]
+      },
+      "tall": {
+        "value": "4 / 5",
+        "filePath": "./src/components/amsterdam/aspect-ratio.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.proportion.tall}"
+        },
+        "name": "amsterdamAspectRatioTall",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "aspect-ratio",
+          "item": "tall"
+        },
+        "path": [
+          "amsterdam",
+          "aspect-ratio",
+          "tall"
+        ]
+      },
+      "square": {
+        "value": "1 / 1",
+        "filePath": "./src/components/amsterdam/aspect-ratio.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.proportion.square}"
+        },
+        "name": "amsterdamAspectRatioSquare",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "aspect-ratio",
+          "item": "square"
+        },
+        "path": [
+          "amsterdam",
+          "aspect-ratio",
+          "square"
+        ]
+      },
+      "wide": {
+        "value": "5 / 4",
+        "filePath": "./src/components/amsterdam/aspect-ratio.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.proportion.wide}"
+        },
+        "name": "amsterdamAspectRatioWide",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "aspect-ratio",
+          "item": "wide"
+        },
+        "path": [
+          "amsterdam",
+          "aspect-ratio",
+          "wide"
+        ]
+      },
+      "extra-wide": {
+        "value": "16 / 9",
+        "filePath": "./src/components/amsterdam/aspect-ratio.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{amsterdam.proportion.extra-wide}"
+        },
+        "name": "amsterdamAspectRatioExtraWide",
+        "attributes": {
+          "category": "amsterdam",
+          "type": "aspect-ratio",
+          "item": "extra-wide"
+        },
+        "path": [
+          "amsterdam",
+          "aspect-ratio",
+          "extra-wide"
+        ]
+      }
+    },
     "blockquote": {
       "color": {
         "value": "#000000",

package/dist/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 04 Oct 2023 10:51:08 GMT
+// Generated on Tue, 10 Oct 2023 11:59:10 GMT
 
 @utrecht-button-subtle-disabled-background-color: transparent;
 @utrecht-button-subtle-background-color: transparent;
@@ -50,6 +50,8 @@
 @amsterdam-link-inline-focus-text-underline-offset: 3px;
 @amsterdam-link-inline-focus-text-decoration: underline;
 @amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
+@amsterdam-alert-close-background-color: transparent;
+@amsterdam-alert-gap: 1rem;
 @amsterdam-spacing-inset-xl: 2.5rem;
 @amsterdam-spacing-inset-lg: 1.5rem;
 @amsterdam-spacing-inset-md: 1rem;
@@ -85,6 +87,11 @@
 @amsterdam-typography-font-weight-bold: 800;
 @amsterdam-typography-font-weight-normal: 400;
 @amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+@amsterdam-proportion-extra-wide: 16 / 9;
+@amsterdam-proportion-wide: 5 / 4;
+@amsterdam-proportion-square: 1 / 1;
+@amsterdam-proportion-tall: 4 / 5;
+@amsterdam-proportion-extra-tall: 9 / 16;
 @amsterdam-color-neutral-grey4: #323232;
 @amsterdam-color-neutral-grey3: #767676;
 @amsterdam-color-neutral-grey2: #B4B4B4;
@@ -288,6 +295,29 @@
 @amsterdam-blockquote-font-weight: 800;
 @amsterdam-blockquote-font-family: @amsterdam-typography-font-family;
 @amsterdam-blockquote-color: @amsterdam-color-primary-black;
+@amsterdam-aspect-ratio-extra-wide: @amsterdam-proportion-extra-wide;
+@amsterdam-aspect-ratio-wide: @amsterdam-proportion-wide;
+@amsterdam-aspect-ratio-square: @amsterdam-proportion-square;
+@amsterdam-aspect-ratio-tall: @amsterdam-proportion-tall;
+@amsterdam-aspect-ratio-extra-tall: @amsterdam-proportion-extra-tall;
+@amsterdam-alert-close-hover-fill: @amsterdam-color-primary-blue;
+@amsterdam-alert-close-fill: @amsterdam-color-primary-black;
+@amsterdam-alert-success-border-color: @amsterdam-color-dark-green;
+@amsterdam-alert-success-background-color: @amsterdam-color-primary-white;
+@amsterdam-alert-error-border-color: @amsterdam-color-primary-red;
+@amsterdam-alert-error-background-color: @amsterdam-color-primary-white;
+@amsterdam-alert-title-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
+@amsterdam-alert-title-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
+@amsterdam-alert-title-line-height: @amsterdam-typography-text-level-5-line-height;
+@amsterdam-alert-title-font-weight: 800;
+@amsterdam-alert-title-font-family: @amsterdam-typography-font-family;
+@amsterdam-alert-title-color: @amsterdam-color-primary-black;
+@amsterdam-alert-padding-inline-end: @amsterdam-spacing-inset-lg;
+@amsterdam-alert-padding-inline-start: @amsterdam-spacing-inset-lg;
+@amsterdam-alert-padding-block-end: @amsterdam-spacing-inset-md;
+@amsterdam-alert-padding-block-start: @amsterdam-spacing-inset-md;
+@amsterdam-alert-border: 4px solid @amsterdam-color-yellow;
+@amsterdam-alert-background-color: @amsterdam-color-yellow;
 @amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
 @amsterdam-accordion-button-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
 @amsterdam-accordion-button-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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": "58764d2cd6d59d20fd0e3215f32461c6c580df1b"
+  "gitHead": "936054ca8c9f8f685c9a9bda9db3157608817886"
 }

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

@@ -0,0 +1,11 @@
+{
+  "amsterdam": {
+    "proportion": {
+      "extra-tall": { "value": "9 / 16" },
+      "tall": { "value": "4 / 5" },
+      "square": { "value": "1 / 1" },
+      "wide": { "value": "5 / 4" },
+      "extra-wide": { "value": "16 / 9" }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "amsterdam": {
+    "alert": {
+      "background-color": { "value": "{amsterdam.color.yellow}" },
+      "border": { "value": "4px solid {amsterdam.color.yellow}" },
+      "gap": { "value": "1rem" },
+      "padding-block-start": { "value": "{amsterdam.spacing.inset.md}" },
+      "padding-block-end": { "value": "{amsterdam.spacing.inset.md}" },
+      "padding-inline-start": { "value": "{amsterdam.spacing.inset.lg}" },
+      "padding-inline-end": { "value": "{amsterdam.spacing.inset.lg}" },
+      "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}" }
+        }
+      },
+      "error": {
+        "background-color": { "value": "{amsterdam.color.primary-white}" },
+        "border-color": { "value": "{amsterdam.color.primary-red}" }
+      },
+      "success": {
+        "background-color": { "value": "{amsterdam.color.primary-white}" },
+        "border-color": { "value": "{amsterdam.color.dark-green}" }
+      },
+      "close": {
+        "background-color": { "value": "transparent" },
+        "fill": { "value": "{amsterdam.color.primary-black}" },
+        "hover": {
+          "fill": { "value": "{amsterdam.color.primary-blue}" }
+        }
+      }
+    }
+  }
+}

package/src/components/amsterdam/aspect-ratio.tokens.json

@@ -0,0 +1,11 @@
+{
+  "amsterdam": {
+    "aspect-ratio": {
+      "extra-tall": { "value": "{amsterdam.proportion.extra-tall}" },
+      "tall": { "value": "{amsterdam.proportion.tall}" },
+      "square": { "value": "{amsterdam.proportion.square}" },
+      "wide": { "value": "{amsterdam.proportion.wide}" },
+      "extra-wide": { "value": "{amsterdam.proportion.extra-wide}" }
+    }
+  }
+}