@amsterdam/design-system-tokens 0.10.0 → 0.12.0

package/package.json

@@ -1,11 +1,17 @@
 {
-  "version": "0.10.0",
-  "author": "Community for NL Design System",
-  "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
+  "version": "0.12.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/",
   "license": "SEE LICENSE IN LICENSE.md",
   "name": "@amsterdam/design-system-tokens",
+  "type": "module",
   "keywords": [
-    "nl-design-system"
+    "amsterdam",
+    "amsterdam-design-system",
+    "design-system",
+    "nl-design-system",
+    "tokens"
   ],
   "private": false,
   "publishConfig": {
@@ -19,7 +25,7 @@
   "devDependencies": {
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "3.9.2"
+    "style-dictionary": "4.1.4"
   },
   "scripts": {
     "clean": "rimraf dist/",

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

@@ -1,6 +1,11 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "0.25rem" },
+      "sm": { "value": "0.5rem" },
+      "md": { "value": "1rem" },
+      "lg": { "value": "1.5rem" },
+      "xl": { "value": "2rem" },
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
         "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },

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

@@ -1,29 +1,20 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)" },
+      "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)" },
+      "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)" },
+      "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)" },
+      "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)" },
       "grid": {
-        "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
-        "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
+        "xs": { "value": "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)" },
+        "sm": { "value": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)" },
         "md": {
-          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+          "value": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
           "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
         },
-        "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
-        "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
-      },
-      "inside": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
-      },
-      "stack": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
+        "lg": { "value": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)" },
+        "xl": { "value": "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)" }
       }
     }
   }

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

@@ -3,25 +3,25 @@
     "text": {
       "level": {
         "0": {
-          "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
+          "font-size": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" }
         },
         "1": {
-          "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }
+          "font-size": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }
+          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }
+          "font-size": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" }
         },
         "4": {
-          "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }
+          "font-size": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" }
         },
         "5": {
-          "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }
+          "font-size": { "value": "1rem" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }
+          "font-size": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" }
         }
       }
     }

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

@@ -8,31 +8,31 @@
       },
       "level": {
         "0": {
-          "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
+          "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
           "line-height": { "value": "1.15" }
         },
         "1": {
-          "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
+          "font-size": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
           "line-height": { "value": "1.2" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
+          "font-size": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
           "line-height": { "value": "1.25" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
+          "font-size": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
           "line-height": { "value": "1.3" }
         },
         "4": {
-          "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
+          "font-size": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
           "line-height": { "value": "1.5" }
         },
         "5": {
-          "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
+          "font-size": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
           "line-height": { "value": "1.6" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
+          "font-size": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
           "line-height": { "value": "1.6" }
         }
       }

package/src/common/ams/link-appearance.tokens.json

@@ -7,12 +7,6 @@
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
       },
-      "on-background-dark": {
-        "color": { "value": "{ams.color.primary-white}" }
-      },
-      "on-background-light": {
-        "color": { "value": "{ams.color.primary-black}" }
-      },
       "regular": {
         "text-decoration-line": { "value": "underline" },
         "hover": {
@@ -25,6 +19,24 @@
         "hover": {
           "text-decoration-line": { "value": "underline" }
         }
+      },
+      "contrast": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "color": { "value": "{ams.color.primary-black}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.color.primary-black}" }
+        }
+      },
+      "inverse": {
+        "color": { "value": "{ams.color.primary-white}" },
+        "hover": {
+          "color": { "value": "{ams.color.primary-white}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.color.primary-white}" }
+        }
       }
     }
   }

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

@@ -1,15 +1,15 @@
 {
   "ams": {
     "accordion": {
-      "gap": { "value": "{ams.space.inside.xs}" },
+      "gap": { "value": "{ams.space.md}" },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "gap": { "value": "{ams.space.inside.md}" },
+        "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
-        "padding-block": { "value": "{ams.space.inside.sm}" },
+        "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "0" },
         "focus": {
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
@@ -19,7 +19,7 @@
         }
       },
       "panel": {
-        "padding-block": { "value": "0 {ams.space.inside.md}" },
+        "padding-block": { "value": "0" },
         "padding-inline": { "value": "0" }
       }
     }

package/src/components/ams/action-group.tokens.json

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "action-group": {
+      "gap": { "value": "{ams.space.md}" }
+    }
+  }
+}

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

@@ -3,9 +3,9 @@
     "alert": {
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
-      "gap": { "value": "1rem" },
-      "padding-block": { "value": "{ams.space.inside.md}" },
-      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "gap": { "value": "{ams.space.sm}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
         "border-color": { "value": "{ams.color.primary-red}" }
       },
@@ -23,6 +23,9 @@
         "hover": {
           "fill": { "value": "{ams.color.primary-blue}" }
         }
+      },
+      "content": {
+        "gap": { "value": "{ams.space.sm}" }
       }
     }
   }

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

@@ -6,8 +6,8 @@
       "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" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.xs}" },
       "black": {
         "background-color": { "value": "{ams.color.primary-black}" },
         "color": { "value": "{ams.color.primary-white}" }
@@ -20,6 +20,9 @@
         "background-color": { "value": "{ams.color.dark-green}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "forced-colors": {
+        "border-width": { "value": "{ams.border.width.md}" }
+      },
       "green": {
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }

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

@@ -5,7 +5,7 @@
       "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}" },
-      "padding-inline": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.xs}" },
       "black": {
         "background-color": { "value": "{ams.color.primary-black}" },
         "color": { "value": "{ams.color.primary-white}" }

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

@@ -8,7 +8,10 @@
       "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>\")"
-        }
+        },
+        "block-size": { "value": "1ex" },
+        "inline-size": { "value": "1ex" },
+        "margin-inline": { "value": "{ams.space.xs}" }
       },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },

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

@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "breakout": {
+      "row-gap": {
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" }
+      }
+    }
+  }
+}

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

@@ -5,10 +5,10 @@
       "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": "1rem" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "gap": { "value": "{ams.space.sm}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
@@ -56,6 +56,10 @@
           "background-color": { "value": "transparent" },
           "color": { "value": "{ams.color.neutral-grey2}" }
         }
+      },
+      "icon-only": {
+        "padding-block": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.sm}" }
       }
     }
   }

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

@@ -1,6 +1,10 @@
 {
   "ams": {
     "card": {
+      "gap": { "value": "{ams.space.sm}" },
+      "heading-group": {
+        "gap": { "value": "{ams.space.sm}" }
+      },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },

package/src/components/ams/{form-field-character-counter.tokens.json → character-count.tokens.json}

@@ -1,6 +1,6 @@
 {
   "ams": {
-    "form-field-character-counter": {
+    "character-count": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },

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

@@ -5,6 +5,7 @@
       "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}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "checkmark": {

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

@@ -2,11 +2,12 @@
   "ams": {
     "column": {
       "gap": {
-        "xs": { "value": "{ams.space.grid.xs}" },
-        "sm": { "value": "{ams.space.grid.sm}" },
-        "md": { "value": "{ams.space.grid.md}" },
-        "lg": { "value": "{ams.space.grid.lg}" },
-        "xl": { "value": "{ams.space.grid.xl}" }
+        "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}" }
       }
     }
   }

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

@@ -9,8 +9,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "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>\")"

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

@@ -2,18 +2,18 @@
   "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}" },
-      "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "{ams.space.stack.md}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "row": {
-        "gap": { "value": "{ams.space.stack.md}" }
+      "row-gap": { "value": "{ams.space.sm}" },
+      "term": {
+        "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
       "details": {
-        "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "padding-inline-start": { "value": "{ams.space.inside.xl}" }
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "padding-inline-start": { "value": "{ams.space.lg}" }
       }
     }
   }

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

@@ -3,18 +3,14 @@
     "dialog": {
       "background-color": { "value": "{ams.color.primary-white}" },
       "border": { "value": "0" },
-      "max-inline-size": { "value": "min(87.69vw, 45rem)" },
-      "form": {
-        "gap": { "value": "1.5rem" },
-        "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
-        "padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
-        "max-block-size": { "value": "75vh" }
-      },
+      "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})" },
+      "max-inline-size": { "value": "48rem" },
+      "padding-block": { "value": "{ams.space.grid.md}" },
+      "padding-inline": { "value": "{ams.space.grid.lg}" },
       "header": {
-        "gap": { "value": "1rem" }
-      },
-      "footer": {
-        "gap": { "value": "1rem" }
+        "gap": { "value": "{ams.space.md}" }
       }
     }
   }

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

@@ -2,12 +2,8 @@
   "ams": {
     "field-set": {
       "invalid": {
-        "border-inline-start": {
-          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
-        },
-        "padding-inline-start": {
-          "value": "{ams.space.inside.md}"
-        }
+        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
+        "padding-inline-start": { "value": "{ams.space.md}" }
       },
       "legend": {
         "color": { "value": "{ams.color.primary-black}" },
@@ -15,7 +11,7 @@
         "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.inside.md}" }
+        "margin-block-end": { "value": "{ams.space.md}" }
       }
     }
   }

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

@@ -1,16 +1,10 @@
 {
   "ams": {
     "field": {
-      "gap": {
-        "value": "{ams.space.stack.sm}"
-      },
+      "gap": { "value": "{ams.space.sm}" },
       "invalid": {
-        "border-inline-start": {
-          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
-        },
-        "padding-inline-start": {
-          "value": "{ams.space.inside.md}"
-        }
+        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
+        "padding-inline-start": { "value": "{ams.space.md}" }
       }
     }
   }

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

@@ -10,8 +10,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.md}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
@@ -21,9 +21,9 @@
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-blue}" },
         "cursor": { "value": "{ams.action.activate.cursor}" },
-        "margin-inline-end": { "value": "{ams.space.inside.md}" },
-        "padding-block": { "value": "{ams.space.inside.xs}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "margin-inline-end": { "value": "{ams.space.md}" },
+        "padding-block": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.md}" },
         "hover": {
           "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }

package/src/components/ams/form-error-list.tokens.json

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "form-error-list": {
+      "outline-offset": { "value": "{ams.focus.outline-offset}" }
+    }
+  }
+}

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

@@ -5,7 +5,7 @@
         "value": "{ams.space.grid.md}",
         "comment": "Must have the same value as `ams.grid.column-gap`."
       },
-      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
       "logo-link": {
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       }

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

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "hint": {
+      "color": { "value": "{ams.color.neutral-grey3}" }
+    }
+  }
+}

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

@@ -10,7 +10,7 @@
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" }
       },
-      "on-background-light": {
+      "contrast-color": {
         "color": { "value": "{ams.color.primary-black}" },
         "hover": {
           "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
@@ -20,7 +20,7 @@
           "color": { "value": "{ams.color.neutral-grey2}" }
         }
       },
-      "on-background-dark": {
+      "inverse-color": {
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "hover": {

package/src/components/ams/image-slider.tokens.json

@@ -0,0 +1,26 @@
+{
+  "ams": {
+    "image-slider": {
+      "gap": { "value": "{ams.space.xs}" },
+      "scroller": {
+        "gap": { "value": "{ams.space.xs}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" }
+      },
+      "thumbnails": {
+        "gap": { "value": "{ams.space.xs}" },
+        "thumbnail": {
+          "background-color": { "value": "transparent" },
+          "cursor": { "value": "{ams.action.activate.cursor}" },
+          "opacity": { "value": "40%" },
+          "outline-offset": { "value": "{ams.focus.outline-offset}" },
+          "in-view": {
+            "opacity": { "value": "100%" }
+          },
+          "hover": {
+            "opacity": { "value": "100%" }
+          }
+        }
+      }
+    }
+  }
+}