@amsterdam/design-system-tokens 2.1.0 → 3.0.0

package/dist/index.json

@@ -18,8 +18,8 @@
     },
     "color": {
       "interactive": {
-        "secondary": "#181818",
-        "contrast": "#181818",
+        "secondary": "#202020",
+        "contrast": "#202020",
         "default": "#004699",
         "disabled": "#767676",
         "hover": "#003677",
@@ -33,12 +33,12 @@
       "feedback": {
         "error": "#ec0000",
         "info": "#009de6",
-        "success": "#00a03c",
+        "success": "#00893c",
         "warning": "#ff9100"
       },
       "highlight": {
         "azure": "#009de6",
-        "green": "#00a03c",
+        "green": "#00893c",
         "lime": "#bed200",
         "magenta": "#e50082",
         "orange": "#ff9100",
@@ -47,7 +47,7 @@
       },
       "separator": "#d1d1d1",
       "text": {
-        "default": "#181818",
+        "default": "#202020",
         "inverse": "#ffffff",
         "secondary": "#767676"
       }
@@ -128,7 +128,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -169,9 +169,9 @@
         }
       },
       "contrast": {
-        "color": "#181818",
+        "color": "#202020",
         "hover": {
-          "color": "#181818"
+          "color": "#202020"
         }
       },
       "inverse": {
@@ -229,9 +229,9 @@
         }
       },
       "success": {
-        "border-color": "#00a03c",
+        "border-color": "#00893c",
         "severity-indicator": {
-          "background-color": "#00a03c"
+          "background-color": "#00893c"
         }
       },
       "warning": {
@@ -263,14 +263,14 @@
         "color": "#ffffff"
       },
       "green": {
-        "background-color": "#00a03c",
-        "border-color": "#00a03c",
+        "background-color": "#00893c",
+        "border-color": "#00893c",
         "color": "#ffffff"
       },
       "lime": {
         "background-color": "#bed200",
         "border-color": "#bed200",
-        "color": "#181818"
+        "color": "#202020"
       },
       "magenta": {
         "background-color": "#e50082",
@@ -280,16 +280,16 @@
       "orange": {
         "background-color": "#ff9100",
         "border-color": "#ff9100",
-        "color": "#181818"
+        "color": "#202020"
       },
       "yellow": {
         "background-color": "#ffe600",
         "border-color": "#ffe600",
-        "color": "#181818"
+        "color": "#202020"
       }
     },
     "badge": {
-      "background-color": "#00a03c",
+      "background-color": "#00893c",
       "color": "#ffffff",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -302,7 +302,7 @@
       },
       "lime": {
         "background-color": "#bed200",
-        "color": "#181818"
+        "color": "#202020"
       },
       "magenta": {
         "background-color": "#e50082",
@@ -310,7 +310,7 @@
       },
       "orange": {
         "background-color": "#ff9100",
-        "color": "#181818"
+        "color": "#202020"
       },
       "purple": {
         "background-color": "#a00078",
@@ -322,11 +322,11 @@
       },
       "yellow": {
         "background-color": "#ffe600",
-        "color": "#181818"
+        "color": "#202020"
       }
     },
     "blockquote": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)",
       "font-weight": "800",
@@ -417,7 +417,7 @@
       }
     },
     "call-to-action-link": {
-      "background-color": "#00a03c",
+      "background-color": "#00893c",
       "color": "#ffffff",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -429,7 +429,7 @@
       "text-decoration-thickness": "0.125rem",
       "text-underline-offset": "0.15625rem",
       "hover": {
-        "background-color": "#007c2e",
+        "background-color": "#10552b",
         "text-decoration-thickness": "0.1875rem",
         "text-underline-offset": "0.09375rem"
       }
@@ -458,7 +458,7 @@
       "outline-offset": "0.25rem"
     },
     "character-count": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "1rem",
       "font-weight": "400",
@@ -534,7 +534,7 @@
           }
         }
       },
-      "color": "#181818",
+      "color": "#202020",
       "cursor": "pointer",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -606,7 +606,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -627,7 +627,7 @@
       }
     },
     "description-list": {
-      "color": "#181818",
+      "color": "#202020",
       "column-gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -703,22 +703,43 @@
       "line-height": "1.8"
     },
     "field-set": {
-      "invalid": {
-        "border-inline-start": "0.1875rem solid #ec0000",
-        "padding-inline-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
-      },
       "legend": {
-        "color": "#181818",
+        "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "color": "#202020",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
         "font-weight": "800",
         "line-height": "1.3",
-        "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "text-wrap": "balance"
+        "text-wrap": "balance",
+        "in-fieldset": {
+          "font-weight": "400"
+        }
+      },
+      "child": {
+        "margin-block-end": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
+        "before-error-message": {
+          "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
+        },
+        "before-field-or-field-set": {
+          "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
+        },
+        "between-fields-and-field-sets": {
+          "margin-block-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        }
+      },
+      "invalid": {
+        "border-inline-start": "0.1875rem solid #ec0000",
+        "padding-inline-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       }
     },
     "field": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+      "child": {
+        "margin-block-end": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
+        "before-error-message": {
+          "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
+        }
+      },
       "invalid": {
         "border-inline-start": "0.1875rem solid #ec0000",
         "padding-inline-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
@@ -727,7 +748,7 @@
     "figure": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
       "caption": {
-        "color": "#181818",
+        "color": "#202020",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "1rem",
         "font-weight": "400",
@@ -742,7 +763,7 @@
       "border-color": "currentColor",
       "border-style": "dashed",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "cursor": "pointer",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -841,7 +862,7 @@
         "font-size": "1rem",
         "line-height": "1.4"
       },
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": "800",
       "text-wrap": "balance",
@@ -850,7 +871,10 @@
       }
     },
     "hint": {
-      "font-weight": "400"
+      "font-weight": "400",
+      "in-fieldset": {
+        "color": "#767676"
+      }
     },
     "icon-button": {
       "color": "#004699",
@@ -865,10 +889,10 @@
         "cursor": "not-allowed"
       },
       "contrast": {
-        "color": "#181818",
+        "color": "#202020",
         "hover": {
           "background-color": "rgb(0 0 0 / 12.5%)",
-          "color": "#181818"
+          "color": "#202020"
         },
         "disabled": {
           "color": "#767676"
@@ -959,12 +983,15 @@
       "outline-offset": "0.25rem"
     },
     "label": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
       "font-weight": "800",
       "line-height": "1.3",
-      "text-wrap": "balance"
+      "text-wrap": "balance",
+      "in-fieldset": {
+        "font-weight": "400"
+      }
     },
     "link-list": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
@@ -992,9 +1019,9 @@
           "text-decoration-line": "underline"
         },
         "contrast": {
-          "color": "#181818",
+          "color": "#202020",
           "hover": {
-            "color": "#181818"
+            "color": "#202020"
           }
         },
         "inverse": {
@@ -1020,9 +1047,9 @@
         "text-underline-offset": "0.09375rem"
       },
       "contrast": {
-        "color": "#181818",
+        "color": "#202020",
         "hover": {
-          "color": "#181818"
+          "color": "#202020"
         }
       },
       "inverse": {
@@ -1039,7 +1066,7 @@
         "color": "#ec0000"
       },
       "subsite": {
-        "color": "#181818"
+        "color": "#202020"
       },
       "title": {
         "color": "#ec0000"
@@ -1051,9 +1078,9 @@
     "menu": {
       "link": {
         "contrast": {
-          "color": "#181818",
+          "color": "#202020",
           "hover": {
-            "color": "#181818"
+            "color": "#202020"
           }
         },
         "inverse": {
@@ -1094,7 +1121,7 @@
       }
     },
     "ordered-list": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1170,13 +1197,14 @@
         "outline-offset": "0.25rem"
       },
       "brand-name": {
-        "color": "#181818",
+        "color": "#202020",
         "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
         "font-weight": "800",
         "line-height": "1.3",
         "text-wrap": "balance"
       },
       "mega-menu": {
+        "padding-block": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "button": {
           "cursor": "pointer",
           "label": {
@@ -1203,6 +1231,7 @@
           }
         },
         "link": {
+          "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
           "text-underline-offset": "0.15625rem",
@@ -1213,11 +1242,11 @@
       },
       "navigation": {
         "column-gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
-        "row-gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
+        "row-gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
       }
     },
     "page-heading": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)",
       "font-weight": "800",
@@ -1229,7 +1258,13 @@
     },
     "page": {
       "background-color": "#ffffff",
-      "max-inline-size": "90rem"
+      "max-inline-size": "90rem",
+      "with-menu": {
+        "max-inline-size": "120rem",
+        "area-skip-link": {
+          "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        }
+      }
     },
     "pagination": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -1254,7 +1289,7 @@
       }
     },
     "paragraph": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1268,7 +1303,8 @@
       },
       "large": {
         "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
-        "line-height": "1.6"
+        "line-height": "1.6",
+        "text-wrap": "balance"
       }
     },
     "password-input": {
@@ -1276,7 +1312,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1303,7 +1339,7 @@
       }
     },
     "radio": {
-      "color": "#181818",
+      "color": "#202020",
       "cursor": "pointer",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
@@ -1394,7 +1430,7 @@
         "border-color": "currentColor",
         "border-style": "solid",
         "border-width": "0.125rem",
-        "color": "#181818",
+        "color": "#202020",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
         "font-weight": "400",
@@ -1431,7 +1467,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1481,7 +1517,7 @@
         "background-color": "#009de6"
       },
       "green": {
-        "background-color": "#00a03c"
+        "background-color": "#00893c"
       },
       "lime": {
         "background-color": "#bed200"
@@ -1521,9 +1557,9 @@
       "text-decoration-thickness": "0.125rem",
       "text-underline-offset": "0.15625rem",
       "contrast": {
-        "color": "#181818",
+        "color": "#202020",
         "hover": {
-          "color": "#181818"
+          "color": "#202020"
         }
       },
       "inverse": {
@@ -1586,7 +1622,7 @@
       }
     },
     "table": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1637,7 +1673,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1669,7 +1705,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1723,7 +1759,7 @@
       "border-color": "currentColor",
       "border-style": "solid",
       "border-width": "0.125rem",
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
@@ -1744,7 +1780,7 @@
       }
     },
     "unordered-list": {
-      "color": "#181818",
+      "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",