@amsterdam/design-system-tokens 3.3.0 → 4.0.0

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

@@ -3,11 +3,15 @@
     "time-input": {
       "background-color": {
         "$value": "{ams.inputs.background-color}",
-        "$type": "color"
+        "$extensions": {
+          "nl.amsterdam.type": "color"
+        }
       },
       "border-color": {
         "$value": "{ams.inputs.border-color}",
-        "$type": "color"
+        "$extensions": {
+          "nl.amsterdam.type": "color"
+        }
       },
       "border-style": {
         "$value": "{ams.inputs.border-style}",
@@ -23,11 +27,15 @@
       },
       "color": {
         "$value": "{ams.inputs.color}",
-        "$type": "color"
+        "$extensions": {
+          "nl.amsterdam.type": "color"
+        }
       },
       "font-family": {
         "$value": "{ams.inputs.font-family}",
-        "$type": "fontFamily"
+        "$extensions": {
+          "nl.amsterdam.type": "fontFamily"
+        }
       },
       "font-size": {
         "$value": "{ams.inputs.font-size}",
@@ -37,75 +45,102 @@
       },
       "font-weight": {
         "$value": "{ams.inputs.font-weight}",
-        "$type": "fontWeight"
+        "$extensions": {
+          "nl.amsterdam.type": "fontWeight"
+        }
       },
       "line-height": {
         "$value": "{ams.inputs.line-height}",
         "$extensions": {
-          "nl.amsterdam.type": "lineHeight"
+          "nl.amsterdam.subtype": "lineHeight",
+          "nl.amsterdam.type": "number"
         }
       },
       "outline-offset": {
         "$value": "{ams.inputs.outline-offset}",
-        "$type": "dimension",
         "$extensions": {
-          "nl.amsterdam.subtype": "space"
+          "nl.amsterdam.subtype": "space",
+          "nl.amsterdam.type": "dimension"
         }
       },
       "padding-block": {
         "$value": "{ams.inputs.padding-block}",
-        "$type": "dimension",
         "$extensions": {
-          "nl.amsterdam.subtype": "space"
+          "nl.amsterdam.subtype": "space",
+          "nl.amsterdam.type": "dimension"
         }
       },
       "padding-inline": {
         "$value": "{ams.inputs.padding-inline}",
-        "$type": "dimension",
         "$extensions": {
-          "nl.amsterdam.subtype": "space"
+          "nl.amsterdam.subtype": "space",
+          "nl.amsterdam.type": "dimension"
         }
       },
       "disabled": {
         "color": {
           "$value": "{ams.inputs.disabled.color}",
-          "$type": "color"
+          "$extensions": {
+            "nl.amsterdam.type": "color"
+          }
         },
         "cursor": {
-          "$value": "{ams.cursor.disabled}"
+          "$value": "{ams.cursor.disabled}",
+          "$extensions": {
+            "nl.amsterdam.type": "cursor"
+          }
         }
       },
       "hover": {
         "box-shadow": {
-          "$value": "{ams.inputs.hover.box-shadow}"
+          "$value": "{ams.inputs.hover.box-shadow}",
+          "$extensions": {
+            "nl.amsterdam.type": "shadow"
+          }
         },
         "calendar-picker-indicator": {
           "background-image": {
-            "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
+            "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")",
+            "$extensions": {
+              "nl.amsterdam.type": "backgroundImage"
+            }
           }
         }
       },
       "invalid": {
         "border-color": {
           "$value": "{ams.inputs.invalid.border-color}",
-          "$type": "color"
+          "$extensions": {
+            "nl.amsterdam.type": "color"
+          }
         },
         "hover": {
           "border-color": {
             "$value": "{ams.inputs.invalid.hover.border-color}",
-            "$type": "color"
+            "$extensions": {
+              "nl.amsterdam.type": "color"
+            }
           },
           "box-shadow": {
-            "$value": "{ams.inputs.invalid.hover.box-shadow}"
+            "$value": "{ams.inputs.invalid.hover.box-shadow}",
+            "$extensions": {
+              "nl.amsterdam.type": "shadow"
+            }
           }
         }
       },
       "calendar-picker-indicator": {
         "background-image": {
-          "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
+          "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")",
+          "$extensions": {
+            "nl.amsterdam.type": "backgroundImage"
+          }
         },
         "cursor": {
-          "$value": "{ams.cursor.interactive}"
+          "$value": "{ams.cursor.interactive}",
+          "$extensions": {
+            "nl.amsterdam.type": "cursor"
+          }
         }
       }
     }

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

@@ -3,11 +3,15 @@
     "unordered-list": {
       "color": {
         "$value": "{ams.color.text.default}",
-        "$type": "color"
+        "$extensions": {
+          "nl.amsterdam.type": "color"
+        }
       },
       "font-family": {
         "$value": "{ams.typography.font-family}",
-        "$type": "fontFamily"
+        "$extensions": {
+          "nl.amsterdam.type": "fontFamily"
+        }
       },
       "font-size": {
         "$value": "{ams.typography.body-text.font-size}",
@@ -17,29 +21,36 @@
       },
       "font-weight": {
         "$value": "{ams.typography.body-text.font-weight}",
-        "$type": "fontWeight"
+        "$extensions": {
+          "nl.amsterdam.type": "fontWeight"
+        }
       },
       "gap": {
         "$value": "{ams.space.s}",
-        "$type": "dimension",
         "$extensions": {
-          "nl.amsterdam.subtype": "space"
+          "nl.amsterdam.subtype": "space",
+          "nl.amsterdam.type": "dimension"
         }
       },
       "line-height": {
         "$value": "{ams.typography.body-text.line-height}",
         "$extensions": {
-          "nl.amsterdam.type": "lineHeight"
+          "nl.amsterdam.subtype": "lineHeight",
+          "nl.amsterdam.type": "number"
         }
       },
       "list-style-type": {
         "$value": "'\\2022'",
-        "$type": "fontFamily"
+        "$extensions": {
+          "nl.amsterdam.type": "listStyleType"
+        }
       },
       "inverse": {
         "color": {
           "$value": "{ams.color.text.inverse}",
-          "$type": "color"
+          "$extensions": {
+            "nl.amsterdam.type": "color"
+          }
         }
       },
       "small": {
@@ -52,7 +63,8 @@
         "line-height": {
           "$value": "{ams.typography.body-text.small.line-height}",
           "$extensions": {
-            "nl.amsterdam.type": "lineHeight"
+            "nl.amsterdam.subtype": "lineHeight",
+            "nl.amsterdam.type": "number"
           }
         }
       },
@@ -62,7 +74,6 @@
             "value": 1.625,
             "unit": "rem"
           },
-          "$type": "dimension",
           "$extensions": {
             "nl.amsterdam.hint": "Divide your total indentation width over margin and padding to position the marker.",
             "nl.amsterdam.subtype": "space"
@@ -76,34 +87,36 @@
           "$extensions": {
             "nl.amsterdam.hint": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.",
             "nl.amsterdam.subtype": "space"
-          },
-          "$type": "dimension"
-        }
+          }
+        },
+        "$type": "dimension"
       },
       "unordered-list": {
         "gap": {
           "$value": "{ams.space.s}",
-          "$type": "dimension",
           "$extensions": {
-            "nl.amsterdam.subtype": "space"
+            "nl.amsterdam.subtype": "space",
+            "nl.amsterdam.type": "dimension"
           }
         },
         "list-style-type": {
           "$value": "'\\2013'",
-          "$type": "fontFamily"
+          "$extensions": {
+            "nl.amsterdam.type": "listStyleType"
+          }
         },
         "padding-block-end": {
           "$value": "{ams.space.s}",
-          "$type": "dimension",
           "$extensions": {
-            "nl.amsterdam.subtype": "space"
+            "nl.amsterdam.subtype": "space",
+            "nl.amsterdam.type": "dimension"
           }
         },
         "padding-block-start": {
           "$value": "{ams.space.s}",
-          "$type": "dimension",
           "$extensions": {
-            "nl.amsterdam.subtype": "space"
+            "nl.amsterdam.subtype": "space",
+            "nl.amsterdam.type": "dimension"
           }
         },
         "item": {
@@ -112,9 +125,8 @@
               "value": 0.875,
               "unit": "rem"
             },
-            "$type": "dimension",
             "$extensions": {
-              "nl.amsterdam.hint": "Indent less than the parent to start-align the child\u2019s marker with the parent text.",
+              "nl.amsterdam.hint": "Indent less than the parent to start-align the child’s marker with the parent text.",
               "nl.amsterdam.subtype": "space"
             }
           },
@@ -126,9 +138,9 @@
             "$extensions": {
               "nl.amsterdam.hint": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.",
               "nl.amsterdam.subtype": "space"
-            },
-            "$type": "dimension"
-          }
+            }
+          },
+          "$type": "dimension"
         }
       }
     }

package/style-dictionary/transforms/dtcg-font-family.js

@@ -0,0 +1,32 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { transformTypes } from 'style-dictionary/enums'
+
+/**
+ * Transforms a DTCG fontFamily array to a CSS font-family string.
+ *
+ * The DTCG spec requires fontFamily values to be an array of strings,
+ * but CSS expects a comma-separated string where names containing spaces
+ * are quoted.
+ *
+ * @example
+ * // Input ($value of a token):
+ * ["Amsterdam Sans", "Arial", "sans-serif"]
+ *
+ * // Output (transformed token value):
+ * "'Amsterdam Sans', Arial, sans-serif"
+ * @see {@link https://www.designtokens.org/TR/2025.10/format/#font-family} DTCG fontFamily spec
+ */
+export const dtcgFontFamily = {
+  filter: (token) => (token.$type ?? token.type) === 'fontFamily' && Array.isArray(token.$value ?? token.value),
+  name: 'dtcg/fontFamily',
+  transform: (token) => {
+    const value = token.$value ?? token.value
+    return value.map((name) => (name.includes(' ') ? `'${name}'` : name)).join(', ')
+  },
+  transitive: true,
+  type: transformTypes.value,
+}

package/src/brand/ams/color.deprecated.tokens.json

@@ -1,13 +0,0 @@
-{
-  "ams": {
-    "color": {
-      "interactive": {
-        "secondary": {
-          "$deprecated": "Use `currentColor` instead",
-          "$value": "#202020",
-          "$type": "color"
-        }
-      }
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-{
-  "ams": {
-    "typography": {
-      "heading": {
-        "0": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.1.font-size` instead.",
-            "$value": "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
-          }
-        },
-        "6": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.5.font-size` instead.",
-            "$value": "{ams.typography.body-text.small.font-size}",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,40 +0,0 @@
-{
-  "ams": {
-    "typography": {
-      "heading": {
-        "0": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.1.font-size` instead.",
-            "$value": "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
-          },
-          "line-height": {
-            "$deprecated": "Use `ams.typography.heading.1.line-height` instead.",
-            "$value": "1.1",
-            "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
-          }
-        },
-        "6": {
-          "font-size": {
-            "$deprecated": "Use `ams.typography.heading.5.font-size` instead.",
-            "$value": "{ams.typography.body-text.small.font-size}",
-            "$extensions": {
-              "nl.amsterdam.type": "fontSize"
-            }
-          },
-          "line-height": {
-            "$deprecated": "Use `ams.typography.heading.5.line-height` instead.",
-            "$value": "1.4",
-            "$extensions": {
-              "nl.amsterdam.type": "lineHeight"
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-{
-  "ams": {
-    "accordion": {
-      "button": {
-        "font-family": {
-          "$value": "{ams.typography.font-family}",
-          "$type": "fontFamily"
-        },
-        "font-size": {
-          "$value": "{ams.typography.heading.3.font-size}",
-          "$extensions": {
-            "nl.amsterdam.type": "fontSize"
-          }
-        },
-        "font-weight": {
-          "$value": "{ams.typography.heading.font-weight}",
-          "$type": "fontWeight"
-        },
-        "line-height": {
-          "$value": "{ams.typography.heading.3.line-height}",
-          "$extensions": {
-            "nl.amsterdam.type": "lineHeight"
-          }
-        },
-        "text-wrap": {
-          "$value": "{ams.typography.heading.text-wrap}"
-        }
-      },
-      "panel": {
-        "padding-block": {
-          "$value": "0"
-        },
-        "padding-inline": {
-          "$value": "0"
-        }
-      }
-    }
-  }
-}

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

@@ -1,59 +0,0 @@
-{
-  "ams": {
-    "checkbox": {
-      "hover": {
-        "text-decoration-thickness": {
-          "$deprecated": "Use `ams.checkbox.text-decoration-thickness` instead",
-          "$value": "{ams.border.width.m}",
-          "$type": "dimension"
-        }
-      },
-      "rectangle": {
-        "checked": {
-          "disabled": {
-            "hover": {
-              "fill": {
-                "$value": "{ams.color.interactive.disabled}",
-                "$type": "color"
-              }
-            }
-          },
-          "hover": {
-            "disabled-invalid": {
-              "fill": {
-                "$value": "{ams.color.interactive.disabled}",
-                "$type": "color"
-              }
-            }
-          }
-        },
-        "hover": {
-          "disabled-invalid": {
-            "stroke": {
-              "$value": "{ams.color.interactive.disabled}",
-              "$type": "color"
-            }
-          }
-        },
-        "indeterminate": {
-          "disabled": {
-            "hover": {
-              "fill": {
-                "$value": "{ams.color.interactive.disabled}",
-                "$type": "color"
-              }
-            }
-          },
-          "hover": {
-            "disabled-invalid": {
-              "fill": {
-                "$value": "{ams.color.interactive.disabled}",
-                "$type": "color"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-{
-  "ams": {
-    "date-input": {
-      "disabled": {
-        "calendar-picker-indicator": {
-          "background-image": {
-            "$deprecated": "This token 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",
-            "$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": {
-        "calender-picker-indicator": {
-          "background-image": {
-            "$deprecated": "Use `ams.date-input.hover.calendar-picker-indicator.background-image` instead",
-            "$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.calendar-picker-indicator.background-image` instead",
-          "$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",
-          "$value": "{ams.cursor.interactive}"
-        }
-      }
-    }
-  }
-}

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

@@ -1,16 +0,0 @@
-{
-  "ams": {
-    "field-set": {
-      "legend": {
-        "margin-block-end": {
-          "$deprecated": "This token will be removed in release 5.0.0",
-          "$value": "{ams.space.s}",
-          "$type": "dimension",
-          "$extensions": {
-            "nl.amsterdam.subtype": "space"
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-{
-  "ams": {
-    "field": {
-      "gap": {
-        "$deprecated": "This token will be removed in release 5.0.0",
-        "$value": "{ams.space.s}",
-        "$type": "dimension",
-        "$extensions": {
-          "nl.amsterdam.subtype": "space"
-        }
-      }
-    }
-  }
-}

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

@@ -1,22 +0,0 @@
-{
-  "ams": {
-    "icon": {
-      "heading-0": {
-        "font-size": {
-          "$deprecated": "Use `ams.typography.heading.1.font-size` instead.",
-          "$value": "{ams.typography.heading.0.font-size}",
-          "$extensions": {
-            "nl.amsterdam.type": "fontSize"
-          }
-        },
-        "line-height": {
-          "$deprecated": "Use `ams.typography.heading.1.line-height` instead.",
-          "$value": "{ams.typography.heading.0.line-height}",
-          "$extensions": {
-            "nl.amsterdam.type": "lineHeight"
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-{
-  "ams": {
-    "menu": {
-      "link": {
-        "contrast": {
-          "color": {
-            "$deprecated": "The menu has a dark background now, so this is no longer needed.",
-            "$value": "{ams.links.contrast.color}",
-            "$type": "color"
-          },
-          "hover": {
-            "color": {
-              "$deprecated": "The menu has a dark background now, so this is no longer needed.",
-              "$value": "{ams.links.contrast.hover.color}",
-              "$type": "color"
-            }
-          }
-        },
-        "inverse": {
-          "color": {
-            "$deprecated": "The menu has a dark background now, so this is no longer needed.",
-            "$value": "{ams.links.inverse.color}",
-            "$type": "color"
-          },
-          "hover": {
-            "color": {
-              "$deprecated": "The menu has a dark background now, so this is no longer needed.",
-              "$value": "{ams.links.inverse.hover.color}",
-              "$type": "color"
-            }
-          }
-        }
-      }
-    }
-  }
-}