From ea6bf8eb49853a745d35d6191c2348e40e713d18 Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Thu, 10 Aug 2023 11:07:18 -0500 Subject: [PATCH 01/10] Adds color variable modifications as specified by UX. --- .../.storybook/cssVariables.json | 45 ++++++------------ .../components/tokens/_variables.scss | 46 +++++-------------- .../stories/changelog.stories.mdx | 45 ++++++++++++++++++ 3 files changed, 71 insertions(+), 65 deletions(-) diff --git a/docroot/design-system/.storybook/cssVariables.json b/docroot/design-system/.storybook/cssVariables.json index e19761024b..a2d4dbca66 100644 --- a/docroot/design-system/.storybook/cssVariables.json +++ b/docroot/design-system/.storybook/cssVariables.json @@ -1,19 +1,10 @@ { "custom-properties": { - "--va-gray-lightest": "#e5e3e1", - "--va-gray-lighter": "#e4e2e0", - "--va-gray-light": "#d3d3d3", - "--va-gray-med": "#757576", + "--va-gray-lightest": "#f1f1f1", + "--va-gray-med": "#757575", "--va-gray-dark": "#595959", "--va-gray-darker": "#494440", "--va-gray-darkest": "#212121", - "--va-gray-cool-lightest": "#f1f4f9", - "--va-gray-cool-lighter": "#e7ecf4", - "--va-gray-cool-light": "#dce4ef", - "--va-gray-cool": "#d1d9e3", - "--va-gray-cool-med": "#aeb0b5", - "--va-gray-cool-dark": "#5b616b", - "--va-gray-cool-darker": "#323a45", "--va-gray-button-hover": "#c1c2c7", "--va-blue-lightest": "#f0f6fb", "--va-blue-lighter": "#e4eff9", @@ -23,38 +14,28 @@ "--va-blue-dark": "#004795", "--va-blue-darker": "#003e73", "--va-blue-darkest": "#112e51", - "--va-blue-bright": "#9bdaf1", - "--va-blue-bright-med": "#02bfe7", - "--va-blue-bright-med-dark": "#00a6d2", - "--va-blue-bright-dark": "#046b99", "--va-gold-lightest": "#fff1d2", "--va-gold-lighter": "#fad980", "--va-gold": "#f9c642", "--va-gold-med": "#fdb81e", - "--va-green-lightest": "#d5e7d9", - "--va-green-light": "#4aa564", + "--va-gold-dark": "#c58702", + "--va-green-lightest": "#e7f434", "--va-green": "#2e8540", "--va-green-dark": "#195c27", - "--va-green-alt": "#0fa56f", - "--va-green-alt-bright": "#1bc47d", "--va-red-lightest": "#f9dede", "--va-red": "#f24f44", "--va-red-alt-dark": "#d04037", "--va-red-bright": "#e31c3d", "--va-red-dark": "#cd2026", "--va-red-darker": "#981b1e", - "--va-sky": "#f0f6fb", - "--va-sand": "#fdf5e3", - "--va-blush": "#fbf0ec", - "--va-mint": "#f6fdf4", "--color-white": "#fff", - "--color-black": "#000", + "--color-black": "#212121", "--color-textfield-counter-warning": "#C58702", "--color-textfield-counter-over": "#B20D01", - "--color-sky": "#f0f6fb", - "--color-sand": "#fdf5e3", - "--color-blush": "#fbf0Ec", - "--color-mint": "#f6fdf4", + "--color-sky": "var(--va-blue-lightest)", + "--color-sand": "var(--va-gold-lightest)", + "--color-blush": "var(--va-red-lightest)", + "--color-mint": "var(--va-green-lightest)", "--spacing-xxs": "0.25rem", "--spacing-xs": "0.5rem", "--spacing-s": "0.75rem", @@ -78,16 +59,18 @@ "--color-sunglow": "var(--va-gold-med)", "--color-maximumred": "var(--va-red-bright)", "--color-lightninggreen": "var(--va-green)", - "--color-lightgray": "var(--va-gray-lighter)", + "--color-lightgray": "var(--va-gray-lightest)", "--color-whitesmoke": "var(--va-gray-lightest)", "--color-text": "var(--va-gray-darkest)", - "--color-grayblue": "var(--va-gray-cool-med)", + "--color-grayblue": "var(--va-gray-lightest)", "--color-davysgray": "var(--va-gray-med)", "--color-bgblue-hover": "var(--va-blue-light)", "--color-bgblue-active": "var(--va-blue-light)", "--messages__text-margin": "0", "--input-fg-color-description--alt": "var(--va-gray-dark)", "--input--hover-border-color": "var(--va-blue-darker)", - "--input--disabled-fg-color": "var(--va-gray-darkest)" + "--input--disabled-fg-color": "var(--va-gray-darkest)", + "--focus-outline": "2px dotted transparent", + "--focus-box-shadow": "0 0 0 2px #fff, 0 0 0 5px #26a769" } } \ No newline at end of file diff --git a/docroot/design-system/components/tokens/_variables.scss b/docroot/design-system/components/tokens/_variables.scss index a86e64bfa4..047aa23a13 100644 --- a/docroot/design-system/components/tokens/_variables.scss +++ b/docroot/design-system/components/tokens/_variables.scss @@ -5,20 +5,11 @@ /* * Our unique design system variables. */ - --va-gray-lightest: #e5e3e1; - --va-gray-lighter: #e4e2e0; - --va-gray-light: #d3d3d3; - --va-gray-med: #757576; + --va-gray-lightest: #f1f1f1; + --va-gray-med: #757575; --va-gray-dark: #595959; --va-gray-darker: #494440; --va-gray-darkest: #212121; - --va-gray-cool-lightest: #f1f4f9; - --va-gray-cool-lighter: #e7ecf4; - --va-gray-cool-light: #dce4ef; - --va-gray-cool: #d1d9e3; - --va-gray-cool-med: #aeb0b5; - --va-gray-cool-dark: #5b616b; - --va-gray-cool-darker: #323a45; --va-gray-button-hover: #c1c2c7; --va-blue-lightest: #f0f6fb; --va-blue-lighter: #e4eff9; @@ -28,45 +19,31 @@ --va-blue-dark: #004795; --va-blue-darker: #003e73; --va-blue-darkest: #112e51; - --va-blue-bright: #9bdaf1; - --va-blue-bright-med: #02bfe7; - --va-blue-bright-med-dark: #00a6d2; - --va-blue-bright-dark: #046b99; --va-gold-lightest: #fff1d2; --va-gold-lighter: #fad980; --va-gold: #f9c642; --va-gold-med: #fdb81e; - --va-green-lightest: #d5e7d9; - --va-green-light: #4aa564; + --va-gold-dark: #c58702; + --va-green-lightest: #e7f434; --va-green: #2e8540; --va-green-dark: #195c27; - --va-green-alt: #0fa56f; - --va-green-alt-bright: #1bc47d; --va-red-lightest: #f9dede; --va-red: #f24f44; --va-red-alt-dark: #d04037; --va-red-bright: #e31c3d; --va-red-dark: #cd2026; --va-red-darker: #981b1e; + --va-white: #fff; + --va-black: #212121; --va-sky: #f0f6fb; - --va-sand: #fdf5e3; - --va-blush: #fbf0ec; - --va-mint: #f6fdf4; - --color-white: #fff; - --color-black: #000; + --va-sand: #fff1d2; + --va-blush: #f9dede; + --va-mint: #e7f434; /* Colors for textfield_counter overrides */ --color-textfield-counter-warning: #C58702; --color-textfield-counter-over: #B20D01; - /* - * New colors added for CMSDS - */ - --color-sky: #f0f6fb; - --color-sand: #fdf5e3; - --color-blush: #fbf0Ec; - --color-mint: #f6fdf4; - /* rem size based on :root font-size of 16px, so 1rem = 16px */ --spacing-xxs: 0.25rem; --spacing-xs: 0.5rem; @@ -97,10 +74,10 @@ --color-sunglow: var(--va-gold-med); --color-maximumred: var(--va-red-bright); --color-lightninggreen: var(--va-green); - --color-lightgray: var(--va-gray-lighter); + --color-lightgray: var(--va-gray-lightest); --color-whitesmoke: var(--va-gray-lightest); --color-text: var(--va-gray-darkest); - --color-grayblue: var(--va-gray-cool-med); + --color-grayblue: var(--va-gray-lightest); --color-davysgray: var(--va-gray-med); --color-bgblue-hover: var(--va-blue-light); --color-bgblue-active: var(--va-blue-light); @@ -114,3 +91,4 @@ --focus-outline: 2px dotted transparent; --focus-box-shadow:0 0 0 2px #fff, 0 0 0 5px #26a769; } + diff --git a/docroot/design-system/stories/changelog.stories.mdx b/docroot/design-system/stories/changelog.stories.mdx index 2cf5c3707c..92fea1b9af 100644 --- a/docroot/design-system/stories/changelog.stories.mdx +++ b/docroot/design-system/stories/changelog.stories.mdx @@ -17,3 +17,48 @@ VADS announces components as new/deprecated in `#vfs-frontend` as well, we proba ## 0.1.0 - added token pages & general structure - etc. + +## 0.1.1 (2023-08-10) +- added color variables: + - `--va-gold-dark`: `#C58702` +- modified color variables + - `--va-green-lightest` to `#E7F4E4` + - `--va-gray-med` to `#757575` + - `--va-blue-bright` to `#F0F6FB` + - `--va-black` to `#212121` +- removed color variables + - replaced by `--va-blue-lightest` + - `--va-blue-bright-med` + - `--va-blue-bright` + - replaced by `--va-blue-dark` + - `--va-blue-bright-med-dark` + - `--va-blue-bright-dark` + - replaced by `--va-gray-lightest` + - `--va-gray-lighter` + - `--va-gray-light` + - `--va-gray-cool-lightest` + - `--va-gray-cool-lighter` + - `--va-gray-cool-light` + - `--va-gray-cool` + - replaced by `--va-gray-darkest` + - `--va-gray-cool-med` + - `--va-gray-cool-dark` + - `--va-gray-cool-darker` + - replaced by `--va-green-lightest` + - `--va-green-light` + - replaced by `--va-green-dark` + - `--va-green-alt` + - `--va-green-alt-bright` + - replaced by `--va-white` + - `--color-white` + - replaced by `--va-black` + - `--color-black` + - replaced by `--va-sky` + - `--color-sky` + - replaced by `--va-sand` + - `--color-sand` + - replaced by `--va-blush` + - `--color-blush` + - replaced by `--va-mint` + - `--color-mint` + From 56bd0ec29f2eb5fa4deb4b5b1fcac5dda027414b Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Thu, 10 Aug 2023 11:58:33 -0500 Subject: [PATCH 02/10] updates .storybook/cssVariables.json --- docroot/design-system/.storybook/cssVariables.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docroot/design-system/.storybook/cssVariables.json b/docroot/design-system/.storybook/cssVariables.json index a2d4dbca66..84d9374d3d 100644 --- a/docroot/design-system/.storybook/cssVariables.json +++ b/docroot/design-system/.storybook/cssVariables.json @@ -28,14 +28,14 @@ "--va-red-bright": "#e31c3d", "--va-red-dark": "#cd2026", "--va-red-darker": "#981b1e", - "--color-white": "#fff", - "--color-black": "#212121", + "--va-white": "#fff", + "--va-black": "#212121", + "--va-sky": "#f0f6fb", + "--va-sand": "#fff1d2", + "--va-blush": "#f9dede", + "--va-mint": "#e7f434", "--color-textfield-counter-warning": "#C58702", "--color-textfield-counter-over": "#B20D01", - "--color-sky": "var(--va-blue-lightest)", - "--color-sand": "var(--va-gold-lightest)", - "--color-blush": "var(--va-red-lightest)", - "--color-mint": "var(--va-green-lightest)", "--spacing-xxs": "0.25rem", "--spacing-xs": "0.5rem", "--spacing-s": "0.75rem", From 3bc2e599f19faff4292838b84c1f8f2c3f215bf7 Mon Sep 17 00:00:00 2001 From: Tony Taylor Date: Fri, 11 Aug 2023 13:36:46 -0500 Subject: [PATCH 03/10] trimmed storybook color variables; updated theme scss in accordance with trimmed storybook color variables --- .../.storybook/cssVariables.json | 35 ++++++------------- .../components/tokens/_variables.scss | 35 ++++++------------- .../assets/scss/components/_buttons.scss | 18 +++++----- .../scss/components/_centralized_content.scss | 8 ++--- .../assets/scss/components/_elements.scss | 18 +++++----- .../assets/scss/components/_flags.scss | 4 +-- .../assets/scss/components/_footer.scss | 6 ++-- .../assets/scss/components/_layout.scss | 4 +-- .../assets/scss/components/_links.scss | 4 +-- .../assets/scss/components/_process_list.scss | 10 +++--- .../assets/scss/components/_toolbar.scss | 10 +++--- .../assets/scss/components/_tooltip.scss | 2 +- .../assets/scss/components/_views.scss | 6 ++-- .../assets/scss/pages/_kb-pages.scss | 10 +++--- .../vagovclaro/assets/scss/pages/_login.scss | 2 +- .../assets/scss/pages/_proofing.scss | 20 +++++------ .../assets/scss/tokens/_mixins.scss | 32 ++++++++--------- .../assets/scss/tokens/_variables.scss | 8 ++--- .../vagovclaro/assets/scss/user_guides.scss | 18 +++++----- .../vagovclaro/assets/scss/whats_new.scss | 2 +- 20 files changed, 111 insertions(+), 141 deletions(-) diff --git a/docroot/design-system/.storybook/cssVariables.json b/docroot/design-system/.storybook/cssVariables.json index 84d9374d3d..bfa310e094 100644 --- a/docroot/design-system/.storybook/cssVariables.json +++ b/docroot/design-system/.storybook/cssVariables.json @@ -1,31 +1,16 @@ { "custom-properties": { "--va-gray-lightest": "#f1f1f1", - "--va-gray-med": "#757575", - "--va-gray-dark": "#595959", - "--va-gray-darker": "#494440", "--va-gray-darkest": "#212121", - "--va-gray-button-hover": "#c1c2c7", "--va-blue-lightest": "#f0f6fb", - "--va-blue-lighter": "#e4eff9", - "--va-blue-light": "#d9e8f6", - "--va-blue": "#3e94cf", - "--va-blue-med": "#0071bb", "--va-blue-dark": "#004795", - "--va-blue-darker": "#003e73", "--va-blue-darkest": "#112e51", "--va-gold-lightest": "#fff1d2", - "--va-gold-lighter": "#fad980", - "--va-gold": "#f9c642", "--va-gold-med": "#fdb81e", "--va-gold-dark": "#c58702", - "--va-green-lightest": "#e7f434", - "--va-green": "#2e8540", + "--va-green-lightest": "#e7f4e4", "--va-green-dark": "#195c27", "--va-red-lightest": "#f9dede", - "--va-red": "#f24f44", - "--va-red-alt-dark": "#d04037", - "--va-red-bright": "#e31c3d", "--va-red-dark": "#cd2026", "--va-red-darker": "#981b1e", "--va-white": "#fff", @@ -53,22 +38,22 @@ "--va-subsection-xs": "15px", "--va-text": "18px", "--va-helptext": "14px", - "--color-absolutezero": "var(--va-blue-med)", + "--color-absolutezero": "var(--va-blue-dark)", "--color-absolutezero-hover": "var(--va-blue-dark)", - "--color-absolutezero-active": "var(--va-blue-darker)", + "--color-absolutezero-active": "var(--va-blue-darkest)", "--color-sunglow": "var(--va-gold-med)", - "--color-maximumred": "var(--va-red-bright)", - "--color-lightninggreen": "var(--va-green)", + "--color-maximumred": "var(--va-red-dark)", + "--color-lightninggreen": "var(--va-green-dark)", "--color-lightgray": "var(--va-gray-lightest)", "--color-whitesmoke": "var(--va-gray-lightest)", "--color-text": "var(--va-gray-darkest)", "--color-grayblue": "var(--va-gray-lightest)", - "--color-davysgray": "var(--va-gray-med)", - "--color-bgblue-hover": "var(--va-blue-light)", - "--color-bgblue-active": "var(--va-blue-light)", + "--color-davysgray": "var(--va-gray-darkest)", + "--color-bgblue-hover": "var(--va-blue-lightest)", + "--color-bgblue-active": "var(--va-blue-lightest)", "--messages__text-margin": "0", - "--input-fg-color-description--alt": "var(--va-gray-dark)", - "--input--hover-border-color": "var(--va-blue-darker)", + "--input-fg-color-description--alt": "var(--va-gray-darkest)", + "--input--hover-border-color": "var(--va-blue-darkest)", "--input--disabled-fg-color": "var(--va-gray-darkest)", "--focus-outline": "2px dotted transparent", "--focus-box-shadow": "0 0 0 2px #fff, 0 0 0 5px #26a769" diff --git a/docroot/design-system/components/tokens/_variables.scss b/docroot/design-system/components/tokens/_variables.scss index 047aa23a13..ffa53ec8ca 100644 --- a/docroot/design-system/components/tokens/_variables.scss +++ b/docroot/design-system/components/tokens/_variables.scss @@ -6,31 +6,16 @@ * Our unique design system variables. */ --va-gray-lightest: #f1f1f1; - --va-gray-med: #757575; - --va-gray-dark: #595959; - --va-gray-darker: #494440; --va-gray-darkest: #212121; - --va-gray-button-hover: #c1c2c7; --va-blue-lightest: #f0f6fb; - --va-blue-lighter: #e4eff9; - --va-blue-light: #d9e8f6; - --va-blue: #3e94cf; - --va-blue-med: #0071bb; --va-blue-dark: #004795; - --va-blue-darker: #003e73; --va-blue-darkest: #112e51; --va-gold-lightest: #fff1d2; - --va-gold-lighter: #fad980; - --va-gold: #f9c642; --va-gold-med: #fdb81e; --va-gold-dark: #c58702; - --va-green-lightest: #e7f434; - --va-green: #2e8540; + --va-green-lightest: #e7f4e4; --va-green-dark: #195c27; --va-red-lightest: #f9dede; - --va-red: #f24f44; - --va-red-alt-dark: #d04037; - --va-red-bright: #e31c3d; --va-red-dark: #cd2026; --va-red-darker: #981b1e; --va-white: #fff; @@ -68,24 +53,24 @@ --va-helptext: 14px; /* claro overrides */ - --color-absolutezero: var(--va-blue-med); + --color-absolutezero: var(--va-blue-dark); --color-absolutezero-hover: var(--va-blue-dark); - --color-absolutezero-active: var(--va-blue-darker); + --color-absolutezero-active: var(--va-blue-darkest); --color-sunglow: var(--va-gold-med); - --color-maximumred: var(--va-red-bright); - --color-lightninggreen: var(--va-green); + --color-maximumred: var(--va-red-dark); + --color-lightninggreen: var(--va-green-dark); --color-lightgray: var(--va-gray-lightest); --color-whitesmoke: var(--va-gray-lightest); --color-text: var(--va-gray-darkest); --color-grayblue: var(--va-gray-lightest); - --color-davysgray: var(--va-gray-med); - --color-bgblue-hover: var(--va-blue-light); - --color-bgblue-active: var(--va-blue-light); + --color-davysgray: var(--va-gray-darkest); + --color-bgblue-hover: var(--va-blue-lightest); + --color-bgblue-active: var(--va-blue-lightest); --messages__text-margin: 0; - --input-fg-color-description--alt: var(--va-gray-dark); - --input--hover-border-color: var(--va-blue-darker); + --input-fg-color-description--alt: var(--va-gray-darkest); + --input--hover-border-color: var(--va-blue-darkest); --input--disabled-fg-color: var(--va-gray-darkest); --focus-outline: 2px dotted transparent; diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_buttons.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_buttons.scss index 2d2dbdf70f..4f7f5a12bd 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_buttons.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_buttons.scss @@ -1,6 +1,6 @@ .action-link--danger { background-color: var(--va-red-darker); - color: var(--color-white); + color: var(--va-white); } .action-link--danger:hover { @@ -26,16 +26,16 @@ // hack for unlock button... form action is added way later in content_lock.module .content-lock-actions .button:last-child { - background-color: var(--color-white); - border: 2px solid var(--va-blue-med) !important; + background-color: var(--va-white); + border: 2px solid var(--va-blue-dark) !important; box-shadow: none; - color: var(--va-blue-med); + color: var(--va-blue-dark); padding: calc(var(--space-m) - 2px) calc(var(--space-l) - 2px); //2px offset for border &:hover { - background-color: var(--va-blue-light); - border: 2px solid var(--va-blue-darker); - color: var(--va-blue-darker); + background-color: var(--va-blue-lightest); + border: 2px solid var(--va-blue-darkest); + color: var(--va-blue-darkest); } } @@ -47,7 +47,7 @@ // admin/content/deploy builds front-end button in nested markup .va-gov-build-trigger-build-trigger-form { .button--primary a { - color: var(--color-white); + color: var(--va-white); text-decoration: none; } } @@ -67,7 +67,7 @@ table .button, table .button:not(:focus) { // fixes contrast issue when row is hovered but button isn't. !important bc core - border: 1px solid var(--color-white) !important; + border: 1px solid var(--va-white) !important; box-shadow: none; } diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_centralized_content.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_centralized_content.scss index e2a7245aba..187530365c 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_centralized_content.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_centralized_content.scss @@ -47,8 +47,8 @@ } .paragraph--type--centralized-content-descriptor.paragraph--view-mode--default .js-form-item { - background-color: var(--va-gray-med); - color: var(--color-white); + background-color: var(--va-gray-darkest); + color: var(--va-white); legend { display: none; @@ -118,8 +118,8 @@ } .cc-paragraph-header { - background: var(--va-gray-med); - color: var(--color-white); + background: var(--va-gray-darkest); + color: var(--va-white); td { padding: 15px; diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_elements.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_elements.scss index 3f29a21701..43e8b05afe 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_elements.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_elements.scss @@ -86,7 +86,7 @@ p { } a:hover { - background-color: var(--va-blue-lighter); + background-color: var(--va-blue-lightest); } .cc-suffix-text { @@ -127,7 +127,7 @@ th { } .draggable-table th { - border-bottom: 1px solid var(--va-gray-cool-med); + border-bottom: 1px solid var(--va-gray-darkest); } .taxonomy-term-preview { @@ -135,14 +135,14 @@ th { } #block-entitymetadisplay { - border: 1px solid var(--va-gray-cool-med); + border: 1px solid var(--va-gray-darkest); border-radius: 2px; margin-bottom: var(--spacing-m); padding: var(--spacing-s); } .field--name-field-last-saved-by-an-editor { - border: 1px solid var(--va-gray-cool-med); + border: 1px solid var(--va-gray-darkest); border-radius: 2px; margin-bottom: var(--spacing-m); margin-top: var(--spacing-m); @@ -206,7 +206,7 @@ p.vc-help-text { } .linkit-result-line:hover .linkit-result-line--title { - color: var(--color-white); + color: var(--va-white); } .filter-wrapper { @@ -239,8 +239,8 @@ p.vc-help-text { &:focus, &:hover { - background-color: var(--va-blue-lighter); - color: var(--va-blue-darker); + background-color: var(--va-blue-lightest); + color: var(--va-blue-darkest); text-decoration: none; } @@ -271,7 +271,7 @@ p.vc-help-text { text-decoration: dotted underline; &:hover { - background-color: var(--va-blue-lighter); + background-color: var(--va-blue-lightest); text-decoration: none; } @@ -292,7 +292,7 @@ p.vc-help-text { } .inline-guidance-text { - border-left: 3px solid var(--va-blue-bright-med); + border-left: 3px solid var(--va-blue-lightest); margin: 20px 0; padding: 0 20px; diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_flags.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_flags.scss index 40c89fc17e..e83f9c413e 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_flags.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_flags.scss @@ -1,14 +1,14 @@ // Styling for Flags .view-flagged-content { .flag { - background: var(--va-gray-lighter); + background: var(--va-gray-lightest); border-radius: 30px; display: inline-block; padding: 4px 16px; white-space: nowrap; &.new { - background: var(--va-blue-light); + background: var(--va-blue-lightest); } &.changed_filename, diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_footer.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_footer.scss index 07e7388031..db573d8305 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_footer.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_footer.scss @@ -32,7 +32,7 @@ list-style-type: none; &::after { - color: var(--color-white); + color: var(--va-white); content: ' | '; padding-right: 1rem; } @@ -44,12 +44,12 @@ } a { - color: var(--color-white); + color: var(--va-white); margin-right: 1rem; &:hover, &:focus { - color: var(--va-blue-darker); + color: var(--va-blue-darkest); } } } diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_layout.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_layout.scss index e441e4744e..4b15097e04 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_layout.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_layout.scss @@ -6,11 +6,11 @@ @include breakpoint('tabs') { .is-horizontal .tabs { .tabs__link { - color: var(--va-gray-lighter); + color: var(--va-gray-lightest); } .tabs__link:hover { - color: var(--va-blue-med); + color: var(--va-blue-dark); } .tabs__link.is-active { diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_links.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_links.scss index 5b5e08cffc..a6150ef46a 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_links.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_links.scss @@ -7,8 +7,8 @@ a { &:hover, &:focus { - background-color: var(--va-blue-lighter); - color: var(--va-blue-darker); + background-color: var(--va-blue-lightest); + color: var(--va-blue-darkest); text-decoration: none; } } diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_process_list.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_process_list.scss index d85e164bdb..61b9c69889 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_process_list.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_process_list.scss @@ -9,7 +9,7 @@ padding-left: 1.94em; > li { - border-left: 8px solid var(--va-gray-lighter); + border-left: 8px solid var(--va-gray-lightest); counter-increment: process-counter; line-height: 1.5; list-style: none; @@ -21,10 +21,10 @@ } &::before { - background: var(--va-gray-light); - border: 4px solid var(--color-white); + background: var(--va-gray-lightest); + border: 4px solid var(--va-white); border-radius: 4em; - color: var(--color-white); + color: var(--va-white); content: counter(process-counter); display: block; float: left; @@ -41,7 +41,7 @@ border-left: 8px solid transparent; &::before { - border: 4px solid var(--color-white); + border: 4px solid var(--va-white); } } } diff --git a/docroot/themes/custom/vagovclaro/assets/scss/components/_toolbar.scss b/docroot/themes/custom/vagovclaro/assets/scss/components/_toolbar.scss index e2277b5baf..26724bd4fd 100644 --- a/docroot/themes/custom/vagovclaro/assets/scss/components/_toolbar.scss +++ b/docroot/themes/custom/vagovclaro/assets/scss/components/_toolbar.scss @@ -37,7 +37,7 @@ body.toolbar-fixed { } &:active { - color: var(--color-white) !important; + color: var(--va-white) !important; } &::before { @@ -88,7 +88,7 @@ body.toolbar-fixed { // this element is a