@amsterdam/design-system-tokens 0.16.0 → 1.0.0

package/dist/index.json

@@ -57,7 +57,7 @@
       "interactive": "pointer"
     },
     "focus": {
-      "outline-offset": "0.125rem"
+      "outline-offset": "0.25rem"
     },
     "space": {
       "xs": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
@@ -161,7 +161,7 @@
         "font-weight": "800",
         "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "line-height": "1.2928",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "padding-inline": "0",
         "text-wrap": "balance",
@@ -179,10 +179,9 @@
     },
     "alert": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.25rem #009de6",
-      "forced-colors": {
-        "border-width": "0.25rem"
-      },
+      "border-color": "#009de6",
+      "border-style": "solid",
+      "border-width": "0.25rem",
       "severity-indicator": {
         "background-color": "#009de6",
         "padding-block": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
@@ -194,19 +193,19 @@
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)"
       },
       "error": {
-        "box-shadow": "inset 0 0 0 0.25rem #ec0000",
+        "border-color": "#ec0000",
         "severity-indicator": {
           "background-color": "#ec0000"
         }
       },
       "success": {
-        "box-shadow": "inset 0 0 0 0.25rem #00a03c",
+        "border-color": "#00a03c",
         "severity-indicator": {
           "background-color": "#00a03c"
         }
       },
       "warning": {
-        "box-shadow": "inset 0 0 0 0.25rem #ff9100",
+        "border-color": "#ff9100",
         "severity-indicator": {
           "background-color": "#ff9100"
         }
@@ -215,6 +214,9 @@
     "avatar": {
       "aspect-ratio": "1 / 1",
       "background-color": "#a00078",
+      "border-color": "#a00078",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#ffffff",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
@@ -227,26 +229,32 @@
       },
       "azure": {
         "background-color": "#009de6",
+        "border-color": "#009de6",
         "color": "#ffffff"
       },
       "green": {
         "background-color": "#00a03c",
+        "border-color": "#00a03c",
         "color": "#ffffff"
       },
       "lime": {
         "background-color": "#bed200",
+        "border-color": "#bed200",
         "color": "#181818"
       },
       "magenta": {
         "background-color": "#e50082",
+        "border-color": "#e50082",
         "color": "#ffffff"
       },
       "orange": {
         "background-color": "#ff9100",
+        "border-color": "#ff9100",
         "color": "#181818"
       },
       "yellow": {
         "background-color": "#ffe600",
+        "border-color": "#ffe600",
         "color": "#181818"
       }
     },
@@ -310,7 +318,7 @@
       },
       "link": {
         "color": "#004699",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.3333em",
@@ -321,57 +329,53 @@
       }
     },
     "button": {
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "cursor": "pointer",
       "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.6667",
       "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
         "cursor": "not-allowed"
       },
-      "forced-color-mode": {
-        "border": "0.125rem solid"
-      },
       "primary": {
         "background-color": "#004699",
-        "box-shadow": "inset 0 0 0 0.125rem #004699",
+        "border-color": "#004699",
         "color": "#ffffff",
         "disabled": {
           "background-color": "#767676",
-          "box-shadow": "inset 0 0 0 0.125rem #767676"
+          "border-color": "#767676"
         },
         "hover": {
           "background-color": "#003677",
-          "box-shadow": "inset 0 0 0 0.125rem #003677"
+          "border-color": "#003677"
         }
       },
       "secondary": {
         "background-color": "#ffffff",
         "color": "#004699",
-        "box-shadow": "inset 0 0 0 0.125rem #004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.1875rem #003677",
+          "box-shadow": "inset 0 0 0 0.0625rem",
           "color": "#003677"
         },
         "disabled": {
-          "background-color": "#ffffff",
-          "box-shadow": "inset 0 0 0 0.125rem #767676",
           "color": "#767676"
         }
       },
       "tertiary": {
         "background-color": "transparent",
+        "border-color": "transparent",
         "color": "#004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #003677",
+          "border-color": "currentColor",
           "color": "#003677"
         },
         "disabled": {
-          "background-color": "transparent",
           "color": "#767676"
         }
       },
@@ -401,7 +405,7 @@
           "text-decoration-line": "underline"
         }
       },
-      "outline-offset": "0.125rem"
+      "outline-offset": "0.25rem"
     },
     "character-count": {
       "color": "#181818",
@@ -421,63 +425,88 @@
       "font-weight": "400",
       "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "line-height": "1.6667",
-      "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\")",
+      "outline-offset": "0.25rem",
+      "checked-indicator": {
+        "stroke": "#ffffff"
+      },
+      "indeterminate-indicator": {
+        "stroke": "#ffffff"
+      },
+      "hover-indicator": {
+        "hover": {
+          "stroke": "#003677"
+        },
+        "invalid": {
           "hover": {
-            "background-color": "#003677"
+            "stroke": "#b70000"
           }
-        },
-        "disabled": {
-          "border-color": "#767676",
-          "border-width": "0.125rem",
-          "checked": {
-            "background-color": "#767676",
+        }
+      },
+      "rectangle": {
+        "fill": "#ffffff",
+        "stroke": "#004699",
+        "checked": {
+          "fill": "#004699",
+          "disabled": {
+            "fill": "#767676",
             "hover": {
-              "background-color": "#767676"
+              "fill": "#767676"
             }
           },
-          "indeterminate": {
-            "background-color": "#767676",
+          "hover": {
+            "fill": "#003677",
+            "disabled-invalid": {
+              "fill": "#767676"
+            }
+          },
+          "invalid": {
+            "fill": "#ec0000",
             "hover": {
-              "background-color": "#767676"
+              "fill": "#b70000"
             }
           }
         },
+        "disabled": {
+          "stroke": "#767676"
+        },
         "hover": {
-          "border-color": "#003677",
-          "border-width": "0.1875rem"
+          "stroke": "#003677",
+          "disabled-invalid": {
+            "stroke": "#767676"
+          }
         },
-        "invalid": {
-          "border-color": "#ec0000",
-          "checked": {
-            "background-color": "#ec0000",
+        "indeterminate": {
+          "fill": "#004699",
+          "disabled": {
+            "fill": "#767676",
             "hover": {
-              "background-color": "#b70000"
+              "fill": "#767676"
             }
           },
           "hover": {
-            "border-color": "#b70000"
+            "fill": "#003677",
+            "disabled-invalid": {
+              "fill": "#767676"
+            }
           },
-          "indeterminate": {
-            "background-color": "#ec0000",
+          "invalid": {
+            "fill": "#ec0000",
             "hover": {
-              "background-color": "#b70000"
+              "fill": "#b70000"
             }
           }
         },
-        "indeterminate": {
-          "background-color": "#004699",
-          "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")",
+        "invalid": {
+          "stroke": "#ec0000",
           "hover": {
-            "background-color": "#003677"
+            "stroke": "#b70000"
           }
         }
       },
+      "icon-container": {
+        "block-size": "calc(clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem) * 1.6667)",
+        "inline-size": "1.5rem"
+      },
       "disabled": {
         "cursor": "not-allowed",
         "color": "#767676"
@@ -498,13 +527,15 @@
     },
     "date-input": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "calender-picker-indicator": {
@@ -512,24 +543,23 @@
         "cursor": "pointer"
       },
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #767676",
         "color": "#767676",
         "cursor": "not-allowed",
         "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>\")"
+          "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><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 #181818",
+        "box-shadow": "inset 0 0 0 0.0625rem",
         "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>\")"
+          "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><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",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       }
     },
@@ -562,7 +592,9 @@
     },
     "dialog": {
       "background-color": "#ffffff",
-      "border": "0.125rem solid #ffffff",
+      "border-color": "#ffffff",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "inline-size": "calc(100% - 2 * clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem))",
       "max-block-size": "calc(100dvh - 2 * clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem))",
@@ -644,14 +676,16 @@
     },
     "file-input": {
       "background-color": "#ffffff",
-      "border": "0.0625rem dashed #181818",
+      "border-color": "currentColor",
+      "border-style": "dashed",
+      "border-width": "0.125rem",
       "color": "#181818",
       "cursor": "pointer",
       "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.6667",
-      "outline-offset": "calc(0.125rem * 2)",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
@@ -660,23 +694,21 @@
       },
       "file-selector-button": {
         "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.125rem #004699",
+        "border-color": "currentColor",
+        "border-style": "solid",
+        "border-width": "0.125rem",
         "color": "#004699",
         "cursor": "pointer",
         "margin-inline-end": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
         "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.1875rem #003677",
+          "box-shadow": "inset 0 0 0 0.0625rem",
           "color": "#003677"
         },
         "disabled": {
-          "box-shadow": "inset 0 0 0 0.125rem #767676",
           "color": "#767676",
           "cursor": "not-allowed"
-        },
-        "forced-color-mode": {
-          "border": "0.125rem solid"
         }
       }
     },
@@ -754,12 +786,12 @@
       }
     },
     "hint": {
-      "color": "#767676"
+      "font-weight": "400"
     },
     "icon-button": {
       "color": "#004699",
       "cursor": "pointer",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "hover": {
         "background-color": "rgb(0 70 153 / 12.5%)",
         "color": "#003677"
@@ -826,7 +858,7 @@
       "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
       "scroller": {
         "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
-        "outline-offset": "0.125rem"
+        "outline-offset": "0.25rem"
       },
       "thumbnails": {
         "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
@@ -834,7 +866,7 @@
           "background-color": "transparent",
           "cursor": "pointer",
           "opacity": "40%",
-          "outline-offset": "0.125rem",
+          "outline-offset": "0.25rem",
           "in-view": {
             "opacity": "100%"
           },
@@ -848,7 +880,7 @@
       "aspect-ratio": "16 / 9"
     },
     "invalid-form-alert": {
-      "outline-offset": "0.125rem"
+      "outline-offset": "0.25rem"
     },
     "label": {
       "color": "#181818",
@@ -867,7 +899,7 @@
         "font-weight": "400",
         "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "line-height": "1.6667",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.3333em",
@@ -903,7 +935,7 @@
       "font-size": "inherit",
       "font-weight": "400",
       "line-height": "inherit",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "text-decoration-thickness": "0.125rem",
       "text-underline-offset": "0.3333em",
       "hover": {
@@ -988,7 +1020,7 @@
           "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
           "font-weight": "400",
           "line-height": "1.5152",
-          "outline-offset": "0.125rem",
+          "outline-offset": "0.25rem",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
           "text-underline-offset": "0.3333em",
@@ -1014,12 +1046,13 @@
       },
       "logo-link": {
         "column-gap": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
-        "outline-offset": "0.125rem"
+        "outline-offset": "0.25rem"
       },
       "brand-name": {
         "color": "#181818",
         "font-size": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)",
         "font-weight": "800",
+        "line-height": "1.2928",
         "text-wrap": "balance"
       },
       "mega-menu": {
@@ -1042,7 +1075,7 @@
           "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
           "font-weight": "400",
           "line-height": "1.6667",
-          "outline-offset": "0.125rem",
+          "outline-offset": "0.25rem",
           "padding-block": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
           "hover": {
             "color": "#003677"
@@ -1085,7 +1118,7 @@
       "link": {
         "color": "#004699",
         "gap": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "padding-inline": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
@@ -1119,28 +1152,29 @@
     },
     "password-input": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #767676",
         "color": "#767676",
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.125rem #181818"
+        "box-shadow": "inset 0 0 0 0.0625rem"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 0.0625rem #ec0000",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -1155,7 +1189,7 @@
       "font-weight": "400",
       "gap": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "line-height": "1.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "text-decoration-thickness": "0.125rem",
       "text-underline-offset": "0.3333em",
       "checked-indicator": {
@@ -1180,7 +1214,6 @@
         }
       },
       "hover-indicator": {
-        "stroke-width": "3px",
         "hover": {
           "stroke": "#003677"
         },
@@ -1193,7 +1226,6 @@
       "circle": {
         "fill": "#ffffff",
         "stroke": "#004699",
-        "stroke-width": "2px",
         "disabled": {
           "stroke": "#767676"
         },
@@ -1238,13 +1270,15 @@
     "search-field": {
       "input": {
         "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #181818",
+        "border-color": "currentColor",
+        "border-style": "solid",
+        "border-width": "0.125rem",
         "color": "#181818",
         "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.6667",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
         "cancel-button": {
@@ -1255,12 +1289,13 @@
           "inline-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)"
         },
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #181818"
+          "box-shadow": "inset 0 0 0 0.0625rem"
         },
         "invalid": {
-          "box-shadow": "inset 0 0 0 0.0625rem #ec0000",
+          "border-color": "#ec0000",
           "hover": {
-            "box-shadow": "inset 0 0 0 0.125rem #b70000"
+            "border-color": "#b70000",
+            "box-shadow": "inset 0 0 0 0.0625rem #b70000"
           }
         },
         "placeholder": {
@@ -1272,28 +1307,31 @@
       "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 clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) center",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "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 #767676",
+        "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
         "color": "#767676",
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.125rem #181818"
+        "box-shadow": "inset 0 0 0 0.0625rem",
+        "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 0.0625rem #ec0000",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
       "option": {
@@ -1309,7 +1347,7 @@
       "font-size": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)",
       "font-weight": "400",
       "line-height": "1.5152",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "hover": {
@@ -1344,7 +1382,7 @@
       "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
       "font-weight": "400",
       "line-height": "1.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "text-decoration-thickness": "0.125rem",
       "text-underline-offset": "0.3333em",
       "contrast": {
@@ -1374,12 +1412,12 @@
     "switch": {
       "background-color": "#767676",
       "cursor": "pointer",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "inline-size": "3.5rem",
       "thumb": {
         "background-color": "#ffffff",
-        "inline-size": "1.75rem",
         "block-size": "1.75rem",
+        "inline-size": "1.75rem",
         "hover": {
           "box-shadow": "0 0 0 0.125rem #003677",
           "color": "#003677"
@@ -1401,7 +1439,7 @@
       "line-height": "1.6667",
       "link": {
         "color": "#004699",
-        "outline-offset": "0.125rem",
+        "outline-offset": "0.25rem",
         "text-decoration-line": "none",
         "text-decoration-thickness": "0.125rem",
         "text-underline-offset": "0.3333em",
@@ -1453,12 +1491,12 @@
         "font-size": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)",
         "font-weight": "400",
         "line-height": "1.6667",
-        "outline-offset": "-0.25rem",
+        "outline-offset": "calc(0.25rem * -1)",
         "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
         "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
         "hover": {
-          "color": "#003677",
-          "box-shadow": "inset 0 calc(0.125rem * -1)"
+          "box-shadow": "inset 0 calc(0.125rem * -1)",
+          "color": "#003677"
         },
         "selected": {
           "box-shadow": "inset 0 calc(0.25rem * -1)",
@@ -1472,29 +1510,30 @@
     },
     "text-area": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
       "min-block-size": "calc(1.6667 * 1em + 2 * clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem))",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #767676",
         "color": "#767676",
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.125rem #181818"
+        "box-shadow": "inset 0 0 0 0.0625rem"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 0.0625rem #ec0000",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -1503,28 +1542,29 @@
     },
     "text-input": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #767676",
         "color": "#767676",
         "cursor": "not-allowed"
       },
       "hover": {
-        "box-shadow": "inset 0 0 0 0.125rem #181818"
+        "box-shadow": "inset 0 0 0 0.0625rem"
       },
       "invalid": {
-        "box-shadow": "inset 0 0 0 0.0625rem #ec0000",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
       "placeholder": {
@@ -1533,13 +1573,15 @@
     },
     "time-input": {
       "background-color": "#ffffff",
-      "box-shadow": "inset 0 0 0 0.0625rem #181818",
+      "border-color": "currentColor",
+      "border-style": "solid",
+      "border-width": "0.125rem",
       "color": "#181818",
       "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.6667",
-      "outline-offset": "0.125rem",
+      "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
       "padding-inline": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)",
       "calender-picker-indicator": {
@@ -1547,24 +1589,23 @@
         "cursor": "pointer"
       },
       "disabled": {
-        "background-color": "#ffffff",
-        "box-shadow": "inset 0 0 0 0.0625rem #767676",
         "color": "#767676",
         "cursor": "not-allowed",
         "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>\")"
+          "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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 #181818",
+        "box-shadow": "inset 0 0 0 0.0625rem",
         "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>\")"
+          "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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",
+        "border-color": "#ec0000",
         "hover": {
-          "box-shadow": "inset 0 0 0 0.125rem #b70000"
+          "border-color": "#b70000",
+          "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       }
     },