From 51a6741658ac3308c1cf6457e960219aed39b32a Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 12 Dec 2025 10:50:13 -0500 Subject: [PATCH 1/2] rename color variables, fix Liberty's background color --- .../site-header/progress-bar/progress-bar.vue | 7 ++++--- src/styles/client-customizations.scss | 11 +++++++---- src/styles/ux-variables.scss | 3 ++- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/iss-components/site-header/progress-bar/progress-bar.vue b/src/iss-components/site-header/progress-bar/progress-bar.vue index 700556ad..c7edfef7 100644 --- a/src/iss-components/site-header/progress-bar/progress-bar.vue +++ b/src/iss-components/site-header/progress-bar/progress-bar.vue @@ -44,7 +44,7 @@ export default { .progress-bar-header { padding-right: 0.3125rem; - color: $progress-bar-color; + color: $progress-bar-success-color; font-weight: 600; font-size: 0.875rem; line-height: 0.9375rem; @@ -63,9 +63,10 @@ export default { margin-left: 0; border-radius: $border-radius-pill; overflow: visible; + background-color: $progress-bar-background-color; .progress-bar { - background-color: $progress-bar-color; + background-color: $progress-bar-success-color; border-radius: $border-radius-pill 0 0 $border-radius-pill; overflow: visible; @@ -78,7 +79,7 @@ export default { margin-top: -1px; border: 0.125rem solid #ffffff; border-radius: 50%; - background-color: $progress-bar-color; + background-color: $progress-bar-success-color; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); } } diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss index b384870f..ba778fe6 100644 --- a/src/styles/client-customizations.scss +++ b/src/styles/client-customizations.scss @@ -9,7 +9,8 @@ $accent-color: #09748b; $link: #09748b; $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23 - $progress-bar-color: #181643; + $progress-bar-success-color: #181643; + $progress-bar-background-color: #ffffff; svg, .modal-text { @@ -29,15 +30,17 @@ .progress-bar-container { .progress-bar-header { - color: $progress-bar-color; + color: $progress-bar-success-color; } .progress { + background-color: $progress-bar-background-color; + .progress-bar { - background-color: $progress-bar-color; + background-color: $progress-bar-success-color; .progress-bar-middle { - background-color: $progress-bar-color; + background-color: $progress-bar-success-color; } } } diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index d713b8ed..d34f8d8b 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -156,7 +156,8 @@ $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of $border-radius-pill: 50rem; //Progress Bar Styling -$progress-bar-color: $green; +$progress-bar-success-color: $green; +$progress-bar-background-color: #cacbcc; //Spacing // 8 spacers available instead of the usual 5 From fea2ad57b2f88f6765b0256fd1181584440095f2 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 12 Dec 2025 13:32:34 -0500 Subject: [PATCH 2/2] change hex code to match Heritage --- src/styles/client-customizations.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss index ba778fe6..26beae9f 100644 --- a/src/styles/client-customizations.scss +++ b/src/styles/client-customizations.scss @@ -9,7 +9,7 @@ $accent-color: #09748b; $link: #09748b; $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23 - $progress-bar-success-color: #181643; + $progress-bar-success-color: #1a1446; $progress-bar-background-color: #ffffff; svg,