@amsterdam/design-system-tokens 0.7.1 → 0.9.0

package/dist/index.json

@@ -1,5 +1,13 @@
 {
   "ams": {
+    "border": {
+      "width": {
+        "sm": "0.0625rem",
+        "md": "0.125rem",
+        "lg": "0.1875rem",
+        "xl": "0.25rem"
+      }
+    },
     "color": {
       "primary-black": "#000000",
       "primary-white": "#FFFFFF",
@@ -105,13 +113,8 @@
         "cursor": "pointer"
       }
     },
-    "border-width": {
-      "sm": "1px",
-      "md": "2px",
-      "lg": "3px"
-    },
     "focus": {
-      "outline-offset": "2px"
+      "outline-offset": "0.125rem"
     },
     "hyphenation": {
       "hyphenate-limit-chars": "12 8 4",
@@ -121,7 +124,7 @@
     "link-appearance": {
       "color": "#004699",
       "text-decoration-thickness": "0.125rem",
-      "text-underline-offset": "0.375rem",
+      "text-underline-offset": "0.3333em",
       "hover": {
         "color": "#102E62"
       },
@@ -135,7 +138,7 @@
         "text-decoration-line": "underline",
         "hover": {
           "text-decoration-thickness": "0.1875rem",
-          "text-underline-offset": "0.3125rem"
+          "text-underline-offset": "0.2778em"
         }
       },
       "subtle": {
@@ -146,28 +149,30 @@
       }
     },
     "accordion": {
+      "gap": ".5rem",
       "button": {
         "color": "#004699",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
         "font-weight": 800,
+        "gap": "1rem",
         "line-height": "1.6",
         "padding-block": ".75rem",
-        "padding-inline": "1rem",
+        "padding-inline": "0",
         "focus": {
-          "outline-offset": "2px"
+          "outline-offset": "0.125rem"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #767676"
+          "color": "#102E62"
         }
       },
       "panel": {
-        "padding-block": "1rem",
-        "padding-inline": "1rem"
+        "padding-block": "0 1rem",
+        "padding-inline": "0"
       }
     },
     "alert": {
-      "border-width": "4px",
+      "border-width": "0.25rem",
       "border-style": "solid",
       "gap": "1rem",
       "padding-block": "1rem",
@@ -250,11 +255,11 @@
       "font-weight": 800,
       "line-height": "1.6",
       "padding-inline": ".5rem",
-      "blue": {
-        "background-color": "#009DE6",
-        "color": "#000000"
+      "black": {
+        "background-color": "#000000",
+        "color": "#FFFFFF"
       },
-      "dark-blue": {
+      "blue": {
         "background-color": "#004699",
         "color": "#FFFFFF"
       },
@@ -266,6 +271,22 @@
         "background-color": "#BED200",
         "color": "#000000"
       },
+      "grey-1": {
+        "background-color": "#E8E8E8",
+        "color": "#000000"
+      },
+      "grey-2": {
+        "background-color": "#BEBEBE",
+        "color": "#000000"
+      },
+      "grey-3": {
+        "background-color": "#767676",
+        "color": "#FFFFFF"
+      },
+      "light-blue": {
+        "background-color": "#009DE6",
+        "color": "#000000"
+      },
       "magenta": {
         "background-color": "#E50082",
         "color": "#FFFFFF"
@@ -278,6 +299,14 @@
         "background-color": "#A00078",
         "color": "#FFFFFF"
       },
+      "red": {
+        "background-color": "#EC0000",
+        "color": "#FFFFFF"
+      },
+      "white": {
+        "background-color": "#FFFFFF",
+        "color": "#000000"
+      },
       "yellow": {
         "background-color": "#FFE600",
         "color": "#000000"
@@ -299,12 +328,12 @@
       "separator": {
         "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
       },
-      "item-link": {
+      "link": {
         "color": "#004699",
-        "outline-offset": "2px",
+        "outline-offset": "0.125rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "hover": {
           "color": "#102E62",
           "text-decoration-line": "underline"
@@ -319,45 +348,48 @@
       "gap": "1rem",
       "padding-block": ".5rem",
       "padding-inline": "1rem",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "disabled": {
         "cursor": "not-allowed"
       },
+      "forced-color-mode": {
+        "border": "0.125rem solid"
+      },
       "primary": {
         "background-color": "#004699",
-        "box-shadow": "inset 0 0 0 2px #004699",
+        "box-shadow": "inset 0 0 0 0.125rem #004699",
         "color": "#FFFFFF",
         "disabled": {
           "background-color": "#BEBEBE",
-          "box-shadow": "inset 0 0 0 2px #BEBEBE"
+          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE"
         },
         "hover": {
           "background-color": "#102E62",
-          "box-shadow": "inset 0 0 0 2px #102E62"
+          "box-shadow": "inset 0 0 0 0.125rem #102E62"
         }
       },
       "secondary": {
         "background-color": "#FFFFFF",
         "color": "#004699",
-        "box-shadow": "inset 0 0 0 2px #004699",
+        "box-shadow": "inset 0 0 0 0.125rem #004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 3px #102E62",
+          "box-shadow": "inset 0 0 0 0.1875rem #102E62",
           "color": "#102E62"
         },
         "disabled": {
           "background-color": "#FFFFFF",
-          "box-shadow": "inset 0 0 0 2px #BEBEBE",
+          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE",
           "color": "#BEBEBE"
         },
         "focus": {
-          "box-shadow": "inset 0 0 0 2px #004699"
+          "box-shadow": "inset 0 0 0 0.125rem #004699"
         }
       },
       "tertiary": {
         "background-color": "transparent",
         "color": "#004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #102E62",
+          "box-shadow": "inset 0 0 0 0.125rem #102E62",
           "color": "#102E62"
         },
         "disabled": {
@@ -371,13 +403,13 @@
         "color": "#004699",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "hover": {
           "color": "#102E62",
           "text-decoration-line": "underline"
         }
       },
-      "outline-offset": "2px"
+      "outline-offset": "0.125rem"
     },
     "checkbox": {
       "color": "#000000",
@@ -385,9 +417,10 @@
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "line-height": "1.6",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "checkmark": {
         "border-color": "#004699",
+        "border-width": "0.125rem",
         "checked": {
           "background-color": "#004699",
           "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")",
@@ -397,6 +430,7 @@
         },
         "disabled": {
           "border-color": "#767676",
+          "border-width": "0.125rem",
           "checked": {
             "background-color": "#767676",
             "hover": {
@@ -411,7 +445,8 @@
           }
         },
         "hover": {
-          "border-color": "#102E62"
+          "border-color": "#102E62",
+          "border-width": "0.1875rem"
         },
         "invalid": {
           "border-color": "#EC0000",
@@ -443,7 +478,8 @@
         "color": "#767676"
       },
       "hover": {
-        "color": "#102E62"
+        "color": "#102E62",
+        "text-decoration-thickness": "0.125rem"
       }
     },
     "column": {
@@ -455,6 +491,57 @@
         "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
       }
     },
+    "date-input": {
+      "background-color": "#FFFFFF",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "0.125rem",
+      "padding-block": ".5rem",
+      "padding-inline": "1.5rem",
+      "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='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+      },
+      "disabled": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
+        "color": "#BEBEBE",
+        "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>\")"
+        }
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 0.125rem #000000",
+        "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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+        }
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
+        }
+      }
+    },
+    "description-list": {
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "gap": "1rem",
+      "inverse-color": "#FFFFFF",
+      "line-height": "1.6",
+      "row": {
+        "gap": "1rem"
+      },
+      "details": {
+        "font-weight": 800,
+        "padding-inline-start": "2rem"
+      }
+    },
     "dialog": {
       "background-color": "#FFFFFF",
       "border": "0",
@@ -472,13 +559,70 @@
         "gap": "1rem"
       }
     },
-    "fieldset": {
+    "error-message": {
+      "color": "#EC0000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-weight": 400,
+      "line-height": "1.6"
+    },
+    "field-set": {
+      "invalid": {
+        "border-inline-start": "0.1875rem solid #EC0000",
+        "padding-inline-start": "1rem"
+      },
       "legend": {
         "color": "#000000",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
         "font-weight": 800,
-        "line-height": "1.5"
+        "line-height": "1.5",
+        "margin-block-end": "1rem"
+      }
+    },
+    "field": {
+      "gap": ".75rem",
+      "invalid": {
+        "border-inline-start": "0.1875rem solid #EC0000",
+        "padding-inline-start": "1rem"
+      }
+    },
+    "file-input": {
+      "background-color": "#FFFFFF",
+      "border": "0.0625rem dashed #767676",
+      "color": "#000000",
+      "cursor": "pointer",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "0.125rem",
+      "padding-block": "1rem",
+      "padding-inline": "1rem",
+      "disabled": {
+        "color": "#BEBEBE",
+        "cursor": "not-allowed"
+      },
+      "file-selector-button": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 0.125rem #004699",
+        "color": "#004699",
+        "cursor": "pointer",
+        "margin-inline-end": "1rem",
+        "padding-block": ".5rem",
+        "padding-inline": "1rem",
+        "hover": {
+          "box-shadow": "inset 0 0 0 0.1875rem #102E62",
+          "color": "#102E62"
+        },
+        "disabled": {
+          "box-shadow": "inset 0 0 0 0.125rem #BEBEBE",
+          "color": "#BEBEBE",
+          "cursor": "not-allowed"
+        },
+        "forced-color-mode": {
+          "border": "0.125rem solid"
+        }
       }
     },
     "form-field-character-counter": {
@@ -491,13 +635,6 @@
         "color": "#EC0000"
       }
     },
-    "form-label": {
-      "color": "#000000",
-      "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-      "font-weight": 800,
-      "line-height": "1.5"
-    },
     "gap": {
       "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
       "sm": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)",
@@ -530,7 +667,7 @@
       "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
       "padding-block": "1rem",
       "logo-link": {
-        "outline-offset": "2px"
+        "outline-offset": "0.125rem"
       }
     },
     "heading": {
@@ -567,7 +704,7 @@
     },
     "icon-button": {
       "color": "#004699",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "hover": {
         "background-color": "rgba(0, 70, 153, 0.125)",
         "color": "#102E62"
@@ -616,25 +753,30 @@
         "line-height": "1.6"
       }
     },
+    "label": {
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
+      "font-weight": 800,
+      "line-height": "1.5"
+    },
     "link-list": {
       "gap": "0.5em",
       "link": {
         "color": "#004699",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
         "font-weight": 400,
         "gap": "0.5em",
-        "outline-offset": "2px",
+        "line-height": "1.6",
+        "outline-offset": "0.125rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "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"
@@ -661,20 +803,20 @@
       "color": "#004699",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "hover": {
         "color": "#102E62"
       },
       "inline": {
         "text-decoration-line": "underline",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "font-family": "inherit",
         "font-size": "inherit",
         "line-height": "inherit",
         "hover": {
           "text-decoration-thickness": "0.1875rem",
-          "text-underline-offset": "0.3125rem"
+          "text-underline-offset": "0.2778em"
         },
         "visited": {
           "color": "#A00078"
@@ -685,10 +827,10 @@
         "line-height": "1.6",
         "text-decoration-line": "underline",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "hover": {
           "text-decoration-thickness": "0.1875rem",
-          "text-underline-offset": "0.3125rem"
+          "text-underline-offset": "0.2778em"
         }
       },
       "on-background-dark": {
@@ -711,7 +853,7 @@
       }
     },
     "logo": {
-      "height": "2.5rem",
+      "block-size": "2.5rem",
       "emblem": {
         "color": "#EC0000"
       },
@@ -749,6 +891,10 @@
       "inverse-color": "#FFFFFF",
       "line-height": "1.6",
       "list-style-type": "decimal",
+      "small": {
+        "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+        "line-height": "1.6"
+      },
       "item": {
         "margin-inline-start": "2.25rem",
         "padding-inline-start": "0.25rem"
@@ -770,8 +916,8 @@
       "line-height": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)"
     },
     "page-menu": {
-      "column-gap": "2.5rem",
-      "row-gap": "0.5rem",
+      "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+      "row-gap": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
       "item": {
         "color": "#004699",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -779,10 +925,10 @@
         "font-weight": 400,
         "gap": "0.5rem",
         "line-height": "1.6",
-        "outline-offset": "2px",
+        "outline-offset": "0.125rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "hover": {
           "color": "#102E62",
           "text-decoration-line": "underline"
@@ -796,11 +942,11 @@
       "font-weight": 400,
       "line-height": "1.6",
       "button": {
-        "outline-offset": "2px",
+        "outline-offset": "0.125rem",
         "padding-inline": ".75rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "current": {
           "font-weight": 800
         },
@@ -813,16 +959,14 @@
     "paragraph": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
+      "line-height": "1.6",
       "inverse-color": "#FFFFFF",
       "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"
@@ -834,9 +978,10 @@
       "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "line-height": "1.6",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "circle": {
         "border-color": "#004699",
+        "border-width": "0.125rem",
         "checked": {
           "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
           "hover": {
@@ -845,6 +990,7 @@
         },
         "disabled": {
           "border-color": "#767676",
+          "border-width": "0.125rem",
           "checked": {
             "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
             "hover": {
@@ -872,7 +1018,8 @@
         "color": "#767676"
       },
       "hover": {
-        "color": "#102E62"
+        "color": "#102E62",
+        "text-decoration-thickness": "0.125rem"
       }
     },
     "row": {
@@ -885,56 +1032,97 @@
       }
     },
     "screen": {
+      "background-color": "#FFFFFF",
       "wide": {
-        "max-width": "100rem"
+        "max-inline-size": "100rem"
       },
       "x-wide": {
-        "max-width": "132rem"
+        "max-inline-size": "132rem"
       }
     },
     "search-field": {
       "button": {
         "background-color": "#004699",
         "color": "#FFFFFF",
-        "outline-offset": "2px",
+        "outline-offset": "0.125rem",
+        "padding-block": ".5rem",
+        "padding-inline": ".5rem",
         "hover": {
           "background-color": "#102E62"
-        },
-        "padding-block": ".5rem",
-        "padding-inline": ".5rem"
+        }
       },
       "input": {
-        "box-shadow": "inset 0 0 0 1px #000000",
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 0.0625rem #000000",
         "color": "#000000",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
-        "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+        "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
         "font-weight": 400,
         "line-height": "1.6",
-        "outline-offset": "2px",
+        "outline-offset": "0.125rem",
         "padding-block": ".5rem",
         "padding-inline": "1rem",
         "cancel-button": {
           "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
+          "block-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
           "color": "#004699",
-          "height": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
-          "width": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
+          "inline-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #000000"
+          "box-shadow": "inset 0 0 0 0.125rem #000000"
+        },
+        "invalid": {
+          "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
+          "hover": {
+            "box-shadow": "inset 0 0 0 0.125rem #EC0000"
+          }
         },
         "placeholder": {
           "color": "#767676"
         }
       }
     },
+    "select": {
+      "background-color": "#FFFFFF",
+      "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
+      "background-position": "right 1rem center",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "0.125rem",
+      "padding-block": ".5rem",
+      "padding-inline": "1rem calc(2 * 1rem + 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"
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 0.125rem #000000"
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
+        }
+      },
+      "option": {
+        "disabled": {
+          "color": "#BEBEBE"
+        }
+      }
+    },
     "skip-link": {
       "background-color": "#004699",
       "color": "#FFFFFF",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-weight": 400,
       "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-weight": 400,
       "line-height": "1.6",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "padding-block": ".5rem",
       "padding-inline": "1rem",
       "hover": {
@@ -968,21 +1156,22 @@
       }
     },
     "switch": {
-      "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "background-color": "#767676",
-      "width": "3.5rem",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "outline-offset": "0.125rem",
+      "inline-size": "3.5rem",
       "thumb": {
         "background-color": "#FFFFFF",
-        "width": "1.75rem",
-        "height": "1.75rem",
+        "inline-size": "1.75rem",
+        "block-size": "1.75rem",
         "hover": {
+          "box-shadow": "0 0 0 0.125rem #102E62",
           "color": "#102E62"
         }
       },
       "checked": {
         "background-color": "#004699"
       },
-      "outline-offset": "2px",
       "disabled": {
         "background-color": "#BEBEBE"
       }
@@ -990,14 +1179,14 @@
     "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)",
+      "font-weight": 400,
       "line-height": "1.6",
       "caption": {
         "font-weight": 800
       },
       "cell": {
-        "border-bottom": "1px solid #E8E8E8",
+        "border-block-end": "0.0625rem solid #E8E8E8",
         "padding-block": "1rem",
         "padding-inline": "1rem"
       },
@@ -1007,16 +1196,15 @@
     },
     "tabs": {
       "list": {
-        "border-bottom": ".125rem solid #004699"
+        "background-color": "#FFFFFF",
+        "border-block-end": "0.125rem solid #004699"
       },
       "button": {
-        "background-color": "transparent",
-        "border": "none",
         "color": "#004699",
         "cursor": "pointer",
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
-        "font-weight": 400,
         "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+        "font-weight": 400,
         "line-height": "1.6",
         "outline-offset": "-0.25rem",
         "padding-block": ".5rem",
@@ -1036,29 +1224,30 @@
       }
     },
     "text-area": {
-      "box-shadow": "inset 0 0 0 1px #000000",
+      "background-color": "#FFFFFF",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "line-height": "1.6",
-      "min-height": "calc(1.6 * 1em + 2 * 0.5rem)",
-      "outline-offset": "2px",
+      "min-block-size": "calc(1.6 * 1em + 2 * 0.5rem)",
+      "outline-offset": "0.125rem",
       "padding-block": "0.5rem",
       "padding-inline": "1rem",
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 1px #BEBEBE",
+        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
         "color": "#BEBEBE",
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 2px #000000"
+        "box-shadow": "inset 0 0 0 0.125rem #000000"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 1px #EC0000",
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #EC0000"
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
         }
       },
       "placeholder": {
@@ -1066,33 +1255,69 @@
       }
     },
     "text-input": {
-      "box-shadow": "inset 0 0 0 1px #000000",
+      "background-color": "#FFFFFF",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
       "font-weight": 400,
       "line-height": "1.6",
-      "outline-offset": "2px",
+      "outline-offset": "0.125rem",
       "padding-block": ".5rem",
       "padding-inline": "1rem",
       "disabled": {
         "background-color": "#FFFFFF",
-        "box-shadow": "inset 0 0 0 1px #BEBEBE",
+        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
         "color": "#BEBEBE"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 2px #000000"
+        "box-shadow": "inset 0 0 0 0.125rem #000000"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 1px #EC0000",
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #EC0000"
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
         }
       },
       "placeholder": {
         "color": "#767676"
       }
     },
+    "time-input": {
+      "background-color": "#FFFFFF",
+      "box-shadow": "inset 0 0 0 0.0625rem #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "outline-offset": "0.125rem",
+      "padding-block": ".5rem",
+      "padding-inline": "1rem",
+      "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='%23004699'><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>\")"
+      },
+      "disabled": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
+        "color": "#BEBEBE",
+        "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>\")"
+        }
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 0.125rem #000000",
+        "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='%23102E62'><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>\")"
+        }
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 0.125rem #EC0000"
+        }
+      }
+    },
     "top-task-link": {
       "description": {
         "color": "#000000",
@@ -1109,13 +1334,13 @@
         "line-height": "1.5",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.375rem",
+        "text-underline-offset": "0.3333em",
         "hover": {
           "color": "#102E62",
           "text-decoration-line": "underline"
         }
       },
-      "outline-offset": "2px"
+      "outline-offset": "0.125rem"
     },
     "unordered-list": {
       "color": "#000000",
@@ -1136,6 +1361,10 @@
           "margin-inline-start": "0.875rem",
           "padding-inline-start": "0.875rem"
         }
+      },
+      "small": {
+        "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+        "line-height": "1.6"
       }
     }
   }