@amsterdam/design-system-tokens 3.4.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,105 +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"
-        },
-        "cursor": {
-          "$value": "{ams.cursor.disabled}"
-        },
-        "calendar-picker-indicator": {
-          "$deprecated": "Will be removed in release 6.0.0.",
-          "background-image": {
-            "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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": "color"
           }
         },
-        "calender-picker-indicator": {
-          "background-image": {
-            "$deprecated": "Use `ams.time-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 32 32' fill='%23767676'><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>\")"
+        "cursor": {
+          "$value": "{ams.cursor.disabled}",
+          "$extensions": {
+            "nl.amsterdam.type": "cursor"
           }
         }
       },
       "hover": {
         "box-shadow": {
-          "$type": "shadow",
-          "$value": "{ams.inputs.hover.box-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": "{ams.inputs.hover.box-shadow}",
+          "$extensions": {
+            "nl.amsterdam.type": "shadow"
           }
         },
-        "calender-picker-indicator": {
+        "calendar-picker-indicator": {
           "background-image": {
-            "$deprecated": "Use `ams.time-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 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": {
-            "$type": "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>\")"
-        },
-        "cursor": {
-          "$value": "{ams.cursor.interactive}"
-        }
-      },
-      "calender-picker-indicator": {
-        "background-image": {
-          "$deprecated": "Use `ams.time-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 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": {
-          "$deprecated": "Use `ams.time-input.calendar-picker-indicator.cursor` instead. Will be removed in release 4.0.0.",
-          "$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/components/ams/page-heading.tokens.json

@@ -1,46 +0,0 @@
-{
-  "ams": {
-    "page-heading": {
-      "color": {
-        "$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. 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. 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. 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. 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. 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. Will be removed in release 4.0.0.",
-          "$value": "{ams.color.text.inverse}",
-          "$type": "color"
-        }
-      }
-    }
-  }
-}