@amsterdam/design-system-tokens 0.2.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",
@@ -36,7 +35,7 @@
         "text-level": {
           "0": {
             "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
-            "line-height": "1.1"
+            "line-height": "1.15"
           },
           "1": {
             "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
@@ -44,25 +43,21 @@
           },
           "2": {
             "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
-            "line-height": "1.3"
+            "line-height": "1.25"
           },
           "3": {
             "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
-            "line-height": "1.4"
+            "line-height": "1.3"
           },
           "4": {
-            "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-            "line-height": "1.4"
-          },
-          "5": {
             "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
             "line-height": "1.5"
           },
-          "6": {
+          "5": {
             "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
             "line-height": "1.6"
           },
-          "7": {
+          "6": {
             "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
             "line-height": "1.6"
           }
@@ -72,7 +67,7 @@
         "text-level": {
           "0": {
             "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
-            "line-height": "1.1"
+            "line-height": "1.15"
           },
           "1": {
             "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)",
@@ -80,25 +75,21 @@
           },
           "2": {
             "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)",
-            "line-height": "1.3"
+            "line-height": "1.25"
           },
           "3": {
             "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
-            "line-height": "1.4"
+            "line-height": "1.3"
           },
           "4": {
-            "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
-            "line-height": "1.4"
-          },
-          "5": {
             "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
             "line-height": "1.5"
           },
-          "6": {
+          "5": {
             "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
             "line-height": "1.6"
           },
-          "7": {
+          "6": {
             "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
             "line-height": "1.6"
           }
@@ -121,7 +112,7 @@
         "color": "#102E62"
       },
       "on-background-dark": {
-        "color": "#ffffff"
+        "color": "#FFFFFF"
       },
       "on-background-light": {
         "color": "#000000"
@@ -160,18 +151,18 @@
           "box-shadow": "inset 0 0 0 2px #767676"
         },
         "spacious": {
-          "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-          "line-height": "1.5"
+          "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+          "line-height": "1.6"
         },
         "compact": {
-          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
-          "line-height": "1.5"
+          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
+          "line-height": "1.6"
         }
       }
     },
     "alert": {
-      "background-color": "#FFE600",
-      "border": "4px solid #FFE600",
+      "border-width": "4px",
+      "border-style": "solid",
       "gap": "1rem",
       "padding-block-start": "1rem",
       "padding-block-end": "1rem",
@@ -191,15 +182,18 @@
         }
       },
       "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"
@@ -214,25 +208,70 @@
       "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.4"
+        "line-height": "1.3"
       },
       "compact": {
         "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
-        "line-height": "1.4"
+        "line-height": "1.3"
       }
     },
     "breadcrumb": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
       "separator": {
-        "background-color": "#004699"
+        "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": {
         "color": "#004699",
@@ -269,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"
@@ -277,7 +316,7 @@
       },
       "tertiary": {
         "hover": {
-          "box-shadow": "inset 0 0 0 2px #767676"
+          "box-shadow": "inset 0 0 0 2px #102E62"
         }
       }
     },
@@ -366,7 +405,7 @@
       }
     },
     "dialog": {
-      "background-color": "#ffffff",
+      "background-color": "#FFFFFF",
       "border": "0",
       "max-inline-size": "min(87.69vw, 45rem)",
       "title": {
@@ -374,24 +413,17 @@
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-weight": 800,
         "spacious": {
-          "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-          "line-height": "1.5"
+          "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
+          "line-height": "1.6"
         },
         "compact": {
-          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
-          "line-height": "1.5"
+          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
+          "line-height": "1.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)",
@@ -414,12 +446,12 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 800,
       "spacious": {
-        "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
-        "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.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
-        "line-height": "1.6"
+        "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
+        "line-height": "1.5"
       }
     },
     "grid": {
@@ -439,27 +471,38 @@
         "column-count": "12"
       }
     },
+    "header": {
+      "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
+    },
     "heading": {
       "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",
           "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)"
         },
         "level-2": {
-          "line-height": "1.3",
+          "line-height": "1.25",
           "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)"
         },
         "level-3": {
-          "line-height": "1.4",
+          "line-height": "1.3",
           "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)"
         },
         "level-4": {
-          "line-height": "1.4",
+          "line-height": "1.5",
           "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)"
+        },
+        "level-5": {
+          "line-height": "1.6",
+          "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)"
+        },
+        "level-6": {
+          "line-height": "1.6",
+          "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
         }
       },
       "compact": {
@@ -468,64 +511,75 @@
           "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
         },
         "level-2": {
-          "line-height": "1.3",
+          "line-height": "1.25",
           "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
         },
         "level-3": {
-          "line-height": "1.4",
+          "line-height": "1.3",
           "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
         },
         "level-4": {
-          "line-height": "1.4",
+          "line-height": "1.5",
           "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
+        },
+        "level-5": {
+          "line-height": "1.6",
+          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)"
+        },
+        "level-6": {
+          "line-height": "1.6",
+          "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)"
         }
       }
     },
-    "highlight": {
-      "blue": {
-        "background-color": "#004699"
-      },
-      "dark-green": {
-        "background-color": "#00A03C"
-      },
-      "green": {
-        "background-color": "#BED200"
-      },
-      "light-blue": {
-        "background-color": "#009DEC"
-      },
-      "magenta": {
-        "background-color": "#E50082"
+    "icon-button": {
+      "color": "#004699",
+      "outline-offset": "2px",
+      "hover": {
+        "background-color": "rgba(0, 70, 153, 0.125)",
+        "color": "#102E62"
       },
-      "orange": {
-        "background-color": "#FF9100"
+      "disabled": {
+        "color": "#BEBEBE"
       },
-      "purple": {
-        "background-color": "#A00078"
+      "on-background-light": {
+        "color": "#000000",
+        "hover": {
+          "background-color": "rgba(0, 0, 0, 0.125)",
+          "color": "#000000"
+        },
+        "disabled": {
+          "color": "#BEBEBE"
+        }
       },
-      "yellow": {
-        "background-color": "#FFE600"
+      "on-background-dark": {
+        "background-color": "#004699",
+        "color": "#FFFFFF",
+        "hover": {
+          "background-color": "#102E62",
+          "color": "#FFFFFF"
+        },
+        "disabled": {
+          "color": "#FFFFFF",
+          "background-color": "#BEBEBE"
+        }
       }
     },
     "icon": {
       "spacious": {
         "size-3": {
           "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
-          "line-height": "1.4"
+          "line-height": "1.3"
         },
         "size-4": {
-          "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-          "line-height": "1.4"
-        },
-        "size-5": {
           "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
           "line-height": "1.5"
         },
-        "size-6": {
+        "size-5": {
           "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
           "line-height": "1.6"
         },
-        "size-7": {
+        "size-6": {
           "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
           "line-height": "1.6"
         }
@@ -533,26 +587,79 @@
       "compact": {
         "size-3": {
           "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
-          "line-height": "1.4"
+          "line-height": "1.3"
         },
         "size-4": {
-          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
-          "line-height": "1.4"
-        },
-        "size-5": {
           "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
           "line-height": "1.5"
         },
-        "size-6": {
+        "size-5": {
           "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
           "line-height": "1.6"
         },
-        "size-7": {
+        "size-6": {
           "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
           "line-height": "1.6"
         }
       }
     },
+    "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",
@@ -611,12 +718,12 @@
         }
       },
       "on-background-dark": {
-        "color": "#ffffff",
+        "color": "#FFFFFF",
         "hover": {
-          "color": "#ffffff"
+          "color": "#FFFFFF"
         },
         "visited": {
-          "color": "#ffffff"
+          "color": "#FFFFFF"
         }
       },
       "on-background-light": {
@@ -641,6 +748,17 @@
         "color": "#000000"
       }
     },
+    "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",
@@ -671,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)"
@@ -737,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)",
@@ -775,12 +893,91 @@
         "max-width": "132rem"
       }
     },
+    "search-field": {
+      "button": {
+        "background-color": "#004699",
+        "color": "#FFFFFF",
+        "outline-offset": "2px",
+        "hover": {
+          "background-color": "#102E62"
+        }
+      },
+      "input": {
+        "box-shadow": "inset 0 0 0 1px #000000",
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 400,
+        "outline-offset": "2px",
+        "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>\")",
+          "color": "#004699",
+          "height": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+          "width": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
+        },
+        "hover": {
+          "box-shadow": "inset 0 0 0 2px #000000"
+        },
+        "placeholder": {
+          "color": "#767676"
+        },
+        "compact": {
+          "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
+          "line-height": "1.6"
+        },
+        "spacious": {
+          "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+          "line-height": "1.6"
+        }
+      }
+    },
+    "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)",
+      "line-height": "1.6",
+      "outline-offset": "2px",
+      "compact": {
+        "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
+        "line-height": "1.6"
+      },
+      "hover": {
+        "background-color": "#102E62"
+      }
+    },
+    "spotlight": {
+      "blue": {
+        "background-color": "#009DE6"
+      },
+      "dark-blue": {
+        "background-color": "#004699"
+      },
+      "dark-green": {
+        "background-color": "#00A03C"
+      },
+      "green": {
+        "background-color": "#BED200"
+      },
+      "magenta": {
+        "background-color": "#E50082"
+      },
+      "orange": {
+        "background-color": "#FF9100"
+      },
+      "purple": {
+        "background-color": "#A00078"
+      },
+      "yellow": {
+        "background-color": "#FFE600"
+      }
+    },
     "switch": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "background-color": "#767676",
       "width": "3.5rem",
       "thumb": {
-        "background-color": "#ffffff",
+        "background-color": "#FFFFFF",
         "width": "1.75rem",
         "height": "1.75rem",
         "hover": {
@@ -792,7 +989,55 @@
       },
       "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": {
+      "box-shadow": "inset 0 0 0 1px #000000",
+      "color": "#000000",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
+      "outline-offset": "2px",
+      "disabled": {
+        "background-color": "#FFFFFF",
+        "box-shadow": "inset 0 0 0 1px #BEBEBE",
+        "color": "#BEBEBE"
+      },
+      "hover": {
+        "box-shadow": "inset 0 0 0 2px #000000"
+      },
+      "invalid": {
+        "box-shadow": "inset 0 0 0 1px #EC0000",
+        "hover": {
+          "box-shadow": "inset 0 0 0 2px #EC0000"
+        }
+      },
+      "placeholder": {
+        "color": "#767676"
+      },
+      "compact": {
+        "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
+        "line-height": "1.6"
+      },
+      "spacious": {
+        "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
+        "line-height": "1.6"
       }
     },
     "top-task-link": {
@@ -822,11 +1067,11 @@
         },
         "spacious": {
           "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
-          "line-height": "1.4"
+          "line-height": "1.5"
         },
         "compact": {
           "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
-          "line-height": "1.4"
+          "line-height": "1.5"
         }
       },
       "outline-offset": "2px"
@@ -887,7 +1132,7 @@
       "border-color": {},
       "border-radius": {},
       "border-width": {},
-      "color": "#ffffff",
+      "color": "#FFFFFF",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-size": {},
       "line-height": {},
@@ -903,8 +1148,8 @@
         "gap": {}
       },
       "disabled": {
-        "background-color": "#B4B4B4",
-        "color": "#ffffff",
+        "background-color": "#BEBEBE",
+        "color": "#FFFFFF",
         "border-color": {}
       },
       "hover": {
@@ -917,9 +1162,9 @@
         "background-color": "#004699",
         "border-color": {},
         "border-width": {},
-        "color": "#ffffff",
+        "color": "#FFFFFF",
         "disabled": {
-          "background-color": "#B4B4B4",
+          "background-color": "#BEBEBE",
           "color": {},
           "border-color": {}
         },
@@ -986,7 +1231,7 @@
         }
       },
       "secondary-action": {
-        "background-color": "#ffffff",
+        "background-color": "#FFFFFF",
         "color": "#004699",
         "border-color": {},
         "border-width": {},
@@ -996,8 +1241,8 @@
           "border-color": {}
         },
         "disabled": {
-          "background-color": "#ffffff",
-          "color": "#B4B4B4",
+          "background-color": "#FFFFFF",
+          "color": "#BEBEBE",
           "border-color": {}
         },
         "danger": {
@@ -1070,7 +1315,7 @@
         },
         "disabled": {
           "background-color": "transparent",
-          "color": "#B4B4B4"
+          "color": "#BEBEBE"
         },
         "danger": {
           "color": {},