feat: add ams-avatar tokens and remove todo-avatar tokens - Voorbeeld (#1251)

Met deze PR voegen we design tokens toe voor de Avatar component van
Amsterdam voor het Voorbeeld-thema, en verwijderen we de ToDo component.

De volgende tokens zijn toegevoegd aan Avatar component van Amsterdam:

- `ams.avatar.aspect-ratio`
- `ams.avatar.background-color`
- `ams.avatar.border-color`
- `ams.avatar.border-style`
- `ams.avatar.border-width`
- `ams.avatar.color`
- `ams.avatar.font-family`
- `ams.avatar.font-size`
- `ams.avatar.inline-size`
- `ams.avatar.line-height`
- `ams.avatar.padding-block`
- `ams.avatar.padding-inline`
- `ams.avatar.has-image.inline-size`

De volgende tokens zijn verwijderd uit ToDo Avatar component:

- `todo.avatar.background-color`
- `todo.avatar.border-color`
- `todo.avatar.border-radius`
- `todo.avatar.border-width`
- `todo.avatar.color`
- `todo.avatar.size`
- `todo.avatar.icon.icon-size`
- `todo.avatar.font-family`
- `todo.avatar.font-size`
- `todo.avatar.font-weight`
- `todo.avatar.line-height`
- `todo.avatar.text-transform`

Author: Rozerinay

.changeset/ams-avatar-tokens-voorbeeld.md

@@ -0,0 +1,34 @@
+---
+"@nl-design-system-unstable/voorbeeld-design-tokens": major
+---
+
+De volgende tokens zijn toegevoegd aan Avatar component van Amsterdam:
+
+- `ams.avatar.aspect-ratio`
+- `ams.avatar.background-color`
+- `ams.avatar.border-color`
+- `ams.avatar.border-style`
+- `ams.avatar.border-width`
+- `ams.avatar.color`
+- `ams.avatar.font-family`
+- `ams.avatar.font-size`
+- `ams.avatar.inline-size`
+- `ams.avatar.line-height`
+- `ams.avatar.padding-block`
+- `ams.avatar.padding-inline`
+- `ams.avatar.has-image.inline-size`
+
+De volgende tokens zijn verwijderd uit ToDo Avatar component:
+
+- `todo.avatar.background-color`
+- `todo.avatar.border-color`
+- `todo.avatar.border-radius`
+- `todo.avatar.border-width`
+- `todo.avatar.color`
+- `todo.avatar.size`
+- `todo.avatar.icon.icon-size`
+- `todo.avatar.font-family`
+- `todo.avatar.font-size`
+- `todo.avatar.font-weight`
+- `todo.avatar.line-height`
+- `todo.avatar.text-transform`

packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json

@@ -3230,37 +3230,33 @@
     }
   },
   "components/avatar": {
-    "todo": {
+    "ams": {
       "avatar": {
+        "aspect-ratio": {
+          "$type": "other",
+          "$value": "1 / 1",
+          "$description": "[code-only]"
+        },
         "background-color": {
           "$type": "color",
-          "$value": "{basis.color.action-1-inverse.bg-default}"
+          "$value": "{basis.color.accent-1-inverse.bg-default}"
         },
         "border-color": {
           "$type": "color",
           "$value": "{basis.color.transparent}"
         },
-        "border-radius": {
-          "$type": "dimension",
-          "$value": "{basis.border-radius.round}"
+        "border-style": {
+          "$type": "other",
+          "$value": "solid",
+          "$description": "[code-only]"
         },
         "border-width": {
           "$type": "dimension",
           "$value": "{basis.border-width.sm}"
         },
         "color": {
           "$type": "color",
-          "$value": "{basis.color.action-1-inverse.color-default}"
-        },
-        "size": {
-          "$type": "dimension",
-          "$value": "{basis.pointer-target.min-block-size}"
-        },
-        "icon": {
-          "icon-size": {
-            "$type": "dimension",
-            "$value": "{basis.size.icon.md}"
-          }
+          "$value": "{basis.color.accent-1-inverse.color-default}"
         },
         "font-family": {
           "$type": "fontFamilies",
@@ -3270,17 +3266,27 @@
           "$type": "fontSizes",
           "$value": "{basis.text.font-size.md}"
         },
-        "font-weight": {
-          "$type": "fontWeights",
-          "$value": "{basis.text.font-weight.bold}"
+        "inline-size": {
+          "$type": "dimension",
+          "$value": "{basis.pointer-target.min-inline-size}"
         },
         "line-height": {
           "$type": "lineHeights",
           "$value": "{basis.text.line-height.md}"
         },
-        "text-transform": {
-          "$type": "textCase",
-          "$value": "uppercase"
+        "padding-block": {
+          "$type": "dimension",
+          "$value": "0px"
+        },
+        "padding-inline": {
+          "$type": "dimension",
+          "$value": "0px"
+        },
+        "has-image": {
+          "inline-size": {
+            "$type": "dimension",
+            "$value": "{basis.pointer-target.min-inline-size}"
+          }
         }
       }
     }