@amsterdam/design-system-tokens 0.3.0 → 0.4.0

package/dist/index.tokens.json

@@ -2,7 +2,7 @@
   "amsterdam": {
     "color": {
       "primary-black": "#000000",
-      "primary-white": "#ffffff",
+      "primary-white": "#FFFFFF",
       "primary-blue": "#004699",
       "primary-red": "#EC0000",
       "dark-blue": "#102E62",
@@ -10,13 +10,12 @@
       "yellow": "#FFE600",
       "green": "#BED200",
       "dark-green": "#00A03C",
-      "blue": "#009DEC",
+      "blue": "#009DE6",
       "purple": "#A00078",
       "magenta": "#E50082",
-      "neutral-grey1": "#E6E6E6",
-      "neutral-grey2": "#B4B4B4",
-      "neutral-grey3": "#767676",
-      "neutral-grey4": "#323232"
+      "neutral-grey1": "#E8E8E8",
+      "neutral-grey2": "#BEBEBE",
+      "neutral-grey3": "#767676"
     },
     "proportion": {
       "x-tall": "9 / 16",
@@ -113,7 +112,7 @@
         "color": "#102E62"
       },
       "on-background-dark": {
-        "color": "#ffffff"
+        "color": "#FFFFFF"
       },
       "on-background-light": {
         "color": "#000000"
@@ -162,8 +161,8 @@
       }
     },
     "alert": {
-      "background-color": "#FFE600",
-      "border": "4px solid #FFE600",
+      "border-width": "4px",
+      "border-style": "solid",
       "gap": "1rem",
       "padding-block-start": "1rem",
       "padding-block-end": "1rem",
@@ -174,24 +173,27 @@
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-weight": 800,
         "spacious": {
-          "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
-          "line-height": "1.6"
+          "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
+          "line-height": "1.5"
         },
         "compact": {
-          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
-          "line-height": "1.6"
+          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
+          "line-height": "1.5"
         }
       },
       "error": {
-        "background-color": "#ffffff",
         "border-color": "#EC0000"
       },
+      "info": {
+        "border-color": "#004699"
+      },
       "success": {
-        "background-color": "#ffffff",
         "border-color": "#00A03C"
       },
+      "warning": {
+        "border-color": "#FF9100"
+      },
       "close": {
-        "background-color": "transparent",
         "fill": "#000000",
         "hover": {
           "fill": "#004699"
@@ -206,11 +208,56 @@
       "x-wide": "16 / 9",
       "2x-wide": "32 / 9"
     },
+    "badge": {
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 800,
+      "padding-inline": "0.5rem",
+      "spacious": {
+        "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+        "line-height": "1.6"
+      },
+      "compact": {
+        "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
+        "line-height": "1.6"
+      },
+      "blue": {
+        "background-color": "#009DE6",
+        "color": "#000000"
+      },
+      "dark-blue": {
+        "background-color": "#004699",
+        "color": "#FFFFFF"
+      },
+      "dark-green": {
+        "background-color": "#00A03C",
+        "color": "#FFFFFF"
+      },
+      "green": {
+        "background-color": "#BED200",
+        "color": "#000000"
+      },
+      "magenta": {
+        "background-color": "#E50082",
+        "color": "#FFFFFF"
+      },
+      "orange": {
+        "background-color": "#FF9100",
+        "color": "#000000"
+      },
+      "purple": {
+        "background-color": "#A00078",
+        "color": "#FFFFFF"
+      },
+      "yellow": {
+        "background-color": "#FFE600",
+        "color": "#000000"
+      }
+    },
     "blockquote": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 800,
-      "inverse-color": "#ffffff",
+      "inverse-color": "#FFFFFF",
       "spacious": {
         "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
         "line-height": "1.3"
@@ -261,7 +308,7 @@
           "box-shadow": "inset 0 0 0 3px #102E62"
         },
         "disabled": {
-          "box-shadow": "inset 0 0 0 2px #B4B4B4"
+          "box-shadow": "inset 0 0 0 2px #BEBEBE"
         },
         "focus": {
           "box-shadow": "inset 0 0 0 2px #004699"
@@ -358,7 +405,7 @@
       }
     },
     "dialog": {
-      "background-color": "#ffffff",
+      "background-color": "#FFFFFF",
       "border": "0",
       "max-inline-size": "min(87.69vw, 45rem)",
       "title": {
@@ -377,13 +424,6 @@
       "backdrop": {
         "background": "#0006"
       },
-      "close": {
-        "background-color": "transparent",
-        "fill": "#000000",
-        "hover": {
-          "fill": "#004699"
-        }
-      },
       "form": {
         "gap": "1.5rem",
         "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
@@ -438,7 +478,7 @@
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 800,
-      "inverse-color": "#ffffff",
+      "inverse-color": "#FFFFFF",
       "spacious": {
         "level-1": {
           "line-height": "1.2",
@@ -492,6 +532,39 @@
         }
       }
     },
+    "icon-button": {
+      "color": "#004699",
+      "outline-offset": "2px",
+      "hover": {
+        "background-color": "rgba(0, 70, 153, 0.125)",
+        "color": "#102E62"
+      },
+      "disabled": {
+        "color": "#BEBEBE"
+      },
+      "on-background-light": {
+        "color": "#000000",
+        "hover": {
+          "background-color": "rgba(0, 0, 0, 0.125)",
+          "color": "#000000"
+        },
+        "disabled": {
+          "color": "#BEBEBE"
+        }
+      },
+      "on-background-dark": {
+        "background-color": "#004699",
+        "color": "#FFFFFF",
+        "hover": {
+          "background-color": "#102E62",
+          "color": "#FFFFFF"
+        },
+        "disabled": {
+          "color": "#FFFFFF",
+          "background-color": "#BEBEBE"
+        }
+      }
+    },
     "icon": {
       "spacious": {
         "size-3": {
@@ -530,6 +603,63 @@
         }
       }
     },
+    "link-list": {
+      "gap": "0.5em",
+      "link": {
+        "color": "#004699",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 400,
+        "gap": "0.5em",
+        "outline-offset": "2px",
+        "text-decoration-line": "none",
+        "text-decoration-thickness": "0.125rem",
+        "text-underline-offset": "0.375rem",
+        "spacious": {
+          "small": {
+            "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+            "line-height": "1.6"
+          },
+          "medium": {
+            "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+            "line-height": "1.6"
+          },
+          "large": {
+            "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
+            "line-height": "1.5"
+          }
+        },
+        "compact": {
+          "small": {
+            "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
+            "line-height": "1.6"
+          },
+          "medium": {
+            "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
+            "line-height": "1.6"
+          },
+          "large": {
+            "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
+            "line-height": "1.5"
+          }
+        },
+        "hover": {
+          "color": "#102E62",
+          "text-decoration-line": "underline"
+        },
+        "on-background-dark": {
+          "color": "#FFFFFF",
+          "hover": {
+            "color": "#FFFFFF"
+          }
+        },
+        "on-background-light": {
+          "color": "#000000",
+          "hover": {
+            "color": "#000000"
+          }
+        }
+      }
+    },
     "link": {
       "color": "#004699",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -588,12 +718,12 @@
         }
       },
       "on-background-dark": {
-        "color": "#ffffff",
+        "color": "#FFFFFF",
         "hover": {
-          "color": "#ffffff"
+          "color": "#FFFFFF"
         },
         "visited": {
-          "color": "#ffffff"
+          "color": "#FFFFFF"
         }
       },
       "on-background-light": {
@@ -621,6 +751,14 @@
     "mark": {
       "background-color": "var(--amsterdam-color-yellow)"
     },
+    "mega-menu": {
+      "list-category": {
+        "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "column-width": "20rem",
+        "padding-block-start": "1rem",
+        "padding-block-end": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
+      }
+    },
     "ordered-list": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -651,7 +789,7 @@
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 800,
-      "inverse-color": "#ffffff",
+      "inverse-color": "#FFFFFF",
       "spacious": {
         "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
         "line-height": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)"
@@ -717,7 +855,7 @@
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
-      "inverse-color": "#ffffff",
+      "inverse-color": "#FFFFFF",
       "spacious": {
         "small": {
           "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
@@ -758,7 +896,7 @@
     "search-field": {
       "button": {
         "background-color": "#004699",
-        "color": "#ffffff",
+        "color": "#FFFFFF",
         "outline-offset": "2px",
         "hover": {
           "background-color": "#102E62"
@@ -794,7 +932,7 @@
     },
     "skip-link": {
       "background-color": "#004699",
-      "color": "#ffffff",
+      "color": "#FFFFFF",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
       "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
@@ -810,6 +948,9 @@
     },
     "spotlight": {
       "blue": {
+        "background-color": "#009DE6"
+      },
+      "dark-blue": {
         "background-color": "#004699"
       },
       "dark-green": {
@@ -818,9 +959,6 @@
       "green": {
         "background-color": "#BED200"
       },
-      "light-blue": {
-        "background-color": "#009DEC"
-      },
       "magenta": {
         "background-color": "#E50082"
       },
@@ -839,7 +977,7 @@
       "background-color": "#767676",
       "width": "3.5rem",
       "thumb": {
-        "background-color": "#ffffff",
+        "background-color": "#FFFFFF",
         "width": "1.75rem",
         "height": "1.75rem",
         "hover": {
@@ -851,7 +989,23 @@
       },
       "outline-offset": "2px",
       "disabled": {
-        "background-color": "#B4B4B4"
+        "background-color": "#BEBEBE"
+      }
+    },
+    "table": {
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "line-height": "1.6",
+      "caption": {
+        "font-weight": 800
+      },
+      "cell": {
+        "border-bottom": "1px solid #E8E8E8"
+      },
+      "header-cell": {
+        "font-weight": 800
       }
     },
     "text-input": {
@@ -861,9 +1015,9 @@
       "font-weight": 400,
       "outline-offset": "2px",
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 1px #B4B4B4",
-        "color": "#B4B4B4"
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 1px #BEBEBE",
+        "color": "#BEBEBE"
       },
       "hover": {
         "box-shadow": "inset 0 0 0 2px #000000"
@@ -978,7 +1132,7 @@
       "border-color": {},
       "border-radius": {},
       "border-width": {},
-      "color": "#ffffff",
+      "color": "#FFFFFF",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": {},
       "line-height": {},
@@ -994,8 +1148,8 @@
         "gap": {}
       },
       "disabled": {
-        "background-color": "#B4B4B4",
-        "color": "#ffffff",
+        "background-color": "#BEBEBE",
+        "color": "#FFFFFF",
         "border-color": {}
       },
       "hover": {
@@ -1008,9 +1162,9 @@
         "background-color": "#004699",
         "border-color": {},
         "border-width": {},
-        "color": "#ffffff",
+        "color": "#FFFFFF",
         "disabled": {
-          "background-color": "#B4B4B4",
+          "background-color": "#BEBEBE",
           "color": {},
           "border-color": {}
         },
@@ -1077,7 +1231,7 @@
         }
       },
       "secondary-action": {
-        "background-color": "#ffffff",
+        "background-color": "#FFFFFF",
         "color": "#004699",
         "border-color": {},
         "border-width": {},
@@ -1087,8 +1241,8 @@
           "border-color": {}
         },
         "disabled": {
-          "background-color": "#ffffff",
-          "color": "#B4B4B4",
+          "background-color": "#FFFFFF",
+          "color": "#BEBEBE",
           "border-color": {}
         },
         "danger": {
@@ -1161,7 +1315,7 @@
         },
         "disabled": {
           "background-color": "transparent",
-          "color": "#B4B4B4"
+          "color": "#BEBEBE"
         },
         "danger": {
           "color": {},