From 544f1cb0036d6f4fc4552ae68422e628a0f4dd55 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 19 Nov 2024 10:55:21 -0800 Subject: [PATCH] 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 --- package-lock.json | 8 +++---- packages/web/package.json | 2 +- .../gcds-checkbox/gcds-checkbox.css | 8 +++++-- .../gcds-fieldset/gcds-fieldset.css | 10 ++++---- .../gcds-file-uploader/gcds-file-uploader.css | 10 ++++++-- .../src/components/gcds-hint/gcds-hint.css | 2 +- .../src/components/gcds-input/gcds-input.css | 24 +++++++++++-------- .../src/components/gcds-label/gcds-label.css | 5 +--- .../gcds-radio-group/gcds-radio-group.css | 8 ++++++- .../components/gcds-search/gcds-search.css | 4 ++-- .../components/gcds-select/gcds-select.css | 24 +++++++++++-------- .../gcds-textarea/gcds-textarea.css | 24 +++++++++++-------- 12 files changed, 76 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index e11be595a..f4217e338 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2819,9 +2819,9 @@ "link": true }, "node_modules/@cdssnc/gcds-tokens": { - "version": "1.20.1", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.20.1.tgz", - "integrity": "sha512-E6+od9ttOvkHv+IrLsDQjKqKCznFWGxR38fR80vpP9VAZfE56q8JbrDzOAE++R0pQayOsmJ+2eDDca/JjoOBSA==", + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.20.2.tgz", + "integrity": "sha512-2J2SOQDreoBfl3TwBRVU43bgqwrkKRFsKjAbnCvrC85zPusJs2LuXdQCglXZGAkmN7ng9QKL9PJac3wkVhQfdA==", "dev": true }, "node_modules/@cnakazawa/watch": { @@ -48549,7 +48549,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/package.json b/packages/web/package.json index d68d8cfee..949c592f5 100644 --- 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 index d16c0628d..a9e0da8e4 100644 --- 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 index 357905520..a0e6a9f1f 100644 --- 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 index 24604dff8..e5eaa65e0 100644 --- 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 index ca037d9e8..95b0d876e 100644 --- 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 index b589e1d81..440932261 100644 --- 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 index d205cf511..0868ff0b7 100644 --- 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 index 3910a372d..9672a4496 100644 --- 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 index db0d2666e..bcb5463b4 100644 --- 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 index 3ab36c96f..cbcb57f25 100644 --- 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 index 9358114ad..03d50f7bb 100644 --- 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); } }