From a03380705559aa3b9016304abfbc2e62ca94af64 Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Fri, 26 Sep 2025 11:59:41 -0700 Subject: [PATCH 1/2] chore(unity-bootstrap-theme): fix sass gray names generated files have no changes --- .../src/scss/_custom-asu-variables.scss | 31 ++++-- .../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 | 16 +-- .../src/scss/extends/_calendar.scss | 16 +-- .../src/scss/extends/_cards.scss | 36 +++--- .../src/scss/extends/_display-list.scss | 4 +- .../src/scss/extends/_dividers.scss | 2 +- .../src/scss/extends/_form-fields.scss | 104 +++++++++--------- .../src/scss/extends/_global-header.scss | 73 ++++++------ .../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 | 10 +- .../src/scss/extends/_tooltips.scss | 20 ++-- .../src/scss/extends/_video.scss | 4 +- .../src/scss/variables/_breadcrumb.scss | 4 +- .../src/scss/variables/_colors.scss | 50 ++++----- .../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 +- packages/unity-bootstrap-theme/vite.config.js | 8 +- .../BaseCarousel/glide/glide.theme.scss | 4 +- 40 files changed, 305 insertions(+), 293 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 06a8e4cd21..67a932b68a 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,22 @@ $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 +// Deprecated-start +$uds-color-base-gray-1: #fafafa; // Deprecated use $asu-gray-7 instead. +$uds-color-base-gray-2: #e8e8e8; // Deprecated use $asu-gray-6 instead. +$uds-color-base-gray-3: #d0d0d0; // Deprecated use $asu-gray-5 instead. +$uds-color-base-gray-4: #bfbfbf; // Deprecated use $asu-gray-4 instead. +$uds-color-base-gray-5: #747474; // Deprecated use $asu-gray-3 instead. +$uds-color-base-gray-6: #484848; // Deprecated use $asu-gray-2 instead. +$uds-color-base-gray-7: #191919; // Deprecated use $asu-gray-1 instead. +// Deprecated-end +$asu-gray-1: #191919; // Brand guideline ASU Gray 1 - Base font color and default black level +$asu-gray-2: #484848; // Brand guideline ASU Gray 2 +$asu-gray-3: #747474; // Brand guideline ASU Gray 3 +$asu-gray-4: #bfbfbf; // Brand guideline ASU Gray 4 +$asu-gray-5: #d0d0d0; // Brand guideline ASU Gray 5 +$asu-gray-6: #e8e8e8; // Brand guideline ASU Gray 6 +$asu-gray-7: #fafafa; // Brand guideline ASU Gray 7 $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 +70,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: $asu-gray-6; // Background - Gray +$uds-color-background-dark: $asu-gray-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: $asu-gray-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: $asu-gray-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 9ffebb3226..6470c2256d 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: $asu-gray-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 88cda4f49f..30edd0d70e 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: $asu-gray-1; +$ws2-gray-darker: $asu-gray-2; +$ws2-gray-dark: $asu-gray-3; +$ws2-gray: $asu-gray-4; +$ws2-gray-light: $asu-gray-5; +$ws2-gray-lighter: $asu-gray-6; +$ws2-gray-lightest: $asu-gray-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 524229ccad..138af3579e 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 $asu-gray-5; z-index: 100; &-wrapper { @@ -47,14 +47,14 @@ } .nav-link { - color: $uds-color-base-gray-7; + color: $asu-gray-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 $asu-gray-5; } &:hover, @@ -64,11 +64,11 @@ } &:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } &:focus { - box-shadow: 0px 0px 0px 2px $uds-color-base-gray-7 !important; + box-shadow: 0px 0px 0px 2px $asu-gray-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 $asu-gray-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 00f8b4d188..c04529e688 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: $asu-gray-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 7bbacd0e48..48af520510 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; +.gray-7-bg, %todo_update_class_name { + background: $asu-gray-1; } -.gray-2-bg { - background: $uds-color-base-gray-2; +.gray-2-bg, %todo_update_class_name { + background: $asu-gray-6; } -.gray-1-bg { - background: $uds-color-base-gray-1; +.gray-1-bg, %todo_update_class_name { + background: $asu-gray-7; } .white-bg { background: $uds-color-base-white; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-5; } .image-bg { @@ -45,9 +45,9 @@ } .content-description-container { - background-color: $uds-color-base-gray-1; + background-color: $asu-gray-7; width: 100%; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-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 $asu-gray-3; height: 251px; margin: 20px 0 100px 0; font-size: 50px; - color: $uds-color-base-gray-3; + color: $asu-gray-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 966d6625d6..986f2ff7f8 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: $asu-gray-1; width: $uds-size-spacing-5; height: auto; } @@ -251,7 +251,7 @@ blockquote:before { &:before { content: ''; display: block; - background-color: $uds-color-base-gray-7; + background-color: $asu-gray-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 113ad41aba..e60bbd25d6 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-gray-7, %todo_update_class_name { a { color: $uds-color-base-gold; } li.active { &, a { - color: $uds-color-base-gray-1; + color: $asu-gray-7; } } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss index 247fb9ef82..92bd6929c0 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: $asu-gray-6; &.btn-tag-alt-white { - background: $gray-2; + background: $asu-gray-6; color: $body-color; } &.btn-tag-alt-gray { - background: $gray-3; + background: $asu-gray-5; color: $body-color; } &.btn-tag-alt-black { - background: $gray-4; + background: $asu-gray-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 $asu-gray-5; &.btn-circle-alt-white { - background: $gray-2; + background: $asu-gray-6; color: $body-color; } &.btn-circle-alt-gray { @@ -60,7 +60,7 @@ } &.btn-circle-alt-black { background: $white; - color: $gray-7; + color: $asu-gray-1; } &.btn-circle-large { width: $uds-size-spacing-8 !important; @@ -81,7 +81,7 @@ } } .bg-light-gray { - background-color: $gray-1; + background-color: $asu-gray-7; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss b/packages/unity-bootstrap-theme/src/scss/extends/_calendar.scss index 114f9a241d..7ed2fbcb1b 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 $asu-gray-3; + border-left: 1px solid $asu-gray-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 $asu-gray-3; + border-right: 1px solid $asu-gray-3; margin: 0; } .today { @@ -35,16 +35,16 @@ } .prev, .next { - color: $uds-color-base-gray-5; + color: $asu-gray-3; } } } .calendar-nav { text-align: center; button { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-5; border-radius: $uds-component-border-radius; - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-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 $asu-gray-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 c6c9191f32..8996f98688 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss @@ -269,7 +269,7 @@ Cards - Table of Contents .card-title a, .card-title a:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; } @@ -296,7 +296,7 @@ Cards - Table of Contents .card-footer-link a, .card-footer-link a:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; font-weight: bold; display: block; @@ -510,7 +510,7 @@ Cards - Table of Contents } .accordion-item { - border-color: $uds-color-base-gray-3; + border-color: $asu-gray-5; border-left: $uds-size-spacing-1 solid $uds-color-base-gold; height: auto; @@ -519,11 +519,11 @@ Cards - Table of Contents } &.accordion-item-gray { - border-left-color: $uds-color-base-gray-4; + border-left-color: $asu-gray-4; } &.accordion-item-dark { - border-left-color: $uds-color-base-gray-7; + border-left-color: $asu-gray-1; } .accordion-header { @@ -544,7 +544,7 @@ Cards - Table of Contents } &:hover { - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-6; } h3 { @@ -559,7 +559,7 @@ Cards - Table of Contents a, button { margin: .4rem .3rem; padding: .6rem .7rem; - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; display: flex; flex-wrap: nowrap; @@ -586,8 +586,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 $asu-gray-1 !important; + border: 1px solid $asu-gray-1 !important; margin: 4px; width: -webkit-fill-available; } @@ -596,12 +596,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 $asu-gray-5; } } .accordion-body { - background-color: $uds-color-base-gray-1; + background-color: $asu-gray-7; > p:first-child { margin-top: $uds-size-spacing-2; @@ -617,7 +617,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 $asu-gray-5; .accordion-header { h4 a, h4 button { @@ -698,14 +698,14 @@ Cards - Table of Contents .accordion { &: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 $asu-gray-1 !important; + border: 1px solid $asu-gray-1 !important; margin: 4px; width: -webkit-fill-available; } .accordion-item { - border-bottom: 1px solid $uds-color-base-gray-3; - border-top: 1px solid $uds-color-base-gray-3; + border-bottom: 1px solid $asu-gray-5; + border-top: 1px solid $asu-gray-5; } .accordion-header .accordion-icon { display: flex; @@ -747,7 +747,7 @@ Cards - Table of Contents --------------------------------------------------------------------*/ .media-type-overlay { background-color: white; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-5; border-radius: 32px; width: 64px; height: 64px; @@ -765,7 +765,7 @@ Cards - Table of Contents color: $white; .fa-video { - color: $uds-color-base-gray-7; + color: $asu-gray-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 5e79c47bc7..7e0c9ad44c 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: $asu-gray-1; font-size: 1rem; li { span { - color: $uds-color-base-gray-5; + color: $asu-gray-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 27a4aeb111..6f419dfe94 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: $asu-gray-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 5d29c4d963..1080000278 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: $asu-gray-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: $asu-gray-1; + border: 1px solid $asu-gray-3; &.is-invalid::placeholder { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } /* Disabled input */ &:disabled, &[readonly] { - color: $uds-color-base-gray-4; - background: $uds-color-base-gray-2; + color: $asu-gray-4; + background: $asu-gray-6; &::placeholder { - color: $uds-color-base-gray-6; + color: $asu-gray-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 $asu-gray-1 !important; + border: 1px solid $asu-gray-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, $asu-gray-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 $asu-gray-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 $asu-gray-1; } } &:disabled { + label::before { - background: $uds-color-base-gray-2; + background: $asu-gray-6; } } // We can use this little trick here because the label follows the // disabled input. &:disabled + label { - color: $uds-color-base-gray-5; + color: $asu-gray-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: $asu-gray-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: $asu-gray-1; } } @@ -282,7 +282,6 @@ form.uds-form { .invalid-feedback { display: inline-block; font-weight: bold; - //color: $uds-color-base-gray-7; svg, i, span { // We don't implement svg icons as bkg images due to need for color // manipulation. @@ -322,7 +321,6 @@ form.uds-form { .valid-feedback { display: inline-block; font-weight: bold; - //color: $uds-color-base-gray-7; svg, i, span { // We don't implement svg icons as bkg images due to need for color // manipulation. @@ -337,7 +335,7 @@ form.uds-form { position: absolute; right: 0.75rem; top: 0.75rem; - color: $uds-color-base-gray-7; + color: $asu-gray-1; } } @@ -346,32 +344,32 @@ form.uds-form { &.uds-form-white { background-color: white; } - &.uds-form-gray1 { - background-color: $uds-color-base-gray-1; + &.uds-form-gray1, %todo_update_class_name { + background-color: $asu-gray-7; } - &.uds-form-gray2 { - background-color: $uds-color-base-gray-2; + &.uds-form-gray2, %todo_update_class_name { + background-color: $asu-gray-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: $asu-gray-4; + border-color: $asu-gray-3; } } // We can use this little trick because the label follows the disabled // input. &:disabled + label { - color: $uds-color-base-gray-6; + color: $asu-gray-2; } } } } - &.uds-form-gray7 { - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-1; + &.uds-form-gray7, %todo_update_class_name { + background-color: $asu-gray-1; + color: $asu-gray-7; label, legend { svg, i, span { @@ -383,10 +381,10 @@ form.uds-form { .form-control { &::placeholder { - color: $uds-color-base-gray-4; + color: $asu-gray-4; } &.is-invalid::placeholder { - color: $uds-color-base-gray-1; + color: $asu-gray-7; } &:invalid { @@ -398,11 +396,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: $asu-gray-3; + background: $asu-gray-2; + border: 1px solid $asu-gray-3; &::placeholder { - color: $uds-color-base-gray-4; + color: $asu-gray-4; } } } @@ -410,21 +408,21 @@ form.uds-form { /* Dark Labels */ label, legend { - color: $uds-color-base-gray-1; + color: $asu-gray-7; &.uds-form-label-disabled { - color: $uds-color-base-gray-4; + color: $asu-gray-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: $asu-gray-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: $asu-gray-7; } &.was-validated select ~ small.is-invalid, &.was-validated select ~ div.is-invalid { @@ -438,21 +436,21 @@ form.uds-form { input, textarea, select { - background-color: $uds-color-base-gray-7; - color: $uds-color-base-gray-1; + background-color: $asu-gray-1; + color: $asu-gray-7; } input::placeholder { - color: $uds-color-base-gray-4; + color: $asu-gray-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: $asu-gray-1; + color: $asu-gray-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 $asu-gray-7 !important; + border: 1px solid $asu-gray-7 !important; border-radius: none; } @@ -464,7 +462,7 @@ form.uds-form { // Outer border. &::before { border: 1px solid #707070; - background: $uds-color-base-gray-7; + background: $asu-gray-1; } // Inner positioning for checked. &::after { @@ -472,24 +470,24 @@ form.uds-form { } &:checked { + label::after { - background: $uds-color-base-gray-1; + background: $asu-gray-7; } } &:focus { + label::before { - border: 2px solid $uds-color-base-gray-1; + border: 2px solid $asu-gray-7; } } &:disabled { + label::before { - background: $uds-color-base-gray-6; - border-color: $uds-color-base-gray-5; + background: $asu-gray-2; + border-color: $asu-gray-3; } } // We can use this little trick because the label follows the disabled // input. &:disabled + label { - color: $uds-color-base-gray-4; + color: $asu-gray-4; } } @@ -559,7 +557,7 @@ form.uds-form { .input-group-trailing-icon { svg, i, span { - color: $uds-color-base-gray-1; + color: $asu-gray-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 4c751bc4dc..2805aa22ec 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: $asu-gray-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: $asu-gray-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: $asu-gray-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: $asu-gray-2; text-decoration: none; } @@ -150,11 +150,12 @@ $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: $asu-gray-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-gray-darker.svg") no-repeat 10px 50%; background-size: 12px; width: 32px; @@ -175,8 +176,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-gray-dark.svg"); width: 200px; - color: $uds-color-base-gray-5; + color: $asu-gray-3; background-color: #fff; cursor: auto; margin: 0.75rem 0; @@ -285,7 +287,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 $asu-gray-5; background-color: $uds-color-base-white; .container, @@ -339,7 +341,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 $asu-gray-5; margin-right: $uds-size-spacing-2; padding-right: $uds-size-spacing-2; } @@ -359,7 +361,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .navbar-toggler { - color: $uds-color-base-gray-7; + color: $asu-gray-1; border: 0; margin-right: $uds-size-spacing-1; padding: 0; @@ -371,7 +373,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .fa-circle.fa-stack-2x { - color: $uds-color-base-gray-2; + color: $asu-gray-6; height: 2rem; width: 2rem; } @@ -418,12 +420,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: $asu-gray-1; text-decoration: none; } > a:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } > a:hover { @@ -439,8 +441,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 $asu-gray-5; + color: $asu-gray-1; white-space: nowrap; svg.fa-home { @@ -448,7 +450,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } &:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } &:after { @@ -467,7 +469,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 $asu-gray-5; flex-flow: initial; .btn { @@ -518,16 +520,17 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } .navbar-mobile-footer { - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-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 $asu-gray-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-gray-darker.svg") no-repeat 10px 50%; background-size: 16px; background-color: $uds-color-base-white; @@ -545,17 +548,17 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); width: 100%; .nav-link { - color: $uds-color-base-gray-7; + color: $asu-gray-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 $asu-gray-5; white-space: nowrap; &:nth-child(even) { - border-left: 1px solid $uds-color-base-gray-3; + border-left: 1px solid $asu-gray-5; } } @@ -567,7 +570,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: $asu-gray-1; text-decoration: none; } @@ -600,7 +603,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 $asu-gray-5; &:not(:last-child) { border-bottom: 0; @@ -643,7 +646,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 $asu-gray-5; top: 102%; .btn { @@ -687,11 +690,11 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); white-space: normal; &:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } & + .dropdown-item { - border-top: 1px solid $uds-color-base-gray-4; + border-top: 1px solid $asu-gray-4; } } } @@ -810,7 +813,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); margin-bottom: 0; a { - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; } @@ -825,7 +828,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); font-weight: 700; a { - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; } @@ -889,7 +892,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: $asu-gray-1; padding: 0.5rem 0.75rem; /* Magic number */ margin-right: $uds-size-spacing-1; @@ -976,7 +979,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 $asu-gray-5; padding: $uds-size-spacing-4; div[class^="col-"] { @@ -995,7 +998,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 $asu-gray-4; margin-right: $uds-size-spacing-3; &:last-of-type { @@ -1014,7 +1017,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); white-space: normal; &:visited { - color: $uds-color-base-gray-7; + color: $asu-gray-1; } &:hover { @@ -1032,7 +1035,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 $asu-gray-4; width: 100vw; margin-left: calc(-50vw + 50%); margin-top: 0; @@ -1054,7 +1057,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: $asu-gray-4; position: relative; top: -1rem; } @@ -1065,7 +1068,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 $asu-gray-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 c3c5928e0e..4f8a01bf39 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: $asu-gray-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: $asu-gray-6; } } @@ -79,16 +79,16 @@ footer { a { margin-right: $uds-size-spacing-3; text-decoration: none; - color: $uds-color-base-gray-7; + color: $asu-gray-1; } } #wrapper-footer-colophon { - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-6; a { margin-right: $uds-size-spacing-3; text-decoration: none; - color: $uds-color-base-gray-7; + color: $asu-gray-1; } } @@ -140,7 +140,7 @@ footer { .nav-link { font-size: $uds-size-icon-base; - color: $uds-color-base-gray-4; + color: $asu-gray-4; line-height: 1; padding: 7px 16px; // Magic number. Reducing the padding by 1px to make the height = 48px. @@ -210,7 +210,7 @@ footer { padding-left: 0; a, button { - color: $uds-color-base-gray-2; + color: $asu-gray-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 e2c18a43ce..01155fd757 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 $asu-gray-5; + color: $asu-gray-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: $asu-gray-1; } &.text-white a { color: $uds-color-base-white; - background-color: $uds-color-base-gray-7; + background-color: $asu-gray-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 56fa0d6092..161cd5f24c 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: $asu-gray-1; } .hidden-details { max-height: 300px; opacity: 1; .long-text { - color: $uds-color-base-gray-7; + color: $asu-gray-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 966bfed69e..65407da55e 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 $asu-gray-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 { + &.gray-7-bg, %todo_update_class_name { 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 337f2eea61..4d9e30368b 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 $asu-gray-5; width: 100%; } @@ -38,21 +38,21 @@ } .uds-figure-caption { - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-5; border-top: none; opacity: 1; background: $uds-color-background-white 0% 0% no-repeat padding-box; padding: 2rem; font-size: $uds-size-font-medium; h3, .h3 { - color: $uds-color-base-gray-7; + color: $asu-gray-1; margin: 0 0 1rem 0; } } .uds-caption-text { display: block; max-width: 700px; - color: $uds-color-base-gray-7; + color: $asu-gray-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 43e6bae86b..f670bad0e1 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 $asu-gray-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 a0e029ad69..06fe043840 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_list.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_list.scss @@ -120,19 +120,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: $asu-gray-1; + color: $asu-gray-6; // Default white list bullets (for dark mode) li { - --li-before-color: #{$uds-color-base-gray-2}; + --li-before-color: #{$asu-gray-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: #{$asu-gray-6}; + --li-before-color: #{$asu-gray-1}; } } @@ -142,7 +142,7 @@ ol.uds-list { margin-left: 0rem; margin-bottom: 0rem; - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-6; } // Light smoke mode. @@ -151,7 +151,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: $asu-gray-7; // Magic background color. } } @@ -210,7 +210,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 $asu-gray-4; font-weight: bold; span { @@ -221,9 +221,9 @@ ol.uds-list, } &:before { - --li-before-background-color: #{$uds-color-base-gray-7}; + --li-before-background-color: #{$asu-gray-1}; --li-before-content: counter(listcounter); // Remove space because it messes with centering. - --li-before-color: #{$uds-color-base-gray-1}; + --li-before-color: #{$asu-gray-7}; --li-before-font-size: 1.25rem; border-radius: 50rem; padding: 0.4rem 0.8rem; @@ -238,7 +238,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: #{$asu-gray-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 cfbfe4cf59..dfa493a4b0 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: $asu-gray-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: $asu-gray-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: $asu-gray-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 $asu-gray-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 e9c4715e5b..a3e6eba659 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: $asu-gray-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 bfb1267abc..1115a5032b 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: $asu-gray-1; } } a.page-link:hover { - color: $uds-color-base-gray-7; + color: $asu-gray-1; text-decoration: none; } .page-item.active a.page-link:hover { - color: $uds-color-base-gray-1; + color: $asu-gray-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-gray1, %todo_update_class_name { + background-color: $asu-gray-7; :not(.active) .page-link { - background-color: $uds-color-base-gray-1; + background-color: $asu-gray-7; &:hover { - background-color: $uds-color-base-gray-4; + background-color: $asu-gray-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: $asu-gray-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($asu-gray-7, right); } &:first-child .page-link-icon::before { - @include bg-arrow-icon($uds-color-base-gray-1, left); + @include bg-arrow-icon($asu-gray-7, left); } } .page-link { - color: $uds-color-base-gray-1; + color: $asu-gray-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: $asu-gray-3; + color: $asu-gray-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 9b6240dfe6..f9230bc979 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: $asu-gray-7; + border: 1px solid $asu-gray-5; padding: 32px; } .profile-img-container { @@ -97,7 +97,7 @@ Desktop styles } } &.person-social-medias a { - color: $uds-color-base-gray-7; + color: $asu-gray-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 83270a37c7..df13cd74ed 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 $asu-gray-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: $asu-gray-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: $asu-gray-1; } } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss b/packages/unity-bootstrap-theme/src/scss/extends/_sidebar.scss index 5fd3a389a1..0b4640a7fc 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 $asu-gray-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 $asu-gray-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: $asu-gray-1; padding: $uds-size-spacing-2; - border: 1px solid $uds-color-base-gray-3; + border: 1px solid $asu-gray-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: $asu-gray-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: $asu-gray-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: $asu-gray-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 $asu-gray-5; } } .card-foldable { border: 0; - border-top: 1px solid $uds-color-base-gray-3; + border-top: 1px solid $asu-gray-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 030461bd9e..f77deceab2 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 $asu-gray-4; flex-wrap: inherit; overflow: hidden; position: relative; @@ -58,7 +58,7 @@ &-dark { .nav-tabs { .nav-link { - color: $uds-color-base-gray-1; + color: $asu-gray-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: $asu-gray-7; + border: solid 1px $asu-gray-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 ae930b82f0..fed97bfa52 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 $asu-gray-6; overflow-x: auto; & > table { @@ -27,7 +27,7 @@ > thead { > tr { &:first-child th { - background-color: $uds-color-base-gray-3; + background-color: $asu-gray-5; } } } @@ -45,7 +45,7 @@ &:nth-child(2n) { th, td { - background-color: $uds-color-base-gray-1; + background-color: $asu-gray-7; } } @@ -53,7 +53,7 @@ &:focus { th, td { - background-color: $uds-color-base-gray-2; + background-color: $asu-gray-6; } } @@ -87,7 +87,7 @@ .uds-table-fixed { overflow-x: auto; - border: 1px solid $uds-color-base-gray-2; + border: 1px solid $asu-gray-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 ca1880fe41..c28fd4ee88 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: $asu-gray-5; } .fa-info { @@ -60,19 +60,19 @@ button.uds-tooltip { } } -button.uds-tooltip-gray-1 { +button.uds-tooltip-gray-1, %todo_update_class_name { .fa-circle { - color: $uds-color-base-gray-4; + color: $asu-gray-4; } .fa-info { - color: $uds-color-base-gray-1; + color: $asu-gray-7; } } button.uds-tooltip-gray { .fa-circle { - color: $uds-color-base-gray-4; + color: $asu-gray-4; } .fa-info { @@ -82,7 +82,7 @@ button.uds-tooltip-gray { button.uds-tooltip-dark { .fa-circle { - color: $uds-color-base-gray-5; + color: $asu-gray-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: $asu-gray-1 0% 0% no-repeat padding-box; + color: $asu-gray-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: $asu-gray-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: $asu-gray-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 74d9a38126..22720bed49 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 $asu-gray-5; figure { margin: 0; @@ -8,7 +8,7 @@ align-items: center; figcaption { - color: $uds-color-base-gray-6; + color: $asu-gray-2; 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 e15b31a25d..b989ebc4a4 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: $asu-gray-4; +$breadcrumb-active-color: $asu-gray-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 31e20ac3c4..9865754ae3 100644 --- a/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss +++ b/packages/unity-bootstrap-theme/src/scss/variables/_colors.scss @@ -1,36 +1,32 @@ // ASU Brand Standard Colors // 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; -$body-color: $uds-color-base-gray-7; +$body-color: $asu-gray-1; $grays: (); $grays: map-merge( ( - '1': $gray-1, - '2': $gray-2, - '3': $gray-3, - '4': $gray-4, - '5': $gray-5, - '6': $gray-6, - '7': $gray-7, + // Deprecated-start - 1-7 are incorrectly numbered from lightest to darkest + // This $grays map creates css variables, so we need to keep these for backwards compatibility + '1': $asu-gray-7, + '2': $asu-gray-6, + '3': $asu-gray-5, + '4': $asu-gray-4, + '5': $asu-gray-3, + '6': $asu-gray-2, + '7': $asu-gray-1, + // Deprecated-end ), $grays ); $gold: $uds-color-base-gold; $maroon: $uds-color-base-maroon; -$dark: $uds-color-base-gray-7; -$light: $uds-color-base-gray-2; +$dark: $asu-gray-1; +$light: $asu-gray-6; +$faint: $asu-gray-7; $blue: $uds-color-base-blue; $green: $uds-color-base-green; $orange: $uds-color-base-orange; @@ -74,15 +70,15 @@ $theme-colors: map-merge( 'warning': $warning, 'danger': $danger, 'light': $light, - 'gray': $gray-4, + 'gray': $asu-gray-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, + 'gray-1': $asu-gray-7, + 'gray-2': $asu-gray-6, + 'gray-3': $asu-gray-5, + 'gray-4': $asu-gray-4, + 'gray-5': $asu-gray-3, + 'gray-6': $asu-gray-2, + 'gray-7': $asu-gray-1, ), $theme-colors ); @@ -114,7 +110,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: $asu-gray-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 fbedf763bb..3b3b9bcba3 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: $asu-gray-6; $dropdown-border-width: 1px; -$dropdown-link-color: $uds-color-base-gray-7; +$dropdown-link-color: $asu-gray-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: $asu-gray-1; $dropdown-link-active-bg: transparent; -$dropdown-link-disabled-color: $uds-color-base-gray-5; +$dropdown-link-disabled-color: $asu-gray-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 1eba609f97..229ae56d1a 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: $asu-gray-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 2aee40ba18..c9fdab66c6 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: $asu-gray-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: $asu-gray-1; +$heading-highlight-black-text-color: $asu-gray-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: $asu-gray-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 0183caf30d..8837ea31a3 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: $asu-gray-1; $pagination-border-width: 0rem; $pagination-border-color: rgba(0, 0, 0, 0); $pagination-outline: 0; diff --git a/packages/unity-bootstrap-theme/vite.config.js b/packages/unity-bootstrap-theme/vite.config.js index c133b5e8f8..69b5f64a27 100644 --- a/packages/unity-bootstrap-theme/vite.config.js +++ b/packages/unity-bootstrap-theme/vite.config.js @@ -72,7 +72,13 @@ const c = { css: { preprocessorOptions: { scss: { - api: "modern-compiler", + silenceDeprecations: [ + 'import', + 'mixed-decls', + 'color-functions', + 'global-builtin', + 'legacy-js-api', + ], }, }, }, diff --git a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss index 459910fdff..793b4f4bf3 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss +++ b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss @@ -5,7 +5,7 @@ $glide-element-separator: "__" !default; $glide-modifier-separator: "--" !default; $uds-breakpoint-sm: 576px; $uds-breakpoint-lg: 1260px; -$uds-color-base-gray-7: #191919; +$asu-gray-1: #191919; $uds-color-brand-gold: #ffc627; // ASU Gold brand color @mixin shadow { @@ -433,7 +433,7 @@ $uds-color-brand-gold: #ffc627; // ASU Gold brand color figcaption *, .uds-caption-text { - color: $uds-color-base-gray-7; + color: $asu-gray-1; max-width: 100%; } } From 5004074b35c6b8b5eb21ef9d8207745bf21a09f9 Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Fri, 26 Sep 2025 14:33:25 -0700 Subject: [PATCH 2/2] refactor(unity-bootstrap-theme): fix gray classes conflicting with brand .gray-7-bg = .gray-dark-bg .gray-2-bg = .gray-light-bg .gray-1-bg = .gray-faint-bg .uds-image-text-block-text-container.gray-7-bg = .uds-image-text-block-text-container.gray-dark-bg .pagination.uds-bg-gray1 = .pagination.uds-bg-faint .breadcrumb.bg-gray-7 = .breadcrumb.gray-dark-bg form.uds-form.uds-form-gray1 = form.uds-form.uds-form-faint-bg form.uds-form.uds-form-gray2 = form.uds-form.uds-form-light-bg form.uds-form.uds-form-gray7 = form.uds-form.uds-form-dark-bg button.uds-tooltip-gray-1 = button.uds-tooltip-faint bootstrap utility class .bg-gray-1 = .gray-faint-bg .bg-gray-2 = .gray-light-bg .bg-gray-3 = don't use .bg-gray-4 = It's OK for now .bg-gray-5 = don't use .bg-gray-6 = don't use .bg-gray-7 = .gray-dark-bg .text-bg-gray-1 = .text-gray-faint-bg .text-bg-gray-2 = .text-gray-light-bg .text-bg-gray-3 = don't use .text-bg-gray-5 = don't use .text-bg-gray-6 = don't use .text-bg-gray-7 = .text-gray-dark-bg --- .../img/font-awesome-svg/search-gray-dark.svg | 1 + .../font-awesome-svg/search-gray-darker.svg | 1 + .../src/scss/extends/_backgrounds.scss | 21 +++++- .../src/scss/extends/_breadcrumb.scss | 2 +- .../src/scss/extends/_form-fields.scss | 6 +- .../src/scss/extends/_global-header.scss | 9 +-- .../src/scss/extends/_image-text-block.scss | 2 +- .../src/scss/extends/_pager.scss | 2 +- .../src/scss/extends/_tooltips.scss | 2 +- .../blockquote/blockquote.examples.stories.js | 12 ++-- .../blockquote.templates.stories.js | 10 +-- .../breadcrumb/breadcrumb.examples.stories.js | 6 +- .../breadcrumb.templates.stories.js | 2 +- .../form-fields.examples.stories.js | 32 ++++++---- .../design/alignment/alignment.stories.js | 4 +- .../design/backgrounds/backgrounds.stories.js | 6 +- .../stories/design/colors/colors.stories.js | 64 +++++++++++-------- .../stories/design/layout/layout.stories.js | 26 ++++---- .../design/typography/typography.stories.js | 18 +++--- .../grid-links/grid-links-basics.stories.mdx | 2 +- .../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 | 6 +- .../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 +- 28 files changed, 153 insertions(+), 117 deletions(-) create mode 100644 packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-dark.svg create mode 100644 packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-darker.svg diff --git a/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-dark.svg b/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-dark.svg new file mode 100644 index 0000000000..837a4fa862 --- /dev/null +++ b/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-darker.svg b/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-darker.svg new file mode 100644 index 0000000000..da724fef01 --- /dev/null +++ b/packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-darker.svg @@ -0,0 +1 @@ + diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss b/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss index 48af520510..52f37a81ec 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss @@ -2,18 +2,33 @@ height: 322px; } -.gray-7-bg, %todo_update_class_name { +.gray-7-bg, .gray-dark-bg { background: $asu-gray-1; } -.gray-2-bg, %todo_update_class_name { +.text-gray-dark-bg { + background-color: $asu-gray-1; + color: $asu-gray-7; +} + +.gray-2-bg, .gray-light-bg { background: $asu-gray-6; } -.gray-1-bg, %todo_update_class_name { +.text-gray-light-bg { + background-color: $asu-gray-6; + color: $asu-gray-1; +} + +.gray-1-bg, .gray-faint-bg { background: $asu-gray-7; } +.text-gray-faint-bg { + background-color: $asu-gray-7; + color: $asu-gray-1; +} + .white-bg { background: $uds-color-base-white; border: 1px solid $asu-gray-5; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss b/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss index e60bbd25d6..a79af6e45a 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_breadcrumb.scss @@ -2,7 +2,7 @@ & { padding-left: 0; } - &.bg-gray-7, %todo_update_class_name { + &.bg-gray-7, &.gray-dark-bg { a { color: $uds-color-base-gold; } 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 1080000278..13129afbac 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss @@ -344,10 +344,10 @@ form.uds-form { &.uds-form-white { background-color: white; } - &.uds-form-gray1, %todo_update_class_name { + &.uds-form-gray1, &.uds-form-faint-bg { background-color: $asu-gray-7; } - &.uds-form-gray2, %todo_update_class_name { + &.uds-form-gray2, &.uds-form-light-bg { background-color: $asu-gray-6; /* Dark Radios and Checkboxes */ .form-check { @@ -367,7 +367,7 @@ form.uds-form { } } } - &.uds-form-gray7, %todo_update_class_name { + &.uds-form-gray7, &.uds-form-dark-bg { background-color: $asu-gray-1; color: $asu-gray-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 2805aa22ec..412f7e70c2 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss @@ -154,8 +154,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } input[type="search"] { - background: url($image-assets-path + "/font-awesome-svg/search-gray-6.svg") - // background: url($image-assets-path + "/font-awesome-svg/search-gray-darker.svg") + background: url($image-assets-path + "/font-awesome-svg/search-gray-darker.svg") no-repeat 10px 50%; background-size: 12px; width: 32px; @@ -175,8 +174,7 @@ $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-gray-dark.svg"); + background-image: url($image-assets-path + "/font-awesome-svg/search-gray-dark.svg"); width: 200px; color: $asu-gray-3; background-color: #fff; @@ -529,8 +527,7 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); input { width: 100%; - background: url($image-assets-path + "/font-awesome-svg/search-gray-6.svg") - // background: url($image-assets-path + "/font-awesome-svg/search-gray-darker.svg") + background: url($image-assets-path + "/font-awesome-svg/search-gray-darker.svg") no-repeat 10px 50%; background-size: 16px; background-color: $uds-color-base-white; 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 65407da55e..c21e3a81de 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 @@ -43,7 +43,7 @@ max-width: 50%; padding: 48px 96px; - &.gray-7-bg, %todo_update_class_name { + &.gray-7-bg, &.gray-dark-bg { color: $uds-color-base-white; } diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss b/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss index 1115a5032b..de0827e5e0 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_pager.scss @@ -82,7 +82,7 @@ span.page-link { overflow-x: auto; padding: $pagination-padding-y $pagination-padding-x; gap: 1rem; - &.uds-bg-gray1, %todo_update_class_name { + &.uds-bg-gray1, &.uds-bg-faint { background-color: $asu-gray-7; :not(.active) .page-link { diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss b/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss index c28fd4ee88..4828119056 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss @@ -60,7 +60,7 @@ button.uds-tooltip { } } -button.uds-tooltip-gray-1, %todo_update_class_name { +button.uds-tooltip-gray-1, button.uds-tooltip-faint { .fa-circle { color: $asu-gray-4; } 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 8157365aa9..c655d164d8 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 @@ -30,7 +30,7 @@ export const BlockquoteNoImage = () => ( -
+
@@ -81,7 +81,7 @@ export const BlockquoteWithImage = () => (
-
+
(
-
+
(
-
+
@@ -245,7 +245,7 @@ export const TestimonialsNoImage = () => (
-
+
@@ -296,7 +296,7 @@ export const TestimonialsWithImage = () => (
-
+
{
@@ -67,7 +67,7 @@ export const BlockquoteWithImage = ({ type, reversed }) => {
{
diff --git a/packages/unity-bootstrap-theme/stories/atoms/breadcrumb/breadcrumb.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/breadcrumb/breadcrumb.examples.stories.js index 3abeb2d644..7f7e073853 100644 --- a/packages/unity-bootstrap-theme/stories/atoms/breadcrumb/breadcrumb.examples.stories.js +++ b/packages/unity-bootstrap-theme/stories/atoms/breadcrumb/breadcrumb.examples.stories.js @@ -25,7 +25,7 @@ export const BreadcrumbsAgainstWhiteBackground = () => ( export const BreadcrumbsAgainstGray1Background = () => (