feat: focus styles for form-input/select/textarea/textbox

nl-design-system · Sep 25, 2021 · a9a0528 · a9a0528
1 parent 51cbaf8
commit a9a0528
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 0 deletions.
diff --git a/components/form-input/modifier.tokens.json b/components/form-input/modifier.tokens.json
@@ -21,6 +21,26 @@
           }
         }
       },
+      "focus": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-width": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
       "invalid": {
         "background-color": {
           "css": {

diff --git a/components/select/bem.scss b/components/select/bem.scss
@@ -59,6 +59,27 @@
 
 .utrecht-select--focus {
   @include utrecht-focus();
+  background-color: var(
+    --utrecht-select-focus-background-color,
+    var(
+      --utrecht-form-input-focus-background-color,
+      var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))
+    )
+  );
+  border-color: var(
+    --utrecht-select-focus-border-color,
+    var(
+      --utrecht-form-input-focus-border-color,
+      var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))
+    )
+  );
+  border-width: var(
+    --utrecht-select-focus-border-width,
+    var(
+      --utrecht-form-input-focus-border-width,
+      var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))
+    )
+  );
 }
 
 .utrecht-select--invalid {

diff --git a/components/select/modifier.tokens.json b/components/select/modifier.tokens.json
@@ -21,6 +21,26 @@
           }
         }
       },
+      "focus": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-width": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
       "invalid": {
         "background-color": {
           "css": {

diff --git a/components/textarea/bem.scss b/components/textarea/bem.scss
@@ -74,6 +74,24 @@
 
 .utrecht-textarea--focus {
   @include utrecht-focus;
+  background-color: var(
+    --utrecht-textarea-focus-background-color,
+    var(
+      --utrecht-form-input-focus-background-color,
+      var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))
+    )
+  );
+  border-color: var(
+    --utrecht-textarea-focus-border-color,
+    var(
+      --utrecht-form-input-focus-border-color,
+      var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))
+    )
+  );
+  color: var(
+    --utrecht-textarea-focus-color,
+    var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color)))
+  );
 }
 
 .utrecht-textarea--read-only {

diff --git a/components/textarea/modifier.tokens.json b/components/textarea/modifier.tokens.json
@@ -21,6 +21,26 @@
           }
         }
       },
+      "focus": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-width": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
       "invalid": {
         "background-color": {
           "css": {

diff --git a/components/textbox/bem.scss b/components/textbox/bem.scss
@@ -75,6 +75,25 @@
 
 .utrecht-textbox--focus {
   @include utrecht-focus;
+
+  background-color: var(
+    --utrecht-textbox-focus-background-color,
+    var(
+      --utrecht-form-input-focus-background-color,
+      var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))
+    )
+  );
+  border-color: var(
+    --utrecht-textbox-focus-border-color,
+    var(
+      --utrecht-form-input-focus-border-color,
+      var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))
+    )
+  );
+  color: var(
+    --utrecht-textbox-focus-color,
+    var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color)))
+  );
 }
 
 .utrecht-textbox--read-only {

diff --git a/components/textbox/modifier.tokens.json b/components/textbox/modifier.tokens.json
@@ -21,6 +21,26 @@
           }
         }
       },
+      "focus": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-width": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
       "invalid": {
         "background-color": {
           "css": {