From 8473b68e60b13c6fd8ace344d7f5d6e5a58360f5 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Thu, 21 Apr 2022 13:09:32 +0200
Subject: [PATCH] feat(button): border-color design token

Turns out we had the border-width token, but no way to configure the color of the border.
---
 components/button/bem.scss    | 5 +++++
 components/button/tokens.json | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/components/button/bem.scss b/components/button/bem.scss
index c8f0cd073b2..995b33bc78b 100644
--- a/components/button/bem.scss
+++ b/components/button/bem.scss
@@ -7,6 +7,7 @@
 
 .utrecht-button {
   background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-border-color, transparent);
   border-radius: var(--utrecht-button-border-radius);
   border-style: solid;
   border-width: var(--utrecht-button-border-width, 0);
@@ -45,6 +46,7 @@
 .utrecht-button:disabled,
 .utrecht-button--disabled {
   background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
   cursor: var(--utrecht-action-disabled-cursor);
 }
@@ -52,6 +54,7 @@
 .utrecht-button:active:not(:disabled):not([aria-disabled="true"]):not(.utrecht-button--disabled),
 .utrecht-button--active {
   background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
@@ -62,6 +65,7 @@
 
 .utrecht-button--focus {
   background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
 }
 
@@ -92,6 +96,7 @@
 .utrecht-button--hover:not(:disabled),
 .utrecht-button:hover:not(:disabled):not([aria-disabled="true"]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
   transform: scale(var(--utrecht-button-focus-transform-scale, 1));
 }
diff --git a/components/button/tokens.json b/components/button/tokens.json
index a9a4d651bd0..db34484f23b 100644
--- a/components/button/tokens.json
+++ b/components/button/tokens.json
@@ -7,6 +7,12 @@
           "inherits": true
         }
       },
+      "border-color": {
+        "css": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "border-width": {
         "css": {
           "syntax": "<length>",