@amsterdam/design-system-tokens 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.0...design-system-tokens-v0.7.1) (2024-03-22)
+
+
+### Features
+
+* Add Avatar component ([#1134](https://github.com/Amsterdam/design-system/issues/1134)) ([8dec2cf](https://github.com/Amsterdam/design-system/commit/8dec2cff8f7885ccb163774c0dc979fb2c781256))
+* Add Form Field Character Counter ([#1114](https://github.com/Amsterdam/design-system/issues/1114)) ([779ae8c](https://github.com/Amsterdam/design-system/commit/779ae8c9764b23508ffbfb38c6dc2f7a7c1cbd28))
+
+
+### Bug Fixes
+
+* Use semantic Heading for the title of a Dialog ([#1123](https://github.com/Amsterdam/design-system/issues/1123)) ([0493fd8](https://github.com/Amsterdam/design-system/commit/0493fd87587d36a83bb7aa9cbb69b8debf5d66f0))
+
 ## [0.7.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.6.1...design-system-tokens-v0.7.0) (2024-03-12)
 
 

package/dist/compact.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
  */
 
 :root {

package/dist/compact.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
  */
 
 export default tokens;

package/dist/compact.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
  */
 
 export const amsSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";

package/dist/compact.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Mar 2024 14:50:53 GMT
+// Generated on Fri, 22 Mar 2024 15:51:06 GMT
 
 $ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
 $ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);

package/dist/compact.theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
  */
 
 .ams-theme--compact {

package/dist/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:05 GMT
  */
 
 :root {
@@ -67,6 +67,8 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-gap: 1rem;
   --ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
+  --ams-avatar-padding-inline: 0.25rem;
+  --ams-avatar-padding-block: 0.25rem;
   --ams-alert-gap: 1rem;
   --ams-alert-border-style: solid;
   --ams-alert-border-width: 4px;
@@ -422,16 +424,17 @@
   --ams-form-label-font-size: var(--ams-text-level-4-font-size);
   --ams-form-label-font-family: var(--ams-text-font-family);
   --ams-form-label-color: var(--ams-color-primary-black);
+  --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
+  --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
+  --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
+  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
+  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
+  --ams-form-field-character-counter-color: var(--ams-color-primary-black);
   --ams-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
   --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
   --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
   --ams-fieldset-legend-font-family: var(--ams-text-font-family);
   --ams-fieldset-legend-color: var(--ams-color-primary-black);
-  --ams-dialog-title-line-height: var(--ams-text-level-5-line-height);
-  --ams-dialog-title-font-weight: var(--ams-text-font-weight-bold);
-  --ams-dialog-title-font-size: var(--ams-text-level-5-font-size);
-  --ams-dialog-title-font-family: var(--ams-text-font-family);
-  --ams-dialog-title-color: var(--ams-color-primary-black);
   --ams-dialog-background-color: var(--ams-color-primary-white);
   --ams-column-gap-xl: var(--ams-space-grid-xl);
   --ams-column-gap-lg: var(--ams-space-grid-lg);
@@ -533,6 +536,29 @@
   --ams-badge-font-weight: var(--ams-text-font-weight-bold);
   --ams-badge-font-size: var(--ams-text-level-5-font-size);
   --ams-badge-font-family: var(--ams-text-font-family);
+  --ams-avatar-yellow-color: var(--ams-color-primary-black);
+  --ams-avatar-yellow-background-color: var(--ams-color-yellow);
+  --ams-avatar-red-color: var(--ams-color-primary-white);
+  --ams-avatar-red-background-color: var(--ams-color-primary-red);
+  --ams-avatar-purple-color: var(--ams-color-primary-white);
+  --ams-avatar-purple-background-color: var(--ams-color-purple);
+  --ams-avatar-orange-color: var(--ams-color-primary-black);
+  --ams-avatar-orange-background-color: var(--ams-color-orange);
+  --ams-avatar-magenta-color: var(--ams-color-primary-white);
+  --ams-avatar-magenta-background-color: var(--ams-color-magenta);
+  --ams-avatar-green-color: var(--ams-color-primary-black);
+  --ams-avatar-green-background-color: var(--ams-color-green);
+  --ams-avatar-dark-green-color: var(--ams-color-primary-white);
+  --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
+  --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
+  --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
+  --ams-avatar-blue-color: var(--ams-color-primary-black);
+  --ams-avatar-blue-background-color: var(--ams-color-blue);
+  --ams-avatar-line-height: var(--ams-text-level-6-line-height);
+  --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
+  --ams-avatar-font-size: var(--ams-text-level-6-font-size);
+  --ams-avatar-font-family: var(--ams-text-font-family);
+  --ams-avatar-aspect-ratio: var(--ams-proportion-square);
   --ams-aspect-ratio-2x-wide: var(--ams-proportion-2x-wide);
   --ams-aspect-ratio-x-wide: var(--ams-proportion-x-wide);
   --ams-aspect-ratio-wide: var(--ams-proportion-wide);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
  */
 
 export default tokens;
@@ -222,6 +222,51 @@ declare const tokens: {
       "x-wide": DesignToken,
       "2x-wide": DesignToken
     },
+    "avatar": {
+      "aspect-ratio": DesignToken,
+      "font-family": DesignToken,
+      "font-size": DesignToken,
+      "font-weight": DesignToken,
+      "line-height": DesignToken,
+      "padding-block": DesignToken,
+      "padding-inline": DesignToken,
+      "blue": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "dark-blue": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "dark-green": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "green": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "magenta": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "orange": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "purple": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "red": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      },
+      "yellow": {
+        "background-color": DesignToken,
+        "color": DesignToken
+      }
+    },
     "badge": {
       "font-family": DesignToken,
       "font-size": DesignToken,
@@ -437,13 +482,6 @@ declare const tokens: {
       "background-color": DesignToken,
       "border": DesignToken,
       "max-inline-size": DesignToken,
-      "title": {
-        "color": DesignToken,
-        "font-family": DesignToken,
-        "font-size": DesignToken,
-        "font-weight": DesignToken,
-        "line-height": DesignToken
-      },
       "form": {
         "gap": DesignToken,
         "padding-block": DesignToken,
@@ -466,6 +504,16 @@ declare const tokens: {
         "line-height": DesignToken
       }
     },
+    "form-field-character-counter": {
+      "color": DesignToken,
+      "font-family": DesignToken,
+      "font-size": DesignToken,
+      "font-weight": DesignToken,
+      "line-height": DesignToken,
+      "error": {
+        "color": DesignToken
+      }
+    },
     "form-label": {
       "color": DesignToken,
       "font-family": DesignToken,

package/dist/index.json

@@ -199,6 +199,51 @@
       "x-wide": "16 / 9",
       "2x-wide": "32 / 9"
     },
+    "avatar": {
+      "aspect-ratio": "1 / 1",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "padding-block": "0.25rem",
+      "padding-inline": "0.25rem",
+      "blue": {
+        "background-color": "#009DE6",
+        "color": "#000000"
+      },
+      "dark-blue": {
+        "background-color": "#004699",
+        "color": "#FFFFFF"
+      },
+      "dark-green": {
+        "background-color": "#00A03C",
+        "color": "#FFFFFF"
+      },
+      "green": {
+        "background-color": "#BED200",
+        "color": "#000000"
+      },
+      "magenta": {
+        "background-color": "#E50082",
+        "color": "#FFFFFF"
+      },
+      "orange": {
+        "background-color": "#FF9100",
+        "color": "#000000"
+      },
+      "purple": {
+        "background-color": "#A00078",
+        "color": "#FFFFFF"
+      },
+      "red": {
+        "background-color": "#EC0000",
+        "color": "#FFFFFF"
+      },
+      "yellow": {
+        "background-color": "#FFE600",
+        "color": "#000000"
+      }
+    },
     "badge": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
@@ -414,13 +459,6 @@
       "background-color": "#FFFFFF",
       "border": "0",
       "max-inline-size": "min(87.69vw, 45rem)",
-      "title": {
-        "color": "#000000",
-        "font-family": "'Amsterdam Sans', Arial, sans-serif",
-        "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
-        "font-weight": 800,
-        "line-height": "1.6"
-      },
       "form": {
         "gap": "1.5rem",
         "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
@@ -443,6 +481,16 @@
         "line-height": "1.5"
       }
     },
+    "form-field-character-counter": {
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "error": {
+        "color": "#EC0000"
+      }
+    },
     "form-label": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:05 GMT
  */
 
 export const amsColorPrimaryBlack = "#000000";
@@ -108,6 +108,31 @@ export const amsAspectRatioSquare = "1 / 1";
 export const amsAspectRatioWide = "5 / 4";
 export const amsAspectRatioXWide = "16 / 9";
 export const amsAspectRatio2xWide = "32 / 9";
+export const amsAvatarAspectRatio = "1 / 1";
+export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsAvatarFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsAvatarFontWeight = 400;
+export const amsAvatarLineHeight = "1.6";
+export const amsAvatarPaddingBlock = "0.25rem";
+export const amsAvatarPaddingInline = "0.25rem";
+export const amsAvatarBlueBackgroundColor = "#009DE6";
+export const amsAvatarBlueColor = "#000000";
+export const amsAvatarDarkBlueBackgroundColor = "#004699";
+export const amsAvatarDarkBlueColor = "#FFFFFF";
+export const amsAvatarDarkGreenBackgroundColor = "#00A03C";
+export const amsAvatarDarkGreenColor = "#FFFFFF";
+export const amsAvatarGreenBackgroundColor = "#BED200";
+export const amsAvatarGreenColor = "#000000";
+export const amsAvatarMagentaBackgroundColor = "#E50082";
+export const amsAvatarMagentaColor = "#FFFFFF";
+export const amsAvatarOrangeBackgroundColor = "#FF9100";
+export const amsAvatarOrangeColor = "#000000";
+export const amsAvatarPurpleBackgroundColor = "#A00078";
+export const amsAvatarPurpleColor = "#FFFFFF";
+export const amsAvatarRedBackgroundColor = "#EC0000";
+export const amsAvatarRedColor = "#FFFFFF";
+export const amsAvatarYellowBackgroundColor = "#FFE600";
+export const amsAvatarYellowColor = "#000000";
 export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsBadgeFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsBadgeFontWeight = 800;
@@ -220,11 +245,6 @@ export const amsColumnGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
 export const amsDialogBackgroundColor = "#FFFFFF";
 export const amsDialogBorder = "0";
 export const amsDialogMaxInlineSize = "min(87.69vw, 45rem)";
-export const amsDialogTitleColor = "#000000";
-export const amsDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
-export const amsDialogTitleFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
-export const amsDialogTitleFontWeight = 800;
-export const amsDialogTitleLineHeight = "1.6";
 export const amsDialogFormGap = "1.5rem";
 export const amsDialogFormPaddingBlock = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
 export const amsDialogFormPaddingInline = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
@@ -236,6 +256,12 @@ export const amsFieldsetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif"
 export const amsFieldsetLegendFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
 export const amsFieldsetLegendFontWeight = 800;
 export const amsFieldsetLegendLineHeight = "1.5";
+export const amsFormFieldCharacterCounterColor = "#000000";
+export const amsFormFieldCharacterCounterFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsFormFieldCharacterCounterFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsFormFieldCharacterCounterFontWeight = 400;
+export const amsFormFieldCharacterCounterLineHeight = "1.6";
+export const amsFormFieldCharacterCounterErrorColor = "#EC0000";
 export const amsFormLabelColor = "#000000";
 export const amsFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsFormLabelFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";

package/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Mar 2024 14:50:53 GMT
+// Generated on Fri, 22 Mar 2024 15:51:05 GMT
 
 $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 $ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
@@ -65,6 +65,8 @@ $ams-button-tertiary-disabled-background-color: transparent;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-gap: 1rem;
 $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
+$ams-avatar-padding-inline: 0.25rem;
+$ams-avatar-padding-block: 0.25rem;
 $ams-alert-gap: 1rem;
 $ams-alert-border-style: solid;
 $ams-alert-border-width: 4px;
@@ -420,16 +422,17 @@ $ams-form-label-font-weight: $ams-text-font-weight-bold;
 $ams-form-label-font-size: $ams-text-level-4-font-size;
 $ams-form-label-font-family: $ams-text-font-family;
 $ams-form-label-color: $ams-color-primary-black;
+$ams-form-field-character-counter-error-color: $ams-color-primary-red;
+$ams-form-field-character-counter-line-height: $ams-text-level-6-line-height;
+$ams-form-field-character-counter-font-weight: $ams-text-font-weight-normal;
+$ams-form-field-character-counter-font-size: $ams-text-level-6-font-size;
+$ams-form-field-character-counter-font-family: $ams-text-font-family;
+$ams-form-field-character-counter-color: $ams-color-primary-black;
 $ams-fieldset-legend-line-height: $ams-text-level-4-line-height;
 $ams-fieldset-legend-font-weight: $ams-text-font-weight-bold;
 $ams-fieldset-legend-font-size: $ams-text-level-4-font-size;
 $ams-fieldset-legend-font-family: $ams-text-font-family;
 $ams-fieldset-legend-color: $ams-color-primary-black;
-$ams-dialog-title-line-height: $ams-text-level-5-line-height;
-$ams-dialog-title-font-weight: $ams-text-font-weight-bold;
-$ams-dialog-title-font-size: $ams-text-level-5-font-size;
-$ams-dialog-title-font-family: $ams-text-font-family;
-$ams-dialog-title-color: $ams-color-primary-black;
 $ams-dialog-background-color: $ams-color-primary-white;
 $ams-column-gap-xl: $ams-space-grid-xl;
 $ams-column-gap-lg: $ams-space-grid-lg;
@@ -531,6 +534,29 @@ $ams-badge-line-height: $ams-text-level-5-line-height;
 $ams-badge-font-weight: $ams-text-font-weight-bold;
 $ams-badge-font-size: $ams-text-level-5-font-size;
 $ams-badge-font-family: $ams-text-font-family;
+$ams-avatar-yellow-color: $ams-color-primary-black;
+$ams-avatar-yellow-background-color: $ams-color-yellow;
+$ams-avatar-red-color: $ams-color-primary-white;
+$ams-avatar-red-background-color: $ams-color-primary-red;
+$ams-avatar-purple-color: $ams-color-primary-white;
+$ams-avatar-purple-background-color: $ams-color-purple;
+$ams-avatar-orange-color: $ams-color-primary-black;
+$ams-avatar-orange-background-color: $ams-color-orange;
+$ams-avatar-magenta-color: $ams-color-primary-white;
+$ams-avatar-magenta-background-color: $ams-color-magenta;
+$ams-avatar-green-color: $ams-color-primary-black;
+$ams-avatar-green-background-color: $ams-color-green;
+$ams-avatar-dark-green-color: $ams-color-primary-white;
+$ams-avatar-dark-green-background-color: $ams-color-dark-green;
+$ams-avatar-dark-blue-color: $ams-color-primary-white;
+$ams-avatar-dark-blue-background-color: $ams-color-primary-blue;
+$ams-avatar-blue-color: $ams-color-primary-black;
+$ams-avatar-blue-background-color: $ams-color-blue;
+$ams-avatar-line-height: $ams-text-level-6-line-height;
+$ams-avatar-font-weight: $ams-text-font-weight-normal;
+$ams-avatar-font-size: $ams-text-level-6-font-size;
+$ams-avatar-font-family: $ams-text-font-family;
+$ams-avatar-aspect-ratio: $ams-proportion-square;
 $ams-aspect-ratio-2x-wide: $ams-proportion-2x-wide;
 $ams-aspect-ratio-x-wide: $ams-proportion-x-wide;
 $ams-aspect-ratio-wide: $ams-proportion-wide;

package/dist/index.theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
+ * Generated on Fri, 22 Mar 2024 15:51:05 GMT
  */
 
 .ams-theme {
@@ -67,6 +67,8 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-gap: 1rem;
   --ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
+  --ams-avatar-padding-inline: 0.25rem;
+  --ams-avatar-padding-block: 0.25rem;
   --ams-alert-gap: 1rem;
   --ams-alert-border-style: solid;
   --ams-alert-border-width: 4px;
@@ -422,16 +424,17 @@
   --ams-form-label-font-size: var(--ams-text-level-4-font-size);
   --ams-form-label-font-family: var(--ams-text-font-family);
   --ams-form-label-color: var(--ams-color-primary-black);
+  --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
+  --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
+  --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
+  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
+  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
+  --ams-form-field-character-counter-color: var(--ams-color-primary-black);
   --ams-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
   --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
   --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
   --ams-fieldset-legend-font-family: var(--ams-text-font-family);
   --ams-fieldset-legend-color: var(--ams-color-primary-black);
-  --ams-dialog-title-line-height: var(--ams-text-level-5-line-height);
-  --ams-dialog-title-font-weight: var(--ams-text-font-weight-bold);
-  --ams-dialog-title-font-size: var(--ams-text-level-5-font-size);
-  --ams-dialog-title-font-family: var(--ams-text-font-family);
-  --ams-dialog-title-color: var(--ams-color-primary-black);
   --ams-dialog-background-color: var(--ams-color-primary-white);
   --ams-column-gap-xl: var(--ams-space-grid-xl);
   --ams-column-gap-lg: var(--ams-space-grid-lg);
@@ -533,6 +536,29 @@
   --ams-badge-font-weight: var(--ams-text-font-weight-bold);
   --ams-badge-font-size: var(--ams-text-level-5-font-size);
   --ams-badge-font-family: var(--ams-text-font-family);
+  --ams-avatar-yellow-color: var(--ams-color-primary-black);
+  --ams-avatar-yellow-background-color: var(--ams-color-yellow);
+  --ams-avatar-red-color: var(--ams-color-primary-white);
+  --ams-avatar-red-background-color: var(--ams-color-primary-red);
+  --ams-avatar-purple-color: var(--ams-color-primary-white);
+  --ams-avatar-purple-background-color: var(--ams-color-purple);
+  --ams-avatar-orange-color: var(--ams-color-primary-black);
+  --ams-avatar-orange-background-color: var(--ams-color-orange);
+  --ams-avatar-magenta-color: var(--ams-color-primary-white);
+  --ams-avatar-magenta-background-color: var(--ams-color-magenta);
+  --ams-avatar-green-color: var(--ams-color-primary-black);
+  --ams-avatar-green-background-color: var(--ams-color-green);
+  --ams-avatar-dark-green-color: var(--ams-color-primary-white);
+  --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
+  --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
+  --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
+  --ams-avatar-blue-color: var(--ams-color-primary-black);
+  --ams-avatar-blue-background-color: var(--ams-color-blue);
+  --ams-avatar-line-height: var(--ams-text-level-6-line-height);
+  --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
+  --ams-avatar-font-size: var(--ams-text-level-6-font-size);
+  --ams-avatar-font-family: var(--ams-text-font-family);
+  --ams-avatar-aspect-ratio: var(--ams-proportion-square);
   --ams-aspect-ratio-2x-wide: var(--ams-proportion-2x-wide);
   --ams-aspect-ratio-x-wide: var(--ams-proportion-x-wide);
   --ams-aspect-ratio-wide: var(--ams-proportion-wide);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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",

package/src/components/ams/avatar.tokens.json

@@ -0,0 +1,49 @@
+{
+  "ams": {
+    "avatar": {
+      "aspect-ratio": { "value": "{ams.proportion.square}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "padding-block": { "value": "0.25rem" },
+      "padding-inline": { "value": "0.25rem" },
+      "blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{ams.color.dark-green}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{ams.color.green}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{ams.color.magenta}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{ams.color.orange}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "purple": {
+        "background-color": { "value": "{ams.color.purple}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "red": {
+        "background-color": { "value": "{ams.color.primary-red}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{ams.color.yellow}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      }
+    }
+  }
+}

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

@@ -4,13 +4,6 @@
       "background-color": { "value": "{ams.color.primary-white}" },
       "border": { "value": "0" },
       "max-inline-size": { "value": "min(87.69vw, 45rem)" },
-      "title": {
-        "color": { "value": "{ams.color.primary-black}" },
-        "font-family": { "value": "{ams.text.font-family}" },
-        "font-size": { "value": "{ams.text.level.5.font-size}" },
-        "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "line-height": { "value": "{ams.text.level.5.line-height}" }
-      },
       "form": {
         "gap": { "value": "1.5rem" },
         "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },

package/src/components/ams/form-field-character-counter.tokens.json

@@ -0,0 +1,14 @@
+{
+  "ams": {
+    "form-field-character-counter": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "error": {
+        "color": { "value": "{ams.color.primary-red}" }
+      }
+    }
+  }
+}