From 73111909c5246daf8f892004d5f3d20fcb82a20a Mon Sep 17 00:00:00 2001 From: Juan Pablo Mitriatti Date: Fri, 24 Jul 2026 08:16:46 -0300 Subject: [PATCH] fix(unity-bootstrap-theme): support downstream palette overrides Add !default to all color tokens in _custom-asu-variables.scss so downstream consumers can pre-define palette values before importing the theme, with derived variables recomputing automatically. Replace the three hardcoded #ffc627 gold literals (like-h3-highlight-gold mixin in _heroes.scss and border-top in _ranking-cards.scss) with $uds-color-base-gold so they follow palette overrides. Compiled CSS is byte-identical without overrides. Ref: Webspark WS2-2964 / WS2-3099 --- .../src/scss/_custom-asu-variables.scss | 100 +++++++++--------- .../src/scss/extends/_heroes.scss | 4 +- .../src/scss/extends/_ranking-cards.scss | 2 +- 3 files changed, 53 insertions(+), 53 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 eaf0b6d5d7..5e4e4d8769 100644 --- a/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss +++ b/packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss @@ -35,58 +35,58 @@ $uds-size-spacing-64: 32rem; $uds-size-spacing-half: 0.25rem; // Colors -$uds-color-base-gold: #ffc627; // ASU Gold -$uds-color-base-maroon: #8c1d40; // ASU Maroon -$uds-color-base-white: #ffffff; // White -$uds-color-base-green: #78be20; // ASU Green -$uds-color-base-orange: #ff7f32; // ASU Orange -$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-gold: #ffc627 !default; // ASU Gold +$uds-color-base-maroon: #8c1d40 !default; // ASU Maroon +$uds-color-base-white: #ffffff !default; // White +$uds-color-base-green: #78be20 !default; // ASU Green +$uds-color-base-orange: #ff7f32 !default; // ASU Orange +$uds-color-base-blue: #00a3e0 !default; // ASU Blue +$uds-color-base-bluefocus: #00baff !default; // A11y Focus Blue - used for highlighting the page element with current focus +$uds-color-base-darkgold: #7f6227 !default; // Visited state of ASU Gold +$uds-color-base-darkmaroon: #440e22 !default; // Visited state of ASU Maroon // 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. +$uds-color-base-gray-1: #fafafa !default; // Deprecated use $asu-gray-7 instead. +$uds-color-base-gray-2: #e8e8e8 !default; // Deprecated use $asu-gray-6 instead. +$uds-color-base-gray-3: #d0d0d0 !default; // Deprecated use $asu-gray-5 instead. +$uds-color-base-gray-4: #bfbfbf !default; // Deprecated use $asu-gray-4 instead. +$uds-color-base-gray-5: #747474 !default; // Deprecated use $asu-gray-3 instead. +$uds-color-base-gray-6: #484848 !default; // Deprecated use $asu-gray-2 instead. +$uds-color-base-gray-7: #191919 !default; // 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 - -$uds-color-alerts-error: #cc2f2f; // Error -$uds-color-alerts-warning: $uds-color-base-orange; // Warning -$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: $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: $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: $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: #d3a524; // Visited link text on dark background -$uds-color-font-light-info: #00b0f3; // Information text on dark background - -$uds-color-divider-darker: #1e1e1e; // Footer accent - darker -$uds-color-divider-lighter: #393939; // Footer accent - lighter +$asu-gray-1: #191919 !default; // Brand guideline ASU Gray 1 - Base font color and default black level +$asu-gray-2: #484848 !default; // Brand guideline ASU Gray 2 +$asu-gray-3: #747474 !default; // Brand guideline ASU Gray 3 +$asu-gray-4: #bfbfbf !default; // Brand guideline ASU Gray 4 +$asu-gray-5: #d0d0d0 !default; // Brand guideline ASU Gray 5 +$asu-gray-6: #e8e8e8 !default; // Brand guideline ASU Gray 6 +$asu-gray-7: #fafafa !default; // Brand guideline ASU Gray 7 + +$uds-color-brand-gold: $uds-color-base-gold !default; // ASU Gold brand color +$uds-color-brand-maroon: $uds-color-base-maroon !default; // ASU Maroon brand color + +$uds-color-alerts-error: #cc2f2f !default; // Error +$uds-color-alerts-warning: $uds-color-base-orange !default; // Warning +$uds-color-alerts-info: $uds-color-base-blue !default; // Information +$uds-color-alerts-success: $uds-color-base-green !default; // Success + +$uds-color-background-white: $uds-color-base-white !default; // Background - White +$uds-color-background-gray: $asu-gray-6 !default; // Background - Gray +$uds-color-background-dark: $asu-gray-1 !default; // Background - Dark +$uds-color-background-success: #e9f5db !default; // Background - Success +$uds-color-background-error: #f7dddd !default; // Background - Error +$uds-color-background-warning: #ffeade !default; // Background - Warning +$uds-color-background-info: #d6f0fa !default; // Background - Information + +$uds-color-font-dark-base: $asu-gray-1 !default; // Default text color on light background +$uds-color-font-dark-error: #FF7B7D !default; // Error text on dark background +$uds-color-font-dark-success: #446d12 !default; // Success text on dark background +$uds-color-font-light-base: $asu-gray-7 !default; // Default text on dark background +$uds-color-font-light-link: $uds-color-base-gold !default; // Link text on dark background +$uds-color-font-light-visited: #d3a524 !default; // Visited link text on dark background +$uds-color-font-light-info: #00b0f3 !default; // Information text on dark background + +$uds-color-divider-darker: #1e1e1e !default; // Footer accent - darker +$uds-color-divider-lighter: #393939 !default; // Footer accent - lighter // Font $uds-font-family-base: Arial, Helvetica, 'Nimbus Sans L', 'Liberation Sans', FreeSans, sans-serif; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss b/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss index 693028ab65..2c7ad5f34e 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss @@ -44,8 +44,8 @@ $uds-hero-gradient-overlay: linear-gradient( } @mixin like-h3-highlight-gold { - box-shadow: -0.15em 0 0 #ffc627, 0.15em 0 0 #ffc627; - background: #ffc627; + box-shadow: -0.15em 0 0 $uds-color-base-gold, 0.15em 0 0 $uds-color-base-gold; + background: $uds-color-base-gold; color: #191919; } 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 05890ad2d7..5d07797001 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss @@ -15,7 +15,7 @@ bottom: 0; left: 0; padding: $uds-size-spacing-2 var(--ranking-card-text-padding) 0; - border-top: $uds-size-spacing-1 solid #ffc627; + border-top: $uds-size-spacing-1 solid $uds-color-base-gold; transition: all 0.3s ease-in-out; z-index: 10; background-color: white;