Merge pull request #37 from open-formulieren/fix/more-button-tokens

[OF#462] Update our button colours for the borders
open-formulieren · Oct 30, 2023 · 3afee1c · 3afee1c
2 parents 53b97e9 + 6405ae1
commit 3afee1c
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/src/community/utrecht/button.tokens.json b/src/community/utrecht/button.tokens.json
@@ -21,24 +21,24 @@
 
       "hover": {
         "background-color": {"value": "{of.button.hover.bg}"},
-        "border-color": {"value": "rgba(0,0,0,0)"},
+        "border-color": {"value": "#5e5e5e"},
         "color": {"value": "{of.button.fg}"}
       },
 
       "active": {
         "background-color": {"value": "{of.button.active.bg}"},
-        "border-color": {"value": "rgba(0,0,0,0)"},
+        "border-color": {"value": "{of.color.border}"},
         "color": {"value": "{of.button.active.fg}"}
       },
 
       "primary-action": {
         "background-color": {"value": "{of.button.primary.bg}"},
-        "border-color": {"value": "rgba(0,0,0,0)"},
+        "border-color": {"value": "{of.color.primary}"},
         "color": {"value": "{of.button.primary.fg}"},
 
         "hover": {
           "background-color": {"value": "{of.button.primary.hover.bg}"},
-          "border-color": {"value": "rgba(0,0,0,0)"},
+          "border-color": {"value": "#01537c"},
           "color": {"value": "{of.button.primary.fg}"}
         },
 
@@ -54,12 +54,12 @@
 
         "danger": {
           "background-color": {"value": "{of.button.danger.bg}"},
-          "border-color": {"value": "rgba(0,0,0,0)"},
+          "border-color": {"value": "#aa2218"},
           "color": {"value": "{of.button.danger.fg}"},
 
           "hover": {
             "background-color": {"value": "{of.button.danger.hover.bg}"},
-            "border-color": {"value": "rgba(0,0,0,0)"},
+            "border-color": {"value": "#881b13"},
             "color": {"value": "{of.button.danger.fg}"}
           },
 
@@ -85,10 +85,25 @@
       },
 
       "subtle": {
+        "border": {
+          "color": {
+            "value": "rgba(0,0,0,0)"
+          }
+        },
+        "hover": {
+          "background": {
+            "color": {
+              "value": "{of.color.bg}"
+            }
+          }
+        },
         "danger": {
+          "color": {
+            "value": "{of.color.danger}"
+          },
           "background": {
             "color": {
-              "value": "{of.color.danger}"
+              "value": "{of.color.bg}"
             }
           },
           "hover": {