@amsterdam/design-system-tokens 1.0.1 → 2.1.0

package/src/components/ams/standalone-link.tokens.json

@@ -8,32 +8,24 @@
       "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "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}" },
+      "hover": {
+        "color": { "value": "{ams.links.hover.color}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
+      },
       "contrast": {
         "color": { "value": "{ams.links.contrast.color}" },
         "hover": {
           "color": { "value": "{ams.links.contrast.hover.color}" }
         }
       },
-      "hover": {
-        "color": { "value": "{ams.links.hover.color}" },
-        "text-decoration-thickness": {
-          "value": "{ams.links.hover.text-decoration-thickness}"
-        },
-        "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
-      },
       "inverse": {
         "color": { "value": "{ams.links.inverse.color}" },
         "hover": {
           "color": { "value": "{ams.links.inverse.hover.color}" }
         }
-      },
-      "with-icon": {
-        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
-        "hover": {
-          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
-        }
       }
     }
   }

package/src/components/ams/table-of-contents.deprecated.tokens.json

@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "table-of-contents": {
+      "heading": {
+        "font-weight": { "value": "{ams.typography.heading.font-weight}" },
+        "font-size": { "value": "{ams.typography.heading.4.font-size}" },
+        "line-height": { "value": "{ams.typography.heading.4.line-height}" }
+      }
+    }
+  }
+}

package/src/components/ams/table-of-contents.tokens.json

@@ -4,7 +4,7 @@
       "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.m}" },
+      "gap": { "value": "{ams.space.s}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "link": {
         "color": { "value": "{ams.links.color}" },
@@ -23,11 +23,6 @@
           "padding-block-start": { "value": "{ams.space.s}" },
           "padding-inline-start": { "value": "{ams.space.l}" }
         }
-      },
-      "heading": {
-        "font-weight": { "value": "{ams.typography.heading.font-weight}" },
-        "font-size": { "value": "{ams.typography.heading.4.font-size}" },
-        "line-height": { "value": "{ams.typography.heading.4.line-height}" }
       }
     }
   }

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

@@ -1,37 +1,37 @@
 {
   "ams": {
     "text-area": {
-      "background-color": { "value": "{ams.color.background}" },
-      "border-color": { "value": "currentColor" },
-      "border-style": { "value": "solid" },
-      "border-width": { "value": "{ams.border.width.m}" },
-      "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}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
+      "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}" },
       "min-block-size": {
         "value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})"
       },
-      "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.s}" },
-      "padding-inline": { "value": "{ams.space.m}" },
+      "outline-offset": { "value": "{ams.inputs.outline-offset}" },
+      "padding-block": { "value": "{ams.inputs.padding-block}" },
+      "padding-inline": { "value": "{ams.inputs.padding-inline}" },
       "disabled": {
-        "color": { "value": "{ams.color.interactive.disabled}" },
+        "color": { "value": "{ams.inputs.disabled.color}" },
         "cursor": { "value": "{ams.cursor.disabled}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
+        "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
       },
       "invalid": {
-        "border-color": { "value": "{ams.color.interactive.invalid.default}" },
+        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
         "hover": {
-          "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
+          "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
+          "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
         }
       },
       "placeholder": {
-        "color": { "value": "{ams.color.text.secondary}" }
+        "color": { "value": "{ams.inputs.placeholder.color}" }
       }
     }
   }

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

@@ -1,34 +1,34 @@
 {
   "ams": {
     "text-input": {
-      "background-color": { "value": "{ams.color.background}" },
-      "border-color": { "value": "currentColor" },
-      "border-style": { "value": "solid" },
-      "border-width": { "value": "{ams.border.width.m}" },
-      "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}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.s}" },
-      "padding-inline": { "value": "{ams.space.m}" },
+      "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}" },
       "disabled": {
-        "color": { "value": "{ams.color.interactive.disabled}" },
+        "color": { "value": "{ams.inputs.disabled.color}" },
         "cursor": { "value": "{ams.cursor.disabled}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
+        "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
       },
       "invalid": {
-        "border-color": { "value": "{ams.color.interactive.invalid.default}" },
+        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
         "hover": {
-          "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
+          "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
+          "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
         }
       },
       "placeholder": {
-        "color": { "value": "{ams.color.text.secondary}" }
+        "color": { "value": "{ams.inputs.placeholder.color}" }
       }
     }
   }

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

@@ -0,0 +1,32 @@
+{
+  "ams": {
+    "time-input": {
+      "disabled": {
+        "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>\")"
+          }
+        }
+      },
+      "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>\")"
+          }
+        }
+      },
+      "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>\")"
+        },
+        "cursor": {
+          "comment": "Use the token with ‘calendar’ spelled correctly instead",
+          "value": "{ams.cursor.interactive}"
+        }
+      }
+    }
+  }
+}

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

@@ -1,47 +1,47 @@
 {
   "ams": {
     "time-input": {
-      "background-color": { "value": "{ams.color.background}" },
-      "border-color": { "value": "currentColor" },
-      "border-style": { "value": "solid" },
-      "border-width": { "value": "{ams.border.width.m}" },
-      "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}" },
-      "line-height": { "value": "{ams.typography.body-text.line-height}" },
-      "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.s}" },
-      "padding-inline": { "value": "{ams.space.m}" },
-      "calender-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}" }
-      },
+      "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}" },
       "disabled": {
-        "color": { "value": "{ams.color.interactive.disabled}" },
+        "color": { "value": "{ams.inputs.disabled.color}" },
         "cursor": { "value": "{ams.cursor.disabled}" },
-        "calender-picker-indicator": {
+        "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='%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": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
-        "calender-picker-indicator": {
+        "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>\")"
           }
         }
       },
       "invalid": {
-        "border-color": { "value": "{ams.color.interactive.invalid.default}" },
+        "border-color": { "value": "{ams.inputs.invalid.border-color}" },
         "hover": {
-          "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
+          "border-color": { "value": "{ams.inputs.invalid.hover.border-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>\")"
+        },
+        "cursor": { "value": "{ams.cursor.interactive}" }
       }
     }
   }

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

@@ -5,7 +5,7 @@
       "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.m}" },
+      "gap": { "value": "{ams.space.s}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "list-style-type": { "value": "'\\2022'" },
       "inverse": {
@@ -28,7 +28,7 @@
       "unordered-list": {
         "gap": { "value": "{ams.space.s}" },
         "list-style-type": { "value": "'\\2013'" },
-        "padding-block-end": { "value": "0" },
+        "padding-block-end": { "value": "{ams.space.s}" },
         "padding-block-start": { "value": "{ams.space.s}" },
         "item": {
           "margin-inline-start": {