@amsterdam/design-system-tokens 0.15.0 → 1.0.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "1.0.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -20,13 +20,13 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Amsterdam/design-system.git",
-    "directory": "proprietary/tokens"
+    "directory": "packages-proprietary/tokens"
   },
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "4.3.3"
+    "style-dictionary": "4.4.0"
   },
   "scripts": {
     "clean": "rimraf dist/",

package/src/brand/ams/focus.tokens.json

@@ -1,7 +1,7 @@
 {
   "ams": {
     "focus": {
-      "outline-offset": { "value": "0.125rem" }
+      "outline-offset": { "value": "0.25rem" }
     }
   }
 }

package/src/brand/ams/typography.compact.tokens.json

@@ -21,7 +21,8 @@
           "font-size": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" }
+          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" },
+          "line-height": { "value": "1.2133" }
         },
         "3": {
           "font-size": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" }

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

@@ -25,6 +25,7 @@
       },
       "heading": {
         "font-weight": { "value": "800" },
+        "text-wrap": { "value": "balance" },
         "0": {
           "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
           "line-height": { "value": "1.1386" }

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

@@ -13,6 +13,7 @@
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-block": { "value": "{ams.space.s}" },
         "padding-inline": { "value": "0" },
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
         "hover": {
           "color": { "value": "{ams.color.interactive.hover}" }
         }

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

@@ -2,14 +2,13 @@
   "ams": {
     "alert": {
       "background-color": { "value": "{ams.color.background}" },
-      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.info}" },
-      "forced-colors": {
-        "border-width": { "value": "{ams.border.width.xl}" }
-      },
+      "border-color": { "value": "{ams.color.feedback.info}" },
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.xl}" },
       "severity-indicator": {
         "background-color": { "value": "{ams.color.feedback.info}" },
         "padding-block": { "value": "{ams.space.m}" },
-        "padding-inline": { "value": "{ams.space.xs}" }
+        "padding-inline": { "value": "{ams.space.s}" }
       },
       "content": {
         "gap": { "value": "{ams.space.s}" },
@@ -17,19 +16,19 @@
         "padding-inline": { "value": "{ams.space.m}" }
       },
       "error": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.error}" },
+        "border-color": { "value": "{ams.color.feedback.error}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.error}" }
         }
       },
       "success": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.success}" },
+        "border-color": { "value": "{ams.color.feedback.success}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.success}" }
         }
       },
       "warning": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.warning}" },
+        "border-color": { "value": "{ams.color.feedback.warning}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.warning}" }
         }

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

@@ -3,6 +3,9 @@
     "avatar": {
       "aspect-ratio": { "value": "{ams.aspect-ratio.1-1}" },
       "background-color": { "value": "{ams.color.highlight.purple}" },
+      "border-color": { "value": "{ams.color.highlight.purple}" },
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.m}" },
       "color": { "value": "{ams.color.text.inverse}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
@@ -15,26 +18,32 @@
       },
       "azure": {
         "background-color": { "value": "{ams.color.highlight.azure}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "border-color": { "value": "{ams.color.highlight.azure}" },
+        "color": { "value": "{ams.color.text.inverse}" }
       },
       "green": {
         "background-color": { "value": "{ams.color.highlight.green}" },
+        "border-color": { "value": "{ams.color.highlight.green}" },
         "color": { "value": "{ams.color.text.inverse}" }
       },
       "lime": {
         "background-color": { "value": "{ams.color.highlight.lime}" },
+        "border-color": { "value": "{ams.color.highlight.lime}" },
         "color": { "value": "{ams.color.text.default}" }
       },
       "magenta": {
         "background-color": { "value": "{ams.color.highlight.magenta}" },
+        "border-color": { "value": "{ams.color.highlight.magenta}" },
         "color": { "value": "{ams.color.text.inverse}" }
       },
       "orange": {
         "background-color": { "value": "{ams.color.highlight.orange}" },
+        "border-color": { "value": "{ams.color.highlight.orange}" },
         "color": { "value": "{ams.color.text.default}" }
       },
       "yellow": {
         "background-color": { "value": "{ams.color.highlight.yellow}" },
+        "border-color": { "value": "{ams.color.highlight.yellow}" },
         "color": { "value": "{ams.color.text.default}" }
       }
     }

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

@@ -10,7 +10,7 @@
       "padding-inline": { "value": "{ams.space.xs}" },
       "azure": {
         "background-color": { "value": "{ams.color.feedback.info}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "color": { "value": "{ams.color.text.inverse}" }
       },
       "lime": {
         "background-color": { "value": "{ams.color.highlight.lime}" },

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

@@ -1,6 +1,8 @@
 {
   "ams": {
     "button": {
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.m}" },
       "cursor": { "value": "{ams.cursor.interactive}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -13,45 +15,39 @@
       "disabled": {
         "cursor": { "value": "{ams.cursor.disabled}" }
       },
-      "forced-color-mode": {
-        "border": { "value": "{ams.border.width.m} solid" }
-      },
       "primary": {
         "background-color": { "value": "{ams.color.interactive.default}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
+        "border-color": { "value": "{ams.color.interactive.default}" },
         "color": { "value": "{ams.color.text.inverse}" },
         "disabled": {
           "background-color": { "value": "{ams.color.interactive.disabled}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" }
+          "border-color": { "value": "{ams.color.interactive.disabled}" }
         },
         "hover": {
           "background-color": { "value": "{ams.color.interactive.hover}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" }
+          "border-color": { "value": "{ams.color.interactive.hover}" }
         }
       },
       "secondary": {
         "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.l} {ams.color.interactive.hover}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
           "color": { "value": "{ams.color.interactive.hover}" }
         },
         "disabled": {
-          "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" },
+        "border-color": { "value": "transparent" },
         "color": { "value": "{ams.color.interactive.default}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" },
+          "border-color": { "value": "currentColor" },
           "color": { "value": "{ams.color.interactive.hover}" }
         },
         "disabled": {
-          "background-color": { "value": "transparent" },
           "color": { "value": "{ams.color.interactive.disabled}" }
         }
       },

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

@@ -1,9 +1,15 @@
 {
   "ams": {
     "card": {
-      "gap": { "value": "{ams.space.s}" },
+      "heading": {
+        "margin-block-end": { "value": "{ams.space.xs}" }
+      },
       "heading-group": {
-        "gap": { "value": "{ams.space.s}" }
+        "gap": { "value": "{ams.space.xs}" },
+        "margin-block-end": { "value": "{ams.space.xs}" }
+      },
+      "image": {
+        "margin-block-end": { "value": "{ams.space.s}" }
       },
       "link": {
         "color": { "value": "{ams.links.color}" },

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

@@ -9,66 +9,87 @@
       "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.interactive.default}" },
-        "border-width": { "value": "{ams.border.width.m}" },
-        "checked": {
-          "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\")"
-          },
+      "checked-indicator": {
+        "stroke": { "value": "{ams.color.interactive.inverse}" }
+      },
+      "indeterminate-indicator": {
+        "stroke": { "value": "{ams.color.interactive.inverse}" }
+      },
+      "hover-indicator": {
+        "hover": {
+          "stroke": { "value": "{ams.color.interactive.hover}" }
+        },
+        "invalid": {
           "hover": {
-            "background-color": { "value": "{ams.color.interactive.hover}" }
+            "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
           }
-        },
-        "disabled": {
-          "border-color": { "value": "{ams.color.interactive.disabled}" },
-          "border-width": { "value": "{ams.border.width.m}" },
-          "checked": {
-            "background-color": { "value": "{ams.color.interactive.disabled}" },
+        }
+      },
+      "rectangle": {
+        "fill": { "value": "{ams.color.background}" },
+        "stroke": { "value": "{ams.color.interactive.default}" },
+        "checked": {
+          "fill": { "value": "{ams.color.interactive.default}" },
+          "disabled": {
+            "fill": { "value": "{ams.color.interactive.disabled}" },
             "hover": {
-              "background-color": { "value": "{ams.color.interactive.disabled}" }
+              "fill": { "value": "{ams.color.interactive.disabled}" }
             }
           },
-          "indeterminate": {
-            "background-color": { "value": "{ams.color.interactive.disabled}" },
+          "hover": {
+            "fill": { "value": "{ams.color.interactive.hover}" },
+            "disabled-invalid": {
+              "fill": { "value": "{ams.color.interactive.disabled}" }
+            }
+          },
+          "invalid": {
+            "fill": { "value": "{ams.color.interactive.invalid.default}" },
             "hover": {
-              "background-color": { "value": "{ams.color.interactive.disabled}" }
+              "fill": { "value": "{ams.color.interactive.invalid.hover}" }
             }
           }
         },
+        "disabled": {
+          "stroke": { "value": "{ams.color.interactive.disabled}" }
+        },
         "hover": {
-          "border-color": { "value": "{ams.color.interactive.hover}" },
-          "border-width": { "value": "{ams.border.width.l}" }
+          "stroke": { "value": "{ams.color.interactive.hover}" },
+          "disabled-invalid": {
+            "stroke": { "value": "{ams.color.interactive.disabled}" }
+          }
         },
-        "invalid": {
-          "border-color": { "value": "{ams.color.interactive.invalid.default}" },
-          "checked": {
-            "background-color": { "value": "{ams.color.interactive.invalid.default}" },
+        "indeterminate": {
+          "fill": { "value": "{ams.color.interactive.default}" },
+          "disabled": {
+            "fill": { "value": "{ams.color.interactive.disabled}" },
             "hover": {
-              "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
+              "fill": { "value": "{ams.color.interactive.disabled}" }
             }
           },
           "hover": {
-            "border-color": { "value": "{ams.color.interactive.invalid.hover}" }
+            "fill": { "value": "{ams.color.interactive.hover}" },
+            "disabled-invalid": {
+              "fill": { "value": "{ams.color.interactive.disabled}" }
+            }
           },
-          "indeterminate": {
-            "background-color": { "value": "{ams.color.interactive.invalid.default}" },
+          "invalid": {
+            "fill": { "value": "{ams.color.interactive.invalid.default}" },
             "hover": {
-              "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
+              "fill": { "value": "{ams.color.interactive.invalid.hover}" }
             }
           }
         },
-        "indeterminate": {
-          "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\")"
-          },
+        "invalid": {
+          "stroke": { "value": "{ams.color.interactive.invalid.default}" },
           "hover": {
-            "background-color": { "value": "{ams.color.interactive.hover}" }
+            "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
           }
         }
       },
+      "icon-container": {
+        "block-size": { "value": "calc({ams.checkbox.font-size} * {ams.checkbox.line-height})" },
+        "inline-size": { "value": "1.5rem" }
+      },
       "disabled": {
         "cursor": { "value": "{ams.cursor.disabled}" },
         "color": { "value": "{ams.color.interactive.disabled}" }

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

@@ -2,7 +2,9 @@
   "ams": {
     "date-input": {
       "background-color": { "value": "{ams.color.background}" },
-      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
+      "border-color": { "value": "currentColor" },
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.m}" },
       "color": { "value": "{ams.color.text.default}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -18,28 +20,27 @@
         "cursor": { "value": "{ams.cursor.interactive}" }
       },
       "disabled": {
-        "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>\")"
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
           }
         }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
         "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>\")"
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
           }
         }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
+        "border-color": { "value": "{ams.color.interactive.invalid.default}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
+          "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
         }
       }
     }

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

@@ -2,26 +2,43 @@
   "ams": {
     "dialog": {
       "background-color": { "value": "{ams.color.background}" },
-      "border": { "value": "{ams.border.width.m} solid {ams.dialog.background-color}" },
+      "border-color": { "value": "{ams.dialog.background-color}" },
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.m}" },
       "gap": { "value": "{ams.space.m}" },
-      "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
-      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" },
+      "inline-size": { "value": "calc(100% - 2 * {ams.space.l})" },
+      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.l})" },
       "max-inline-size": { "value": "48rem" },
+      "medium": {
+        "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
+        "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" }
+      },
       "backdrop": {
         "background-color": { "value": "rgb(24 24 24 / 62.5%)" }
       },
       "header": {
         "gap": { "value": "{ams.space.m}" },
-        "padding-block": { "value": "{ams.space.xl} 0" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-block": { "value": "{ams.space.l} 0" },
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-block": { "value": "{ams.space.xl} 0" },
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       },
       "body": {
         "padding-block": { "value": "0" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       },
       "footer": {
-        "padding-block": { "value": "0 {ams.space.xl}" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-block": { "value": "0 {ams.space.l}" },
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-block": { "value": "0 {ams.space.xl}" },
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       }
     }
   }

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

@@ -11,7 +11,8 @@
         "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}" }
+        "margin-block-end": { "value": "{ams.space.m}" },
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
       }
     }
   }

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

@@ -2,17 +2,16 @@
   "ams": {
     "file-input": {
       "background-color": { "value": "{ams.color.background}" },
-      "border": { "value": "{ams.border.width.s} dashed {ams.color.interactive.secondary}" },
+      "border-color": { "value": "currentColor" },
+      "border-style": { "value": "dashed" },
+      "border-width": { "value": "{ams.border.width.m}" },
       "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}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "outline-offset": {
-        "comment": "Compensate for the dashed border",
-        "value": "calc({ams.focus.outline-offset} * 2)"
-      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "padding-block": { "value": "{ams.space.m}" },
       "padding-inline": { "value": "{ams.space.m}" },
       "disabled": {
@@ -21,23 +20,21 @@
       },
       "file-selector-button": {
         "background-color": { "value": "{ams.color.background}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
+        "border-color": { "value": "currentColor" },
+        "border-style": { "value": "solid" },
+        "border-width": { "value": "{ams.border.width.m}" },
         "color": { "value": "{ams.color.interactive.default}" },
         "cursor": { "value": "{ams.cursor.interactive}" },
         "margin-inline-end": { "value": "{ams.space.m}" },
         "padding-block": { "value": "{ams.space.s}" },
         "padding-inline": { "value": "{ams.space.m}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.l} {ams.color.interactive.hover}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
           "color": { "value": "{ams.color.interactive.hover}" }
         },
         "disabled": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" },
           "color": { "value": "{ams.color.interactive.disabled}" },
           "cursor": { "value": "{ams.cursor.disabled}" }
-        },
-        "forced-color-mode": {
-          "border": { "value": "{ams.border.width.m} solid" }
         }
       }
     }

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

@@ -4,15 +4,15 @@
       "column-count": { "value": "4" },
       "column-gap": { "value": "{ams.space.xl}" },
       "padding-block": {
-        "s": { "value": "{ams.space.l}" },
-        "m": { "value": "{ams.space.xl}" },
-        "l": { "value": "{ams.space.2xl}" }
+        "l": { "value": "{ams.space.l}" },
+        "xl": { "value": "{ams.space.xl}" },
+        "2xl": { "value": "{ams.space.2xl}" }
       },
       "padding-inline": { "value": "{ams.space.l}" },
       "row-gap": {
-        "s": { "value": "{ams.space.l}" },
-        "m": { "value": "{ams.space.xl}" },
-        "l": { "value": "{ams.space.2xl}" }
+        "l": { "value": "{ams.space.l}" },
+        "xl": { "value": "{ams.space.xl}" },
+        "2xl": { "value": "{ams.space.2xl}" }
       },
       "medium": {
         "column-count": { "value": "8" },

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

@@ -4,6 +4,7 @@
       "color": { "value": "{ams.color.text.default}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
       "inverse": {
         "color": { "value": "{ams.color.text.inverse}" }
       },

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

@@ -1,7 +1,7 @@
 {
   "ams": {
     "hint": {
-      "color": { "value": "{ams.color.text.secondary}" }
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
     }
   }
 }

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

@@ -5,7 +5,8 @@
       "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}" }
+      "line-height": { "value": "{ams.typography.heading.4.line-height}" },
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
     }
   }
 }

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

@@ -2,36 +2,17 @@
   "ams": {
     "link": {
       "color": { "value": "{ams.links.color}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-family": { "value": "inherit" },
+      "font-size": { "value": "inherit" },
       "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "inherit" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+      "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
       "hover": {
-        "color": { "value": "{ams.links.hover.color}" }
-      },
-      "inline": {
-        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
-        "font-family": { "value": "inherit" },
-        "font-size": { "value": "inherit" },
-        "line-height": { "value": "inherit" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{ams.links.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
-        }
-      },
-      "standalone": {
-        "font-size": { "value": "{ams.typography.body-text.font-size}" },
-        "line-height": { "value": "{ams.typography.body-text.line-height}" },
-        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{ams.links.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
-        }
+        "color": { "value": "{ams.links.hover.color}" },
+        "text-decoration-thickness": { "value": "{ams.links.hover.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
       },
       "contrast": {
         "color": { "value": "{ams.links.contrast.color}" },