@amsterdam/design-system-tokens 3.1.0 → 3.2.0

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

@@ -1,87 +1,205 @@
 {
   "ams": {
     "checkbox": {
-      "color": { "value": "{ams.color.text.default}" },
-      "cursor": { "value": "{ams.cursor.interactive}" },
-      "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}" },
-      "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-      "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
+      "color": {
+        "$value": "{ams.color.text.default}",
+        "$type": "color"
+      },
+      "cursor": {
+        "$value": "{ams.cursor.interactive}"
+      },
+      "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"
+        }
+      },
+      "outline-offset": {
+        "$value": "{ams.focus.outline-offset}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "text-decoration-thickness": {
+        "$value": "{ams.links.text-decoration-thickness}",
+        "$type": "dimension"
+      },
+      "text-underline-offset": {
+        "$value": "{ams.links.text-underline-offset}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "disabled": {
-        "cursor": { "value": "{ams.cursor.disabled}" },
-        "color": { "value": "{ams.color.interactive.disabled}" }
+        "cursor": {
+          "$value": "{ams.cursor.disabled}"
+        },
+        "color": {
+          "$value": "{ams.color.interactive.disabled}",
+          "$type": "color"
+        }
       },
       "hover": {
-        "color": { "value": "{ams.color.interactive.hover}" },
-        "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
+        "color": {
+          "$value": "{ams.color.interactive.hover}",
+          "$type": "color"
+        },
+        "text-decoration-line": {
+          "$value": "{ams.links.subtle.hover.text-decoration-line}"
+        }
       },
       "checked-indicator": {
-        "stroke": { "value": "{ams.color.interactive.inverse}" }
+        "stroke": {
+          "$value": "{ams.color.interactive.inverse}",
+          "$type": "color"
+        }
       },
       "hover-indicator": {
         "hover": {
-          "stroke": { "value": "{ams.color.interactive.hover}" }
+          "stroke": {
+            "$value": "{ams.color.interactive.hover}",
+            "$type": "color"
+          }
         },
         "invalid": {
           "hover": {
-            "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
+            "stroke": {
+              "$value": "{ams.color.interactive.invalid.hover}",
+              "$type": "color"
+            }
           }
         }
       },
       "icon-container": {
-        "block-size": { "value": "calc({ams.checkbox.font-size} * {ams.checkbox.line-height})" },
-        "inline-size": { "value": "{ams.checkbox.font-size}" }
+        "block-size": {
+          "$value": "calc({ams.checkbox.font-size} * {ams.checkbox.line-height})",
+          "$type": "dimension"
+        },
+        "inline-size": {
+          "$value": "{ams.checkbox.font-size}",
+          "$type": "dimension"
+        }
       },
       "indeterminate-indicator": {
-        "stroke": { "value": "{ams.color.interactive.inverse}" }
+        "stroke": {
+          "$value": "{ams.color.interactive.inverse}",
+          "$type": "color"
+        }
       },
       "rectangle": {
-        "fill": { "value": "{ams.color.background}" },
-        "stroke": { "value": "{ams.color.interactive.default}" },
+        "fill": {
+          "$value": "{ams.color.background}",
+          "$type": "color"
+        },
+        "stroke": {
+          "$value": "{ams.color.interactive.default}",
+          "$type": "color"
+        },
         "checked": {
-          "fill": { "value": "{ams.color.interactive.default}" },
+          "fill": {
+            "$value": "{ams.color.interactive.default}",
+            "$type": "color"
+          },
           "disabled": {
-            "fill": { "value": "{ams.color.interactive.disabled}" }
+            "fill": {
+              "$value": "{ams.color.interactive.disabled}",
+              "$type": "color"
+            }
           },
           "hover": {
-            "fill": { "value": "{ams.color.interactive.hover}" }
+            "fill": {
+              "$value": "{ams.color.interactive.hover}",
+              "$type": "color"
+            }
           },
           "invalid": {
-            "fill": { "value": "{ams.color.interactive.invalid.default}" },
+            "fill": {
+              "$value": "{ams.color.interactive.invalid.default}",
+              "$type": "color"
+            },
             "hover": {
-              "fill": { "value": "{ams.color.interactive.invalid.hover}" }
+              "fill": {
+                "$value": "{ams.color.interactive.invalid.hover}",
+                "$type": "color"
+              }
             }
           }
         },
         "disabled": {
-          "stroke": { "value": "{ams.color.interactive.disabled}" }
+          "stroke": {
+            "$value": "{ams.color.interactive.disabled}",
+            "$type": "color"
+          }
         },
         "hover": {
-          "stroke": { "value": "{ams.color.interactive.hover}" }
+          "stroke": {
+            "$value": "{ams.color.interactive.hover}",
+            "$type": "color"
+          }
         },
         "indeterminate": {
-          "fill": { "value": "{ams.color.interactive.default}" },
+          "fill": {
+            "$value": "{ams.color.interactive.default}",
+            "$type": "color"
+          },
           "disabled": {
-            "fill": { "value": "{ams.color.interactive.disabled}" }
+            "fill": {
+              "$value": "{ams.color.interactive.disabled}",
+              "$type": "color"
+            }
           },
           "hover": {
-            "fill": { "value": "{ams.color.interactive.hover}" }
+            "fill": {
+              "$value": "{ams.color.interactive.hover}",
+              "$type": "color"
+            }
           },
           "invalid": {
-            "fill": { "value": "{ams.color.interactive.invalid.default}" },
+            "fill": {
+              "$value": "{ams.color.interactive.invalid.default}",
+              "$type": "color"
+            },
             "hover": {
-              "fill": { "value": "{ams.color.interactive.invalid.hover}" }
+              "fill": {
+                "$value": "{ams.color.interactive.invalid.hover}",
+                "$type": "color"
+              }
             }
           }
         },
         "invalid": {
-          "stroke": { "value": "{ams.color.interactive.invalid.default}" },
+          "stroke": {
+            "$value": "{ams.color.interactive.invalid.default}",
+            "$type": "color"
+          },
           "hover": {
-            "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
+            "stroke": {
+              "$value": "{ams.color.interactive.invalid.hover}",
+              "$type": "color"
+            }
           }
         }
       }

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

@@ -2,11 +2,41 @@
   "ams": {
     "column": {
       "gap": {
-        "x-small": { "value": "{ams.space.xs}" },
-        "small": { "value": "{ams.space.s}" },
-        "medium": { "value": "{ams.space.m}" },
-        "large": { "value": "{ams.space.l}" },
-        "x-large": { "value": "{ams.space.xl}" }
+        "x-small": {
+          "$value": "{ams.space.xs}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "small": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "medium": {
+          "$value": "{ams.space.m}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "large": {
+          "$value": "{ams.space.l}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "x-large": {
+          "$value": "{ams.space.xl}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
       }
     }
   }

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

@@ -4,33 +4,33 @@
       "disabled": {
         "calendar-picker-indicator": {
           "background-image": {
-            "comment": "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>\")"
+            "$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": {
-            "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 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>\")"
+            "$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": {
-            "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 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>\")"
+            "$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": {
-          "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 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>\")"
+          "$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": {
-          "comment": "Use the token with ‘calendar’ spelled correctly instead",
-          "value": "{ams.cursor.interactive}"
+          "$deprecated": "Use `ams.date-input.calendar-picker-indicator.cursor` instead",
+          "$value": "{ams.cursor.interactive}"
         }
       }
     }

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

@@ -1,42 +1,114 @@
 {
   "ams": {
     "date-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": {
+          "$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 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>\")"
+            "$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": {
-        "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": {
+            "$type": "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 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>\")"
+          "$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": { "value": "{ams.cursor.interactive}" }
+        "cursor": {
+          "$value": "{ams.cursor.interactive}"
+        }
       }
     }
   }

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

@@ -1,30 +1,103 @@
 {
   "ams": {
     "description-list": {
-      "color": { "value": "{ams.color.text.default}" },
-      "column-gap": { "value": "{ams.space.l}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
-      "font-size": { "value": "{ams.typography.body-text.font-size}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "row-gap": { "value": "{ams.space.s}" },
+      "color": {
+        "$value": "{ams.color.text.default}",
+        "$type": "color"
+      },
+      "column-gap": {
+        "$value": "{ams.space.l}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "font-family": {
+        "$value": "{ams.typography.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.typography.body-text.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "row-gap": {
+        "$deprecated": "This token will be removed in release 6.0.0",
+        "$value": "{ams.space.s}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "inverse": {
-        "color": { "value": "{ams.color.text.inverse}" }
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "term": {
-        "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
+        "font-weight": {
+          "$value": "{ams.typography.body-text.bold.font-weight}",
+          "$type": "fontWeight"
+        },
+        "margin-block-end": {
+          "$value": "{ams.space.xs}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
       },
       "description": {
-        "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
-        "padding-inline-start": { "value": "{ams.space.l}" }
+        "font-weight": {
+          "$value": "{ams.typography.body-text.font-weight}",
+          "$type": "fontWeight"
+        },
+        "margin-block-end": {
+          "$value": "{ams.space.m}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "padding-inline-start": {
+          "$value": "0",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
+      },
+      "section": {
+        "margin-block-end": {
+          "$value": "{ams.space.m}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
       },
       "narrow": {
-        "grid-template-columns": { "value": "1fr 4fr" }
+        "grid-template-columns": {
+          "$value": "1fr 4fr"
+        }
       },
       "medium": {
-        "grid-template-columns": { "value": "1fr 2fr" }
+        "grid-template-columns": {
+          "$value": "1fr 2fr"
+        }
       },
       "wide": {
-        "grid-template-columns": { "value": "1fr 1fr" }
+        "grid-template-columns": {
+          "$value": "1fr 1fr"
+        }
       }
     }
   }