@amsterdam/design-system-tokens 3.0.0 → 3.2.0

package/dist/index.json

@@ -45,6 +45,11 @@
         "purple": "#a00078",
         "yellow": "#ffe600"
       },
+      "progress": {
+        "current": "#00893c",
+        "completed": "#00893c",
+        "upcoming": "#767676"
+      },
       "separator": "#d1d1d1",
       "text": {
         "default": "#202020",
@@ -101,7 +106,7 @@
         "text-wrap": "balance"
       },
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "hyphenate-limit-chars": "12 8 4",
+      "hyphenate-limit-chars": "auto",
       "body-text": {
         "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
         "font-weight": "400",
@@ -140,13 +145,13 @@
         "color": "#767676"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -294,6 +299,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "800",
+      "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
       "line-height": "1.8",
       "padding-inline": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
       "azure": {
@@ -399,7 +405,7 @@
           "color": "#767676"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem",
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
           "color": "#003677"
         }
       },
@@ -580,20 +586,20 @@
     },
     "date-input": {
       "disabled": {
+        "calendar-picker-indicator": {
+          "background-image": "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": "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>\")"
         },
         "color": "#767676",
-        "cursor": "not-allowed",
-        "calendar-picker-indicator": {
-          "background-image": "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>\")"
-        }
+        "cursor": "not-allowed"
       },
       "hover": {
         "calender-picker-indicator": {
           "background-image": "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>\")"
         },
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "0 0 0 #000000",
         "calendar-picker-indicator": {
           "background-image": "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>\")"
         }
@@ -618,7 +624,7 @@
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "calendar-picker-indicator": {
@@ -637,11 +643,16 @@
         "color": "#ffffff"
       },
       "term": {
-        "font-weight": "800"
+        "font-weight": "800",
+        "margin-block-end": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
       },
       "description": {
         "font-weight": "400",
-        "padding-inline-start": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "padding-inline-start": "0"
+      },
+      "section": {
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       },
       "narrow": {
         "grid-template-columns": "1fr 4fr"
@@ -656,8 +667,10 @@
     "dialog": {
       "background-color": "#ffffff",
       "border-color": "#ffffff",
+      "border-radius": "initial",
       "border-style": "solid",
       "border-width": "0.125rem",
+      "box-shadow": "initial",
       "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
       "inline-size": "calc(100% - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))",
       "max-block-size": "calc(100dvh - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))",
@@ -792,7 +805,7 @@
           "cursor": "not-allowed"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem",
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
           "color": "#003677"
         }
       }
@@ -974,6 +987,9 @@
             "opacity": "100%"
           }
         }
+      },
+      "figure": {
+        "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       }
     },
     "image": {
@@ -1206,11 +1222,18 @@
       "mega-menu": {
         "padding-block": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "button": {
+          "background-color": "#004699",
+          "color": "#ffffff",
           "cursor": "pointer",
           "label": {
             "open": {
               "font-weight": "800"
             }
+          },
+          "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+          "hover": {
+            "background-color": "#003677",
+            "color": "#ffffff"
           }
         }
       },
@@ -1231,6 +1254,7 @@
           }
         },
         "link": {
+          "color": "#004699",
           "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
@@ -1325,19 +1349,160 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "0 0 0 #000000"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "placeholder": {
         "color": "#767676"
       }
     },
+    "progress-list": {
+      "heading-2": {
+        "step": {
+          "marker": {
+            "block-size": "calc(clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) * 1.3)",
+            "margin-block-start": "calc((1.3 * clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)) / 2)"
+          }
+        }
+      },
+      "heading-3": {
+        "step": {
+          "marker": {
+            "block-size": "calc(clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem) * 1.3)",
+            "margin-block-start": "calc((1.3 * clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)) / 2)"
+          }
+        }
+      },
+      "heading-4": {
+        "step": {
+          "marker": {
+            "block-size": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.4)",
+            "margin-block-start": "calc((1.4 * clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)) / 2)"
+          }
+        }
+      },
+      "step": {
+        "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "medium": {
+          "gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        },
+        "marker": {
+          "shape": {
+            "block-size": "1.5rem",
+            "background-color": "#ffffff",
+            "border-color": "#767676",
+            "border-style": "solid",
+            "border-width": "0.125rem",
+            "outline-color": "#ffffff",
+            "outline-style": "solid",
+            "outline-width": "0.125rem"
+          }
+        },
+        "connector": {
+          "border-inline-color": "#767676",
+          "border-inline-style": "dashed",
+          "border-inline-width": "1px"
+        },
+        "heading": {
+          "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
+        },
+        "content": {
+          "margin-block-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        },
+        "completed": {
+          "marker": {
+            "shape": {
+              "background-color": "#00893c",
+              "border-color": "#00893c"
+            }
+          },
+          "connector": {
+            "border-inline-color": "#00893c",
+            "border-inline-style": "solid"
+          }
+        },
+        "current": {
+          "marker": {
+            "shape": {
+              "background-color": "#00893c",
+              "border-color": "#00893c"
+            }
+          },
+          "connector": {
+            "border-inline-color": "#00893c"
+          }
+        }
+      },
+      "substeps": {
+        "padding-block-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "step": {
+          "indicator": {
+            "margin-inline-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+            "medium": {
+              "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+            }
+          },
+          "marker": {
+            "block-size": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8)",
+            "inline-size": "1.5rem",
+            "shape": {
+              "block-size": "0.75rem",
+              "background-color": "#ffffff",
+              "border-color": "#767676",
+              "border-style": "solid",
+              "border-width": "0.125rem",
+              "outline-color": "#ffffff",
+              "outline-style": "solid",
+              "outline-width": "0.125rem"
+            }
+          },
+          "connector": {
+            "background-color": "#ffffff",
+            "border-inline-color": "#767676",
+            "border-inline-style": "dashed",
+            "border-inline-width": "1px",
+            "margin-block-start": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8 / 2)",
+            "last-child": {
+              "border-inline-color": "#ffffff"
+            }
+          },
+          "content": {
+            "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
+          },
+          "completed": {
+            "marker": {
+              "shape": {
+                "background-color": "#00893c",
+                "border-color": "#00893c"
+              }
+            },
+            "connector": {
+              "border-inline-color": "#00893c",
+              "border-inline-style": "solid"
+            }
+          },
+          "current": {
+            "marker": {
+              "shape": {
+                "background-color": "#00893c",
+                "border-color": "#00893c"
+              }
+            }
+          }
+        },
+        "last-child": {
+          "content": {
+            "margin-block-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+          }
+        }
+      }
+    },
     "radio": {
       "color": "#202020",
       "cursor": "pointer",
@@ -1439,13 +1604,13 @@
         "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
         "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.0625rem"
+          "box-shadow": "0 0 0 #000000"
         },
         "invalid": {
           "border-color": "#ec0000",
           "hover": {
             "border-color": "#b70000",
-            "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+            "box-shadow": "0 0 0 #000000"
           }
         },
         "cancel-button": {
@@ -1481,14 +1646,14 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
         "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "option": {
@@ -1642,7 +1807,7 @@
     "tabs": {
       "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
       "list": {
-        "box-shadow": "inset 0 calc(0.125rem * -1) #d1d1d1"
+        "box-shadow": "inset 0rem calc(0.125rem * -1) 0rem 0rem #d1d1d1"
       },
       "button": {
         "color": "#004699",
@@ -1655,11 +1820,11 @@
         "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
         "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
         "hover": {
-          "box-shadow": "inset 0 calc(0.125rem * -1)",
+          "box-shadow": "inset 0rem calc(0.125rem * -1) 0rem 0rem currentColor",
           "color": "#003677"
         },
         "selected": {
-          "box-shadow": "inset 0 calc(0.25rem * -1)",
+          "box-shadow": "inset 0rem calc(0.25rem * -1) 0rem 0rem currentColor",
           "font-weight": "800"
         },
         "disabled": {
@@ -1687,13 +1852,13 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "0 0 0 #000000"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "0 0 0 #000000"
         }
       },
       "placeholder": {
@@ -1718,13 +1883,13 @@
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem"
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor"
       },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -1733,20 +1898,20 @@
     },
     "time-input": {
       "disabled": {
+        "calendar-picker-indicator": {
+          "background-image": "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": "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>\")"
         },
         "color": "#767676",
-        "cursor": "not-allowed",
-        "calendar-picker-indicator": {
-          "background-image": "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>\")"
-        }
+        "cursor": "not-allowed"
       },
       "hover": {
         "calender-picker-indicator": {
           "background-image": "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>\")"
         },
-        "box-shadow": "inset 0 0 0 0.0625rem",
+        "box-shadow": "inset 0rem 0rem 0rem 0.0625rem currentColor",
         "calendar-picker-indicator": {
           "background-image": "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>\")"
         }
@@ -1771,7 +1936,7 @@
         "border-color": "#ec0000",
         "hover": {
           "border-color": "#b70000",
-          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
+          "box-shadow": "inset 0rem 0rem 0rem 0.0625rem #b70000"
         }
       },
       "calendar-picker-indicator": {