@amsterdam/design-system-tokens 0.1.6 → 0.1.8

package/dist/index.tokens.json

@@ -5,7 +5,7 @@
       "primary-white": "#ffffff",
       "primary-blue": "#004699",
       "primary-red": "#EC0000",
-      "dark-blue": "#00387A",
+      "dark-blue": "#102E62",
       "orange": "#FF9100",
       "yellow": "#FFE600",
       "green": "#BED200",
@@ -19,11 +19,12 @@
       "neutral-grey4": "#323232"
     },
     "proportion": {
-      "extra-tall": "9 / 16",
+      "x-tall": "9 / 16",
       "tall": "4 / 5",
       "square": "1 / 1",
       "wide": "5 / 4",
-      "extra-wide": "16 / 9"
+      "x-wide": "16 / 9",
+      "2x-wide": "32 / 9"
     },
     "typography": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -179,11 +180,12 @@
       }
     },
     "aspect-ratio": {
-      "extra-tall": "9 / 16",
+      "x-tall": "9 / 16",
       "tall": "4 / 5",
       "square": "1 / 1",
       "wide": "5 / 4",
-      "extra-wide": "16 / 9"
+      "x-wide": "16 / 9",
+      "2x-wide": "32 / 9"
     },
     "blockquote": {
       "color": "#000000",
@@ -201,6 +203,7 @@
     "breadcrumb": {
       "color": "#004699",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
       "line-height": "1.6",
       "narrow": {
         "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
@@ -211,11 +214,11 @@
       "item-link": {
         "outline-offset": "2px",
         "hover": {
-          "color": "#00387A",
-          "box-shadow": "inset 0 -2px 0 0 #00387A"
+          "color": "#102E62",
+          "box-shadow": "inset 0 -2px 0 0 #102E62"
         },
         "focus": {
-          "color": "#00387A",
+          "color": "#102E62",
           "text-decoration": "underline"
         }
       }
@@ -230,25 +233,30 @@
       "secondary": {
         "box-shadow": "inset 0 0 0 2px #004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 3px #00387A"
+          "box-shadow": "inset 0 0 0 3px #102E62"
         },
         "disabled": {
           "box-shadow": "inset 0 0 0 2px #B4B4B4"
         },
         "focus": {
-          "box-shadow": "inset 0 0 0 3px #00387A",
-          "color": "#00387A"
+          "box-shadow": "inset 0 0 0 2px #004699"
         }
       },
       "tertiary": {
         "hover": {
           "box-shadow": "inset 0 0 0 2px #767676"
-        },
-        "focus": {
-          "box-shadow": "inset 0 0 0 2px #767676"
         }
       }
     },
+    "card": {
+      "link": {
+        "color": "#004699",
+        "hover": {
+          "color": "#102E62"
+        }
+      },
+      "outline-offset": "2px"
+    },
     "checkbox": {
       "color": "#000000",
       "checkmark": {
@@ -256,7 +264,7 @@
         "checked": {
           "background-color": "#004699",
           "hover": {
-            "background-color": "#00387A"
+            "background-color": "#102E62"
           }
         },
         "disabled": {
@@ -275,7 +283,7 @@
           }
         },
         "hover": {
-          "border-color": "#00387A"
+          "border-color": "#102E62"
         },
         "invalid": {
           "border-color": "#EC0000",
@@ -298,7 +306,7 @@
         "indeterminate": {
           "background-color": "#004699",
           "hover": {
-            "background-color": "#00387A"
+            "background-color": "#102E62"
           }
         },
         "narrow": {
@@ -315,7 +323,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
       "hover": {
-        "color": "#00387A"
+        "color": "#102E62"
       },
       "outline-offset": "2px",
       "line-height": "1.6",
@@ -326,9 +334,47 @@
         "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
       }
     },
-    "footer": {
-      "top": {
-        "background-color": "#004699"
+    "dialog": {
+      "background-color": "#ffffff",
+      "border": "0",
+      "max-inline-size": "min(87.69vw, 45rem)",
+      "title": {
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 800,
+        "line-height": "1.5",
+        "narrow": {
+          "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
+        },
+        "wide": {
+          "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
+        }
+      },
+      "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)",
+        "padding-inline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
+        "max-block-size": "75vh"
+      },
+      "article": {
+        "padding-inline-end": "1.5rem"
+      },
+      "header": {
+        "gap": "1rem"
+      },
+      "footer": {
+        "gap": "1rem",
+        "padding-block": "1.5rem 0"
       }
     },
     "form-label": {
@@ -343,6 +389,23 @@
         "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
       }
     },
+    "grid": {
+      "column-count": "4",
+      "density-low": {
+        "gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
+      },
+      "density-high": {
+        "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
+      },
+      "medium": {
+        "column-count": "8"
+      },
+      "wide": {
+        "column-count": "12"
+      }
+    },
     "heading": {
       "1": {
         "line-height": "1.2",
@@ -385,6 +448,32 @@
       "font-weight": 800,
       "inverse-color": "#ffffff"
     },
+    "highlight": {
+      "blue": {
+        "background-color": "#004699"
+      },
+      "dark-green": {
+        "background-color": "#00A03C"
+      },
+      "green": {
+        "background-color": "#BED200"
+      },
+      "light-blue": {
+        "background-color": "#009DEC"
+      },
+      "magenta": {
+        "background-color": "#E50082"
+      },
+      "orange": {
+        "background-color": "#FF9100"
+      },
+      "purple": {
+        "background-color": "#A00078"
+      },
+      "yellow": {
+        "background-color": "#FFE600"
+      }
+    },
     "icon": {
       "size-3": {
         "icon-size": {
@@ -427,11 +516,11 @@
       "outline-offset": "2px",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
-      "focus": {
-        "color": "#00387A"
+      "hover": {
+        "color": "#102E62"
       },
       "inline": {
-        "focus": {
+        "hover": {
           "text-decoration": "underline",
           "text-underline-offset": "3px"
         },
@@ -439,13 +528,14 @@
         "font-size": "inherit",
         "line-height": "inherit",
         "text-decoration": "none",
+        "text-decoration-thickness": "2px",
         "visited": {
           "color": "#A00078"
         }
       },
       "in-list": {
         "gap": "0.5em",
-        "focus": {
+        "hover": {
           "text-decoration": "underline",
           "text-decoration-thickness": "2px",
           "text-underline-offset": "7px"
@@ -462,7 +552,7 @@
       "standalone": {
         "text-underline-offset": "8px",
         "text-decoration-thickness": "2px",
-        "focus": {
+        "hover": {
           "text-decoration-thickness": "3px",
           "text-underline-offset": "7px"
         },
@@ -493,6 +583,18 @@
         }
       }
     },
+    "logo": {
+      "height": "2.5rem",
+      "emblem": {
+        "color": "#EC0000"
+      },
+      "title": {
+        "color": "#EC0000"
+      },
+      "subsite": {
+        "color": "#000000"
+      }
+    },
     "ordered-list": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -518,14 +620,6 @@
         }
       }
     },
-    "page-grid": {
-      "column-count": {
-        "narrow": "4",
-        "wide": "12"
-      },
-      "column-gap": "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)",
-      "max-width": "1440px"
-    },
     "page-heading": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -561,6 +655,27 @@
         }
       }
     },
+    "pagination": {
+      "color": "#004699",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "narrow": {
+        "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
+      },
+      "wide": {
+        "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
+      },
+      "button": {
+        "current": {
+          "font-weight": 800
+        },
+        "hover": {
+          "color": "#102E62"
+        },
+        "outline-offset": "2px"
+      }
+    },
     "paragraph": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -592,6 +707,34 @@
         }
       }
     },
+    "screen": {
+      "wide": {
+        "max-width": "100rem"
+      },
+      "x-wide": {
+        "max-width": "132rem"
+      }
+    },
+    "switch": {
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "background-color": "#767676",
+      "width": "3.5rem",
+      "thumb": {
+        "background-color": "#ffffff",
+        "width": "1.75rem",
+        "height": "1.75rem",
+        "hover": {
+          "color": "#102E62"
+        }
+      },
+      "checked": {
+        "background-color": "#004699"
+      },
+      "outline-offset": "2px",
+      "disabled": {
+        "background-color": "#B4B4B4"
+      }
+    },
     "top-task-link": {
       "description": {
         "color": "#000000",
@@ -610,7 +753,7 @@
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-weight": 800,
         "hover": {
-          "color": "#00387A"
+          "color": "#102E62"
         },
         "line-height": "1.4",
         "narrow": {
@@ -714,12 +857,12 @@
           "border-color": {}
         },
         "hover": {
-          "background-color": "#00387A",
+          "background-color": "#102E62",
           "border-color": {},
           "color": {}
         },
         "focus": {
-          "background-color": "#00387A",
+          "background-color": {},
           "border-color": {},
           "border-width": {}
         },
@@ -782,7 +925,7 @@
         "border-width": {},
         "hover": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "disabled": {
@@ -850,12 +993,12 @@
         "font-weight": {},
         "hover": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "focus": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "disabled": {