From 50e6dcb1dd53c90ad57a32377e3cac2df2a51e8c Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Wed, 9 Jul 2025 13:03:24 -0700 Subject: [PATCH 01/36] fix(unity-bootstrap-theme): fix gray color alignment with brand brand gray scale has 1-7 (dark to light), This change aligns css to follow 1-dark to 7-light --- .../src/scss/_custom-asu-variables.scss | 22 ++-- .../src/scss/extends/_alerts.scss | 2 +- .../src/scss/extends/_alt_styling.scss | 14 +-- .../src/scss/extends/_anchor-menu.scss | 12 +- .../scss/extends/_back-to-top-buttton.scss | 2 +- .../src/scss/extends/_backgrounds.scss | 22 ++-- .../src/scss/extends/_blockquotes.scss | 4 +- .../src/scss/extends/_breadcrumb.scss | 4 +- .../src/scss/extends/_buttons.scss | 18 +-- .../src/scss/extends/_calendar.scss | 16 +-- .../src/scss/extends/_cards.scss | 32 +++--- .../src/scss/extends/_display-list.scss | 4 +- .../src/scss/extends/_dividers.scss | 2 +- .../src/scss/extends/_form-fields.scss | 106 +++++++++--------- .../src/scss/extends/_global-header.scss | 76 ++++++------- .../src/scss/extends/_globalfooter.scss | 14 +-- .../src/scss/extends/_grid-links.scss | 8 +- .../extends/_image-based-card-and-hover.scss | 4 +- .../src/scss/extends/_image-text-block.scss | 4 +- .../src/scss/extends/_images.scss | 8 +- .../src/scss/extends/_inset-box.scss | 2 +- .../src/scss/extends/_list.scss | 22 ++-- .../src/scss/extends/_misc.scss | 8 +- .../src/scss/extends/_modals.scss | 2 +- .../src/scss/extends/_pager.scss | 26 ++--- .../src/scss/extends/_person-profile.scss | 6 +- .../src/scss/extends/_ranking-cards.scss | 6 +- .../src/scss/extends/_sidebar.scss | 18 +-- .../src/scss/extends/_tabbed-panels.scss | 8 +- .../src/scss/extends/_tables.scss | 12 +- .../src/scss/extends/_tooltips.scss | 20 ++-- .../src/scss/extends/_video.scss | 4 +- .../src/scss/variables/_breadcrumb.scss | 4 +- .../src/scss/variables/_colors.scss | 53 ++++----- .../src/scss/variables/_dropdown.scss | 8 +- .../src/scss/variables/_form-fields.scss | 2 +- .../src/scss/variables/_headings.scss | 8 +- .../src/scss/variables/_pager.scss | 2 +- 38 files changed, 293 insertions(+), 292 deletions(-) diff --git a/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss b/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss index 06a8e4cd2..3e679cc79 100644 --- a/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss +++ b/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss @@ -44,13 +44,13 @@ $uds-color-base-blue: #00a3e0; // ASU Blue $uds-color-base-bluefocus: #00baff; // A11y Focus Blue - used for highlighting the page element with current focus $uds-color-base-darkgold: #7f6227; // Visited state of ASU Gold $uds-color-base-darkmaroon: #440e22; // Visited state of ASU Maroon -$uds-color-base-gray-1: #fafafa; -$uds-color-base-gray-2: #e8e8e8; -$uds-color-base-gray-3: #d0d0d0; -$uds-color-base-gray-4: #bfbfbf; -$uds-color-base-gray-5: #747474; -$uds-color-base-gray-6: #484848; -$uds-color-base-gray-7: #191919; // Base font color and default black level +$uds-color-base-grayscale-7: #fafafa; +$uds-color-base-grayscale-6: #e8e8e8; +$uds-color-base-grayscale-5: #d0d0d0; +$uds-color-base-grayscale-4: #bfbfbf; +$uds-color-base-grayscale-3: #747474; +$uds-color-base-grayscale-2: #484848; +$uds-color-base-grayscale-1: #191919; // Base font color and default black level $uds-color-brand-gold: $uds-color-base-gold; // ASU Gold brand color $uds-color-brand-maroon: $uds-color-base-maroon; // ASU Maroon brand color @@ -61,17 +61,17 @@ $uds-color-alerts-info: $uds-color-base-blue; // Information $uds-color-alerts-success: $uds-color-base-green; // Success $uds-color-background-white: $uds-color-base-white; // Background - White -$uds-color-background-gray: $uds-color-base-gray-2; // Background - Gray -$uds-color-background-dark: $uds-color-base-gray-7; // Background - Dark +$uds-color-background-gray: $uds-color-base-grayscale-6; // Background - Gray +$uds-color-background-dark: $uds-color-base-grayscale-1; // Background - Dark $uds-color-background-success: #e9f5db; // Background - Success $uds-color-background-error: #f7dddd; // Background - Error $uds-color-background-warning: #ffeade; // Background - Warning $uds-color-background-info: #d6f0fa; // Background - Information -$uds-color-font-dark-base: $uds-color-base-gray-7; // Default text color on light background +$uds-color-font-dark-base: $uds-color-base-grayscale-1; // Default text color on light background $uds-color-font-dark-error: #FF7B7D; // Error text on dark background $uds-color-font-dark-success: #446d12; // Success text on dark background -$uds-color-font-light-base: $uds-color-base-gray-1; // Default text on dark background +$uds-color-font-light-base: $uds-color-base-grayscale-7; // Default text on dark background $uds-color-font-light-link: $uds-color-base-gold; // Link text on dark background $uds-color-font-light-visited: $uds-color-base-darkgold; // Visited link text on dark background $uds-color-font-light-info: #00b0f3; // Information text on dark background diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_alerts.scss b/packages/unity-bootstrap-theme/src/scss/extends/_alerts.scss index 9ffebb322..3468a4466 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_alerts.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_alerts.scss @@ -58,7 +58,7 @@ div[class='alert alert-block'] { /* Catch-all for default alert class */ background-color: $uds-color-background-gray; - border-color: $uds-color-base-gray-3; + border-color: $uds-color-base-grayscale-5; } // Media Queries diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.scss b/packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.scss index 88cda4f49..118a8b5ba 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.scss @@ -4,13 +4,13 @@ */ // Mapping for Design Tokens -$ws2-gray-darkest: $uds-color-base-gray-7; -$ws2-gray-darker: $uds-color-base-gray-6; -$ws2-gray-dark: $uds-color-base-gray-5; -$ws2-gray: $uds-color-base-gray-4; -$ws2-gray-light: $uds-color-base-gray-3; -$ws2-gray-lighter: $uds-color-base-gray-2; -$ws2-gray-lightest: $uds-color-base-gray-1; +$ws2-gray-darkest: $uds-color-base-grayscale-1; +$ws2-gray-darker: $uds-color-base-grayscale-2; +$ws2-gray-dark: $uds-color-base-grayscale-3; +$ws2-gray: $uds-color-base-grayscale-4; +$ws2-gray-light: $uds-color-base-grayscale-5; +$ws2-gray-lighter: $uds-color-base-grayscale-6; +$ws2-gray-lightest: $uds-color-base-grayscale-7; // Custom variables (semantic renaming, mapping, etc.) $the-base: 16px; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss index 524229cca..664f8e94d 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss @@ -1,6 +1,6 @@ .uds-anchor-menu { background-color: white; - border-bottom: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $uds-color-base-grayscale-5; z-index: 100; &-wrapper { @@ -47,14 +47,14 @@ } .nav-link { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; padding: $uds-size-spacing-3 0; padding-left: 0.5rem; text-align: start; font-weight: 400; &:not(:last-child) { - border-bottom: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $uds-color-base-grayscale-5; } &:hover, @@ -64,11 +64,11 @@ } &:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } &:focus { - box-shadow: 0px 0px 0px 2px $uds-color-base-gray-7 !important; + box-shadow: 0px 0px 0px 2px $uds-color-base-grayscale-1 !important; } svg { @@ -80,7 +80,7 @@ } @mixin uds-anchor-menu-expanded { - border-bottom: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $uds-color-base-grayscale-5; .uds-anchor-menu-wrapper { flex-direction: row; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_back-to-top-buttton.scss b/packages/unity-bootstrap-theme/src/scss/extends/_back-to-top-buttton.scss index 00f8b4d18..47938100c 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_back-to-top-buttton.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_back-to-top-buttton.scss @@ -1,6 +1,6 @@ .uds-back-to-top-button { align-items: center; - background-color: $uds-color-base-gray-5; + background-color: $uds-color-base-grayscale-3; border: none; bottom: 50%; color: $uds-color-base-white; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss b/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss index 7bbacd0e4..0ef429b40 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss @@ -2,21 +2,21 @@ height: 322px; } -.gray-7-bg { - background: $uds-color-base-gray-7; +.grayscale-1-bg { + background: $uds-color-base-grayscale-1; } -.gray-2-bg { - background: $uds-color-base-gray-2; +.grayscale-6-bg { + background: $uds-color-base-grayscale-6; } -.gray-1-bg { - background: $uds-color-base-gray-1; +.grayscale-7-bg { + background: $uds-color-base-grayscale-7; } .white-bg { background: $uds-color-base-white; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; } .image-bg { @@ -45,9 +45,9 @@ } .content-description-container { - background-color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-7; width: 100%; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; margin-top: 16px; } @@ -56,11 +56,11 @@ flex-direction: column; align-items: center; justify-content: center; - border: 1px dashed $uds-color-base-gray-5; + border: 1px dashed $uds-color-base-grayscale-3; height: 251px; margin: 20px 0 100px 0; font-size: 50px; - color: $uds-color-base-gray-3; + color: $uds-color-base-grayscale-5; } .bg { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_blockquotes.scss b/packages/unity-bootstrap-theme/src/scss/extends/_blockquotes.scss index 4d9795c76..9b1ca52d1 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_blockquotes.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_blockquotes.scss @@ -52,7 +52,7 @@ blockquote:before { svg { grid-column: 1; - fill: $uds-color-base-gray-7; + fill: $uds-color-base-grayscale-1; width: $uds-size-spacing-5; height: auto; } @@ -240,7 +240,7 @@ blockquote:before { &:before { content: ''; display: block; - background-color: $uds-color-base-gray-7; + background-color: $uds-color-base-grayscale-1; height: $uds-size-spacing-half; width: $uds-size-spacing-9; margin: $uds-size-spacing-2 0; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss b/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss index 113ad41ab..3561448a1 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss @@ -2,13 +2,13 @@ & { padding-left: 0; } - &.bg-gray-7 { + &.bg-grayscale-1 { a { color: $uds-color-base-gold; } li.active { &, a { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss index 97233328e..4fff51dc2 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss @@ -31,17 +31,17 @@ padding: $uds-component-button-padding-y-small $uds-component-button-padding-x-small; margin-top: 8px; - background: $gray-2; + background: $grayscale-6; &.btn-tag-alt-white { - background: $gray-2; + background: $grayscale-6; color: $body-color; } &.btn-tag-alt-gray { - background: $gray-3; + background: $grayscale-5; color: $body-color; } &.btn-tag-alt-black { - background: $gray-4; + background: $grayscale-4; color: $body-color; } } @@ -49,9 +49,9 @@ padding: $uds-size-spacing-half $uds-size-spacing-half; width: $uds-size-spacing-4 !important; height: $uds-size-spacing-4; - border: solid 1px $gray-3; + border: solid 1px $grayscale-5; &.btn-circle-alt-white { - background: $gray-2; + background: $grayscale-6; color: $body-color; } &.btn-circle-alt-gray { @@ -60,7 +60,7 @@ } &.btn-circle-alt-black { background: $white; - color: $gray-7; + color: $grayscale-1; } &.btn-circle-large { width: $uds-size-spacing-8 !important; @@ -81,7 +81,7 @@ } } .bg-light-gray { - background-color: $gray-1; + background-color: $grayscale-7; } @@ -114,7 +114,7 @@ a { - &.text-gold, .bg-gray-7 & { + &.text-gold, .bg-grayscale-1 & { &:link, &:hover, &:focus { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss b/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss index 114f9a241..69a7c99d0 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss @@ -17,14 +17,14 @@ .body { display: grid; grid-template-columns: repeat(7, 1fr); - border-top: 1px solid $uds-color-base-gray-5; - border-left: 1px solid $uds-color-base-gray-5; + border-top: 1px solid $uds-color-base-grayscale-3; + border-left: 1px solid $uds-color-base-grayscale-3; .calendar-item { font-size: $uds-size-font-medium; padding: $uds-size-spacing-8 $uds-size-spacing-1 $uds-size-spacing-1; cursor: pointer; - border-bottom: 1px solid $uds-color-base-gray-5; - border-right: 1px solid $uds-color-base-gray-5; + border-bottom: 1px solid $uds-color-base-grayscale-3; + border-right: 1px solid $uds-color-base-grayscale-3; margin: 0; } .today { @@ -35,16 +35,16 @@ } .prev, .next { - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; } } } .calendar-nav { text-align: center; button { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; border-radius: $uds-component-border-radius; - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; padding: calc(#{$uds-size-spacing-3} / 2) calc(#{$uds-size-spacing-7} / 3); svg { font-size: $uds-size-spacing-3; @@ -65,7 +65,7 @@ Mobile padding-right: 0; text-align: center; .heading { - border-bottom: 1px solid $uds-color-base-gray-5; + border-bottom: 1px solid $uds-color-base-grayscale-3; padding-bottom: $uds-size-spacing-1; &.desktop { display: none; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss index a4143354b..b1b6d599e 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss @@ -265,7 +265,7 @@ Cards - Table of Contents .card-title a, .card-title a:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } @@ -292,7 +292,7 @@ Cards - Table of Contents .card-footer-link a, .card-footer-link a:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; font-weight: bold; display: block; @@ -506,7 +506,7 @@ Cards - Table of Contents } .accordion-item { - border-color: $uds-color-base-gray-3; + border-color: $uds-color-base-grayscale-5; border-left: $uds-size-spacing-1 solid $uds-color-base-gold; height: auto; @@ -515,11 +515,11 @@ Cards - Table of Contents } &.accordion-item-gray { - border-left-color: $uds-color-base-gray-4; + border-left-color: $uds-color-base-grayscale-4; } &.accordion-item-dark { - border-left-color: $uds-color-base-gray-7; + border-left-color: $uds-color-base-grayscale-1; } .accordion-header { @@ -540,7 +540,7 @@ Cards - Table of Contents } &:hover { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; } h3 { @@ -555,7 +555,7 @@ Cards - Table of Contents a, button { margin: .4rem .3rem; padding: .6rem .7rem; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; display: flex; flex-wrap: nowrap; @@ -582,8 +582,8 @@ Cards - Table of Contents &:focus { outline: none!important; - box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important; - border: 1px solid $uds-color-base-gray-7 !important; + box-shadow: 0 0 0 1px $uds-color-base-grayscale-1 !important; + border: 1px solid $uds-color-base-grayscale-1 !important; margin: 4px; width: -webkit-fill-available; } @@ -592,12 +592,12 @@ Cards - Table of Contents } + div > .accordion-body, + .accordion-body{ // TODO: remove '+ .accordion-body' after next major breaking change release. This is for backward compatibility - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; } } .accordion-body { - background-color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-7; > p:first-child { margin-top: $uds-size-spacing-2; @@ -613,7 +613,7 @@ Cards - Table of Contents 6. Foldable - Desktop Disable --------------------------------------------------------------------*/ @mixin desktop-disable { - border-left: 1px solid $uds-color-base-gray-3; + border-left: 1px solid $uds-color-base-grayscale-5; .accordion-header { h4 a, h4 button { @@ -694,8 +694,8 @@ Cards - Table of Contents .accordion { .accordion-item { - border-bottom: 1px solid $uds-color-base-gray-3; - border-top: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $uds-color-base-grayscale-5; + border-top: 1px solid $uds-color-base-grayscale-5; } .accordion-header .accordion-icon { display: flex; @@ -737,7 +737,7 @@ Cards - Table of Contents --------------------------------------------------------------------*/ .media-type-overlay { background-color: white; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; border-radius: 32px; width: 64px; height: 64px; @@ -755,7 +755,7 @@ Cards - Table of Contents color: $white; .fa-video { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; font-size: 2rem; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_display-list.scss b/packages/unity-bootstrap-theme/src/scss/extends/_display-list.scss index 5e79c47bc..01eb584ac 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_display-list.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_display-list.scss @@ -1,10 +1,10 @@ ul.uds-display-list { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; font-size: 1rem; li { span { - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; display: block; font-size: 0.875rem; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_dividers.scss b/packages/unity-bootstrap-theme/src/scss/extends/_dividers.scss index 27a4aeb11..da4fc6fc6 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_dividers.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_dividers.scss @@ -2,7 +2,7 @@ hr { border-top: 0; height: 1px; margin: $uds-size-spacing-6 0; - background-color: $uds-color-base-gray-3; + background-color: $uds-color-base-grayscale-5; opacity: 1; &.copy-divider { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss index 5d29c4d96..1ac822bfb 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss @@ -23,7 +23,7 @@ form.uds-form { } &.uds-form-label-disabled { - color: $uds-color-base-gray-6; + color: $uds-color-base-grayscale-2; } &.form-check-label::before{ @@ -41,20 +41,20 @@ form.uds-form { /* Input text */ .form-control, .form-select { - color: $uds-color-base-gray-7; - border: 1px solid $uds-color-base-gray-5; + color: $uds-color-base-grayscale-1; + border: 1px solid $uds-color-base-grayscale-3; &.is-invalid::placeholder { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } /* Disabled input */ &:disabled, &[readonly] { - color: $uds-color-base-gray-4; - background: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-4; + background: $uds-color-base-grayscale-6; &::placeholder { - color: $uds-color-base-gray-6; + color: $uds-color-base-grayscale-2; } } } @@ -73,13 +73,13 @@ form.uds-form { textarea:focus, select:focus { outline: none!important; - box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important; - border: 1px solid $uds-color-base-gray-7 !important; + box-shadow: 0 0 0 1px $uds-color-base-grayscale-1 !important; + border: 1px solid $uds-color-base-grayscale-1 !important; border-radius: none; } input[type="submit"]:focus { - box-shadow: $uds-color-base-white 0 0 0 2px, $uds-color-base-gray-7 0px 0px 0px 4px !important; + box-shadow: $uds-color-base-white 0 0 0 2px, $uds-color-base-grayscale-1 0px 0px 0px 4px !important; border: 0 !important; } @@ -134,7 +134,7 @@ form.uds-form { position: absolute; display: inline-block; left: -2.25rem; - border: 1px solid $uds-color-base-gray-5; + border: 1px solid $uds-color-base-grayscale-3; width: $uds-size-spacing-3; height: $uds-size-spacing-3; background: white; @@ -157,18 +157,18 @@ form.uds-form { } &:focus { + label::before { - border: 2px solid $uds-color-base-gray-7; + border: 2px solid $uds-color-base-grayscale-1; } } &:disabled { + label::before { - background: $uds-color-base-gray-2; + background: $uds-color-base-grayscale-6; } } // We can use this little trick here because the label follows the // disabled input. &:disabled + label { - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; } } @@ -228,7 +228,7 @@ form.uds-form { } // Radios and checks individual labels shouldn't be colored. .form-check-input:invalid ~ .form-check-label { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } //&.was-validated .form-control:valid { @@ -244,7 +244,7 @@ form.uds-form { } // Radios and checks individual labels shouldn't be colored. .form-check-input:valid ~ .form-check-label { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } @@ -282,7 +282,7 @@ form.uds-form { .invalid-feedback { display: inline-block; font-weight: bold; - //color: $uds-color-base-gray-7; + //color: $uds-color-base-grayscale-1; svg, i, span { // We don't implement svg icons as bkg images due to need for color // manipulation. @@ -322,7 +322,7 @@ form.uds-form { .valid-feedback { display: inline-block; font-weight: bold; - //color: $uds-color-base-gray-7; + //color: $uds-color-base-grayscale-1; svg, i, span { // We don't implement svg icons as bkg images due to need for color // manipulation. @@ -337,7 +337,7 @@ form.uds-form { position: absolute; right: 0.75rem; top: 0.75rem; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } @@ -346,32 +346,32 @@ form.uds-form { &.uds-form-white { background-color: white; } - &.uds-form-gray1 { - background-color: $uds-color-base-gray-1; + &.uds-form-grayscale7 { + background-color: $uds-color-base-grayscale-7; } - &.uds-form-gray2 { - background-color: $uds-color-base-gray-2; + &.uds-form-grayscale6 { + background-color: $uds-color-base-grayscale-6; /* Dark Radios and Checkboxes */ .form-check { input[type='radio'], input[type='checkbox'] { &:disabled { + label::before { - background: $uds-color-base-gray-4; - border-color: $uds-color-base-gray-5; + background: $uds-color-base-grayscale-4; + border-color: $uds-color-base-grayscale-3; } } // We can use this little trick because the label follows the disabled // input. &:disabled + label { - color: $uds-color-base-gray-6; + color: $uds-color-base-grayscale-2; } } } } - &.uds-form-gray7 { - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-1; + &.uds-form-grayscale1 { + background-color: $uds-color-base-grayscale-1; + color: $uds-color-base-grayscale-7; label, legend { svg, i, span { @@ -383,10 +383,10 @@ form.uds-form { .form-control { &::placeholder { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } &.is-invalid::placeholder { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } &:invalid { @@ -398,11 +398,11 @@ form.uds-form { /* Disabled input */ &:disabled, &[readonly] { - color: $uds-color-base-gray-5; - background: $uds-color-base-gray-6; - border: 1px solid $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; + background: $uds-color-base-grayscale-2; + border: 1px solid $uds-color-base-grayscale-3; &::placeholder { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } } } @@ -410,21 +410,21 @@ form.uds-form { /* Dark Labels */ label, legend { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; &.uds-form-label-disabled { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } } /* Dark Labels, checks, radios and selects, client side, tweaks */ &.was-validated .form-check-input:valid ~ .form-check-label { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } &.was-validated select ~ small.is-valid, &.was-validated select ~ div.is-valid { color: $uds-color-base-green; } &.was-validated .form-check-input:invalid ~ .form-check-label { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } &.was-validated select ~ small.is-invalid, &.was-validated select ~ div.is-invalid { @@ -438,21 +438,21 @@ form.uds-form { input, textarea, select { - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-1; + color: $uds-color-base-grayscale-7; } input::placeholder { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } /* Dark Input focus */ input:focus, textarea:focus, select:focus { - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-1; + color: $uds-color-base-grayscale-7; outline: none!important; - box-shadow: 0 0 0 1px $uds-color-base-gray-1 !important; - border: 1px solid $uds-color-base-gray-1 !important; + box-shadow: 0 0 0 1px $uds-color-base-grayscale-7 !important; + border: 1px solid $uds-color-base-grayscale-7 !important; border-radius: none; } @@ -464,7 +464,7 @@ form.uds-form { // Outer border. &::before { border: 1px solid #707070; - background: $uds-color-base-gray-7; + background: $uds-color-base-grayscale-1; } // Inner positioning for checked. &::after { @@ -472,24 +472,24 @@ form.uds-form { } &:checked { + label::after { - background: $uds-color-base-gray-1; + background: $uds-color-base-grayscale-7; } } &:focus { + label::before { - border: 2px solid $uds-color-base-gray-1; + border: 2px solid $uds-color-base-grayscale-7; } } &:disabled { + label::before { - background: $uds-color-base-gray-6; - border-color: $uds-color-base-gray-5; + background: $uds-color-base-grayscale-2; + border-color: $uds-color-base-grayscale-3; } } // We can use this little trick because the label follows the disabled // input. &:disabled + label { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } } @@ -559,7 +559,7 @@ form.uds-form { .input-group-trailing-icon { svg, i, span { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss b/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss index 4c751bc4d..fa5ef4798 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss @@ -76,7 +76,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); --------------------------------------------------------------*/ #wrapper-header-top { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; @include transition; display: flex; @@ -85,7 +85,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } #header-top { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; @include transition; .nav { @@ -94,7 +94,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .nav-link { - color: $uds-color-base-gray-6; + color: $uds-color-base-grayscale-2; font-size: 0.75rem; font-family: $uds-font-family-base; line-height: 0.75rem; @@ -120,7 +120,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); > a { padding: 0; margin: 0; - color: $uds-color-base-gray-6; + color: $uds-color-base-grayscale-2; text-decoration: none; } @@ -150,11 +150,11 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); margin-left: -95px; font-weight: 400; transition: all 0.5s; - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; } input[type="search"] { - background: url($image-assets-path + "/font-awesome-svg/search-gray-6.svg") + background: url($image-assets-path + "/font-awesome-svg/search-grayscale-2.svg") no-repeat 10px 50%; background-size: 12px; width: 32px; @@ -174,9 +174,9 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } input[type="search"]:focus { - background-image: url($image-assets-path + "/font-awesome-svg/search-gray-5.svg"); + background-image: url($image-assets-path + "/font-awesome-svg/search-grayscale-3.svg"); width: 200px; - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; background-color: #fff; cursor: auto; margin: 0.75rem 0; @@ -285,7 +285,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } #wrapper-header-main { - border-bottom: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $uds-color-base-grayscale-5; background-color: $uds-color-base-white; .container, @@ -339,7 +339,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); a { display: inline-block; &:not(:last-child) { - border-right: 1px solid $uds-color-base-gray-3; + border-right: 1px solid $uds-color-base-grayscale-5; margin-right: $uds-size-spacing-2; padding-right: $uds-size-spacing-2; } @@ -359,7 +359,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .navbar-toggler { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; border: 0; margin-right: $uds-size-spacing-1; padding: 0; @@ -371,7 +371,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .fa-circle.fa-stack-2x { - color: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-6; height: 2rem; width: 2rem; } @@ -418,12 +418,12 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); padding: 0 $uds-size-spacing-4 $uds-size-spacing-3 $uds-size-spacing-4; > a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } > a:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } > a:hover { @@ -439,8 +439,8 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); .nav-link { padding: $uds-size-spacing-2 $uds-size-spacing-4 $uds-size-spacing-1 $uds-size-spacing-4; - border-top: 1px solid $uds-color-base-gray-3; - color: $uds-color-base-gray-7; + border-top: 1px solid $uds-color-base-grayscale-5; + color: $uds-color-base-grayscale-1; white-space: nowrap; svg.fa-home { @@ -448,7 +448,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } &:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } &:after { @@ -467,7 +467,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); .navbar-site-buttons { min-width: max-content; padding: 1rem 2rem; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; flex-flow: initial; .btn { @@ -518,16 +518,16 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .navbar-mobile-footer { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; .navbar-mobile-search { padding: $uds-size-spacing-2 $uds-size-spacing-4; width: 100%; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; input { width: 100%; - background: url($image-assets-path + "/font-awesome-svg/search-gray-6.svg") + background: url($image-assets-path + "/font-awesome-svg/search-grayscale-2.svg") no-repeat 10px 50%; background-size: 16px; background-color: $uds-color-base-white; @@ -545,17 +545,17 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); width: 100%; .nav-link { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; margin-right: 0; text-align: center; width: 100%; font-size: $uds-size-font-small; padding: $uds-size-spacing-2 $uds-size-spacing-3; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; white-space: nowrap; &:nth-child(even) { - border-left: 1px solid $uds-color-base-gray-3; + border-left: 1px solid $uds-color-base-grayscale-5; } } @@ -567,7 +567,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); border: 0; padding: 0; margin: 0; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } @@ -600,7 +600,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .dropdown { - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; &:not(:last-child) { border-bottom: 0; @@ -643,7 +643,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); margin: 0; padding: $uds-size-spacing-2; border: 0; // Overrides BS Option; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; top: 102%; .btn { @@ -687,11 +687,11 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); white-space: normal; &:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } & + .dropdown-item { - border-top: 1px solid $uds-color-base-gray-4; + border-top: 1px solid $uds-color-base-grayscale-4; } } } @@ -810,7 +810,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); margin-bottom: 0; a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } @@ -825,7 +825,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); font-weight: 700; a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } @@ -889,7 +889,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); > .nav-link { border: 0; font-size: $uds-size-font-medium; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; padding: 0.5rem 0.75rem; /* Magic number */ margin-right: $uds-size-spacing-1; @@ -976,7 +976,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); .dropdown-menu { margin: -1px 0 0 0; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; padding: $uds-size-spacing-4; div[class^="col-"] { @@ -995,7 +995,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); .dropdown-col { width: 16rem; padding: 0 $uds-size-spacing-3 0 0; - border-right: 1px solid $uds-color-base-gray-4; + border-right: 1px solid $uds-color-base-grayscale-4; margin-right: $uds-size-spacing-3; &:last-of-type { @@ -1014,7 +1014,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); white-space: normal; &:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } &:hover { @@ -1032,7 +1032,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); .dropdown-menu { background-color: $uds-color-base-white; - border-bottom: 1px solid $uds-color-base-gray-4; + border-bottom: 1px solid $uds-color-base-grayscale-4; width: 100vw; margin-left: calc(-50vw + 50%); margin-top: 0; @@ -1054,7 +1054,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); - background-color: $uds-color-base-gray-4; + background-color: $uds-color-base-grayscale-4; position: relative; top: -1rem; } @@ -1065,7 +1065,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } div[class^="col-"] { - border-right: 1px solid $uds-color-base-gray-4; + border-right: 1px solid $uds-color-base-grayscale-4; padding: 0 $uds-size-spacing-3 $uds-size-spacing-5 $uds-size-spacing-3; position: relative; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss index d65dbe076..0b0827dc5 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss @@ -15,7 +15,7 @@ Footer - Table of Contents --------------------------------------------------------------------*/ @mixin footer-links { - color: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-6; line-height: $uds-size-spacing-3; text-decoration: none; @@ -66,7 +66,7 @@ footer { #wrapper-endorsed-footer { a { - color: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-6; } } @@ -79,16 +79,16 @@ footer { a { margin-right: $uds-size-spacing-3; text-decoration: none; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } #wrapper-footer-colophon { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; a { margin-right: $uds-size-spacing-3; text-decoration: none; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } @@ -138,7 +138,7 @@ footer { .nav-link { font-size: $uds-size-icon-base; - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; line-height: 1; padding-top: 7px; // Magic number. Reducing the padding by 1px to make the height = 48px. @@ -208,7 +208,7 @@ footer { padding-left: 0; a, button { - color: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-6; padding: $uds-size-spacing-3 0; text-decoration: none; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_grid-links.scss b/packages/unity-bootstrap-theme/src/scss/extends/_grid-links.scss index e2c18a43c..01bc82056 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_grid-links.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_grid-links.scss @@ -25,8 +25,8 @@ a { display: flex; @include like-an-h4; - border: 1px solid $uds-color-base-gray-3; - color: $uds-color-base-gray-7; + border: 1px solid $uds-color-base-grayscale-5; + color: $uds-color-base-grayscale-1; background-color: $uds-color-base-white; padding: $uds-size-spacing-3; text-decoration: none; @@ -42,12 +42,12 @@ &.text-gold a { color: $uds-color-base-gold; - background-color: $uds-color-base-gray-7; + background-color: $uds-color-base-grayscale-1; } &.text-white a { color: $uds-color-base-white; - background-color: $uds-color-base-gray-7; + background-color: $uds-color-base-grayscale-1; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_image-based-card-and-hover.scss b/packages/unity-bootstrap-theme/src/scss/extends/_image-based-card-and-hover.scss index 56fa0d609..54867959a 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_image-based-card-and-hover.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_image-based-card-and-hover.scss @@ -128,13 +128,13 @@ .content-bg { background-color: $uds-color-background-white; h3 { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } .hidden-details { max-height: 300px; opacity: 1; .long-text { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; padding: $uds-size-spacing-2 $uds-size-spacing-3 $uds-size-spacing-3; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_image-text-block.scss b/packages/unity-bootstrap-theme/src/scss/extends/_image-text-block.scss index 966bfed69..528a8f0b2 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_image-text-block.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_image-text-block.scss @@ -2,7 +2,7 @@ &-container { width: 100%; max-width: 1920px; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; background: $uds-color-background-white 0% 0% no-repeat padding-box; display: flex; flex-direction: row; @@ -43,7 +43,7 @@ max-width: 50%; padding: 48px 96px; - &.gray-7-bg { + &.grayscale-1-bg { color: $uds-color-base-white; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_images.scss b/packages/unity-bootstrap-theme/src/scss/extends/_images.scss index 38d4426a8..011821ddb 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_images.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_images.scss @@ -5,7 +5,7 @@ margin-bottom: $uds-size-spacing-0; max-width: 900px; img, &:is(img) { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; width: 100%; } @@ -38,21 +38,21 @@ } .uds-figure-caption { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; border-top: none; opacity: 1; background: $uds-color-background-white 0% 0% no-repeat padding-box; padding: 2rem; font-size: $uds-size-font-tiny; h3, .h3 { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; margin: 0 0 1rem 0; } } .uds-caption-text { display: block; max-width: 700px; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_inset-box.scss b/packages/unity-bootstrap-theme/src/scss/extends/_inset-box.scss index 43e6bae86..77529cfbe 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_inset-box.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_inset-box.scss @@ -20,7 +20,7 @@ &-content { background-color: $uds-color-background-white; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; max-width: $uds-breakpoint-xxxl; padding: $uds-size-spacing-4 $uds-size-spacing-8; width: $uds-inset-box-content-basic-width; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_list.scss b/packages/unity-bootstrap-theme/src/scss/extends/_list.scss index 6b93740c5..d6e8c4b0b 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_list.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_list.scss @@ -123,19 +123,19 @@ ol.uds-list { margin-left: 0rem; margin-bottom: 0rem; - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-1; + color: $uds-color-base-grayscale-6; // Default white list bullets (for dark mode) li { - --li-before-color: #{$uds-color-base-gray-2}; + --li-before-color: #{$uds-color-base-grayscale-6}; } // Gold list bullets (for dark mode) &.gold li { --li-before-color: #{$uds-color-base-gold}; } &.uds-steplist li:before { - --li-before-background-color: #{$uds-color-base-gray-2}; - --li-before-color: #{$uds-color-base-gray-7}; + --li-before-background-color: #{$uds-color-base-grayscale-6}; + --li-before-color: #{$uds-color-base-grayscale-1}; } } @@ -145,7 +145,7 @@ ol.uds-list { margin-left: 0rem; margin-bottom: 0rem; - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; } // Light smoke mode. @@ -154,7 +154,7 @@ ol.uds-list { margin-left: 0rem; // Reused token margin-bottom: 0rem; // Reused token - background-color: $uds-color-base-gray-1; // Magic background color. + background-color: $uds-color-base-grayscale-7; // Magic background color. } } @@ -213,7 +213,7 @@ ol.uds-list, padding-bottom: 2rem; padding-left: $uds-size-spacing-6; margin-bottom: 3rem; - border-bottom: 1px solid $uds-color-base-gray-4; + border-bottom: 1px solid $uds-color-base-grayscale-4; font-weight: bold; span { @@ -224,9 +224,9 @@ ol.uds-list, } &:before { - --li-before-background-color: #{$uds-color-base-gray-7}; + --li-before-background-color: #{$uds-color-base-grayscale-1}; --li-before-content: counter(listcounter); // Remove space because it messes with centering. - --li-before-color: #{$uds-color-base-gray-1}; + --li-before-color: #{$uds-color-base-grayscale-7}; --li-before-font-size: 1.25rem; border-radius: 50rem; padding: 0.4rem 0.8rem; @@ -241,7 +241,7 @@ ol.uds-list, &.uds-steplist-gold li:before { --li-before-background-color: #{$uds-color-base-gold}; - --li-before-color: #{$uds-color-base-gray-7}; + --li-before-color: #{$uds-color-base-grayscale-1}; } &.uds-steplist-maroon li:before { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_misc.scss b/packages/unity-bootstrap-theme/src/scss/extends/_misc.scss index cfbfe4cf5..f247ec2f9 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_misc.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_misc.scss @@ -1,5 +1,5 @@ @mixin footer-links { - color: $uds-color-base-gray-2; + color: $uds-color-base-grayscale-6; line-height: $uds-size-spacing-3; text-decoration: none; @@ -64,7 +64,7 @@ label { margin-bottom: 0; } .card-title a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; display: inline-block; margin: 4px; @@ -84,7 +84,7 @@ label { background-color: $white; } .card-degree .card-footer a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; font-weight: bold; } @@ -127,6 +127,6 @@ input:focus, textarea:focus, select:focus { outline: none !important; - box-shadow: 0px 0px 0px 2px $uds-color-base-white, 0px 0px 0px 4px $uds-color-base-gray-7 !important; + box-shadow: 0px 0px 0px 2px $uds-color-base-white, 0px 0px 0px 4px $uds-color-base-grayscale-1 !important; z-index: 1; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss b/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss index e9c4715e5..55d53c8de 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss @@ -45,7 +45,7 @@ align-items: center; .fa-xmark { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; font-size: $uds-size-font-small; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss b/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss index bfb1267ab..cae05b3f5 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss @@ -35,15 +35,15 @@ a.page-link { font-size: 14px; } .page-item:not(.active) &:not(:focus):visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } a.page-link:hover { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; text-decoration: none; } .page-item.active a.page-link:hover { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } span.page-link { @@ -82,13 +82,13 @@ span.page-link { overflow-x: auto; padding: $pagination-padding-y $pagination-padding-x; gap: 1rem; - &.uds-bg-gray1 { - background-color: $uds-color-base-gray-1; + &.uds-bg-grayscale7 { + background-color: $uds-color-base-grayscale-7; :not(.active) .page-link { - background-color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-7; &:hover { - background-color: $uds-color-base-gray-4; + background-color: $uds-color-base-grayscale-4; color: $uds-color-font-dark-base; } } @@ -100,7 +100,7 @@ span.page-link { :not(.active) .page-link { background-color: $uds-color-background-gray; &:hover { - background-color: $uds-color-base-gray-4; + background-color: $uds-color-base-grayscale-4; color: $uds-color-font-dark-base; } } @@ -111,16 +111,16 @@ span.page-link { .page-item { &:last-child .page-link-icon::after { - @include bg-arrow-icon($uds-color-base-gray-1, right); + @include bg-arrow-icon($uds-color-base-grayscale-7, right); } &:first-child .page-link-icon::before { - @include bg-arrow-icon($uds-color-base-gray-1, left); + @include bg-arrow-icon($uds-color-base-grayscale-7, left); } } .page-link { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } .active .page-link { @@ -132,8 +132,8 @@ span.page-link { :not(.active) .page-link { background-color: $uds-color-background-dark; &:hover { - background-color: $uds-color-base-gray-5; - color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-3; + color: $uds-color-base-grayscale-7; } } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss b/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss index 9b6240dfe..a3741a7a4 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss @@ -30,8 +30,8 @@ Desktop styles max-width: var(--max-width); &.fill { - background-color: $uds-color-base-gray-1; - border: 1px solid $uds-color-base-gray-3; + background-color: $uds-color-base-grayscale-7; + border: 1px solid $uds-color-base-grayscale-5; padding: 32px; } .profile-img-container { @@ -97,7 +97,7 @@ Desktop styles } } &.person-social-medias a { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; font-size: 1.75rem; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss index 83270a37c..c8e234807 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss @@ -1,7 +1,7 @@ .card-ranking { height: 543px; position: relative; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; overflow: hidden; --ranking-card-text-padding: 1.5rem; @@ -46,14 +46,14 @@ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } svg.fa-chevron-up, i.fa-chevron-up, .fa-chevron-up { transition: all 0.3s ease-in-out; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss b/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss index 5fd3a389a..a27c8fffa 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss @@ -29,7 +29,7 @@ $nav-item-min-height: 3rem; --------------------------------------------------------------------*/ .sidebar-toggler { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; display: flex; align-items: center; justify-content: space-between; @@ -55,7 +55,7 @@ $nav-item-min-height: 3rem; } .sidebar { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; a:first-child { border-top: 0; @@ -63,9 +63,9 @@ $nav-item-min-height: 3rem; .nav-text { @include like-an-h5; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; padding: $uds-size-spacing-2; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; &:not(:last-child) { border-bottom: 0; @@ -75,7 +75,7 @@ $nav-item-min-height: 3rem; .nav-link { position: relative; padding: 0 $uds-size-spacing-1; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; @include like-an-h4; &:not(.is-active) { @@ -89,7 +89,7 @@ $nav-item-min-height: 3rem; } &:visited { - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; } &.is-active { @@ -117,18 +117,18 @@ $nav-item-min-height: 3rem; > .nav-link-container { @include nav-item-container; overflow: hidden; - color: $uds-color-base-gray-7; + color: $uds-color-base-grayscale-1; display: flex; flex-direction: column; justify-content: center; &:not(:first-child) { - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; } } .card-foldable { border: 0; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $uds-color-base-grayscale-5; .card-header, .card-body { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss b/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss index 030461bd9..952670485 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss @@ -1,5 +1,5 @@ .uds-tabbed-panels { - box-shadow: inset 0px -2px 0px 0px $uds-color-base-gray-4; + box-shadow: inset 0px -2px 0px 0px $uds-color-base-grayscale-4; flex-wrap: inherit; overflow: hidden; position: relative; @@ -58,7 +58,7 @@ &-dark { .nav-tabs { .nav-link { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } .nav-link.active { @@ -126,8 +126,8 @@ top: 50%; left: 0; transform: translate(0, -50%); - background-color: $uds-color-base-gray-1; - border: solid 1px $uds-color-base-gray-3; + background-color: $uds-color-base-grayscale-7; + border: solid 1px $uds-color-base-grayscale-5; border-radius: 100%; color: #000; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_tables.scss b/packages/unity-bootstrap-theme/src/scss/extends/_tables.scss index ae930b82f..8644eba36 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_tables.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_tables.scss @@ -1,5 +1,5 @@ .uds-table { - border: 1px solid $uds-color-base-gray-2; + border: 1px solid $uds-color-base-grayscale-6; overflow-x: auto; & > table { @@ -27,7 +27,7 @@ > thead { > tr { &:first-child th { - background-color: $uds-color-base-gray-3; + background-color: $uds-color-base-grayscale-5; } } } @@ -45,7 +45,7 @@ &:nth-child(2n) { th, td { - background-color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-7; } } @@ -53,7 +53,7 @@ &:focus { th, td { - background-color: $uds-color-base-gray-2; + background-color: $uds-color-base-grayscale-6; } } @@ -76,7 +76,7 @@ } caption, figcaption { - background-color: var(--bs-gray-1); + background-color: var(--bs-grayscale-7); caption-side: top; font-size: 0.85rem; padding: 1rem; @@ -87,7 +87,7 @@ .uds-table-fixed { overflow-x: auto; - border: 1px solid $uds-color-base-gray-2; + border: 1px solid $uds-color-base-grayscale-6; scroll-behavior: smooth; &-wrapper { .scroll-control { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss b/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss index ca1880fe4..417bd3d96 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss @@ -35,7 +35,7 @@ button.uds-tooltip { outline: inherit; .fa-circle { - color: $uds-color-base-gray-3; + color: $uds-color-base-grayscale-5; } .fa-info { @@ -60,19 +60,19 @@ button.uds-tooltip { } } -button.uds-tooltip-gray-1 { +button.uds-tooltip-grayscale-7 { .fa-circle { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } .fa-info { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; } } button.uds-tooltip-gray { .fa-circle { - color: $uds-color-base-gray-4; + color: $uds-color-base-grayscale-4; } .fa-info { @@ -82,7 +82,7 @@ button.uds-tooltip-gray { button.uds-tooltip-dark { .fa-circle { - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; } .fa-info { @@ -91,8 +91,8 @@ button.uds-tooltip-dark { } div[role='tooltip'].uds-tooltip-description { - background: $uds-color-base-gray-7 0% 0% no-repeat padding-box; - color: $uds-color-base-gray-1; + background: $uds-color-base-grayscale-1 0% 0% no-repeat padding-box; + color: $uds-color-base-grayscale-7; font: normal normal normal $uds-size-spacing-2 Arial; line-height: $uds-size-spacing-3; margin: 0px 5px; @@ -106,7 +106,7 @@ div[role='tooltip'].uds-tooltip-description { z-index: 1; & > span.uds-tooltip-heading { - color: $uds-color-base-gray-1; + color: $uds-color-base-grayscale-7; display: block; font: normal normal bold $uds-size-spacing-2 Arial; letter-spacing: 0px; @@ -133,7 +133,7 @@ span.uds-tooltip-visually-hidden { } .uds-tooltip-bg-base-gray { - background-color: $uds-color-base-gray-1; + background-color: $uds-color-base-grayscale-7; } .uds-tooltip-bg-gray { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_video.scss b/packages/unity-bootstrap-theme/src/scss/extends/_video.scss index 09b655ff2..524a44105 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_video.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_video.scss @@ -1,6 +1,6 @@ .uds-video { &-with-caption { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $uds-color-base-grayscale-5; figure { margin: 0; @@ -8,7 +8,7 @@ align-items: center; figcaption { - color: $uds-color-base-gray-5; + color: $uds-color-base-grayscale-3; font-size: $uds-size-font-tiny; margin: $uds-size-spacing-1 $uds-size-spacing-2 $uds-size-spacing-2 $uds-size-spacing-2; diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_breadcrumb.scss b/packages/unity-bootstrap-theme/src/scss/variables/_breadcrumb.scss index e15b31a25..eace49dab 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_breadcrumb.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_breadcrumb.scss @@ -9,6 +9,6 @@ $breadcrumb-item-padding: 0.5rem; $breadcrumb-margin-bottom: 1rem; $breadcrumb-bg: transparent; -$breadcrumb-divider-color: $uds-color-base-gray-4; -$breadcrumb-active-color: $uds-color-base-gray-7; +$breadcrumb-divider-color: $uds-color-base-grayscale-4; +$breadcrumb-active-color: $uds-color-base-grayscale-1; $breadcrumb-divider: "/"; diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss b/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss index 31e20ac3c..d2d9ec340 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss @@ -2,35 +2,36 @@ // Reference: https://hub.asu.edu/brand-hq/brand-standards/color-palette $white: $uds-color-base-white; -$gray-1: $uds-color-base-gray-1; -$gray-2: $uds-color-base-gray-2; -$gray-3: $uds-color-base-gray-3; -$gray-4: $uds-color-base-gray-4; -$gray-5: $uds-color-base-gray-5; -$gray-6: $uds-color-base-gray-6; -$gray-7: $uds-color-base-gray-7; +$grayscale-7: $uds-color-base-grayscale-7; +$grayscale-6: $uds-color-base-grayscale-6; +$grayscale-5: $uds-color-base-grayscale-5; +$grayscale-4: $uds-color-base-grayscale-4; +$grayscale-3: $uds-color-base-grayscale-3; +$grayscale-2: $uds-color-base-grayscale-2; +$grayscale-1: $uds-color-base-grayscale-1; -$body-color: $uds-color-base-gray-7; +$body-color: $uds-color-base-grayscale-1; $grays: (); +// Deprecated aliases for grays (incorrect reversed order) $grays: map-merge( ( - '1': $gray-1, - '2': $gray-2, - '3': $gray-3, - '4': $gray-4, - '5': $gray-5, - '6': $gray-6, - '7': $gray-7, + '1': $grayscale-7, + '2': $grayscale-6, + '3': $grayscale-5, + '4': $grayscale-4, + '5': $grayscale-3, + '6': $grayscale-2, + '7': $grayscale-1, ), $grays ); $gold: $uds-color-base-gold; $maroon: $uds-color-base-maroon; -$dark: $uds-color-base-gray-7; -$light: $uds-color-base-gray-2; +$dark: $uds-color-base-grayscale-1; +$light: $uds-color-base-grayscale-6; $blue: $uds-color-base-blue; $green: $uds-color-base-green; $orange: $uds-color-base-orange; @@ -74,15 +75,15 @@ $theme-colors: map-merge( 'warning': $warning, 'danger': $danger, 'light': $light, - 'gray': $gray-4, + 'gray': $grayscale-4, 'dark': $dark, - 'gray-1': $gray-1, - 'gray-2': $gray-2, - 'gray-3': $gray-3, - 'gray-4': $gray-4, - 'gray-5': $gray-5, - 'gray-6': $gray-6, - 'gray-7': $gray-7, + 'grayscale-1': $grayscale-1, + 'grayscale-2': $grayscale-2, + 'grayscale-3': $grayscale-3, + 'grayscale-4': $grayscale-4, + 'grayscale-5': $grayscale-5, + 'grayscale-6': $grayscale-6, + 'grayscale-7': $grayscale-7, ), $theme-colors ); @@ -114,7 +115,7 @@ $card-cap-bg: rgba($white, 0.03); $nav-tabs-link-color: $dark; $nav-tabs-border-width: 1px; -$nav-tabs-border-color: $gray-3; +$nav-tabs-border-color: $grayscale-5; $nav-tabs-border-radius: 0; $nav-tabs-link-active-color: $maroon; $nav-tabs-link-active-border-color: $maroon; diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_dropdown.scss b/packages/unity-bootstrap-theme/src/scss/variables/_dropdown.scss index fbedf763b..ab01f8a0c 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_dropdown.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_dropdown.scss @@ -1,12 +1,12 @@ $dropdown-border-radius: 0; -$dropdown-border-color: $uds-color-base-gray-2; +$dropdown-border-color: $uds-color-base-grayscale-6; $dropdown-border-width: 1px; -$dropdown-link-color: $uds-color-base-gray-7; +$dropdown-link-color: $uds-color-base-grayscale-1; $dropdown-link-hover-color: $uds-color-base-maroon; $dropdown-link-hover-bg: transparent; -$dropdown-link-active-color: $uds-color-base-gray-7; +$dropdown-link-active-color: $uds-color-base-grayscale-1; $dropdown-link-active-bg: transparent; -$dropdown-link-disabled-color: $uds-color-base-gray-5; +$dropdown-link-disabled-color: $uds-color-base-grayscale-3; $dropdown-item-padding-y: $uds-size-spacing-1; diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_form-fields.scss b/packages/unity-bootstrap-theme/src/scss/variables/_form-fields.scss index 1eba609f9..fcdabbbb1 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_form-fields.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_form-fields.scss @@ -1,6 +1,6 @@ // Bootstrap form field variables to override. -$input-placeholder-color: $uds-color-base-gray-5; +$input-placeholder-color: $uds-color-base-grayscale-3; $input-border-radius: 0; $input-border-radius-sm: 0; $input-border-radius-lg: 0; diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_headings.scss b/packages/unity-bootstrap-theme/src/scss/variables/_headings.scss index 2aee40ba1..63ee388ad 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_headings.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_headings.scss @@ -38,13 +38,13 @@ $heading-five-line-height: 1.5rem; $heading-five-letter-spacing: -0.015rem; $heading-highlight-gold-background-color: $uds-color-base-gold; -$heading-highlight-gold-text-color: $uds-color-base-gray-7; +$heading-highlight-gold-text-color: $uds-color-base-grayscale-1; -$heading-highlight-black-background-color: $uds-color-base-gray-7; -$heading-highlight-black-text-color: $uds-color-base-gray-1; +$heading-highlight-black-background-color: $uds-color-base-grayscale-1; +$heading-highlight-black-text-color: $uds-color-base-grayscale-7; $heading-highlight-white-background-color: $uds-color-base-white; -$heading-highlight-white-text-color: $uds-color-base-gray-7; +$heading-highlight-white-text-color: $uds-color-base-grayscale-1; @mixin heading-highlight-large-box-shadow($bsColor, $textColor) { box-shadow: -0.15em diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_pager.scss b/packages/unity-bootstrap-theme/src/scss/variables/_pager.scss index 0183caf30..5047960ea 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_pager.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_pager.scss @@ -1,4 +1,4 @@ -$pagination-color: $uds-color-base-gray-7; +$pagination-color: $uds-color-base-grayscale-1; $pagination-border-width: 0rem; $pagination-border-color: rgba(0, 0, 0, 0); $pagination-outline: 0; From 2e6c0eadaf37f580437d26c6f8e6c3dd99342f76 Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Thu, 10 Jul 2025 10:05:06 -0700 Subject: [PATCH 02/36] fix(unity-bootstrap-theme): fix gray color alignment with brand brand gray scale has 1-7 (dark to light), This change aligns css to follow 1-dark to 7-light --- packages/unity-bootstrap-theme/UPGRADE.md | 2 +- .../blockquote/blockquote.examples.stories.js | 12 +- .../blockquote.templates.stories.js | 10 +- .../breadcrumb/breadcrumb.examples.stories.js | 12 +- .../breadcrumb.templates.stories.js | 2 +- .../form-fields.examples.stories.js | 212 +++++++++--------- .../tooltips/tooltips.templates.stories.js | 2 +- .../design/alignment/alignment.stories.js | 8 +- .../design/backgrounds/backgrounds.stories.js | 6 +- .../stories/design/colors/colors.stories.js | 34 +-- .../stories/design/layout/layout.stories.js | 60 ++--- .../design/typography/typography.stories.js | 36 +-- .../accordion/accordion-basics.stories.mdx | 4 +- .../grid-links/grid-links-basics.stories.mdx | 4 +- .../molecules/cards/cards.examples.stories.js | 6 +- .../image-text-block.templates.stories.js | 6 +- .../inset-box/inset-box.examples.stories.js | 4 +- .../inset-box/inset-box.templates.stories.js | 8 +- .../tabbed-panels.templates.stories.js | 6 +- .../global-header.examples.stories.js | 2 +- .../global-header/global-header.templates.jsx | 6 +- .../grid-links.templates.stories.js | 6 +- 22 files changed, 224 insertions(+), 224 deletions(-) diff --git a/packages/unity-bootstrap-theme/UPGRADE.md b/packages/unity-bootstrap-theme/UPGRADE.md index 88dc5fe78..42673def0 100644 --- a/packages/unity-bootstrap-theme/UPGRADE.md +++ b/packages/unity-bootstrap-theme/UPGRADE.md @@ -70,7 +70,7 @@ Regex of tag attribute changes: * change `mr-\d` to `me-$1` * change `ml-\d` to `ms-$1` * change `sr-only` to `visually-hidden` to visually hide an element while still allowing it to be exposed to assistive technologies. If you need an element to appear when focused, use `visually-hidden-focusable`. -* change `badge-gray-2` to `text-bg-gray-2` (may be other variations) +* change `badge-grayscale-6` to `text-bg-grayscale-6` (may be other variations) New class pattern .text-bg-{color} used in badges diff --git a/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js index bff33af58..ff4e94529 100644 --- a/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js +++ b/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js @@ -31,7 +31,7 @@ export const BlockquoteNoImage = () => ( -