@amsterdam/design-system-tokens 3.0.0 → 3.2.0

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

@@ -0,0 +1,372 @@
+{
+  "ams": {
+    "progress-list": {
+      "heading-2": {
+        "step": {
+          "marker": {
+            "block-size": {
+              "$value": "calc({ams.typography.heading.2.font-size} * {ams.typography.heading.2.line-height})",
+              "$type": "dimension"
+            },
+            "margin-block-start": {
+              "$value": "calc(({ams.typography.heading.2.line-height} * {ams.typography.heading.2.font-size}) / 2)",
+              "$type": "dimension"
+            }
+          }
+        }
+      },
+      "heading-3": {
+        "step": {
+          "marker": {
+            "block-size": {
+              "$value": "calc({ams.typography.heading.3.font-size} * {ams.typography.heading.3.line-height})",
+              "$type": "dimension"
+            },
+            "margin-block-start": {
+              "$value": "calc(({ams.typography.heading.3.line-height} * {ams.typography.heading.3.font-size}) / 2)",
+              "$type": "dimension"
+            }
+          }
+        }
+      },
+      "heading-4": {
+        "step": {
+          "marker": {
+            "block-size": {
+              "$value": "calc({ams.typography.heading.4.font-size} * {ams.typography.heading.4.line-height})",
+              "$type": "dimension"
+            },
+            "margin-block-start": {
+              "$value": "calc(({ams.typography.heading.4.line-height} * {ams.typography.heading.4.font-size}) / 2)",
+              "$type": "dimension"
+            }
+          }
+        }
+      },
+      "step": {
+        "gap": {
+          "$value": "{ams.space.m}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "medium": {
+          "gap": {
+            "$value": "{ams.space.l}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.subtype": "space"
+            }
+          }
+        },
+        "marker": {
+          "shape": {
+            "block-size": {
+              "$value": {
+                "value": 1.5,
+                "unit": "rem"
+              },
+              "$type": "dimension"
+            },
+            "background-color": {
+              "$value": "{ams.color.background}",
+              "$type": "color"
+            },
+            "border-color": {
+              "$value": "{ams.color.progress.upcoming}",
+              "$type": "color"
+            },
+            "border-style": {
+              "$value": "solid",
+              "$extensions": {
+                "nl.amsterdam.type": "borderStyle"
+              }
+            },
+            "border-width": {
+              "$value": "{ams.border.width.m}",
+              "$extensions": {
+                "nl.amsterdam.type": "borderWidth"
+              }
+            },
+            "outline-color": {
+              "$value": "{ams.color.background}",
+              "$type": "color"
+            },
+            "outline-style": {
+              "$value": "solid",
+              "$extensions": {
+                "nl.amsterdam.type": "borderStyle"
+              }
+            },
+            "outline-width": {
+              "$value": "{ams.border.width.m}",
+              "$extensions": {
+                "nl.amsterdam.type": "borderWidth"
+              }
+            }
+          }
+        },
+        "connector": {
+          "border-inline-color": {
+            "$value": "{ams.color.progress.upcoming}",
+            "$type": "color"
+          },
+          "border-inline-style": {
+            "$value": "dashed",
+            "$extensions": {
+              "nl.amsterdam.type": "borderStyle"
+            }
+          },
+          "border-inline-width": {
+            "$value": {
+              "value": 1,
+              "unit": "px"
+            },
+            "$type": "dimension"
+          }
+        },
+        "heading": {
+          "margin-block-end": {
+            "$value": "{ams.space.s}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.subtype": "space"
+            }
+          }
+        },
+        "content": {
+          "margin-block-end": {
+            "$value": "{ams.space.l}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.subtype": "space"
+            }
+          }
+        },
+        "completed": {
+          "marker": {
+            "shape": {
+              "background-color": {
+                "$value": "{ams.color.progress.completed}",
+                "$type": "color"
+              },
+              "border-color": {
+                "$value": "{ams.color.progress.completed}",
+                "$type": "color"
+              }
+            }
+          },
+          "connector": {
+            "border-inline-color": {
+              "$value": "{ams.color.progress.completed}",
+              "$type": "color"
+            },
+            "border-inline-style": {
+              "$value": "solid",
+              "$extensions": {
+                "nl.amsterdam.type": "borderStyle"
+              }
+            }
+          }
+        },
+        "current": {
+          "marker": {
+            "shape": {
+              "background-color": {
+                "$value": "{ams.color.progress.current}",
+                "$type": "color"
+              },
+              "border-color": {
+                "$value": "{ams.color.progress.current}",
+                "$type": "color"
+              }
+            }
+          },
+          "connector": {
+            "border-inline-color": {
+              "$value": "{ams.color.progress.current}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "substeps": {
+        "padding-block-start": {
+          "$value": "{ams.space.m}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "step": {
+          "indicator": {
+            "margin-inline-end": {
+              "$value": "{ams.space.m}",
+              "$type": "dimension",
+              "$extensions": {
+                "nl.amsterdam.subtype": "space"
+              }
+            },
+            "medium": {
+              "margin-inline-end": {
+                "$value": "{ams.space.l}",
+                "$type": "dimension",
+                "$extensions": {
+                  "nl.amsterdam.subtype": "space"
+                }
+              }
+            }
+          },
+          "marker": {
+            "block-size": {
+              "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height})",
+              "$type": "dimension"
+            },
+            "inline-size": {
+              "$value": "{ams.progress-list.step.marker.shape.block-size}",
+              "$type": "dimension"
+            },
+            "shape": {
+              "block-size": {
+                "$value": "0.75rem",
+                "$type": "dimension"
+              },
+              "background-color": {
+                "$value": "{ams.color.background}",
+                "$type": "color"
+              },
+              "border-color": {
+                "$value": "{ams.color.progress.upcoming}",
+                "$type": "color"
+              },
+              "border-style": {
+                "$value": "solid",
+                "$extensions": {
+                  "nl.amsterdam.type": "borderStyle"
+                }
+              },
+              "border-width": {
+                "$value": "{ams.border.width.m}",
+                "$extensions": {
+                  "nl.amsterdam.type": "borderWidth"
+                }
+              },
+              "outline-color": {
+                "$value": "{ams.color.background}",
+                "$type": "color"
+              },
+              "outline-style": {
+                "$value": "solid",
+                "$extensions": {
+                  "nl.amsterdam.type": "borderStyle"
+                }
+              },
+              "outline-width": {
+                "$value": "{ams.border.width.m}",
+                "$extensions": {
+                  "nl.amsterdam.type": "borderWidth"
+                }
+              }
+            }
+          },
+          "connector": {
+            "background-color": {
+              "$value": "{ams.color.background}",
+              "$type": "color"
+            },
+            "border-inline-color": {
+              "$value": "{ams.color.progress.upcoming}",
+              "$type": "color"
+            },
+            "border-inline-style": {
+              "$value": "dashed",
+              "$extensions": {
+                "nl.amsterdam.type": "borderStyle"
+              }
+            },
+            "border-inline-width": {
+              "$value": {
+                "value": 1,
+                "unit": "px"
+              },
+              "$extensions": {
+                "nl.amsterdam.type": "borderWidth"
+              }
+            },
+            "margin-block-start": {
+              "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height} / 2)",
+              "$type": "dimension"
+            },
+            "last-child": {
+              "border-inline-color": {
+                "$value": "{ams.color.background}",
+                "$type": "color"
+              }
+            }
+          },
+          "content": {
+            "margin-block-end": {
+              "$value": "{ams.space.m}",
+              "$type": "dimension",
+              "$extensions": {
+                "nl.amsterdam.subtype": "space"
+              }
+            }
+          },
+          "completed": {
+            "marker": {
+              "shape": {
+                "background-color": {
+                  "$value": "{ams.color.progress.completed}",
+                  "$type": "color"
+                },
+                "border-color": {
+                  "$value": "{ams.color.progress.completed}",
+                  "$type": "color"
+                }
+              }
+            },
+            "connector": {
+              "border-inline-color": {
+                "$value": "{ams.color.progress.completed}",
+                "$type": "color"
+              },
+              "border-inline-style": {
+                "$value": "solid",
+                "$extensions": {
+                  "nl.amsterdam.type": "borderStyle"
+                }
+              }
+            }
+          },
+          "current": {
+            "marker": {
+              "shape": {
+                "background-color": {
+                  "$value": "{ams.color.progress.current}",
+                  "$type": "color"
+                },
+                "border-color": {
+                  "$value": "{ams.color.progress.current}",
+                  "$type": "color"
+                }
+              }
+            }
+          }
+        },
+        "last-child": {
+          "content": {
+            "margin-block-end": {
+              "$value": "{ams.space.l}",
+              "$type": "dimension",
+              "$extensions": {
+                "nl.amsterdam.subtype": "space"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,80 +1,189 @@
 {
   "ams": {
     "radio": {
-      "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"
+        }
+      },
       "checked-indicator": {
-        "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"
+          }
         },
         "disabled-invalid": {
-          "fill": { "value": "{ams.color.interactive.disabled}" },
+          "fill": {
+            "$value": "{ams.color.interactive.disabled}",
+            "$type": "color"
+          },
           "hover": {
-            "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"
+            }
           }
         }
       },
       "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"
+            }
           }
         }
       },
       "circle": {
-        "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"
+        },
         "disabled": {
-          "stroke": { "value": "{ams.color.interactive.disabled}" }
+          "stroke": {
+            "$value": "{ams.color.interactive.disabled}",
+            "$type": "color"
+          }
         },
         "disabled-invalid": {
-          "stroke": { "value": "{ams.color.interactive.disabled}" },
+          "stroke": {
+            "$value": "{ams.color.interactive.disabled}",
+            "$type": "color"
+          },
           "hover": {
-            "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"
+          }
         },
         "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"
+            }
           }
         }
       },
       "disabled": {
-        "color": { "value": "{ams.color.interactive.disabled}" },
-        "cursor": { "value": "{ams.cursor.disabled}" }
+        "color": {
+          "$value": "{ams.color.interactive.disabled}",
+          "$type": "color"
+        },
+        "cursor": {
+          "$value": "{ams.cursor.disabled}"
+        }
       },
       "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}"
+        }
       },
       "icon-container": {
-        "block-size": { "value": "calc({ams.radio.font-size} * {ams.radio.line-height})" },
-        "inline-size": { "value": "{ams.radio.font-size}" }
+        "block-size": {
+          "$value": "calc({ams.radio.font-size} * {ams.radio.line-height})",
+          "$type": "dimension"
+        },
+        "inline-size": {
+          "$value": "{ams.radio.font-size}",
+          "$type": "dimension"
+        }
       }
     }
   }

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

@@ -2,11 +2,41 @@
   "ams": {
     "row": {
       "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"
+          }
+        }
       }
     }
   }