💄 Tweak focus styles for consistent outlines

* Firefox applies the Ubuntu color theme (on Ubuntu), while on Arch/
  Fedora it has a blue outline. This does not have sufficient contrast
  with the blue from the button itself.
* Chromium-based browsers apply a black outline, so we settled on this
  color.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-formulieren/design-tokens",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "description": "Design tokens for Open Forms",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

src/community/utrecht/button.tokens.json

@@ -16,7 +16,7 @@
       "padding-inline-end": {"value": "12px"},
 
       "focus": {
-        "border-color": {"value": "{of.color.focus.border}"}
+        "border-color": {"value": "transparent"}
       },
 
       "hover": {
@@ -49,7 +49,7 @@
         },
 
         "focus": {
-          "border-color": {"value": "#000000"}
+          "border-color": {"value": "transparent"}
         },
 
         "danger": {
@@ -70,7 +70,7 @@
           },
 
           "focus": {
-            "border-color": {"value": "#000000"}
+            "border-color": {"value": "transparent"}
           }
         }
       },
@@ -79,17 +79,15 @@
         "border-color": {"value": "#5e5e5e"},
 
         "focus": {
-          "border-color": {"value": "{of.color.focus.border}"}
+          "border-color": {"value": "transparent"}
         },
 
         "danger": {
-          "background": {
-            "color": {
-              "value": "{of.color.danger}"
-            }
-          },
-          "color": {
-            "value": "#fce9e8"
+          "background-color": {"value": "{of.color.danger}"},
+          "color": {"value": "#fce9e8"},
+
+          "focus": {
+            "border-color": {"value": "transparent"}
           }
         }
       },

src/community/utrecht/focus.tokens.json

@@ -1,9 +1,10 @@
 {
   "utrecht": {
     "focus": {
-      "outline-width": {"value": "2px"},
-      "outline-color": {},
-      "outline-style": {"value": "solid"}
+      "outline-color": {"value": "#000"},
+      "outline-offset": {"value": "0"},
+      "outline-style": {"value": "solid"},
+      "outline-width": {"value": "2px"}
     }
   }
 }