refactor: remove focus colour from label, hint and legend (#678)

* refactor: remove focus colour from label, hint and legend * refactor: remove focus text colour from form fields * chore: update tokens package
cds-snc · Nov 19, 2024 · 544f1cb · 544f1cb
1 parent 6b41ba0
commit 544f1cb
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -45,7 +45,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^1.20.1",
+    "@cdssnc/gcds-tokens": "^1.20.2",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components/gcds-checkbox/gcds-checkbox.css b/packages/web/src/components/gcds-checkbox/gcds-checkbox.css
@@ -95,7 +95,7 @@
     color: var(--gcds-checkbox-disabled-text);
 
     gcds-label {
-      color: var(--gcds-checkbox-disabled-text);
+      --gcds-label-text: currentColor;
 
       &:before,
       &:after {
@@ -107,6 +107,10 @@
         background-color: var(--gcds-checkbox-disabled-background);
       }
     }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
   }
 }
 
@@ -124,7 +128,7 @@
 
 @layer focus {
   :host .gcds-checkbox:focus-within {
-    color: var(--gcds-checkbox-focus-text);
+    color: var(--gcds-checkbox-focus-color);
 
     input:focus + gcds-label:before {
       outline: var(--gcds-checkbox-focus-outline-width) solid currentcolor;

diff --git a/packages/web/src/components/gcds-fieldset/gcds-fieldset.css b/packages/web/src/components/gcds-fieldset/gcds-fieldset.css
@@ -1,4 +1,4 @@
-@layer reset, default, disabled, focus;
+@layer reset, default, disabled;
 
 @layer reset {
   :host {
@@ -49,11 +49,9 @@
 @layer disabled {
   :host .gcds-fieldset:disabled {
     color: var(--gcds-fieldset-disabled-text);
-  }
-}
 
-@layer focus {
-  :host .gcds-fieldset:focus-within {
-    color: var(--gcds-fieldset-focus-text);
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
   }
 }
diff --git a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.css b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.css
@@ -125,6 +125,14 @@
   :host .gcds-file-uploader-wrapper.gcds-disabled {
     color: var(--gcds-file-uploader-disabled-text);
 
+    gcds-label {
+      --gcds-label-text: currentColor;
+    }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
+
     :is(.file-uploader__input, .file-uploader__uploaded-file) {
       pointer-events: none;
     }
@@ -170,8 +178,6 @@
 
 @layer focus {
   :host .gcds-file-uploader-wrapper:focus-within {
-    color: var(--gcds-file-uploader-focus-text);
-
     .file-uploader__uploaded-file:focus-within {
       border-color: var(--gcds-file-uploader-file-focus-border-color);
     }

diff --git a/packages/web/src/components/gcds-hint/gcds-hint.css b/packages/web/src/components/gcds-hint/gcds-hint.css
@@ -14,7 +14,7 @@
   :host {
     .gcds-hint,
     gcds-text::part(text) {
-      color: inherit;
+      color: var(--gcds-hint-text);
     }
 
     .gcds-hint {

diff --git a/packages/web/src/components/gcds-input/gcds-input.css b/packages/web/src/components/gcds-input/gcds-input.css
@@ -61,6 +61,14 @@
   :host .gcds-input-wrapper.gcds-disabled {
     color: var(--gcds-input-disabled-text);
 
+    gcds-label {
+      --gcds-label-text: currentColor;
+    }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
+
     input:disabled {
       cursor: not-allowed;
       background-color: var(--gcds-input-disabled-background);
@@ -76,15 +84,11 @@
 }
 
 @layer focus {
-  :host .gcds-input-wrapper:focus-within {
-    color: var(--gcds-input-focus-text);
-
-    input:focus {
-      border-color: var(--gcds-input-focus-text);
-      outline: var(--gcds-input-outline-width) solid
-        var(--gcds-input-focus-text);
-      outline-offset: var(--gcds-input-border-width);
-      box-shadow: var(--gcds-input-focus-box-shadow);
-    }
+  :host .gcds-input-wrapper:focus-within input:focus {
+    border-color: var(--gcds-input-focus-border);
+    outline: var(--gcds-input-outline-width) solid
+      var(--gcds-input-focus-border);
+    outline-offset: var(--gcds-input-border-width);
+    box-shadow: var(--gcds-input-focus-box-shadow);
   }
 }
diff --git a/packages/web/src/components/gcds-label/gcds-label.css b/packages/web/src/components/gcds-label/gcds-label.css
@@ -4,10 +4,6 @@
   :host {
     display: block;
   }
-
-  :host .gcds-label {
-    color: inherit;
-  }
 }
 
 @layer default {
@@ -16,6 +12,7 @@
     max-width: 100%;
     font: var(--gcds-label-font-desktop);
     margin: var(--gcds-label-margin) !important;
+    color: var(--gcds-label-text);
     cursor: pointer;
 
     @media only screen and (width < 48em) {

diff --git a/packages/web/src/components/gcds-radio-group/gcds-radio-group.css b/packages/web/src/components/gcds-radio-group/gcds-radio-group.css
@@ -97,6 +97,8 @@
     color: var(--gcds-radio-disabled-text);
 
     gcds-label {
+      --gcds-label-text: currentColor;
+
       &:before,
       &:after {
         cursor: not-allowed;
@@ -107,6 +109,10 @@
         background-color: var(--gcds-radio-disabled-background);
       }
     }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
   }
 }
 
@@ -124,7 +130,7 @@
 
 @layer focus {
   :host .gcds-radio:focus-within {
-    color: var(--gcds-radio-focus-text);
+    color: var(--gcds-radio-focus-color);
 
     input:focus + gcds-label {
       &:before {

diff --git a/packages/web/src/components/gcds-search/gcds-search.css b/packages/web/src/components/gcds-search/gcds-search.css
@@ -62,9 +62,9 @@
 @layer focus {
   :host .gcds-search {
     input:focus {
-      border-color: var(--gcds-search-focus-text);
+      border-color: var(--gcds-search-focus-border-color);
       outline: var(--gcds-search-outline-width) solid
-        var(--gcds-search-focus-text);
+        var(--gcds-search-focus-border-color);
       outline-offset: var(--gcds-search-border-width);
       border-radius: var(--gcds-search-focus-border-radius);
       box-shadow: var(--gcds-search-focus-box-shadow);

diff --git a/packages/web/src/components/gcds-select/gcds-select.css b/packages/web/src/components/gcds-select/gcds-select.css
@@ -58,6 +58,14 @@
   :host .gcds-select-wrapper.gcds-disabled {
     color: var(--gcds-select-disabled-text);
 
+    gcds-label {
+      --gcds-label-text: currentColor;
+    }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
+
     select:disabled {
       cursor: not-allowed;
       background-color: var(--gcds-select-disabled-background);
@@ -73,15 +81,11 @@
 }
 
 @layer focus {
-  :host .gcds-select-wrapper:focus-within {
-    color: var(--gcds-select-focus-text);
-
-    select:focus {
-      border-color: var(--gcds-select-focus-text);
-      outline: var(--gcds-select-outline-width) solid
-        var(--gcds-select-focus-text);
-      outline-offset: var(--gcds-select-border-width);
-      box-shadow: var(--gcds-select-focus-box-shadow);
-    }
+  :host .gcds-select-wrapper:focus-within select:focus {
+    border-color: var(--gcds-select-focus-border);
+    outline: var(--gcds-select-outline-width) solid
+      var(--gcds-select-focus-border);
+    outline-offset: var(--gcds-select-border-width);
+    box-shadow: var(--gcds-select-focus-box-shadow);
   }
 }
diff --git a/packages/web/src/components/gcds-textarea/gcds-textarea.css b/packages/web/src/components/gcds-textarea/gcds-textarea.css
@@ -51,6 +51,14 @@
   :host .gcds-textarea-wrapper.gcds-disabled {
     color: var(--gcds-textarea-disabled-text);
 
+    gcds-label {
+      --gcds-label-text: currentColor;
+    }
+
+    gcds-hint {
+      --gcds-hint-text: currentColor;
+    }
+
     textarea:disabled {
       cursor: not-allowed;
       background-color: var(--gcds-textarea-disabled-background);
@@ -72,15 +80,11 @@
 }
 
 @layer focus {
-  :host .gcds-textarea-wrapper:focus-within {
-    color: var(--gcds-textarea-focus-text);
-
-    textarea:focus {
-      border-color: var(--gcds-textarea-focus-text);
-      outline: var(--gcds-textarea-outline-width) solid
-        var(--gcds-textarea-focus-text);
-      outline-offset: var(--gcds-textarea-border-width);
-      box-shadow: var(--gcds-textarea-focus-box-shadow);
-    }
+  :host .gcds-textarea-wrapper:focus-within textarea:focus {
+    border-color: var(--gcds-textarea-focus-border);
+    outline: var(--gcds-textarea-outline-width) solid
+      var(--gcds-textarea-focus-border);
+    outline-offset: var(--gcds-textarea-border-width);
+    box-shadow: var(--gcds-textarea-focus-box-shadow);
   }
 }