@amsterdam/design-system-tokens 3.2.0 → 3.4.0

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

@@ -9,6 +9,34 @@
         }
       },
       "button": {
+        "font-family": {
+          "$deprecated": "The Accordion section button now uses a Heading component. Use the Heading component tokens instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.font-family}",
+          "$type": "fontFamily"
+        },
+        "font-size": {
+          "$deprecated": "The Accordion section button now uses a Heading component. Use the Heading component tokens instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.3.font-size}",
+          "$extensions": {
+            "nl.amsterdam.type": "fontSize"
+          }
+        },
+        "font-weight": {
+          "$deprecated": "The Accordion section button now uses a Heading component. Use the Heading component tokens instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.font-weight}",
+          "$type": "fontWeight"
+        },
+        "line-height": {
+          "$deprecated": "The Accordion section button now uses a Heading component. Use the Heading component tokens instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.3.line-height}",
+          "$extensions": {
+            "nl.amsterdam.type": "lineHeight"
+          }
+        },
+        "text-wrap": {
+          "$deprecated": "The Accordion section button now uses a Heading component. Use the Heading component tokens instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.text-wrap}"
+        },
         "color": {
           "$value": "{ams.color.interactive.default}",
           "$type": "color"
@@ -50,6 +78,16 @@
             "$type": "color"
           }
         }
+      },
+      "panel": {
+        "padding-block": {
+          "$deprecated": "Will be removed in release 4.0.0.",
+          "$value": "0"
+        },
+        "padding-inline": {
+          "$deprecated": "Will be removed in release 4.0.0.",
+          "$value": "0"
+        }
       }
     }
   }

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

@@ -69,6 +69,11 @@
         },
         "text-decoration-line": {
           "$value": "{ams.links.subtle.hover.text-decoration-line}"
+        },
+        "text-decoration-thickness": {
+          "$deprecated": "Use `ams.checkbox.text-decoration-thickness` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.border.width.m}",
+          "$type": "dimension"
         }
       },
       "checked-indicator": {
@@ -127,12 +132,26 @@
             "fill": {
               "$value": "{ams.color.interactive.disabled}",
               "$type": "color"
+            },
+            "hover": {
+              "fill": {
+                "$deprecated": "Will be removed in release 4.0.0.",
+                "$value": "{ams.color.interactive.disabled}",
+                "$type": "color"
+              }
             }
           },
           "hover": {
             "fill": {
               "$value": "{ams.color.interactive.hover}",
               "$type": "color"
+            },
+            "disabled-invalid": {
+              "fill": {
+                "$deprecated": "Will be removed in release 4.0.0.",
+                "$value": "{ams.color.interactive.disabled}",
+                "$type": "color"
+              }
             }
           },
           "invalid": {
@@ -158,6 +177,13 @@
           "stroke": {
             "$value": "{ams.color.interactive.hover}",
             "$type": "color"
+          },
+          "disabled-invalid": {
+            "stroke": {
+              "$deprecated": "Will be removed in release 4.0.0.",
+              "$value": "{ams.color.interactive.disabled}",
+              "$type": "color"
+            }
           }
         },
         "indeterminate": {
@@ -169,12 +195,26 @@
             "fill": {
               "$value": "{ams.color.interactive.disabled}",
               "$type": "color"
+            },
+            "hover": {
+              "fill": {
+                "$deprecated": "Will be removed in release 4.0.0.",
+                "$value": "{ams.color.interactive.disabled}",
+                "$type": "color"
+              }
             }
           },
           "hover": {
             "fill": {
               "$value": "{ams.color.interactive.hover}",
               "$type": "color"
+            },
+            "disabled-invalid": {
+              "fill": {
+                "$deprecated": "Will be removed in release 4.0.0.",
+                "$value": "{ams.color.interactive.disabled}",
+                "$type": "color"
+              }
             }
           },
           "invalid": {

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

@@ -73,6 +73,18 @@
         },
         "cursor": {
           "$value": "{ams.cursor.disabled}"
+        },
+        "calendar-picker-indicator": {
+          "background-image": {
+            "$deprecated": "Will be removed in release 6.0.0.",
+            "$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>\")"
+          }
+        },
+        "calender-picker-indicator": {
+          "background-image": {
+            "$deprecated": "Use `ams.date-input.disabled.calendar-picker-indicator.background-image` instead. Will be removed in release 4.0.0.",
+            "$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": {
@@ -84,6 +96,12 @@
           "background-image": {
             "$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>\")"
           }
+        },
+        "calender-picker-indicator": {
+          "background-image": {
+            "$deprecated": "Use `ams.date-input.hover.calendar-picker-indicator.background-image` instead. Will be removed in release 4.0.0.",
+            "$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": {
@@ -109,6 +127,16 @@
         "cursor": {
           "$value": "{ams.cursor.interactive}"
         }
+      },
+      "calender-picker-indicator": {
+        "background-image": {
+          "$deprecated": "Use `ams.date-input.calendar-picker-indicator.background-image` instead. Will be removed in release 4.0.0.",
+          "$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": {
+          "$deprecated": "Use `ams.date-input.calendar-picker-indicator.cursor` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.cursor.interactive}"
+        }
       }
     }
   }

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

@@ -19,17 +19,19 @@
       "font-size": {
         "$value": "{ams.typography.body-text.font-size}",
         "$extensions": {
+          "nl.amsterdam.hint": "Applies to descriptions only; terms set their own font size.",
           "nl.amsterdam.type": "fontSize"
         }
       },
       "line-height": {
         "$value": "{ams.typography.body-text.line-height}",
         "$extensions": {
+          "nl.amsterdam.hint": "Applies to descriptions only; terms set their own line height.",
           "nl.amsterdam.type": "lineHeight"
         }
       },
       "row-gap": {
-        "$deprecated": "This token will be removed in release 6.0.0",
+        "$deprecated": "Will be removed in release 6.0.0.",
         "$value": "{ams.space.s}",
         "$type": "dimension",
         "$extensions": {
@@ -43,16 +45,41 @@
         }
       },
       "term": {
+        "font-size": {
+          "$value": "{ams.typography.heading.4.font-size}",
+          "$extensions": {
+            "nl.amsterdam.type": "fontSize"
+          }
+        },
         "font-weight": {
-          "$value": "{ams.typography.body-text.bold.font-weight}",
+          "$value": "{ams.typography.heading.font-weight}",
           "$type": "fontWeight"
         },
+        "line-height": {
+          "$value": "{ams.typography.heading.4.line-height}",
+          "$extensions": {
+            "nl.amsterdam.type": "lineHeight"
+          }
+        },
         "margin-block-end": {
           "$value": "{ams.space.xs}",
           "$type": "dimension",
           "$extensions": {
             "nl.amsterdam.subtype": "space"
           }
+        },
+        "text-wrap": {
+          "$value": "balance"
+        },
+        "vi-medium": {
+          "margin-block-end": {
+            "$value": "{ams.description-list.description.margin-block-end}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.hint": "Should equal the bottom margin of descriptions.",
+              "nl.amsterdam.subtype": "space"
+            }
+          }
         }
       },
       "description": {

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

@@ -50,6 +50,14 @@
         }
       },
       "legend": {
+        "margin-block-end": {
+          "$deprecated": "Will be removed in release 5.0.0.",
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
         "color": {
           "$value": "{ams.color.text.default}",
           "$type": "color"

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

@@ -1,6 +1,14 @@
 {
   "ams": {
     "field": {
+      "gap": {
+        "$deprecated": "Will be removed in release 5.0.0.",
+        "$value": "{ams.space.s}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "child": {
         "margin-block-end": {
           "$value": "{ams.space.xs}",

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

@@ -144,6 +144,7 @@
         },
         "hover": {
           "box-shadow": {
+            "$type": "shadow",
             "$value": "{ams.button.secondary.hover.box-shadow}"
           },
           "color": {

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

@@ -41,6 +41,22 @@
           }
         }
       },
+      "heading-0": {
+        "font-size": {
+          "$deprecated": "Use `ams.typography.heading.1.font-size` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.0.font-size}",
+          "$extensions": {
+            "nl.amsterdam.type": "fontSize"
+          }
+        },
+        "line-height": {
+          "$deprecated": "Use `ams.typography.heading.1.line-height` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.0.line-height}",
+          "$extensions": {
+            "nl.amsterdam.type": "lineHeight"
+          }
+        }
+      },
       "heading-1": {
         "font-size": {
           "$value": "{ams.typography.heading.1.font-size}",

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

@@ -60,6 +60,34 @@
           "$value": "{ams.links.inverse.color}",
           "$type": "color"
         },
+        "contrast": {
+          "color": {
+            "$deprecated": "The menu has a dark background now, so this is no longer needed. Will be removed in release 4.0.0.",
+            "$value": "{ams.links.contrast.color}",
+            "$type": "color"
+          },
+          "hover": {
+            "color": {
+              "$deprecated": "The menu has a dark background now, so this is no longer needed. Will be removed in release 4.0.0.",
+              "$value": "{ams.links.contrast.hover.color}",
+              "$type": "color"
+            }
+          }
+        },
+        "inverse": {
+          "color": {
+            "$deprecated": "The menu has a dark background now, so this is no longer needed. Will be removed in release 4.0.0.",
+            "$value": "{ams.links.inverse.color}",
+            "$type": "color"
+          },
+          "hover": {
+            "color": {
+              "$deprecated": "The menu has a dark background now, so this is no longer needed. Will be removed in release 4.0.0.",
+              "$value": "{ams.links.inverse.hover.color}",
+              "$type": "color"
+            }
+          }
+        },
         "gap": {
           "$value": "{ams.space.s}",
           "$type": "dimension",

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

@@ -144,7 +144,7 @@
         },
         "item": {
           "color": {
-            "$deprecated": "Use `ams.page-header.menu.link.color` instead.",
+            "$deprecated": "Use `ams.page-header.menu.link.color` instead. Will be removed in release 5.0.0.",
             "$value": "{ams.links.color}",
             "$type": "color"
           },

package/src/components/ams/{page-heading.deprecated.tokens.json → page-heading.tokens.json}

@@ -2,41 +2,41 @@
   "ams": {
     "page-heading": {
       "color": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.color.text.default}",
         "$type": "color"
       },
       "font-family": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.typography.font-family}",
         "$type": "fontFamily"
       },
       "font-size": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.typography.heading.0.font-size}",
         "$extensions": {
           "nl.amsterdam.type": "fontSize"
         }
       },
       "font-weight": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.typography.heading.font-weight}",
         "$type": "fontWeight"
       },
       "line-height": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.typography.heading.0.line-height}",
         "$extensions": {
           "nl.amsterdam.type": "lineHeight"
         }
       },
       "text-wrap": {
-        "$deprecated": "Use the Heading component with level 1 instead.",
+        "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
         "$value": "{ams.typography.heading.text-wrap}"
       },
       "inverse": {
         "color": {
-          "$deprecated": "Use the Heading component with level 1 instead.",
+          "$deprecated": "Use the Heading component with level 1 instead. Will be removed in release 4.0.0.",
           "$value": "{ams.color.text.inverse}",
           "$type": "color"
         }

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

@@ -43,6 +43,57 @@
           }
         }
       },
+      "button": {
+        "color": {
+          "$value": "{ams.color.interactive.default}",
+          "$type": "color"
+        },
+        "cursor": {
+          "$value": "{ams.cursor.interactive}"
+        },
+        "gap": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "outline-offset": {
+          "$value": "{ams.focus.outline-offset}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "padding-block": {
+          "$value": "0",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "padding-inline": {
+          "$value": "0",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "hover": {
+          "color": {
+            "$value": "{ams.color.interactive.hover}",
+            "$type": "color"
+          }
+        }
+      },
+      "icon": {
+        "transition-duration": {
+          "$value": "0.3s"
+        },
+        "transition-timing-function": {
+          "$value": "ease"
+        }
+      },
       "step": {
         "gap": {
           "$value": "{ams.space.m}",

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

@@ -86,6 +86,7 @@
       },
       "hover": {
         "box-shadow": {
+          "$type": "shadow",
           "$value": "{ams.inputs.hover.box-shadow}"
         },
         "background-image": {
@@ -103,6 +104,7 @@
             "$type": "color"
           },
           "box-shadow": {
+            "$type": "shadow",
             "$value": "{ams.inputs.invalid.hover.box-shadow}"
           }
         }

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

@@ -60,6 +60,36 @@
         },
         "text-decoration-line": {
           "$value": "{ams.links.subtle.hover.text-decoration-line}"
+        },
+        "text-decoration-thickness": {
+          "$deprecated": "Use `ams.standalone-link.text-decoration-thickness` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.links.hover.text-decoration-thickness}",
+          "$type": "dimension"
+        },
+        "text-underline-offset": {
+          "$deprecated": "Use `ams.standalone-link.text-underline-offset` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.links.hover.text-underline-offset}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
+      },
+      "with-icon": {
+        "text-decoration-line": {
+          "$deprecated": "Use `ams.standalone-link.text-decoration-line` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.links.subtle.text-decoration-line}"
+        },
+        "text-decoration-thickness": {
+          "$deprecated": "Use `ams.standalone-link.text-decoration-thickness` instead. Will be removed in release 4.0.0.",
+          "$value": "{ams.links.text-decoration-thickness}",
+          "$type": "dimension"
+        },
+        "hover": {
+          "text-decoration-line": {
+            "$deprecated": "Use `ams.standalone-link.hover.text-decoration-line` instead. Will be removed in release 4.0.0.",
+            "$value": "{ams.links.subtle.hover.text-decoration-line}"
+          }
         }
       },
       "contrast": {

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

@@ -43,7 +43,23 @@
         },
         "hover": {
           "box-shadow": {
-            "$value": "0 0 0 {ams.border.width.m} {ams.switch.thumb.hover.color}"
+            "$type": "shadow",
+            "$value": {
+              "offsetX": {
+                "value": 0,
+                "unit": "rem"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "rem"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "rem"
+              },
+              "spread": "{ams.border.width.m}",
+              "color": "{ams.switch.thumb.hover.color}"
+            }
           },
           "color": {
             "$value": "{ams.color.interactive.hover}",

package/src/components/ams/table-of-contents.tokens.json

@@ -28,6 +28,27 @@
           "nl.amsterdam.type": "lineHeight"
         }
       },
+      "heading": {
+        "font-weight": {
+          "$deprecated": "This token is no longer used. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.font-weight}",
+          "$type": "fontWeight"
+        },
+        "font-size": {
+          "$deprecated": "This token is no longer used. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.4.font-size}",
+          "$extensions": {
+            "nl.amsterdam.type": "fontSize"
+          }
+        },
+        "line-height": {
+          "$deprecated": "This token is no longer used. Will be removed in release 4.0.0.",
+          "$value": "{ams.typography.heading.4.line-height}",
+          "$extensions": {
+            "nl.amsterdam.type": "lineHeight"
+          }
+        }
+      },
       "link": {
         "color": {
           "$value": "{ams.links.color}",

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

@@ -17,7 +17,7 @@
               "value": 0,
               "unit": "rem"
             },
-            "offsetY": "calc({ams.border.width.m} * -1)",
+            "offsetY": "{ams.border.width.negative.m}",
             "blur": {
               "value": 0,
               "unit": "rem"
@@ -88,7 +88,7 @@
                 "value": 0,
                 "unit": "rem"
               },
-              "offsetY": "calc({ams.border.width.m} * -1)",
+              "offsetY": "{ams.border.width.negative.m}",
               "blur": {
                 "value": 0,
                 "unit": "rem"
@@ -114,7 +114,7 @@
                 "value": 0,
                 "unit": "rem"
               },
-              "offsetY": "calc({ams.border.width.xl} * -1)",
+              "offsetY": "{ams.border.width.negative.xl}",
               "blur": {
                 "value": 0,
                 "unit": "rem"

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

@@ -77,6 +77,7 @@
       },
       "hover": {
         "box-shadow": {
+          "$type": "shadow",
           "$value": "{ams.inputs.hover.box-shadow}"
         }
       },
@@ -91,6 +92,7 @@
             "$type": "color"
           },
           "box-shadow": {
+            "$type": "shadow",
             "$value": "{ams.inputs.invalid.hover.box-shadow}"
           }
         }