Add focus box-shadow to multiple components (#177)

* Add focus box shadow to multiple components * Bump version * Update version
cds-snc · Oct 26, 2023 · 479ca70 · 479ca70
1 parent 9130ec3
commit 479ca70
Show file tree

Hide file tree

Showing 29 changed files with 169 additions and 25 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -1409,6 +1409,10 @@
             "value": "#0535d2",
             "type": "color"
           },
+          "box-shadow": {
+            "value": "0 0 0 0.125rem #FFF",
+            "type": "color"
+          },
           "outline": {
             "width": {
               "value": "0.1875rem",
@@ -1646,6 +1650,14 @@
         }
       },
       "focus": {
+        "background": {
+          "value": "#FFF",
+          "type": "color"
+        },
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#0535d2",
           "type": "color"
@@ -3029,6 +3041,10 @@
         }
       },
       "focus": {
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#0535d2",
           "type": "color"
@@ -3541,6 +3557,10 @@
           "value": "#0535d2",
           "type": "color"
         },
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#FFF",
           "type": "color"
@@ -3725,6 +3745,14 @@
         }
       },
       "focus": {
+        "background": {
+          "value": "#FFF",
+          "type": "color"
+        },
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#0535d2",
           "type": "color"
@@ -3892,6 +3920,10 @@
         }
       },
       "focus": {
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#0535d2",
           "type": "color"
@@ -4037,6 +4069,10 @@
         }
       },
       "focus": {
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
         "text": {
           "value": "#0535d2",
           "type": "color"

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -276,6 +276,7 @@
   --gcds-button-shared-active-background: #000000;
   --gcds-button-shared-active-text: #ffffff;
   --gcds-button-shared-focus-background: #0535d2;
+  --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.1875rem;
   --gcds-button-shared-focus-text: #ffffff;
   --gcds-button-shared-disabled-background: #d6d9dd;
@@ -320,6 +321,8 @@
   --gcds-checkbox-disabled-border: #545961;
   --gcds-checkbox-disabled-text: #545961;
   --gcds-checkbox-error-padding: 0 0 0 3.75rem;
+  --gcds-checkbox-focus-background: #ffffff;
+  --gcds-checkbox-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-checkbox-focus-text: #0535d2;
   --gcds-checkbox-focus-outline-width: 0.1875rem;
   --gcds-checkbox-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -576,6 +579,7 @@
   --gcds-input-default-text: #333333;
   --gcds-input-disabled-background: #d6d9dd;
   --gcds-input-disabled-text: #545961;
+  --gcds-input-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-input-focus-text: #0535d2;
   --gcds-input-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-input-margin: 0 0 1.5rem;
@@ -670,6 +674,7 @@
   --gcds-pagination-hover-background: #d7e5f5;
   --gcds-pagination-hover-text: #0535d2;
   --gcds-pagination-focus-background: #0535d2;
+  --gcds-pagination-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-pagination-focus-text: #ffffff;
   --gcds-pagination-focus-outline-width: 0.1875rem;
   --gcds-pagination-font: 500 1.25rem/120% "Noto Sans", sans-serif;
@@ -701,6 +706,8 @@
   --gcds-radio-disabled-background: #d6d9dd;
   --gcds-radio-disabled-border: #545961;
   --gcds-radio-disabled-text: #545961;
+  --gcds-radio-focus-background: #ffffff;
+  --gcds-radio-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-radio-focus-text: #0535d2;
   --gcds-radio-focus-outline-width: 0.1875rem;
   --gcds-radio-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -730,6 +737,7 @@
   --gcds-select-default-text: #333333;
   --gcds-select-disabled-background: #d6d9dd;
   --gcds-select-disabled-text: #545961;
+  --gcds-select-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-select-focus-text: #0535d2;
   --gcds-select-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-select-margin: 0 0 1.5rem;
@@ -755,6 +763,7 @@
   --gcds-textarea-default-text: #333333;
   --gcds-textarea-disabled-background: #d6d9dd;
   --gcds-textarea-disabled-text: #545961;
+  --gcds-textarea-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-textarea-focus-text: #0535d2;
   --gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-textarea-margin: 0 0 1.5rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -138,6 +138,7 @@
   --gcds-button-shared-active-background: #000000;
   --gcds-button-shared-active-text: #ffffff;
   --gcds-button-shared-focus-background: #0535d2;
+  --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.1875rem;
   --gcds-button-shared-focus-text: #ffffff;
   --gcds-button-shared-disabled-background: #d6d9dd;
@@ -182,6 +183,8 @@
   --gcds-checkbox-disabled-border: #545961;
   --gcds-checkbox-disabled-text: #545961;
   --gcds-checkbox-error-padding: 0 0 0 3.75rem;
+  --gcds-checkbox-focus-background: #ffffff;
+  --gcds-checkbox-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-checkbox-focus-text: #0535d2;
   --gcds-checkbox-focus-outline-width: 0.1875rem;
   --gcds-checkbox-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -438,6 +441,7 @@
   --gcds-input-default-text: #333333;
   --gcds-input-disabled-background: #d6d9dd;
   --gcds-input-disabled-text: #545961;
+  --gcds-input-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-input-focus-text: #0535d2;
   --gcds-input-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-input-margin: 0 0 1.5rem;
@@ -532,6 +536,7 @@
   --gcds-pagination-hover-background: #d7e5f5;
   --gcds-pagination-hover-text: #0535d2;
   --gcds-pagination-focus-background: #0535d2;
+  --gcds-pagination-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-pagination-focus-text: #ffffff;
   --gcds-pagination-focus-outline-width: 0.1875rem;
   --gcds-pagination-font: 500 1.25rem/120% "Noto Sans", sans-serif;
@@ -563,6 +568,8 @@
   --gcds-radio-disabled-background: #d6d9dd;
   --gcds-radio-disabled-border: #545961;
   --gcds-radio-disabled-text: #545961;
+  --gcds-radio-focus-background: #ffffff;
+  --gcds-radio-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-radio-focus-text: #0535d2;
   --gcds-radio-focus-outline-width: 0.1875rem;
   --gcds-radio-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -592,6 +599,7 @@
   --gcds-select-default-text: #333333;
   --gcds-select-disabled-background: #d6d9dd;
   --gcds-select-disabled-text: #545961;
+  --gcds-select-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-select-focus-text: #0535d2;
   --gcds-select-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-select-margin: 0 0 1.5rem;
@@ -617,6 +625,7 @@
   --gcds-textarea-default-text: #333333;
   --gcds-textarea-disabled-background: #d6d9dd;
   --gcds-textarea-disabled-text: #545961;
+  --gcds-textarea-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-textarea-focus-text: #0535d2;
   --gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-textarea-margin: 0 0 1.5rem;

diff --git a/build/web/css/components/button.css b/build/web/css/components/button.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 22 Jun 2023 14:47:37 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:11 GMT
  */
 
 :root {
@@ -28,6 +28,7 @@
   --gcds-button-shared-active-background: #000000;
   --gcds-button-shared-active-text: #ffffff;
   --gcds-button-shared-focus-background: #0535d2;
+  --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.1875rem;
   --gcds-button-shared-focus-text: #ffffff;
   --gcds-button-shared-disabled-background: #d6d9dd;

diff --git a/build/web/css/components/checkbox.css b/build/web/css/components/checkbox.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Jul 2023 17:58:42 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:11 GMT
  */
 
 :root {
@@ -15,6 +15,8 @@
   --gcds-checkbox-disabled-border: #545961;
   --gcds-checkbox-disabled-text: #545961;
   --gcds-checkbox-error-padding: 0 0 0 3.75rem;
+  --gcds-checkbox-focus-background: #ffffff;
+  --gcds-checkbox-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-checkbox-focus-text: #0535d2;
   --gcds-checkbox-focus-outline-width: 0.1875rem;
   --gcds-checkbox-font: 400 1.25rem/120% "Noto Sans", sans-serif;

diff --git a/build/web/css/components/input.css b/build/web/css/components/input.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Jul 2023 17:58:42 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:12 GMT
  */
 
 :root {
@@ -11,6 +11,7 @@
   --gcds-input-default-text: #333333;
   --gcds-input-disabled-background: #d6d9dd;
   --gcds-input-disabled-text: #545961;
+  --gcds-input-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-input-focus-text: #0535d2;
   --gcds-input-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-input-margin: 0 0 1.5rem;

diff --git a/build/web/css/components/pagination.css b/build/web/css/components/pagination.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 12:29:55 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:12 GMT
  */
 
 :root {
@@ -12,6 +12,7 @@
   --gcds-pagination-hover-background: #d7e5f5;
   --gcds-pagination-hover-text: #0535d2;
   --gcds-pagination-focus-background: #0535d2;
+  --gcds-pagination-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-pagination-focus-text: #ffffff;
   --gcds-pagination-focus-outline-width: 0.1875rem;
   --gcds-pagination-font: 500 1.25rem/120% "Noto Sans", sans-serif;

diff --git a/build/web/css/components/radio.css b/build/web/css/components/radio.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Jul 2023 17:58:42 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:12 GMT
  */
 
 :root {
@@ -14,6 +14,8 @@
   --gcds-radio-disabled-background: #d6d9dd;
   --gcds-radio-disabled-border: #545961;
   --gcds-radio-disabled-text: #545961;
+  --gcds-radio-focus-background: #ffffff;
+  --gcds-radio-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-radio-focus-text: #0535d2;
   --gcds-radio-focus-outline-width: 0.1875rem;
   --gcds-radio-font: 400 1.25rem/120% "Noto Sans", sans-serif;

diff --git a/build/web/css/components/select.css b/build/web/css/components/select.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Jul 2023 17:58:42 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:12 GMT
  */
 
 :root {
@@ -12,6 +12,7 @@
   --gcds-select-default-text: #333333;
   --gcds-select-disabled-background: #d6d9dd;
   --gcds-select-disabled-text: #545961;
+  --gcds-select-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-select-focus-text: #0535d2;
   --gcds-select-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-select-margin: 0 0 1.5rem;

diff --git a/build/web/css/components/textarea.css b/build/web/css/components/textarea.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Jul 2023 17:58:42 GMT
+ * Generated on Wed, 25 Oct 2023 14:27:12 GMT
  */
 
 :root {
@@ -11,6 +11,7 @@
   --gcds-textarea-default-text: #333333;
   --gcds-textarea-disabled-background: #d6d9dd;
   --gcds-textarea-disabled-text: #545961;
+  --gcds-textarea-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-textarea-focus-text: #0535d2;
   --gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-textarea-margin: 0 0 1.5rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -276,6 +276,7 @@
   --gcds-button-shared-active-background: #000000;
   --gcds-button-shared-active-text: #ffffff;
   --gcds-button-shared-focus-background: #0535d2;
+  --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.1875rem;
   --gcds-button-shared-focus-text: #ffffff;
   --gcds-button-shared-disabled-background: #d6d9dd;
@@ -320,6 +321,8 @@
   --gcds-checkbox-disabled-border: #545961;
   --gcds-checkbox-disabled-text: #545961;
   --gcds-checkbox-error-padding: 0 0 0 3.75rem;
+  --gcds-checkbox-focus-background: #ffffff;
+  --gcds-checkbox-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-checkbox-focus-text: #0535d2;
   --gcds-checkbox-focus-outline-width: 0.1875rem;
   --gcds-checkbox-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -576,6 +579,7 @@
   --gcds-input-default-text: #333333;
   --gcds-input-disabled-background: #d6d9dd;
   --gcds-input-disabled-text: #545961;
+  --gcds-input-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-input-focus-text: #0535d2;
   --gcds-input-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-input-margin: 0 0 1.5rem;
@@ -670,6 +674,7 @@
   --gcds-pagination-hover-background: #d7e5f5;
   --gcds-pagination-hover-text: #0535d2;
   --gcds-pagination-focus-background: #0535d2;
+  --gcds-pagination-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-pagination-focus-text: #ffffff;
   --gcds-pagination-focus-outline-width: 0.1875rem;
   --gcds-pagination-font: 500 1.25rem/120% "Noto Sans", sans-serif;
@@ -701,6 +706,8 @@
   --gcds-radio-disabled-background: #d6d9dd;
   --gcds-radio-disabled-border: #545961;
   --gcds-radio-disabled-text: #545961;
+  --gcds-radio-focus-background: #ffffff;
+  --gcds-radio-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-radio-focus-text: #0535d2;
   --gcds-radio-focus-outline-width: 0.1875rem;
   --gcds-radio-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -730,6 +737,7 @@
   --gcds-select-default-text: #333333;
   --gcds-select-disabled-background: #d6d9dd;
   --gcds-select-disabled-text: #545961;
+  --gcds-select-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-select-focus-text: #0535d2;
   --gcds-select-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-select-margin: 0 0 1.5rem;
@@ -755,6 +763,7 @@
   --gcds-textarea-default-text: #333333;
   --gcds-textarea-disabled-background: #d6d9dd;
   --gcds-textarea-disabled-text: #545961;
+  --gcds-textarea-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-textarea-focus-text: #0535d2;
   --gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-textarea-margin: 0 0 1.5rem;