@amsterdam/design-system-tokens 3.0.0 → 3.2.0

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

@@ -1,50 +1,158 @@
 {
   "ams": {
     "avatar": {
-      "aspect-ratio": { "value": "{ams.aspect-ratio.1-1}" },
-      "background-color": { "value": "{ams.color.highlight.purple}" },
-      "border-color": { "value": "{ams.color.highlight.purple}" },
-      "border-style": { "value": "solid" },
-      "border-width": { "value": "{ams.border.width.m}" },
-      "color": { "value": "{ams.color.text.inverse}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
-      "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
-      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
-      "line-height": { "value": "{ams.typography.body-text.small.line-height}" },
-      "padding-block": { "value": "{ams.space.xs}" },
-      "padding-inline": { "value": "{ams.space.xs}" },
+      "aspect-ratio": {
+        "$value": "{ams.aspect-ratio.1-1}"
+      },
+      "background-color": {
+        "$value": "{ams.color.highlight.purple}",
+        "$type": "color"
+      },
+      "border-color": {
+        "$value": "{ams.color.highlight.purple}",
+        "$type": "color"
+      },
+      "border-style": {
+        "$value": "solid",
+        "$extensions": {
+          "nl.amsterdam.type": "borderStyle"
+        }
+      },
+      "border-width": {
+        "$value": "{ams.border.width.m}",
+        "$extensions": {
+          "nl.amsterdam.type": "borderWidth"
+        }
+      },
+      "color": {
+        "$value": "{ams.color.text.inverse}",
+        "$type": "color"
+      },
+      "font-family": {
+        "$value": "{ams.typography.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.typography.body-text.small.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.typography.body-text.font-weight}",
+        "$type": "fontWeight"
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.small.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "padding-block": {
+        "$value": "{ams.space.xs}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "padding-inline": {
+        "$value": "{ams.space.xs}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "forced-colors": {
-        "border-width": { "value": "{ams.border.width.m}" }
+        "border-width": {
+          "$value": "{ams.border.width.m}",
+          "$extensions": {
+            "nl.amsterdam.type": "borderWidth"
+          }
+        }
       },
       "azure": {
-        "background-color": { "value": "{ams.color.highlight.azure}" },
-        "border-color": { "value": "{ams.color.highlight.azure}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.azure}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.azure}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "green": {
-        "background-color": { "value": "{ams.color.highlight.green}" },
-        "border-color": { "value": "{ams.color.highlight.green}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.green}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.green}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "lime": {
-        "background-color": { "value": "{ams.color.highlight.lime}" },
-        "border-color": { "value": "{ams.color.highlight.lime}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.lime}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.lime}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       },
       "magenta": {
-        "background-color": { "value": "{ams.color.highlight.magenta}" },
-        "border-color": { "value": "{ams.color.highlight.magenta}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.magenta}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.magenta}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "orange": {
-        "background-color": { "value": "{ams.color.highlight.orange}" },
-        "border-color": { "value": "{ams.color.highlight.orange}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.orange}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.orange}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       },
       "yellow": {
-        "background-color": { "value": "{ams.color.highlight.yellow}" },
-        "border-color": { "value": "{ams.color.highlight.yellow}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.yellow}",
+          "$type": "color"
+        },
+        "border-color": {
+          "$value": "{ams.color.highlight.yellow}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       }
     }
   }

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

@@ -1,40 +1,117 @@
 {
   "ams": {
     "badge": {
-      "background-color": { "value": "{ams.color.feedback.success}" },
-      "color": { "value": "{ams.color.text.inverse}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
-      "font-size": { "value": "{ams.typography.body-text.font-size}" },
-      "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "padding-inline": { "value": "{ams.space.xs}" },
+      "background-color": {
+        "$value": "{ams.color.feedback.success}",
+        "$type": "color"
+      },
+      "color": {
+        "$value": "{ams.color.text.inverse}",
+        "$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.bold.font-weight}",
+        "$type": "fontWeight"
+      },
+      "gap": {
+        "$value": "{ams.space.xs}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "padding-inline": {
+        "$value": "{ams.space.xs}",
+        "$type": "dimension",
+        "$extensions": {
+          "nl.amsterdam.subtype": "space"
+        }
+      },
       "azure": {
-        "background-color": { "value": "{ams.color.feedback.info}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.feedback.info}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "lime": {
-        "background-color": { "value": "{ams.color.highlight.lime}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.lime}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       },
       "magenta": {
-        "background-color": { "value": "{ams.color.highlight.magenta}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.magenta}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "orange": {
-        "background-color": { "value": "{ams.color.feedback.warning}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.feedback.warning}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       },
       "purple": {
-        "background-color": { "value": "{ams.color.highlight.purple}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.purple}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "red": {
-        "background-color": { "value": "{ams.color.feedback.error}" },
-        "color": { "value": "{ams.color.text.inverse}" }
+        "background-color": {
+          "$value": "{ams.color.feedback.error}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       },
       "yellow": {
-        "background-color": { "value": "{ams.color.highlight.yellow}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "background-color": {
+          "$value": "{ams.color.highlight.yellow}",
+          "$type": "color"
+        },
+        "color": {
+          "$value": "{ams.color.text.default}",
+          "$type": "color"
+        }
       }
     }
   }

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

@@ -1,13 +1,35 @@
 {
   "ams": {
     "blockquote": {
-      "color": { "value": "{ams.color.text.default}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
-      "font-size": { "value": "{ams.typography.body-text.x-large.font-size}" },
-      "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" },
-      "line-height": { "value": "{ams.typography.body-text.x-large.line-height}" },
+      "color": {
+        "$value": "{ams.color.text.default}",
+        "$type": "color"
+      },
+      "font-family": {
+        "$value": "{ams.typography.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.typography.body-text.x-large.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.typography.body-text.bold.font-weight}",
+        "$type": "fontWeight"
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.x-large.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
       "inverse": {
-        "color": { "value": "{ams.color.text.inverse}" }
+        "color": {
+          "$value": "{ams.color.text.inverse}",
+          "$type": "color"
+        }
       }
     }
   }

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

@@ -1,27 +1,80 @@
 {
   "ams": {
     "breadcrumb": {
-      "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}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
+      "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"
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
       "separator": {
         "background-image": {
-          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
+          "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
+        },
+        "block-size": {
+          "$value": "1ex",
+          "$type": "dimension"
         },
-        "block-size": { "value": "1ex" },
-        "inline-size": { "value": "1ex" },
-        "margin-inline": { "value": "{ams.space.s}" }
+        "inline-size": {
+          "$value": "1ex",
+          "$type": "dimension"
+        },
+        "margin-inline": {
+          "$value": "{ams.space.s}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        }
       },
       "link": {
-        "color": { "value": "{ams.links.color}" },
-        "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
+        "color": {
+          "$value": "{ams.links.color}",
+          "$type": "color"
+        },
+        "outline-offset": {
+          "$value": "{ams.focus.outline-offset}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "text-decoration-line": {
+          "$value": "{ams.links.subtle.text-decoration-line}"
+        },
+        "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"
+          }
+        },
         "hover": {
-          "color": { "value": "{ams.links.hover.color}" },
-          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
+          "color": {
+            "$value": "{ams.links.hover.color}",
+            "$type": "color"
+          },
+          "text-decoration-line": {
+            "$value": "{ams.links.subtle.hover.text-decoration-line}"
+          }
         }
       }
     }