@amsterdam/design-system-tokens 3.1.0 → 3.2.0

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

@@ -1,34 +1,105 @@
 {
   "ams": {
     "text-input": {
-      "background-color": { "value": "{ams.inputs.background-color}" },
-      "border-color": { "value": "{ams.inputs.border-color}" },
-      "border-style": { "value": "{ams.inputs.border-style}" },
-      "border-width": { "value": "{ams.inputs.border-width}" },
-      "color": { "value": "{ams.inputs.color}" },
-      "font-family": { "value": "{ams.inputs.font-family}" },
-      "font-size": { "value": "{ams.inputs.font-size}" },
-      "font-weight": { "value": "{ams.inputs.font-weight}" },
-      "line-height": { "value": "{ams.inputs.line-height}" },
-      "outline-offset": { "value": "{ams.inputs.outline-offset}" },
-      "padding-block": { "value": "{ams.inputs.padding-block}" },
-      "padding-inline": { "value": "{ams.inputs.padding-inline}" },
+      "background-color": {
+        "$value": "{ams.inputs.background-color}",
+        "$type": "color"
+      },
+      "border-color": {
+        "$value": "{ams.inputs.border-color}",
+        "$type": "color"
+      },
+      "border-style": {
+        "$value": "{ams.inputs.border-style}",
+        "$extensions": {
+          "nl.amsterdam.type": "borderStyle"
+        }
+      },
+      "border-width": {
+        "$value": "{ams.inputs.border-width}",
+        "$extensions": {
+          "nl.amsterdam.type": "borderWidth"
+        }
+      },
+      "color": {
+        "$value": "{ams.inputs.color}",
+        "$type": "color"
+      },
+      "font-family": {
+        "$value": "{ams.inputs.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.inputs.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.inputs.font-weight}",
+        "$type": "fontWeight"
+      },
+      "line-height": {
+        "$value": "{ams.inputs.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "outline-offset": {
+        "$value": "{ams.inputs.outline-offset}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "padding-block": {
+        "$value": "{ams.inputs.padding-block}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "padding-inline": {
+        "$value": "{ams.inputs.padding-inline}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "disabled": {
-        "color": { "value": "{ams.inputs.disabled.color}" },
-        "cursor": { "value": "{ams.cursor.disabled}" }
+        "color": {
+          "$value": "{ams.inputs.disabled.color}",
+          "$type": "color"
+        },
+        "cursor": {
+          "$value": "{ams.cursor.disabled}"
+        }
       },
       "hover": {
-        "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
+        "box-shadow": {
+          "$value": "{ams.inputs.hover.box-shadow}"
+        }
       },
       "invalid": {
-        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
+        "border-color": {
+          "$value": "{ams.inputs.invalid.border-color}",
+          "$type": "color"
+        },
         "hover": {
-          "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
-          "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
+          "border-color": {
+            "$value": "{ams.inputs.invalid.hover.border-color}",
+            "$type": "color"
+          },
+          "box-shadow": {
+            "$value": "{ams.inputs.invalid.hover.box-shadow}"
+          }
         }
       },
       "placeholder": {
-        "color": { "value": "{ams.inputs.placeholder.color}" }
+        "color": {
+          "$value": "{ams.inputs.placeholder.color}",
+          "$type": "color"
+        }
       }
     }
   }

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

@@ -3,34 +3,34 @@
     "time-input": {
       "disabled": {
         "calendar-picker-indicator": {
-          "comment": "This token will be removed in release 6.0.0",
+          "$deprecated": "This token 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>\")"
+            "$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>\")"
           }
         },
         "calender-picker-indicator": {
           "background-image": {
-            "comment": "Use the token with ‘calendar’ spelled correctly instead",
-            "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>\")"
+            "$deprecated": "Use `ams.time-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 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>\")"
           }
         }
       },
       "hover": {
         "calender-picker-indicator": {
           "background-image": {
-            "comment": "Use the token with ‘calendar’ spelled correctly instead",
-            "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>\")"
+            "$deprecated": "Use `ams.time-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 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>\")"
           }
         }
       },
       "calender-picker-indicator": {
         "background-image": {
-          "comment": "Use the token with ‘calendar’ spelled correctly instead",
-          "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>\")"
+          "$deprecated": "Use `ams.time-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 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": {
-          "comment": "Use the token with ‘calendar’ spelled correctly instead",
-          "value": "{ams.cursor.interactive}"
+          "$deprecated": "Use `ams.time-input.calendar-picker-indicator.cursor` instead",
+          "$value": "{ams.cursor.interactive}"
         }
       }
     }

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

@@ -1,42 +1,112 @@
 {
   "ams": {
     "time-input": {
-      "background-color": { "value": "{ams.inputs.background-color}" },
-      "border-color": { "value": "{ams.inputs.border-color}" },
-      "border-style": { "value": "{ams.inputs.border-style}" },
-      "border-width": { "value": "{ams.inputs.border-width}" },
-      "color": { "value": "{ams.inputs.color}" },
-      "font-family": { "value": "{ams.inputs.font-family}" },
-      "font-size": { "value": "{ams.inputs.font-size}" },
-      "font-weight": { "value": "{ams.inputs.font-weight}" },
-      "line-height": { "value": "{ams.inputs.line-height}" },
-      "outline-offset": { "value": "{ams.inputs.outline-offset}" },
-      "padding-block": { "value": "{ams.inputs.padding-block}" },
-      "padding-inline": { "value": "{ams.inputs.padding-inline}" },
+      "background-color": {
+        "$value": "{ams.inputs.background-color}",
+        "$type": "color"
+      },
+      "border-color": {
+        "$value": "{ams.inputs.border-color}",
+        "$type": "color"
+      },
+      "border-style": {
+        "$value": "{ams.inputs.border-style}",
+        "$extensions": {
+          "nl.amsterdam.type": "borderStyle"
+        }
+      },
+      "border-width": {
+        "$value": "{ams.inputs.border-width}",
+        "$extensions": {
+          "nl.amsterdam.type": "borderWidth"
+        }
+      },
+      "color": {
+        "$value": "{ams.inputs.color}",
+        "$type": "color"
+      },
+      "font-family": {
+        "$value": "{ams.inputs.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.inputs.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.inputs.font-weight}",
+        "$type": "fontWeight"
+      },
+      "line-height": {
+        "$value": "{ams.inputs.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "outline-offset": {
+        "$value": "{ams.inputs.outline-offset}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "padding-block": {
+        "$value": "{ams.inputs.padding-block}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "padding-inline": {
+        "$value": "{ams.inputs.padding-inline}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "disabled": {
-        "color": { "value": "{ams.inputs.disabled.color}" },
-        "cursor": { "value": "{ams.cursor.disabled}" }
+        "color": {
+          "$value": "{ams.inputs.disabled.color}",
+          "$type": "color"
+        },
+        "cursor": {
+          "$value": "{ams.cursor.disabled}"
+        }
       },
       "hover": {
-        "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
+        "box-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": "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>\")"
           }
         }
       },
       "invalid": {
-        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
+        "border-color": {
+          "$value": "{ams.inputs.invalid.border-color}",
+          "$type": "color"
+        },
         "hover": {
-          "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
-          "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
+          "border-color": {
+            "$value": "{ams.inputs.invalid.hover.border-color}",
+            "$type": "color"
+          },
+          "box-shadow": {
+            "$value": "{ams.inputs.invalid.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='%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>\")"
         },
-        "cursor": { "value": "{ams.cursor.interactive}" }
+        "cursor": {
+          "$value": "{ams.cursor.interactive}"
+        }
       }
     }
   }

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

@@ -1,43 +1,133 @@
 {
   "ams": {
     "unordered-list": {
-      "color": { "value": "{ams.color.text.default}" },
-      "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}" },
-      "gap": { "value": "{ams.space.s}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "list-style-type": { "value": "'\\2022'" },
+      "color": {
+        "$value": "{ams.color.text.default}",
+        "$type": "color"
+      },
+      "font-family": {
+        "$value": "{ams.typography.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.typography.body-text.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.typography.body-text.font-weight}",
+        "$type": "fontWeight"
+      },
+      "gap": {
+        "$value": "{ams.space.s}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "list-style-type": {
+        "$value": "'\\2022'",
+        "$type": "fontFamily"
+      },
       "inverse": {
-        "color": { "value": "{ams.color.text.inverse}" }
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "small": {
-        "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
-        "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
+        "font-size": {
+          "$value": "{ams.typography.body-text.small.font-size}",
+          "$extensions": {
+            "nl.amsterdam.type": "fontSize"
+          }
+        },
+        "line-height": {
+          "$value": "{ams.typography.body-text.small.line-height}",
+          "$extensions": {
+            "nl.amsterdam.type": "lineHeight"
+          }
+        }
       },
       "item": {
         "margin-inline-start": {
-          "value": "1.625rem",
-          "comment": "Divide your total indentation width over margin and padding to position the marker."
+          "$value": {
+            "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"
+          }
         },
         "padding-inline-start": {
-          "value": "0.875rem",
-          "comment": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem."
+          "$value": {
+            "value": 0.875,
+            "unit": "rem"
+          },
+          "$extensions": {
+            "nl.amsterdam.hint": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.",
+            "nl.amsterdam.subtype": "space"
+          },
+          "$type": "dimension"
         }
       },
       "unordered-list": {
-        "gap": { "value": "{ams.space.s}" },
-        "list-style-type": { "value": "'\\2013'" },
-        "padding-block-end": { "value": "{ams.space.s}" },
-        "padding-block-start": { "value": "{ams.space.s}" },
+        "gap": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "list-style-type": {
+          "$value": "'\\2013'",
+          "$type": "fontFamily"
+        },
+        "padding-block-end": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "padding-block-start": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
         "item": {
           "margin-inline-start": {
-            "value": "0.875rem",
-            "comment": "Indent less than the parent to start-align the child’s marker with the parent text."
+            "$value": {
+              "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.subtype": "space"
+            }
           },
           "padding-inline-start": {
-            "value": "0.875rem",
-            "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
+            "$value": {
+              "value": 0.875,
+              "unit": "rem"
+            },
+            "$extensions": {
+              "nl.amsterdam.hint": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.",
+              "nl.amsterdam.subtype": "space"
+            },
+            "$type": "dimension"
           }
         }
       }

package/style-dictionary/dimensionToString.js

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+ * Converts a DTCG dimension object to a CSS value string.
+ *
+ * Passes through any value that is not a dimension object (e.g. a bare string
+ * or an already-resolved reference), making it safe to use without pre-checking.
+ *
+ * @param {({ value: number, unit: 'px' | 'rem' } | string)} dimension
+ * @returns {string}
+ *
+ * @example
+ * dimensionToString({ value: 0.5, unit: 'rem' }) // '0.5rem'
+ * dimensionToString('2rem') // '2rem'
+ */
+export const dimensionToString = (dimension) => {
+  if (dimension && typeof dimension === 'object' && 'value' in dimension && 'unit' in dimension) {
+    return `${dimension.value}${dimension.unit}`
+  }
+
+  return dimension
+}

package/style-dictionary/transforms/dtcg-dimension.js

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { transformTypes } from 'style-dictionary/enums'
+
+import { dimensionToString } from '../dimensionToString.js'
+
+/**
+ * Transforms DTCG dimension objects to CSS value strings.
+ *
+ * @example
+ * // Input ($value of a token):
+ * { value: 1, unit: 'rem' }
+ *
+ * // Output (transformed token value):
+ * '1rem'
+ * @see {@link https://www.designtokens.org/TR/2025.10/format/#dimension} DTCG dimension spec
+ */
+export const dtcgDimension = {
+  filter: (token) => {
+    const value = token.$value ?? token.value
+    return value?.value !== null && value?.unit
+  },
+  name: 'dtcg/dimension',
+  transform: (token) => dimensionToString(token.$value ?? token.value),
+  transitive: true,
+  type: transformTypes.value,
+}

package/style-dictionary/transforms/name-custom-camel.js

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { camelCase } from 'change-case'
+import { transformTypes } from 'style-dictionary/enums'
+
+/**
+ * Strip a trailing `default` path segment when transforming to camel case.
+ *
+ * @example
+ * // Token path without 'default':
+ * ['ams', 'color', 'primary'] → 'amsColorPrimary'
+ *
+ * // Token path with trailing 'default':
+ * ['ams', 'color', 'default'] → 'amsColor'
+ */
+export const nameCustomCamel = {
+  name: 'name/customCamel',
+  transform: function (token) {
+    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+
+    return camelCase(filteredPath.join(' '))
+  },
+  type: transformTypes.name,
+}

package/style-dictionary/transforms/name-custom-kebab.js

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { kebabCase } from 'change-case'
+import { transformTypes } from 'style-dictionary/enums'
+
+/**
+ * Strip a trailing `default` path segment when transforming to kebab case.
+ *
+ * @example
+ * // Token path without 'default':
+ * ['ams', 'color', 'primary'] → '--ams-color-primary'
+ *
+ * // Token path with trailing 'default':
+ * ['ams', 'color', 'default'] → '--ams-color'
+ */
+export const nameCustomKebab = {
+  name: 'name/customKebab',
+  transform: function (token) {
+    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+
+    return kebabCase(filteredPath.join(' '))
+  },
+  type: transformTypes.name,
+}

package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js

@@ -0,0 +1,50 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { dimensionToString } from '../dimensionToString.js'
+
+/**
+ * Normalizes DTCG dimension objects within shadow token sub-values to bare CSS strings.
+ *
+ * The DTCG spec requires dimension values to be expressed as objects
+ * (`{ value: number, unit: "px" | "rem" }`), but Style Dictionary's built-in
+ * `shadow/css/shorthand` transform expects sub-values like `offsetX`, `offsetY`,
+ * `blur`, and `spread` to already be CSS strings (e.g. `"0.5rem"`).
+ *
+ * This transform bridges that gap by converting any dimension objects found in
+ * shadow sub-values to their CSS string equivalents before `shadow/css/shorthand` runs.
+ * Non-object values (bare strings, resolved references) are passed through unchanged.
+ *
+ * Must be applied **before** `shadow/css/shorthand` in the transforms array,
+ * and must be transitive so it runs after token references are resolved.
+ *
+ * @example
+ * // Input ($value of a shadow token):
+ * { offsetX: { value: 0, unit: "rem" }, blur: { value: 0.5, unit: "rem" }, ... }
+ *
+ * // Output (ready for shadow/css/shorthand):
+ * { offsetX: "0rem", blur: "0.5rem", ... }
+ *
+ * @see {@link https://www.designtokens.org/TR/2025.10/format/#shadow} DTCG shadow spec
+ * @see {@link https://github.com/style-dictionary/style-dictionary/issues/1398} Related SD issue
+ */
+export const shadowDTCGDimensionNormalize = {
+  filter: (token) => (token.$type ?? token.type) === 'shadow',
+  name: 'shadow/dtcg-dimension-normalize',
+  transform: (token) => {
+    const value = token.$value ?? token.value
+    const normalize = (shadow) => ({
+      ...shadow,
+      blur: dimensionToString(shadow.blur),
+      offsetX: dimensionToString(shadow.offsetX),
+      offsetY: dimensionToString(shadow.offsetY),
+      spread: dimensionToString(shadow.spread),
+    })
+
+    return Array.isArray(value) ? value.map(normalize) : normalize(value)
+  },
+  transitive: true,
+  type: 'value',
+}