From 2736cd4e774e3bfb724ae65fef203c820aedc5eb Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 09:34:03 +0100
Subject: [PATCH 01/10] Move border tokens to /brand, convert to rem, add xl

---
 proprietary/tokens/src/brand/ams/border.tokens.json  | 10 ++++++++++
 proprietary/tokens/src/common/ams/border.tokens.json |  9 ---------
 2 files changed, 10 insertions(+), 9 deletions(-)
 create mode 100644 proprietary/tokens/src/brand/ams/border.tokens.json
 delete mode 100644 proprietary/tokens/src/common/ams/border.tokens.json

diff --git a/proprietary/tokens/src/brand/ams/border.tokens.json b/proprietary/tokens/src/brand/ams/border.tokens.json
new file mode 100644
index 0000000000..4639b06765
--- /dev/null
+++ b/proprietary/tokens/src/brand/ams/border.tokens.json
@@ -0,0 +1,10 @@
+{
+  "ams": {
+    "border-width": {
+      "sm": { "value": "0.0625rem" },
+      "md": { "value": "0.125rem" },
+      "lg": { "value": "0.1875rem" },
+      "xl": { "value": "0.25rem" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/common/ams/border.tokens.json b/proprietary/tokens/src/common/ams/border.tokens.json
deleted file mode 100644
index 3c9f217831..0000000000
--- a/proprietary/tokens/src/common/ams/border.tokens.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "ams": {
-    "border-width": {
-      "sm": { "value": "1px" },
-      "md": { "value": "2px" },
-      "lg": { "value": "3px" }
-    }
-  }
-}

From a37b8973e1961fb05536d4c2513278f0f91663a3 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:31:14 +0100
Subject: [PATCH 02/10] Implement border width tokens

---
 .../css/src/components/button/button.scss     |  2 +-
 .../css/src/components/checkbox/checkbox.scss |  8 ++++----
 packages/css/src/components/radio/radio.scss  |  6 +++---
 .../common/ams/link-appearance.tokens.json    |  4 ++--
 .../src/components/ams/accordion.tokens.json  |  2 +-
 .../src/components/ams/alert.tokens.json      |  2 +-
 .../src/components/ams/button.tokens.json     | 19 +++++++++++--------
 .../src/components/ams/checkbox.tokens.json   |  8 ++++++--
 .../src/components/ams/radio.tokens.json      |  5 ++++-
 .../components/ams/search-field.tokens.json   |  2 +-
 .../src/components/ams/table.tokens.json      |  2 +-
 .../src/components/ams/tabs.tokens.json       |  2 +-
 .../src/components/ams/text-area.tokens.json  | 10 +++++-----
 .../src/components/ams/text-input.tokens.json | 10 +++++-----
 14 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index aa1ffe0de6..6573b5ebc6 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -28,7 +28,7 @@
 
 @mixin ams-button-forced-color-mode {
   @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+    border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none
   }
 }
 
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index 1a0078ee6c..c1325e81a3 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -25,7 +25,7 @@
     background-size: 1rem;
     border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 0.125rem;
+    border-width: var(--ams-checkbox-checkmark-border-width);
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -47,12 +47,12 @@
   &:hover {
     color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
     text-underline-offset: 0.375rem;
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-hover-border-color);
-      border-width: 0.1875rem;
+      border-width: var(--ams-checkbox-checkmark-hover-border-width);
     }
   }
 
@@ -96,7 +96,7 @@
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-disabled-border-color);
-      border-width: 0.125rem;
+      border-width: var(--ams-checkbox-checkmark-disabled-border-width);
     }
   }
 }
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
index 530369bbdf..b062428c55 100644
--- a/packages/css/src/components/radio/radio.scss
+++ b/packages/css/src/components/radio/radio.scss
@@ -26,7 +26,7 @@
     border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
-    border-width: 0.125rem;
+    border-width: var(--ams-radio-circle-border-width);
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -48,7 +48,7 @@
   &:hover {
     color: var(--ams-radio-hover-color);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
     text-underline-offset: 0.375rem;
 
     .ams-radio__circle::after {
@@ -81,7 +81,7 @@
 
     .ams-radio__circle::after {
       border-color: var(--ams-radio-circle-disabled-border-color);
-      border-width: 0.125rem;
+      border-width: var(--ams-radio-circle-disabled-border-width);
     }
   }
 }
diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
index fde698cf2b..7a5701af8e 100644
--- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json
+++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "link-appearance": {
       "color": { "value": "{ams.color.primary-blue}" },
-      "text-decoration-thickness": { "value": "0.125rem" },
+      "text-decoration-thickness": { "value": "{ams.border-width.md}" },
       "text-underline-offset": { "value": "0.375rem" },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
@@ -16,7 +16,7 @@
       "regular": {
         "text-decoration-line": { "value": "underline" },
         "hover": {
-          "text-decoration-thickness": { "value": "0.1875rem" },
+          "text-decoration-thickness": { "value": "{ams.border-width.lg}" },
           "text-underline-offset": { "value": "0.3125rem" }
         }
       },
diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
index ae1c1cc586..c36bc9f2be 100644
--- a/proprietary/tokens/src/components/ams/accordion.tokens.json
+++ b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -13,7 +13,7 @@
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
         },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey3}" }
         }
       },
       "panel": {
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index 12522fafa8..a6d9b1682c 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "alert": {
-      "border-width": { "value": "4px" },
+      "border-width": { "value": "{ams.border-width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "1rem" },
       "padding-block": { "value": "{ams.space.inside.md}" },
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index d7b6c227bb..1c6c6c6bea 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -12,41 +12,44 @@
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
+      "forced-color-mode": {
+        "border": { "value": "{ams.border-width.md} solid ButtonBorder" }
+      },
       "primary": {
         "background-color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "disabled": {
           "background-color": { "value": "{ams.color.neutral-grey2}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey2}" }
         },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.dark-blue}" }
         }
       },
       "secondary": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 3px {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.lg} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
           "background-color": { "value": "{ams.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey2}" },
           "color": { "value": "{ams.color.neutral-grey2}" }
         },
         "focus": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" }
         }
       },
       "tertiary": {
         "background-color": { "value": "transparent" },
         "color": { "value": "{ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json
index 5558eeece7..a0beb5ce3c 100644
--- a/proprietary/tokens/src/components/ams/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json
@@ -9,6 +9,7 @@
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "checkmark": {
         "border-color": { "value": "{ams.color.primary-blue}" },
+        "border-width": { "value": "{ams.border-width.md}" },
         "checked": {
           "background-color": { "value": "{ams.color.primary-blue}" },
           "background-image": {
@@ -20,6 +21,7 @@
         },
         "disabled": {
           "border-color": { "value": "{ams.color.neutral-grey3}" },
+          "border-width": { "value": "{ams.border-width.md}" },
           "checked": {
             "background-color": { "value": "{ams.color.neutral-grey3}" },
             "hover": {
@@ -34,7 +36,8 @@
           }
         },
         "hover": {
-          "border-color": { "value": "{ams.color.dark-blue}" }
+          "border-color": { "value": "{ams.color.dark-blue}" },
+          "border-width": { "value": "{ams.border-width.lg}" }
         },
         "invalid": {
           "border-color": { "value": "{ams.color.primary-red}" },
@@ -68,7 +71,8 @@
         "color": { "value": "{ams.color.neutral-grey3}" }
       },
       "hover": {
-        "color": { "value": "{ams.color.dark-blue}" }
+        "color": { "value": "{ams.color.dark-blue}" },
+        "text-decoration-thickness": { "value": "{ams.border-width.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
index 14b1a6d6aa..257005fa1c 100644
--- a/proprietary/tokens/src/components/ams/radio.tokens.json
+++ b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -9,6 +9,7 @@
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "circle": {
         "border-color": { "value": "{ams.color.primary-blue}" },
+        "border-width": { "value": "{ams.border-width.md}" },
         "checked": {
           "background-image": {
             "value": "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\")"
@@ -21,6 +22,7 @@
         },
         "disabled": {
           "border-color": { "value": "{ams.color.neutral-grey3}" },
+          "border-width": { "value": "{ams.border-width.md}" },
           "checked": {
             "background-image": {
               "value": "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\")"
@@ -56,7 +58,8 @@
         "color": { "value": "{ams.color.neutral-grey3}" }
       },
       "hover": {
-        "color": { "value": "{ams.color.dark-blue}" }
+        "color": { "value": "{ams.color.dark-blue}" },
+        "text-decoration-thickness": { "value": "{ams.border-width.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index ad8649870e..e2c9b33482 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -33,7 +33,7 @@
         },
         "hover": {
           "box-shadow": {
-            "value": "inset 0 0 0 2px {ams.color.primary-black}"
+            "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}"
           }
         },
         "placeholder": {
diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json
index 7274a40f6c..0c8dbde221 100644
--- a/proprietary/tokens/src/components/ams/table.tokens.json
+++ b/proprietary/tokens/src/components/ams/table.tokens.json
@@ -10,7 +10,7 @@
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
       "cell": {
-        "border-bottom": { "value": "1px solid {ams.color.neutral-grey1}" },
+        "border-bottom": { "value": "{ams.border-width.sm} solid {ams.color.neutral-grey1}" },
         "padding-block": { "value": "{ams.space.inside.md}" },
         "padding-inline": { "value": "{ams.space.inside.md}" }
       },
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index 9a7ff5b17d..8aee9a6768 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "tabs": {
       "list": {
-        "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" }
+        "border-bottom": { "value": "{ams.border-width.md} solid {ams.color.primary-blue}" }
       },
       "button": {
         "background-color": { "value": "transparent" },
diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json
index 9c3e20b5da..cb705e16be 100644
--- a/proprietary/tokens/src/components/ams/text-area.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-area.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "text-area": {
-      "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
@@ -15,17 +15,17 @@
       "padding-inline": { "value": "1rem" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.neutral-grey2}" },
         "color": { "value": "{ams.color.neutral-grey2}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}" }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-red}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-red}" }
         }
       },
       "placeholder": {
diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
index 566390b491..ef8f8f8cba 100644
--- a/proprietary/tokens/src/components/ams/text-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "text-input": {
-      "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
@@ -12,16 +12,16 @@
       "padding-inline": { "value": "{ams.space.inside.md}" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.neutral-grey2}" },
         "color": { "value": "{ams.color.neutral-grey2}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}" }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-red}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-red}" }
         }
       },
       "placeholder": {

From 18c5964c63b0fc21a06dc3ad0e612d9475e85586 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:34:55 +0100
Subject: [PATCH 03/10] Add missing token

---
 proprietary/tokens/src/components/ams/search-field.tokens.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index e2c9b33482..e7526c566f 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -13,7 +13,7 @@
       },
       "input": {
         "box-shadow": {
-          "value": "inset 0 0 0 1px {ams.color.primary-black}"
+          "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}"
         },
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },

From 955f6b2067f0304f6d242e78ccd8e6ab37af07b9 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:45:00 +0100
Subject: [PATCH 04/10] Fix differences between hidden border rules

---
 packages/css/src/components/button/button.scss             | 2 +-
 packages/css/src/components/checkbox/checkbox.scss         | 4 ++--
 packages/css/src/components/fieldset/fieldset.scss         | 2 +-
 packages/css/src/components/search-field/search-field.scss | 2 +-
 packages/css/src/components/text-area/text-area.scss       | 2 +-
 packages/css/src/components/text-input/text-input.scss     | 2 +-
 proprietary/tokens/src/components/ams/tabs.tokens.json     | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 6573b5ebc6..b9f18e3b7f 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -6,7 +6,7 @@
 @import "../../common/text-rendering";
 
 .ams-button {
-  border: none;
+  border: 0;
   cursor: var(--ams-button-cursor);
   display: inline-flex;
   font-family: var(--ams-button-font-family);
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index c1325e81a3..408eab9f65 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -64,7 +64,7 @@
   + .ams-checkbox__label .ams-checkbox__checkmark::after {
     background-color: var(--ams-checkbox-checkmark-checked-background-color);
     background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: none;
+    border: 0;
   }
 }
 
@@ -76,7 +76,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border: none;
+    border: 0;
   }
 }
 
diff --git a/packages/css/src/components/fieldset/fieldset.scss b/packages/css/src/components/fieldset/fieldset.scss
index a30423743f..5091408cc5 100644
--- a/packages/css/src/components/fieldset/fieldset.scss
+++ b/packages/css/src/components/fieldset/fieldset.scss
@@ -7,7 +7,7 @@
 @import "../../common/text-rendering";
 
 @mixin reset {
-  border: none;
+  border: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 9f27e15571..5e456e3a50 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -16,7 +16,7 @@
 }
 
 .ams-search-field__input {
-  border: none;
+  border: 0;
   box-shadow: var(--ams-search-field-input-box-shadow);
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss
index 88920aa405..492ba03295 100644
--- a/packages/css/src/components/text-area/text-area.scss
+++ b/packages/css/src/components/text-area/text-area.scss
@@ -11,7 +11,7 @@
 }
 
 .ams-text-area {
-  border: none;
+  border: 0;
   box-shadow: var(--ams-text-area-box-shadow);
   color: var(--ams-text-area-color);
   font-family: var(--ams-text-area-font-family);
diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
index f140cbd332..e50df12312 100644
--- a/packages/css/src/components/text-input/text-input.scss
+++ b/packages/css/src/components/text-input/text-input.scss
@@ -11,7 +11,7 @@
 }
 
 .ams-text-input {
-  border: none;
+  border: 0;
   box-shadow: var(--ams-text-input-box-shadow);
   color: var(--ams-text-input-color);
   font-family: var(--ams-text-input-font-family);
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index 8aee9a6768..ba67bacab4 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -6,7 +6,7 @@
       },
       "button": {
         "background-color": { "value": "transparent" },
-        "border": { "value": "none" },
+        "border": { "value": "0" },
         "color": { "value": "{ams.color.primary-blue}" },
         "cursor": { "value": "{ams.action.activate.cursor}" },
         "font-family": { "value": "{ams.text.font-family}" },

From 04a7db3cbff7d600905e1888988a6a15cbe81c7a Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 14:04:31 +0100
Subject: [PATCH 05/10] Add docs

---
 storybook/src/docs/borders.docs.mdx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 storybook/src/docs/borders.docs.mdx

diff --git a/storybook/src/docs/borders.docs.mdx b/storybook/src/docs/borders.docs.mdx
new file mode 100644
index 0000000000..97b48d8199
--- /dev/null
+++ b/storybook/src/docs/borders.docs.mdx
@@ -0,0 +1,20 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Design Guidelines/Borders" />
+
+# Borders
+
+## Widths
+
+We have 4 border widths:
+
+| Size        | px  | rem    | Token name          |
+| ----------- | --- | ------ | ------------------- |
+| Small       | 1   | 0.0625 | ams.border.width.sm |
+| Medium      | 2   | 0.125  | ams.border.width.md |
+| Large       | 3   | 0.1875 | ams.border.width.lg |
+| Extra-large | 4   | 0.25   | ams.border.width.xl |
+
+Use these widths when defining borders,
+`box-shadow`s that look like borders,
+`text-decoration-thickness`, et cetera.

From 67e0acc144a8034d4e481dadd555da60bcfa1089 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 14:05:54 +0100
Subject: [PATCH 06/10] Separate width from potential other border tokens

---
 proprietary/tokens/src/brand/ams/border.tokens.json | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/proprietary/tokens/src/brand/ams/border.tokens.json b/proprietary/tokens/src/brand/ams/border.tokens.json
index 4639b06765..1d5c69d448 100644
--- a/proprietary/tokens/src/brand/ams/border.tokens.json
+++ b/proprietary/tokens/src/brand/ams/border.tokens.json
@@ -1,10 +1,12 @@
 {
   "ams": {
-    "border-width": {
-      "sm": { "value": "0.0625rem" },
-      "md": { "value": "0.125rem" },
-      "lg": { "value": "0.1875rem" },
-      "xl": { "value": "0.25rem" }
+    "border": {
+      "width": {
+        "sm": { "value": "0.0625rem" },
+        "md": { "value": "0.125rem" },
+        "lg": { "value": "0.1875rem" },
+        "xl": { "value": "0.25rem" }
+      }
     }
   }
 }

From c1ddca5c0ccee7b76eec901702cc7c36e361f8a5 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 27 Mar 2024 14:16:29 +0100
Subject: [PATCH 07/10] Fix token reference

---
 .../src/common/ams/link-appearance.tokens.json |  4 ++--
 .../src/components/ams/accordion.tokens.json   |  2 +-
 .../src/components/ams/alert.tokens.json       |  2 +-
 .../src/components/ams/button.tokens.json      | 18 +++++++++---------
 .../src/components/ams/checkbox.tokens.json    |  8 ++++----
 .../src/components/ams/radio.tokens.json       |  6 +++---
 .../components/ams/search-field.tokens.json    |  4 ++--
 .../src/components/ams/table.tokens.json       |  2 +-
 .../tokens/src/components/ams/tabs.tokens.json |  2 +-
 .../src/components/ams/text-area.tokens.json   | 10 +++++-----
 .../src/components/ams/text-input.tokens.json  | 10 +++++-----
 11 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
index 7a5701af8e..f24002709d 100644
--- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json
+++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "link-appearance": {
       "color": { "value": "{ams.color.primary-blue}" },
-      "text-decoration-thickness": { "value": "{ams.border-width.md}" },
+      "text-decoration-thickness": { "value": "{ams.border.width.md}" },
       "text-underline-offset": { "value": "0.375rem" },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
@@ -16,7 +16,7 @@
       "regular": {
         "text-decoration-line": { "value": "underline" },
         "hover": {
-          "text-decoration-thickness": { "value": "{ams.border-width.lg}" },
+          "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
           "text-underline-offset": { "value": "0.3125rem" }
         }
       },
diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
index c36bc9f2be..e97bf5ab0a 100644
--- a/proprietary/tokens/src/components/ams/accordion.tokens.json
+++ b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -13,7 +13,7 @@
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
         },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey3}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }
         }
       },
       "panel": {
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index a6d9b1682c..9ba890705c 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "alert": {
-      "border-width": { "value": "{ams.border-width.xl}" },
+      "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "1rem" },
       "padding-block": { "value": "{ams.space.inside.md}" },
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index 1c6c6c6bea..5465d2a2ec 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -13,43 +13,43 @@
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
       "forced-color-mode": {
-        "border": { "value": "{ams.border-width.md} solid ButtonBorder" }
+        "border": { "value": "{ams.border.width.md} solid ButtonBorder" }
       },
       "primary": {
         "background-color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "disabled": {
           "background-color": { "value": "{ams.color.neutral-grey2}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey2}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" }
         },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.dark-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }
         }
       },
       "secondary": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "color": { "value": "{ams.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.lg} {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
           "background-color": { "value": "{ams.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
           "color": { "value": "{ams.color.neutral-grey2}" }
         },
         "focus": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-blue}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }
         }
       },
       "tertiary": {
         "background-color": { "value": "transparent" },
         "color": { "value": "{ams.color.primary-blue}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json
index a0beb5ce3c..260bc1fc1d 100644
--- a/proprietary/tokens/src/components/ams/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json
@@ -9,7 +9,7 @@
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "checkmark": {
         "border-color": { "value": "{ams.color.primary-blue}" },
-        "border-width": { "value": "{ams.border-width.md}" },
+        "border-width": { "value": "{ams.border.width.md}" },
         "checked": {
           "background-color": { "value": "{ams.color.primary-blue}" },
           "background-image": {
@@ -21,7 +21,7 @@
         },
         "disabled": {
           "border-color": { "value": "{ams.color.neutral-grey3}" },
-          "border-width": { "value": "{ams.border-width.md}" },
+          "border-width": { "value": "{ams.border.width.md}" },
           "checked": {
             "background-color": { "value": "{ams.color.neutral-grey3}" },
             "hover": {
@@ -37,7 +37,7 @@
         },
         "hover": {
           "border-color": { "value": "{ams.color.dark-blue}" },
-          "border-width": { "value": "{ams.border-width.lg}" }
+          "border-width": { "value": "{ams.border.width.lg}" }
         },
         "invalid": {
           "border-color": { "value": "{ams.color.primary-red}" },
@@ -72,7 +72,7 @@
       },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" },
-        "text-decoration-thickness": { "value": "{ams.border-width.md}" }
+        "text-decoration-thickness": { "value": "{ams.border.width.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
index 257005fa1c..d65f0ed386 100644
--- a/proprietary/tokens/src/components/ams/radio.tokens.json
+++ b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -9,7 +9,7 @@
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "circle": {
         "border-color": { "value": "{ams.color.primary-blue}" },
-        "border-width": { "value": "{ams.border-width.md}" },
+        "border-width": { "value": "{ams.border.width.md}" },
         "checked": {
           "background-image": {
             "value": "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\")"
@@ -22,7 +22,7 @@
         },
         "disabled": {
           "border-color": { "value": "{ams.color.neutral-grey3}" },
-          "border-width": { "value": "{ams.border-width.md}" },
+          "border-width": { "value": "{ams.border.width.md}" },
           "checked": {
             "background-image": {
               "value": "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\")"
@@ -59,7 +59,7 @@
       },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" },
-        "text-decoration-thickness": { "value": "{ams.border-width.md}" }
+        "text-decoration-thickness": { "value": "{ams.border.width.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index e7526c566f..9c4b0a7499 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -13,7 +13,7 @@
       },
       "input": {
         "box-shadow": {
-          "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}"
+          "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}"
         },
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },
@@ -33,7 +33,7 @@
         },
         "hover": {
           "box-shadow": {
-            "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}"
+            "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}"
           }
         },
         "placeholder": {
diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json
index 0c8dbde221..21457161a5 100644
--- a/proprietary/tokens/src/components/ams/table.tokens.json
+++ b/proprietary/tokens/src/components/ams/table.tokens.json
@@ -10,7 +10,7 @@
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
       "cell": {
-        "border-bottom": { "value": "{ams.border-width.sm} solid {ams.color.neutral-grey1}" },
+        "border-bottom": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" },
         "padding-block": { "value": "{ams.space.inside.md}" },
         "padding-inline": { "value": "{ams.space.inside.md}" }
       },
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index ba67bacab4..51b4525661 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "tabs": {
       "list": {
-        "border-bottom": { "value": "{ams.border-width.md} solid {ams.color.primary-blue}" }
+        "border-bottom": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" }
       },
       "button": {
         "background-color": { "value": "transparent" },
diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json
index cb705e16be..77c0160667 100644
--- a/proprietary/tokens/src/components/ams/text-area.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-area.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "text-area": {
-      "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
@@ -15,17 +15,17 @@
       "padding-inline": { "value": "1rem" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.neutral-grey2}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
         "color": { "value": "{ams.color.neutral-grey2}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-red}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-red}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
         }
       },
       "placeholder": {
diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
index ef8f8f8cba..03be76885b 100644
--- a/proprietary/tokens/src/components/ams/text-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "text-input": {
-      "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-black}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
@@ -12,16 +12,16 @@
       "padding-inline": { "value": "{ams.space.inside.md}" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.neutral-grey2}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
         "color": { "value": "{ams.color.neutral-grey2}" }
       },
       "hover": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-black}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }
       },
       "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border-width.sm} {ams.color.primary-red}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
         "hover": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border-width.md} {ams.color.primary-red}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
         }
       },
       "placeholder": {

From 4d605837a549c07da9cbd66eb5f1b157f3c43648 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Fri, 29 Mar 2024 10:11:24 +0100
Subject: [PATCH 08/10] Update storybook/src/docs/borders.docs.mdx

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 storybook/src/docs/borders.docs.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/storybook/src/docs/borders.docs.mdx b/storybook/src/docs/borders.docs.mdx
index 97b48d8199..f92aa7d15b 100644
--- a/storybook/src/docs/borders.docs.mdx
+++ b/storybook/src/docs/borders.docs.mdx
@@ -8,12 +8,12 @@ import { Meta } from "@storybook/blocks";
 
 We have 4 border widths:
 
-| Size        | px  | rem    | Token name          |
-| ----------- | --- | ------ | ------------------- |
-| Small       | 1   | 0.0625 | ams.border.width.sm |
-| Medium      | 2   | 0.125  | ams.border.width.md |
-| Large       | 3   | 0.1875 | ams.border.width.lg |
-| Extra-large | 4   | 0.25   | ams.border.width.xl |
+| Size            | px  |  rem   | Token name            |
+| :-------------- | :-: | :----: | :-------------------- |
+| **Small**       |  1  | 0.0625 | `ams.border.width.sm` |
+| **Medium**      |  2  | 0.125  | `ams.border.width.md` |
+| **Large**       |  3  | 0.1875 | `ams.border.width.lg` |
+| **Extra large** |  4  |  0.25  | `ams.border.width.xl` |
 
 Use these widths when defining borders,
 `box-shadow`s that look like borders,

From 5324d459fceadf924a242c9059308169e58af337 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 29 Mar 2024 10:45:40 +0100
Subject: [PATCH 09/10] Don't explicitly set button border color in forced
 colors mode

---
 proprietary/tokens/src/components/ams/button.tokens.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index 5465d2a2ec..8a86ccfcd0 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -13,7 +13,7 @@
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
       "forced-color-mode": {
-        "border": { "value": "{ams.border.width.md} solid ButtonBorder" }
+        "border": { "value": "{ams.border.width.md} solid" }
       },
       "primary": {
         "background-color": { "value": "{ams.color.primary-blue}" },

From 883eebf3753a85fd35ff3e64137d3391d1f94779 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 29 Mar 2024 10:52:56 +0100
Subject: [PATCH 10/10] Move button resets to reset mixins

---
 .../css/src/components/accordion/accordion.scss     |  6 +++++-
 packages/css/src/components/button/button.scss      |  6 +++++-
 .../src/components/search-field/search-field.scss   | 13 +++++++++----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
index 426ad09eef..0cfeb8e257 100644
--- a/packages/css/src/components/accordion/accordion.scss
+++ b/packages/css/src/components/accordion/accordion.scss
@@ -11,9 +11,12 @@
   margin-inline: 0;
 }
 
-.ams-accordion__button {
+@mixin reset-button {
   background-color: transparent;
   border: 0;
+}
+
+.ams-accordion__button {
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
@@ -44,6 +47,7 @@
   }
 
   @include text-rendering;
+  @include reset-button;
 }
 
 .ams-accordion__button[aria-expanded="true"] svg {
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index b9f18e3b7f..ce4b275def 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -5,8 +5,11 @@
 
 @import "../../common/text-rendering";
 
-.ams-button {
+@mixin reset-button {
   border: 0;
+}
+
+.ams-button {
   cursor: var(--ams-button-cursor);
   display: inline-flex;
   font-family: var(--ams-button-font-family);
@@ -24,6 +27,7 @@
   }
 
   @include text-rendering;
+  @include reset-button;
 }
 
 @mixin ams-button-forced-color-mode {
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 5e456e3a50..00d7c77f01 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -10,13 +10,13 @@
   isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
 }
 
-@mixin reset {
+@mixin reset-input {
+  border: 0;
   box-sizing: border-box;
   margin-block: 0;
 }
 
 .ams-search-field__input {
-  border: 0;
   box-shadow: var(--ams-search-field-input-box-shadow);
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
@@ -30,7 +30,7 @@
   width: 100%;
 
   @include text-rendering;
-  @include reset;
+  @include reset-input;
 
   &:hover {
     box-shadow: var(--ams-search-field-input-hover-box-shadow);
@@ -54,9 +54,12 @@
   width: var(--ams-search-field-input-cancel-button-width);
 }
 
+@mixin reset-button {
+  border: 0;
+}
+
 .ams-search-field__button {
   background-color: var(--ams-search-field-button-background-color);
-  border: 0;
   color: var(--ams-search-field-button-color);
   cursor: pointer;
   outline-offset: var(--ams-search-field-button-outline-offset);
@@ -66,6 +69,8 @@
   padding-inline: var(--ams-search-field-button-padding-inline);
   touch-action: manipulation;
 
+  @include reset-button;
+
   &:hover {
     background-color: var(--ams-search-field-button-hover-background-color);
   }