@amsterdam/design-system-tokens 0.14.0 → 0.15.0

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

@@ -1,10 +1,10 @@
 {
   "ams": {
     "breadcrumb": {
-      "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}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "{ams.typography.body-text.small.line-height}" },
       "separator": {
         "background-image": {
           "value": "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>\")"
@@ -14,14 +14,14 @@
         "margin-inline": { "value": "{ams.space.xs}" }
       },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.color.dark-blue}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       }
     }

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

@@ -1,65 +1,63 @@
 {
   "ams": {
     "button": {
-      "cursor": { "value": "{ams.action.activate.cursor}" },
-      "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.5.font-size}" },
-      "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "gap": { "value": "{ams.space.sm}" },
+      "cursor": { "value": "{ams.cursor.interactive}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "{ams.typography.body-text.line-height}" },
+      "gap": { "value": "{ams.space.s}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.sm}" },
-      "padding-inline": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.s}" },
+      "padding-inline": { "value": "{ams.space.m}" },
       "disabled": {
-        "cursor": { "value": "{ams.action.disabled.cursor}" }
+        "cursor": { "value": "{ams.cursor.disabled}" }
       },
       "forced-color-mode": {
-        "border": { "value": "{ams.border.width.md} solid" }
+        "border": { "value": "{ams.border.width.m} solid" }
       },
       "primary": {
-        "background-color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
-        "color": { "value": "{ams.color.primary-white}" },
+        "background-color": { "value": "{ams.color.interactive.default}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
+        "color": { "value": "{ams.color.text.inverse}" },
         "disabled": {
-          "background-color": { "value": "{ams.color.neutral-grey3}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }
+          "background-color": { "value": "{ams.color.interactive.disabled}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" }
         },
         "hover": {
-          "background-color": { "value": "{ams.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }
+          "background-color": { "value": "{ams.color.interactive.hover}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" }
         }
       },
       "secondary": {
-        "background-color": { "value": "{ams.color.primary-white}" },
-        "color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
+        "background-color": { "value": "{ams.color.background}" },
+        "color": { "value": "{ams.color.interactive.default}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
-          "color": { "value": "{ams.color.dark-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.l} {ams.color.interactive.hover}" },
+          "color": { "value": "{ams.color.interactive.hover}" }
         },
         "disabled": {
-          "background-color": { "value": "{ams.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" },
-          "color": { "value": "{ams.color.neutral-grey3}" }
-        },
-        "focus": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }
+          "background-color": { "value": "{ams.color.background}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" },
+          "color": { "value": "{ams.color.interactive.disabled}" }
         }
       },
       "tertiary": {
         "background-color": { "value": "transparent" },
-        "color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.interactive.default}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" },
-          "color": { "value": "{ams.color.dark-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" },
+          "color": { "value": "{ams.color.interactive.hover}" }
         },
         "disabled": {
           "background-color": { "value": "transparent" },
-          "color": { "value": "{ams.color.neutral-grey3}" }
+          "color": { "value": "{ams.color.interactive.disabled}" }
         }
       },
       "icon-only": {
-        "padding-block": { "value": "{ams.space.sm}" },
-        "padding-inline": { "value": "{ams.space.sm}" }
+        "padding-block": { "value": "{ams.space.s}" },
+        "padding-inline": { "value": "{ams.space.s}" }
       }
     }
   }

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

@@ -1,18 +1,18 @@
 {
   "ams": {
     "card": {
-      "gap": { "value": "{ams.space.sm}" },
+      "gap": { "value": "{ams.space.s}" },
       "heading-group": {
-        "gap": { "value": "{ams.space.sm}" }
+        "gap": { "value": "{ams.space.s}" }
       },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "color": { "value": "{ams.links.color}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" }

package/src/components/ams/character-count.tokens.json

@@ -1,13 +1,13 @@
 {
   "ams": {
     "character-count": {
-      "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}" },
+      "color": { "value": "{ams.color.text.default}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "{ams.typography.body-text.small.line-height}" },
       "error": {
-        "color": { "value": "{ams.color.primary-red}" }
+        "color": { "value": "{ams.color.feedback.error}" }
       }
     }
   }

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

@@ -1,79 +1,81 @@
 {
   "ams": {
     "checkbox": {
-      "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.normal}" },
-      "gap": { "value": "{ams.space.sm}" },
-      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "color": { "value": "{ams.color.text.default}" },
+      "cursor": { "value": "{ams.cursor.interactive}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "gap": { "value": "{ams.space.s}" },
+      "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "checkmark": {
-        "border-color": { "value": "{ams.color.primary-blue}" },
-        "border-width": { "value": "{ams.border.width.md}" },
+        "border-color": { "value": "{ams.color.interactive.default}" },
+        "border-width": { "value": "{ams.border.width.m}" },
         "checked": {
-          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-color": { "value": "{ams.color.interactive.default}" },
           "background-image": {
             "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")"
           },
           "hover": {
-            "background-color": { "value": "{ams.color.dark-blue}" }
+            "background-color": { "value": "{ams.color.interactive.hover}" }
           }
         },
         "disabled": {
-          "border-color": { "value": "{ams.color.neutral-grey3}" },
-          "border-width": { "value": "{ams.border.width.md}" },
+          "border-color": { "value": "{ams.color.interactive.disabled}" },
+          "border-width": { "value": "{ams.border.width.m}" },
           "checked": {
-            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "background-color": { "value": "{ams.color.interactive.disabled}" },
             "hover": {
-              "background-color": { "value": "{ams.color.neutral-grey3}" }
+              "background-color": { "value": "{ams.color.interactive.disabled}" }
             }
           },
           "indeterminate": {
-            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "background-color": { "value": "{ams.color.interactive.disabled}" },
             "hover": {
-              "background-color": { "value": "{ams.color.neutral-grey3}" }
+              "background-color": { "value": "{ams.color.interactive.disabled}" }
             }
           }
         },
         "hover": {
-          "border-color": { "value": "{ams.color.dark-blue}" },
-          "border-width": { "value": "{ams.border.width.lg}" }
+          "border-color": { "value": "{ams.color.interactive.hover}" },
+          "border-width": { "value": "{ams.border.width.l}" }
         },
         "invalid": {
-          "border-color": { "value": "{ams.color.primary-red}" },
+          "border-color": { "value": "{ams.color.interactive.invalid.default}" },
           "checked": {
-            "background-color": { "value": "{ams.color.primary-red}" },
+            "background-color": { "value": "{ams.color.interactive.invalid.default}" },
             "hover": {
-              "background-color": { "value": "{ams.color.primary-red}" }
+              "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
             }
           },
           "hover": {
-            "border-color": { "value": "{ams.color.primary-red}" }
+            "border-color": { "value": "{ams.color.interactive.invalid.hover}" }
           },
           "indeterminate": {
-            "background-color": { "value": "{ams.color.primary-red}" },
+            "background-color": { "value": "{ams.color.interactive.invalid.default}" },
             "hover": {
-              "background-color": { "value": "{ams.color.primary-red}" }
+              "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
             }
           }
         },
         "indeterminate": {
-          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-color": { "value": "{ams.color.interactive.default}" },
           "background-image": {
             "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")"
           },
           "hover": {
-            "background-color": { "value": "{ams.color.dark-blue}" }
+            "background-color": { "value": "{ams.color.interactive.hover}" }
           }
         }
       },
       "disabled": {
-        "color": { "value": "{ams.color.neutral-grey3}" }
+        "cursor": { "value": "{ams.cursor.disabled}" },
+        "color": { "value": "{ams.color.interactive.disabled}" }
       },
       "hover": {
-        "color": { "value": "{ams.color.dark-blue}" },
-        "text-decoration-thickness": { "value": "{ams.border.width.md}" }
+        "color": { "value": "{ams.color.interactive.hover}" },
+        "text-decoration-thickness": { "value": "{ams.border.width.m}" }
       }
     }
   }

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

@@ -2,12 +2,11 @@
   "ams": {
     "column": {
       "gap": {
-        "no": { "value": "0" },
-        "xs": { "value": "{ams.space.xs}" },
-        "sm": { "value": "{ams.space.sm}" },
-        "md": { "value": "{ams.space.md}" },
-        "lg": { "value": "{ams.space.lg}" },
-        "xl": { "value": "{ams.space.xl}" }
+        "x-small": { "value": "{ams.space.xs}" },
+        "small": { "value": "{ams.space.s}" },
+        "medium": { "value": "{ams.space.m}" },
+        "large": { "value": "{ams.space.l}" },
+        "x-large": { "value": "{ams.space.xl}" }
       }
     }
   }

package/src/components/ams/date-input.tokens.json

@@ -1,25 +1,27 @@
 {
   "ams": {
     "date-input": {
-      "background-color": { "value": "{ams.color.primary-white}" },
-      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
-      "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.normal}" },
-      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "background-color": { "value": "{ams.color.background}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
+      "color": { "value": "{ams.color.text.default}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.sm}" },
-      "padding-inline": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.s}" },
+      "padding-inline": { "value": "{ams.space.m}" },
       "calender-picker-indicator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
-        }
+        },
+        "cursor": { "value": "{ams.cursor.interactive}" }
       },
       "disabled": {
-        "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" },
-        "color": { "value": "{ams.color.neutral-grey3}" },
+        "background-color": { "value": "{ams.color.background}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
+        "color": { "value": "{ams.color.interactive.disabled}" },
+        "cursor": { "value": "{ams.cursor.disabled}" },
         "calender-picker-indicator": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
@@ -27,7 +29,7 @@
         }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" },
         "calender-picker-indicator": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
@@ -35,9 +37,9 @@
         }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
         }
       }
     }

package/src/components/ams/description-list.tokens.json

@@ -1,19 +1,30 @@
 {
   "ams": {
     "description-list": {
-      "color": { "value": "{ams.color.primary-black}" },
-      "column-gap": { "value": "{ams.space.lg}" },
-      "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.5.font-size}" },
-      "inverse-color": { "value": "{ams.color.primary-white}" },
-      "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "row-gap": { "value": "{ams.space.sm}" },
+      "color": { "value": "{ams.color.text.default}" },
+      "column-gap": { "value": "{ams.space.l}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.font-size}" },
+      "line-height": { "value": "{ams.typography.body-text.line-height}" },
+      "row-gap": { "value": "{ams.space.s}" },
+      "inverse": {
+        "color": { "value": "{ams.color.text.inverse}" }
+      },
       "term": {
-        "font-weight": { "value": "{ams.text.font-weight.bold}" }
+        "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
       },
       "description": {
-        "font-weight": { "value": "{ams.text.font-weight.normal}" },
-        "padding-inline-start": { "value": "{ams.space.lg}" }
+        "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+        "padding-inline-start": { "value": "{ams.space.l}" }
+      },
+      "narrow": {
+        "grid-template-columns": { "value": "1fr 4fr" }
+      },
+      "medium": {
+        "grid-template-columns": { "value": "1fr 2fr" }
+      },
+      "wide": {
+        "grid-template-columns": { "value": "1fr 1fr" }
       }
     }
   }

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

@@ -1,16 +1,27 @@
 {
   "ams": {
     "dialog": {
-      "background-color": { "value": "{ams.color.primary-white}" },
-      "border": { "value": "0" },
-      "gap": { "value": "{ams.space.md}" },
-      "inline-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" },
-      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.grid.md})" },
+      "background-color": { "value": "{ams.color.background}" },
+      "border": { "value": "{ams.border.width.m} solid {ams.dialog.background-color}" },
+      "gap": { "value": "{ams.space.m}" },
+      "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
+      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" },
       "max-inline-size": { "value": "48rem" },
-      "padding-block": { "value": "{ams.space.grid.md}" },
-      "padding-inline": { "value": "{ams.space.grid.lg}" },
+      "backdrop": {
+        "background-color": { "value": "rgb(24 24 24 / 62.5%)" }
+      },
       "header": {
-        "gap": { "value": "{ams.space.md}" }
+        "gap": { "value": "{ams.space.m}" },
+        "padding-block": { "value": "{ams.space.xl} 0" },
+        "padding-inline": { "value": "{ams.space.2xl}" }
+      },
+      "body": {
+        "padding-block": { "value": "0" },
+        "padding-inline": { "value": "{ams.space.2xl}" }
+      },
+      "footer": {
+        "padding-block": { "value": "0 {ams.space.xl}" },
+        "padding-inline": { "value": "{ams.space.2xl}" }
       }
     }
   }

package/src/components/ams/error-message.tokens.json

@@ -1,12 +1,12 @@
 {
   "ams": {
     "error-message": {
-      "color": { "value": "{ams.color.primary-red}" },
-      "font-family": { "value": "{ams.text.font-family}" },
-      "font-size": { "value": "{ams.text.level.6.font-size}" },
-      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "color": { "value": "{ams.color.feedback.error}" },
+      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
       "gap": { "value": "{ams.space.xs}" },
-      "line-height": { "value": "{ams.text.level.6.line-height}" }
+      "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
     }
   }
 }

package/src/components/ams/field-set.tokens.json

@@ -2,16 +2,16 @@
   "ams": {
     "field-set": {
       "invalid": {
-        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
-        "padding-inline-start": { "value": "{ams.space.md}" }
+        "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
+        "padding-inline-start": { "value": "{ams.space.m}" }
       },
       "legend": {
-        "color": { "value": "{ams.color.primary-black}" },
-        "font-family": { "value": "{ams.text.font-family}" },
-        "font-size": { "value": "{ams.text.level.4.font-size}" },
-        "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "line-height": { "value": "{ams.text.level.4.line-height}" },
-        "margin-block-end": { "value": "{ams.space.md}" }
+        "color": { "value": "{ams.color.text.default}" },
+        "font-family": { "value": "{ams.typography.font-family}" },
+        "font-size": { "value": "{ams.typography.heading.4.font-size}" },
+        "font-weight": { "value": "{ams.typography.heading.font-weight}" },
+        "line-height": { "value": "{ams.typography.heading.4.line-height}" },
+        "margin-block-end": { "value": "{ams.space.m}" }
       }
     }
   }

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

@@ -1,10 +1,10 @@
 {
   "ams": {
     "field": {
-      "gap": { "value": "{ams.space.sm}" },
+      "gap": { "value": "{ams.space.s}" },
       "invalid": {
-        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
-        "padding-inline-start": { "value": "{ams.space.md}" }
+        "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
+        "padding-inline-start": { "value": "{ams.space.m}" }
       }
     }
   }

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

@@ -1,14 +1,16 @@
 {
   "ams": {
     "figure": {
-      "gap": { "value": "{ams.space.sm}" },
+      "gap": { "value": "{ams.space.s}" },
       "caption": {
-        "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}" },
-        "inverse-color": { "value": "{ams.color.primary-white}" }
+        "color": { "value": "{ams.color.text.default}" },
+        "font-family": { "value": "{ams.typography.font-family}" },
+        "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
+        "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+        "line-height": { "value": "{ams.typography.body-text.small.line-height}" },
+        "inverse": {
+          "color": { "value": "{ams.color.text.inverse}" }
+        }
       }
     }
   }