@amsterdam/design-system-tokens 0.13.0 → 0.14.0

package/dist/index.json

@@ -1,5 +1,13 @@
 {
   "ams": {
+    "aspect-ratio": {
+      "x-tall": "9 / 16",
+      "tall": "3 / 4",
+      "square": "1 / 1",
+      "wide": "4 / 3",
+      "x-wide": "16 / 9",
+      "2x-wide": "16 / 5"
+    },
     "border": {
       "width": {
         "sm": "0.0625rem",
@@ -25,14 +33,6 @@
       "neutral-grey2": "#BEBEBE",
       "neutral-grey3": "#767676"
     },
-    "proportion": {
-      "x-tall": "9 / 16",
-      "tall": "3 / 4",
-      "square": "1 / 1",
-      "wide": "4 / 3",
-      "x-wide": "16 / 9",
-      "2x-wide": "16 / 5"
-    },
     "space": {
       "xs": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
       "sm": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
@@ -178,6 +178,7 @@
       "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
     },
     "alert": {
+      "background-color": "#FFFFFF",
       "border-width": "0.25rem",
       "border-style": "solid",
       "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
@@ -187,7 +188,7 @@
         "border-color": "#EC0000"
       },
       "info": {
-        "border-color": "#004699"
+        "border-color": "#009DE6"
       },
       "success": {
         "border-color": "#00A03C"
@@ -195,24 +196,10 @@
       "warning": {
         "border-color": "#FF9100"
       },
-      "close": {
-        "fill": "#000000",
-        "hover": {
-          "fill": "#004699"
-        }
-      },
       "content": {
         "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)"
       }
     },
-    "aspect-ratio": {
-      "x-tall": "9 / 16",
-      "tall": "3 / 4",
-      "square": "1 / 1",
-      "wide": "4 / 3",
-      "x-wide": "16 / 9",
-      "2x-wide": "16 / 5"
-    },
     "avatar": {
       "aspect-ratio": "1 / 1",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -402,8 +389,8 @@
         "box-shadow": "inset 0 0 0 0.125rem #004699",
         "color": "#FFFFFF",
         "disabled": {
-          "background-color": "#BEBEBE",
-          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE"
+          "background-color": "#767676",
+          "box-shadow": "inset 0 0 0 0.125rem #767676"
         },
         "hover": {
           "background-color": "#102E62",
@@ -420,8 +407,8 @@
         },
         "disabled": {
           "background-color": "#FFFFFF",
-          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE",
-          "color": "#BEBEBE"
+          "box-shadow": "inset 0 0 0 0.125rem #767676",
+          "color": "#767676"
         },
         "focus": {
           "box-shadow": "inset 0 0 0 0.125rem #004699"
@@ -436,7 +423,7 @@
         },
         "disabled": {
           "background-color": "transparent",
-          "color": "#BEBEBE"
+          "color": "#767676"
         }
       },
       "icon-only": {
@@ -569,8 +556,8 @@
       },
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE",
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676",
         "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='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
         }
@@ -622,6 +609,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
       "font-weight": 400,
+      "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
       "line-height": "1.6"
     },
     "field-set": {
@@ -645,6 +633,17 @@
         "padding-inline-start": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
       }
     },
+    "figure": {
+      "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+      "caption": {
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
+        "font-weight": 400,
+        "line-height": "1.6",
+        "inverse-color": "#FFFFFF"
+      }
+    },
     "file-input": {
       "background-color": "#FFFFFF",
       "border": "0.0625rem dashed #767676",
@@ -658,7 +657,7 @@
       "padding-block": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
-        "color": "#BEBEBE",
+        "color": "#767676",
         "cursor": "not-allowed"
       },
       "file-selector-button": {
@@ -674,8 +673,8 @@
           "color": "#102E62"
         },
         "disabled": {
-          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE",
-          "color": "#BEBEBE",
+          "box-shadow": "inset 0 0 0 0.125rem #767676",
+          "color": "#767676",
           "cursor": "not-allowed"
         },
         "forced-color-mode": {
@@ -683,6 +682,28 @@
         }
       }
     },
+    "file-list": {
+      "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
+      "padding-block": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
+      "file": {
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
+        "font-weight": 400,
+        "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+        "line-height": "1.6",
+        "details": {
+          "color": "#767676"
+        },
+        "preview": {
+          "width": "clamp(2.5rem, 10vw, 5rem)"
+        }
+      }
+    },
+    "footer": {
+      "top": {
+        "background-color": "#004699"
+      }
+    },
     "form-error-list": {
       "outline-offset": "0.125rem"
     },
@@ -715,10 +736,52 @@
       }
     },
     "header": {
-      "column-gap": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
-      "padding-block": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
+      "padding-block": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)",
+      "padding-inline": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)",
+      "branding": {
+        "column-gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
+        "row-gap": "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)"
+      },
       "logo-link": {
         "outline-offset": "0.125rem"
+      },
+      "mega-menu": {
+        "button": {
+          "label": {
+            "open": {
+              "font-weight": 800
+            }
+          }
+        }
+      },
+      "menu": {
+        "column-gap": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)",
+        "row-gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+        "item": {
+          "color": "#004699",
+          "column-gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+          "font-family": "'Amsterdam Sans', Arial, sans-serif",
+          "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
+          "font-weight": 400,
+          "line-height": "1.6",
+          "outline-offset": "0.125rem",
+          "padding-block": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
+          "hover": {
+            "color": "#102E62"
+          }
+        },
+        "link": {
+          "text-decoration-line": "none",
+          "text-decoration-thickness": "0.125rem",
+          "text-underline-offset": "0.3333em",
+          "hover": {
+            "text-decoration-line": "underline"
+          }
+        }
+      },
+      "navigation": {
+        "column-gap": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)",
+        "row-gap": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"
       }
     },
     "heading": {
@@ -764,7 +827,7 @@
         "color": "#102E62"
       },
       "disabled": {
-        "color": "#BEBEBE"
+        "color": "#767676"
       },
       "contrast-color": {
         "color": "#000000",
@@ -773,7 +836,7 @@
           "color": "#000000"
         },
         "disabled": {
-          "color": "#BEBEBE"
+          "color": "#767676"
         }
       },
       "inverse-color": {
@@ -785,11 +848,14 @@
         },
         "disabled": {
           "color": "#FFFFFF",
-          "background-color": "#BEBEBE"
+          "background-color": "#767676"
         }
       }
     },
     "icon": {
+      "inverse": {
+        "color": "#FFFFFF"
+      },
       "size-3": {
         "font-size": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)",
         "line-height": "1.3"
@@ -829,6 +895,9 @@
         }
       }
     },
+    "image": {
+      "aspect-ratio": "16 / 9"
+    },
     "label": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -929,15 +998,16 @@
       }
     },
     "logo": {
-      "block-size": "2.5rem",
+      "block-size": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
       "emblem": {
         "color": "#EC0000"
       },
-      "title": {
-        "color": "#EC0000"
-      },
+      "min-block-size": "2.5rem",
       "subsite": {
         "color": "#000000"
+      },
+      "title": {
+        "color": "#EC0000"
       }
     },
     "margin": {
@@ -1065,8 +1135,8 @@
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE"
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676"
       },
       "hover": {
         "box-shadow": "inset 0 0 0 0.125rem #000000"
@@ -1112,8 +1182,21 @@
           }
         }
       },
+      "hover-indicator": {
+        "stroke-width": "3px",
+        "hover": {
+          "stroke": "#004699"
+        },
+        "invalid": {
+          "hover": {
+            "stroke": "#EC0000"
+          }
+        }
+      },
       "circle": {
+        "fill": "#FFFFFF",
         "stroke": "#004699",
+        "stroke-width": "2px",
         "disabled": {
           "stroke": "#767676"
         },
@@ -1165,16 +1248,6 @@
       }
     },
     "search-field": {
-      "button": {
-        "background-color": "#004699",
-        "color": "#FFFFFF",
-        "outline-offset": "0.125rem",
-        "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
-        "padding-inline": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
-        "hover": {
-          "background-color": "#102E62"
-        }
-      },
       "input": {
         "background-color": "#FFFFFF",
         "box-shadow": "inset 0 0 0 0.0625rem #000000",
@@ -1221,8 +1294,8 @@
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) calc(2 * clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) + 1em)",
       "disabled": {
         "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE"
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676"
       },
       "hover": {
         "box-shadow": "inset 0 0 0 0.125rem #000000"
@@ -1235,7 +1308,7 @@
       },
       "option": {
         "disabled": {
-          "color": "#BEBEBE"
+          "color": "#767676"
         }
       }
     },
@@ -1254,12 +1327,10 @@
       }
     },
     "spotlight": {
+      "background-color": "#A00078",
       "blue": {
         "background-color": "#009DE6"
       },
-      "dark-blue": {
-        "background-color": "#004699"
-      },
       "dark-green": {
         "background-color": "#00A03C"
       },
@@ -1272,9 +1343,6 @@
       "orange": {
         "background-color": "#FF9100"
       },
-      "purple": {
-        "background-color": "#A00078"
-      },
       "yellow": {
         "background-color": "#FFE600"
       }
@@ -1297,7 +1365,7 @@
         "background-color": "#004699"
       },
       "disabled": {
-        "background-color": "#BEBEBE"
+        "background-color": "#767676"
       }
     },
     "table-of-contents": {
@@ -1340,7 +1408,7 @@
         "font-weight": 800
       },
       "cell": {
-        "border-block-end": "0.0625rem solid #E8E8E8",
+        "border-block-end": "0.0625rem solid #d1d1d1",
         "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
       },
@@ -1351,8 +1419,7 @@
     "tabs": {
       "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "list": {
-        "background-color": "#FFFFFF",
-        "border-block-end": "0.125rem solid #004699"
+        "box-shadow": "inset 0 calc(0.125rem * -1) #d1d1d1"
       },
       "button": {
         "color": "#004699",
@@ -1366,14 +1433,15 @@
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
         "hover": {
           "color": "#102E62",
-          "box-shadow": "inset 0 -0.125rem 0 0 #102E62"
+          "box-shadow": "inset 0 calc(0.125rem * -1) #102E62"
         },
         "selected": {
-          "background-color": "#004699",
-          "color": "#FFFFFF"
+          "box-shadow": "inset 0 calc(0.25rem * -1) #004699",
+          "color": "#004699",
+          "font-weight": 800
         },
         "disabled": {
-          "color": "#BEBEBE",
+          "color": "#767676",
           "cursor": "not-allowed"
         }
       }
@@ -1392,8 +1460,8 @@
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE",
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676",
         "cursor": "not-allowed"
       },
       "hover": {
@@ -1422,8 +1490,8 @@
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE"
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676"
       },
       "hover": {
         "box-shadow": "inset 0 0 0 0.125rem #000000"
@@ -1454,8 +1522,8 @@
       },
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
-        "color": "#BEBEBE",
+        "box-shadow": "inset 0 0 0 0.0625rem #767676",
+        "color": "#767676",
         "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='%23BEBEBE'><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>\")"
         }