@amsterdam/design-system-tokens 4.0.0 → 4.1.0

package/dist/index.json

@@ -86,7 +86,7 @@
         "font-weight": "400",
         "line-height": 1.6,
         "bold": {
-          "font-weight": "800"
+          "font-weight": "700"
         },
         "small": {
           "font-size": "1rem",
@@ -122,7 +122,7 @@
           "font-size": "1rem",
           "line-height": 1.4
         },
-        "font-weight": "800",
+        "font-weight": "700",
         "text-wrap": "balance"
       }
     },
@@ -184,6 +184,11 @@
         }
       }
     },
+    "query-containers": {
+      "inline-size": {
+        "container-name": "ams-query-container-inline-size"
+      }
+    },
     "accordion": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
       "button": {
@@ -287,7 +292,7 @@
       "color": "#ffffff",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
-      "font-weight": "800",
+      "font-weight": "700",
       "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
       "line-height": 1.6,
       "padding-inline": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
@@ -324,7 +329,7 @@
       "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)",
-      "font-weight": "800",
+      "font-weight": "700",
       "line-height": 1.4,
       "inverse": {
         "color": "#ffffff"
@@ -414,6 +419,30 @@
         }
       }
     },
+    "calendar": {
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
+      "font-weight": "400",
+      "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+      "inline-size": "20rem",
+      "line-height": 1.6,
+      "day": {
+        "outline-offset": "0.25rem",
+        "current": {
+          "font-weight": "700"
+        },
+        "link": {
+          "color": "#004699",
+          "text-decoration-line": "none",
+          "text-decoration-thickness": "0.125rem",
+          "text-underline-offset": "0.15625rem",
+          "hover": {
+            "color": "#003677",
+            "text-decoration-line": "underline"
+          }
+        }
+      }
+    },
     "call-to-action-link": {
       "background-color": "#00893c",
       "color": "#ffffff",
@@ -595,9 +624,41 @@
         "cursor": "pointer"
       }
     },
+    "date-picker": {
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
+      "font-weight": "400",
+      "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+      "inline-size": "20rem",
+      "line-height": 1.6,
+      "day": {
+        "color": "#004699",
+        "cursor": "pointer",
+        "outline-offset": "0.25rem",
+        "current": {
+          "font-weight": "700"
+        },
+        "disabled": {
+          "color": "#767676",
+          "cursor": "not-allowed",
+          "text-decoration-line": "line-through"
+        },
+        "hover": {
+          "background-color": "rgb(0 70 153 / 12.5%)",
+          "color": "#003677"
+        },
+        "selected": {
+          "background-color": "#004699",
+          "color": "#ffffff",
+          "hover": {
+            "background-color": "#003677"
+          }
+        }
+      }
+    },
     "description-list": {
       "color": "#202020",
-      "column-gap": "initial",
+      "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)",
       "line-height": 1.6,
@@ -607,7 +668,7 @@
       },
       "term": {
         "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
-        "font-weight": "800",
+        "font-weight": "700",
         "line-height": 1.4,
         "margin-block-end": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
         "text-wrap": "balance",
@@ -624,13 +685,13 @@
         "margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       },
       "narrow": {
-        "grid-template-columns": "initial"
+        "grid-template-columns": "1fr 4fr"
       },
       "medium": {
-        "grid-template-columns": "initial"
+        "grid-template-columns": "1fr 2fr"
       },
       "wide": {
-        "grid-template-columns": "initial"
+        "grid-template-columns": "1fr 1fr"
       },
       "vi-medium": {
         "column-gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
@@ -652,13 +713,15 @@
       "border-style": "solid",
       "border-width": "0.125rem",
       "box-shadow": "initial",
+      "container-name": "ams-query-container-inline-size",
+      "container-type": "inline-size",
       "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))",
       "max-inline-size": "48rem",
       "medium": {
-        "inline-size": "initial",
-        "max-block-size": "initial"
+        "inline-size": "calc(100% - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))",
+        "max-block-size": "calc(100dvh - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))"
       },
       "vi-medium": {
         "inline-size": "calc(100% - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))",
@@ -672,8 +735,8 @@
         "padding-block": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem) 0",
         "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "medium": {
-          "padding-block": "initial",
-          "padding-inline": "initial"
+          "padding-block": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) 0",
+          "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
         },
         "vi-medium": {
           "padding-block": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) 0",
@@ -684,7 +747,7 @@
         "padding-block": "0",
         "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "medium": {
-          "padding-inline": "initial"
+          "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
         },
         "vi-medium": {
           "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
@@ -694,8 +757,8 @@
         "padding-block": "0 clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "medium": {
-          "padding-block": "initial",
-          "padding-inline": "initial"
+          "padding-block": "0 clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)",
+          "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
         },
         "vi-medium": {
           "padding-block": "0 clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)",
@@ -733,7 +796,7 @@
         "color": "#202020",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
-        "font-weight": "800",
+        "font-weight": "700",
         "line-height": 1.3,
         "text-wrap": "balance",
         "in-fieldset": {
@@ -838,12 +901,12 @@
         "2xl": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)"
       },
       "medium": {
-        "column-count": "initial",
-        "padding-inline": "initial"
+        "column-count": 8,
+        "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
       },
       "wide": {
-        "column-count": "initial",
-        "padding-inline": "initial"
+        "column-count": 12,
+        "padding-inline": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)"
       },
       "vi-medium": {
         "column-count": 8,
@@ -855,6 +918,8 @@
       },
       "cell": {
         "background-color": "initial",
+        "container-name": "ams-query-container-inline-size",
+        "container-type": "inline-size",
         "padding-block": "initial",
         "padding-inline": "initial"
       }
@@ -882,7 +947,7 @@
       },
       "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-weight": "800",
+      "font-weight": "700",
       "text-wrap": "balance",
       "inverse": {
         "color": "#ffffff"
@@ -999,7 +1064,7 @@
       "color": "#202020",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
-      "font-weight": "800",
+      "font-weight": "700",
       "line-height": 1.3,
       "text-wrap": "balance",
       "in-fieldset": {
@@ -1096,9 +1161,9 @@
       "line-height": 1.6,
       "padding-block": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
       "wide": {
-        "max-inline-size": "initial",
-        "padding-block": "initial",
-        "padding-inline": "initial"
+        "max-inline-size": "8rem",
+        "padding-block": "calc(clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) + 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)) clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
       },
       "vi-wide": {
         "max-inline-size": "8rem",
@@ -1119,7 +1184,7 @@
           "text-decoration-line": "underline"
         },
         "wide": {
-          "gap": "initial"
+          "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
         },
         "vi-wide": {
           "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
@@ -1167,10 +1232,10 @@
         "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
         "row-gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
         "medium": {
-          "padding-inline": "initial"
+          "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
         },
         "wide": {
-          "padding-inline": "initial"
+          "padding-inline": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)"
         },
         "vi-medium": {
           "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
@@ -1204,10 +1269,10 @@
       "padding-block": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
       "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
       "medium": {
-        "padding-inline": "initial"
+        "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
       },
       "wide": {
-        "padding-inline": "initial"
+        "padding-inline": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)"
       },
       "vi-medium": {
         "padding-inline": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)"
@@ -1222,7 +1287,7 @@
       "brand-name": {
         "color": "#202020",
         "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
-        "font-weight": "800",
+        "font-weight": "700",
         "line-height": 1.3,
         "text-wrap": "balance"
       },
@@ -1278,6 +1343,8 @@
     },
     "page": {
       "background-color": "#ffffff",
+      "container-name": "ams-query-container-inline-size",
+      "container-type": "inline-size",
       "max-inline-size": "90rem",
       "with-menu": {
         "max-inline-size": "120rem",
@@ -1290,22 +1357,68 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
       "font-weight": "400",
+      "gap": "0",
       "line-height": 1.6,
+      "list": {
+        "gap": "0"
+      },
       "link": {
+        "background-color": "transparent",
         "color": "#004699",
+        "font-weight": "400",
         "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
+        "min-block-size": "auto",
+        "min-inline-size": "auto",
         "outline-offset": "0.25rem",
+        "padding-block": "0",
         "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.15625rem",
-        "current": {
-          "font-weight": "800"
+        "hover": {
+          "background-color": "transparent",
+          "color": "#003677",
+          "text-decoration-line": "underline"
         },
+        "active": {
+          "background-color": "transparent",
+          "color": "#004699"
+        },
+        "current": {
+          "background-color": "transparent",
+          "color": "#004699",
+          "font-weight": "700",
+          "hover": {
+            "background-color": "transparent",
+            "color": "#003677"
+          }
+        }
+      },
+      "relative-link": {
+        "background-color": "transparent",
+        "color": "#004699",
+        "font-weight": "400",
+        "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
+        "outline-offset": "0.25rem",
+        "padding-block": "0",
+        "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "text-decoration-line": "none",
+        "text-decoration-thickness": "0.125rem",
+        "text-underline-offset": "0.15625rem",
         "hover": {
+          "background-color": "transparent",
           "color": "#003677",
           "text-decoration-line": "underline"
+        },
+        "active": {
+          "background-color": "transparent",
+          "color": "#004699"
         }
+      },
+      "ellipsis": {
+        "color": "#202020",
+        "padding-block": "0",
+        "padding-inline": "0"
       }
     },
     "paragraph": {
@@ -1401,7 +1514,7 @@
       "step": {
         "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
         "medium": {
-          "gap": "initial"
+          "gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
         },
         "vi-medium": {
           "gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
@@ -1459,7 +1572,7 @@
           "indicator": {
             "margin-inline-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
             "medium": {
-              "margin-inline-end": "initial"
+              "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
             },
             "vi-medium": {
               "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
@@ -1747,6 +1860,9 @@
       "cursor": "pointer",
       "outline-offset": "0.25rem",
       "inline-size": "3.5rem",
+      "label": {
+        "border-width": "0.125rem"
+      },
       "thumb": {
         "background-color": "#ffffff",
         "block-size": "1.75rem",
@@ -1788,7 +1904,7 @@
         },
         "current": {
           "box-shadow": "inset 0rem -0.25rem 0rem 0rem currentColor",
-          "font-weight": "800"
+          "font-weight": "700"
         },
         "vertical": {
           "hover": {
@@ -1806,22 +1922,39 @@
       "font-weight": "400",
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
       "line-height": 1.6,
+      "list": {
+        "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "list": {
+          "padding-block-start": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
+          "padding-inline-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
+        }
+      },
+      "item": {
+        "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
+      },
       "link": {
         "color": "#004699",
         "outline-offset": "0.25rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.15625rem",
+        "current": {
+          "color": "#004699",
+          "font-weight": "700"
+        },
         "hover": {
           "color": "#003677",
           "text-decoration-line": "underline"
         }
       },
-      "list": {
-        "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "list": {
-          "padding-block-start": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-          "padding-inline-start": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+      "button": {
+        "color": "#004699",
+        "hover": {
+          "color": "#003677"
+        },
+        "icon": {
+          "transition-duration": "0.3s",
+          "transition-timing-function": "ease"
         }
       }
     },
@@ -1832,7 +1965,7 @@
       "font-weight": "400",
       "line-height": 1.6,
       "caption": {
-        "font-weight": "800",
+        "font-weight": "700",
         "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
       },
       "cell": {
@@ -1841,7 +1974,7 @@
         "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       },
       "header-cell": {
-        "font-weight": "800"
+        "font-weight": "700"
       }
     },
     "tabs": {
@@ -1865,7 +1998,7 @@
         },
         "selected": {
           "box-shadow": "inset 0rem -0.25rem 0rem 0rem currentColor",
-          "font-weight": "800"
+          "font-weight": "700"
         },
         "disabled": {
           "color": "#767676",