diff --git a/ui/components/b2b/components/_tokens.scss b/ui/components/b2b/components/_tokens.scss index 1c9228c31..af7bbf75c 100644 --- a/ui/components/b2b/components/_tokens.scss +++ b/ui/components/b2b/components/_tokens.scss @@ -12,9 +12,16 @@ $b2b-flex-end: flex-end; $b2b-text-center: center; $b2b-config-promo-wrapper-blue: #a5ccef; $b2b-config-promo-details-blue: #1586e8; +$b2b-config-promo-header-blue: #257BCD; $b2b-checkbox-focus: $offset-none $offset-none ($offset-small)+px ($offset-x-small)+px $azure !default; $b2b-checkbox-blue: #C0E5FF; $b2b-checkbox-red: #FFC2C2; +$b2b-header-gray: #C4C4C4; +$b2b-section-title-black: #0B0B0B; +$b2b-pill-text-orange: #FF8A00; +$b2b-section-background-gray: rgba(221, 219, 218, 0.33); +$b2b-section-description-black: #000000; +$b2b-modal-title-gray: #979797; @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white) { overflow: hidden; diff --git a/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss b/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss index 7e2d8bbdb..138bd2152 100644 --- a/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss +++ b/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss @@ -4,7 +4,7 @@ .nds-b2b-discount-panel { .nds-b2b-discount-header { - border-bottom: 1px solid #C4C4C4; + border-bottom: 1px solid $b2b-header-gray; } .nds-b2b-section-tile { @@ -13,30 +13,17 @@ } .nds-b2b-section-tile_title { - color: #0B0B0B; + color: $b2b-section-title-black; } .nds-b2b-section-tile_pill { - background: rgba(221, 219, 218, 0.33); - color: #FF8A00; + background: $b2b-section-background-gray; + color: $b2b-pill-text-orange; font-weight: 700; padding: 0.2rem; border-radius: 0.75rem } - .nds-b2b-discount-modal_title { - color: #979797; - } - - .nds-b2b-discount-promo_header { - background: #257BCD; - color: $white-primary; - } - - .nds-b2b-discount-promo_description { - color: #000000; - } - .nds-accordion__section { position: relative; margin: 0.5rem 0; @@ -52,4 +39,21 @@ overflow-y: auto; } } + + .nds-b2b-promo-modal_title { + color: $b2b-section-title-black; + } + + .nds-b2b-discount-modal_title { + color: $b2b-modal-title-gray; + } + + .nds-b2b-discount-promo_header { + background: $b2b-config-promo-header-blue; + color: $white-primary; + } + + .nds-b2b-discount-promo_description { + color: $b2b-section-description-black; + } }