diff --git a/app/design/frontend/Magento/blank/Magento_Braintree/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Braintree/web/css/source/_module.less index b70bab6f320d8..8c1ec09afec1e 100644 --- a/app/design/frontend/Magento/blank/Magento_Braintree/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Braintree/web/css/source/_module.less @@ -9,9 +9,9 @@ @braintree-input-border__color: @color-gray76; -@braintree-error__color: @color-red10; -@braintree-focus__color: @color-blue2; -@braintree-success__color: @color-dark-green1; +@braintree-error__color: @message-error__color; +@braintree-focus__color: @theme__color__primary-alt; +@braintree-success__color: @message-success__color; @braintree-paypal-icon__height: 16px; @braintree-paypal-icon__width: 16px; diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less index 301517c6d0cd6..4792cb7b17924 100644 --- a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less +++ b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less @@ -16,7 +16,7 @@ @checkout-progress-bar-item__color: @primary__color; @checkout-progress-bar-item__margin: @indent__s; @checkout-progress-bar-item__width: 185px; -@checkout-progress-bar-item__active__background-color: @color-orange-red1; +@checkout-progress-bar-item__active__background-color: @active__color; @checkout-progress-bar-item__complete__color: @link__color; @checkout-progress-bar-item-element__height: @checkout-progress-bar-item-element__width; diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_shipping.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_shipping.less index 158cb0ebc0ed1..af6127fd2ca9f 100644 --- a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_shipping.less +++ b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_shipping.less @@ -22,7 +22,7 @@ @checkout-shipping-item__width: 100%/3; @checkout-shipping-item-tablet__width: 100%/2; @checkout-shipping-item-mobile__width: 100%; -@checkout-shipping-item__active__border-color: @color-orange-red1; +@checkout-shipping-item__active__border-color: @active__color; @checkout-shipping-item-icon__selected__height: 27px; @checkout-shipping-item-icon__selected__width: 29px; diff --git a/app/design/frontend/Magento/blank/Magento_Customer/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Customer/web/css/source/_module.less index 3ffaeb82cdc2a..0e88449d9141e 100644 --- a/app/design/frontend/Magento/blank/Magento_Customer/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Customer/web/css/source/_module.less @@ -11,7 +11,7 @@ @account-nav-color: false; @account-nav-current-border: 3px solid transparent; -@account-nav-current-border-color: @color-orange-red1; +@account-nav-current-border-color: @active__color; @account-nav-current-color: false; @account-nav-current-font-weight: @font-weight__semibold; diff --git a/app/design/frontend/Magento/blank/Magento_Multishipping/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Multishipping/web/css/source/_module.less index 96648f504af80..46f9661d8281d 100644 --- a/app/design/frontend/Magento/blank/Magento_Multishipping/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Multishipping/web/css/source/_module.less @@ -47,7 +47,7 @@ } .error-block { - color: @color-red10; + color: @error__color; .error-label { font-weight: @font-weight__bold; @@ -222,7 +222,7 @@ } .error-description { - color: @color-red10; + color: @error__color; font-weight: @font-weight__regular; margin-bottom: @indent__s; margin-top: -@indent__s; diff --git a/app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less index f42efa3569598..bfa009d89986b 100644 --- a/app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less +++ b/app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less @@ -18,7 +18,7 @@ @swatch-option__selected__border: @swatch-option__hover__border; @swatch-option__selected__color: @swatch-option__hover__color; -@swatch-option__selected__outline: 2px solid @color-orange-red1; +@swatch-option__selected__outline: 2px solid @active__color; @swatch-option__disabled__background: @color-red10; @@ -38,7 +38,7 @@ // Image and Color swatch @img-color-swatch-option__hover__border: @swatch-option__hover__border; -@img-color-swatch-option__hover__outline: 2px solid #e00; +@img-color-swatch-option__hover__outline: 2px solid darken(@active__color, 12%); // Tooltip @swatch-option-tooltip__background: @color-white; @@ -54,7 +54,7 @@ @swatch-option-tooltip-layered-title__color: @swatch-option-tooltip-title__color; // Layered Features -@swatch-option-link-layered__focus__box-shadow: 0 0 3px 1px @color-sky-blue1; +@swatch-option-link-layered__focus__box-shadow: 0 0 3px 1px @focus__color; // // Common diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/_cart.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/_cart.less index 58582d344e75a..9cb0ec7ce65e8 100644 --- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/_cart.less +++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/_cart.less @@ -145,12 +145,6 @@ } &:extend(.abs-adjustment-incl-excl-tax all); - - .action { - &.multicheckout { - color: @color-blue2; - } - } } // Totals block diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less index e2378eeeef0c1..ad1ac36237ca4 100644 --- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less +++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less @@ -18,7 +18,7 @@ @checkout-progress-bar-item__transition: background .3s; @checkout-progress-bar-item__width: 185px; -@checkout-progress-bar-item__active__background-color: @color-orange-red1; +@checkout-progress-bar-item__active__background-color: @active__color; @checkout-progress-bar-item__active__color: @primary__color; @checkout-progress-bar-item__active__font-weight: @font-weight__semibold; @checkout-progress-bar-item__complete__color: @link__color; @@ -32,7 +32,7 @@ @checkout-progress-bar-item-element-inner__color: @primary__color; @checkout-progress-bar-item-element-inner__height: @checkout-progress-bar-item-element-inner__width; @checkout-progress-bar-item-element-inner__width: @checkout-progress-bar-item-element__width - ( @checkout-progress-bar-item-element-outer-radius__width*2 ); -@checkout-progress-bar-item-element-inner__active__border-color: @color-orange-red1; +@checkout-progress-bar-item-element-inner__active__border-color: @active__color; @checkout-progress-bar-item-element-inner__active__content: @icon-checkmark; @checkout-progress-bar-item-element-outer-radius__width: 6px; diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less index d0ce87beb6ad3..d0edf245dc5b8 100644 --- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less +++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less @@ -22,7 +22,7 @@ @checkout-shipping-item__width: 100%/3; @checkout-shipping-item-tablet__width: 100%/2; @checkout-shipping-item-mobile__width: 100%; -@checkout-shipping-item__active__border-color: @color-orange-red1; +@checkout-shipping-item__active__border-color: @active__color; @checkout-shipping-item-icon__selected__height: 27px; @checkout-shipping-item-icon__selected__width: 29px; diff --git a/app/design/frontend/Magento/luma/Magento_GiftMessage/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_GiftMessage/web/css/source/_module.less index 388ec32b4fc5a..41e6da39e1ef1 100644 --- a/app/design/frontend/Magento/luma/Magento_GiftMessage/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_GiftMessage/web/css/source/_module.less @@ -12,7 +12,7 @@ @gift-item-block__border-color: @color-gray-light5; @gift-item-block__border-width: @border-width__base; -@gift-item-block-title__color: @color-blue1; +@gift-item-block-title__color: @link__color; @gift-item-block-title-icon__content: @icon-down; @gift-item-block-title-icon__active__content: @icon-up; @gift-item-block-title-icon__color: @color-gray52; @@ -60,8 +60,8 @@ } .gift-summary { - position: relative; margin-top: @indent__s; + position: relative; .actions-toolbar { > .secondary { diff --git a/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/_module.less index 48461892fa631..76baec87e0054 100644 --- a/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/_module.less @@ -32,7 +32,7 @@ &[data-count]:after { .lib-css(color, @color-white); - background: @color-orange-red1; + background: @theme__color__secondary; border-radius: 2px; content: attr(data-count); display: inline-block; diff --git a/app/design/frontend/Magento/luma/Magento_Multishipping/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Multishipping/web/css/source/_module.less index 7662c60734a1b..ed6b53727da52 100644 --- a/app/design/frontend/Magento/luma/Magento_Multishipping/web/css/source/_module.less +++ b/app/design/frontend/Magento/luma/Magento_Multishipping/web/css/source/_module.less @@ -48,7 +48,7 @@ } .error-block { - color: @color-red10; + color: @error__color; .error-label { font-weight: @font-weight__bold; @@ -230,7 +230,7 @@ } .error-description { - color: @color-red10; + color: @error__color; font-weight: @font-weight__regular; margin-bottom: @indent__s; margin-top: -@indent__s; diff --git a/app/design/frontend/Magento/luma/web/css/source/_extends.less b/app/design/frontend/Magento/luma/web/css/source/_extends.less index 7c9f5b7a65ab4..60b50cdb91eeb 100644 --- a/app/design/frontend/Magento/luma/web/css/source/_extends.less +++ b/app/design/frontend/Magento/luma/web/css/source/_extends.less @@ -1859,7 +1859,7 @@ > .title { strong { - color: @color-blue1; + color: @link__color; font-weight: @font-weight__regular; } } diff --git a/app/design/frontend/Magento/luma/web/css/source/_theme.less b/app/design/frontend/Magento/luma/web/css/source/_theme.less index 957e622d6a0bb..114fb7b817267 100644 --- a/app/design/frontend/Magento/luma/web/css/source/_theme.less +++ b/app/design/frontend/Magento/luma/web/css/source/_theme.less @@ -28,7 +28,7 @@ @h3__margin-top: @indent__base; // Links -@link__color: @color-blue2; +@link__color: @theme__color__primary-alt; // Focus @focus__color: @color-blue3; @@ -60,14 +60,9 @@ @navigation__background: @color-gray94; @navigation-level0-item__active__color: @primary__color; -@navigation-level0-item__active__border-color: @active__color; -@navigation-desktop-level0-item__active__border-color: @active__color; -@submenu-desktop-item__active__border-color: @active__color; -@submenu-item__active__border-color: @active__color; @submenu-item__active__color: @navigation-level0-item__active__color; - // Desktop navigation @navigation-desktop-level0-item__line-height: 47px; @submenu-desktop__font-weight: @font-weight__regular; @@ -225,7 +220,6 @@ @rating-icon__font-size: 16px; @rating-icon__letter-spacing: 2px; -@rating-icon__active__color: @active__color; // // Dropdowns @@ -252,7 +246,7 @@ @breadcrumbs-icon__font-margin: 0 @indent__s; @breadcrumbs-current__color: @color-gray-middle5; -@breadcrumbs-link__color: @color-blue2; +@breadcrumbs-link__color: @link__color; @breadcrumbs-link__visited__color: @breadcrumbs-link__color; @breadcrumbs-link__hover__color: @breadcrumbs-link__color; @breadcrumbs-link__active__color: @breadcrumbs-link__color; diff --git a/lib/web/css/source/lib/variables/_buttons.less b/lib/web/css/source/lib/variables/_buttons.less index 8c31c16143859..8729eca6aca6d 100644 --- a/lib/web/css/source/lib/variables/_buttons.less +++ b/lib/web/css/source/lib/variables/_buttons.less @@ -57,14 +57,14 @@ @button-primary__gradient: false; @button-primary__gradient-direction: false; -@button-primary__background: @color-blue1; -@button-primary__border: 1px solid @color-blue1; +@button-primary__background: @theme__color__primary; +@button-primary__border: 1px solid @theme__color__primary; @button-primary__color: @color-white; @button-primary__gradient-color-start: false; @button-primary__gradient-color-end: false; -@button-primary__hover__background: @color-blue2; -@button-primary__hover__border: 1px solid @color-blue2; +@button-primary__hover__background: @theme__color__primary-alt; +@button-primary__hover__border: 1px solid @theme__color__primary-alt; @button-primary__hover__color: @button-primary__color; @button-primary__hover__gradient-color-start: false; @button-primary__hover__gradient-color-end: false; diff --git a/lib/web/css/source/lib/variables/_colors.less b/lib/web/css/source/lib/variables/_colors.less index 01e0db03adcdc..9c694468e9f62 100644 --- a/lib/web/css/source/lib/variables/_colors.less +++ b/lib/web/css/source/lib/variables/_colors.less @@ -78,7 +78,7 @@ @color-sky-blue1: #68a8e0; @color-pink1: #fae5e5; -@color-dark-pink1: #800080; +@color-dark-pink1: #800080; // Legacy pink @color-brownie1: #6f4400; @color-brownie-light1: #c07600; @@ -92,6 +92,10 @@ // Color nesting // --------------------------------------------- +@theme__color__primary: @color-blue1; +@theme__color__primary-alt: @color-blue2; +@theme__color__secondary: @color-orange-red1; + @primary__color: @color-gray20; @primary__color__dark: darken(@primary__color, 35%); // #000 @primary__color__darker: darken(@primary__color, 13.5%); // #111 @@ -104,5 +108,5 @@ @page__background-color: @color-white; @panel__background-color: darken(@page__background-color, 6%); -@active__color: @color-orange-red1; +@active__color: @theme__color__secondary; @error__color: @color-red10; diff --git a/lib/web/css/source/lib/variables/_navigation.less b/lib/web/css/source/lib/variables/_navigation.less index 2a4aa11014dce..3ef1742547426 100644 --- a/lib/web/css/source/lib/variables/_navigation.less +++ b/lib/web/css/source/lib/variables/_navigation.less @@ -23,7 +23,7 @@ @navigation-level0-item__text-decoration: none; @navigation-level0-item__active__background: ''; -@navigation-level0-item__active__border-color: @color-orange-red1; +@navigation-level0-item__active__border-color: @active__color; @navigation-level0-item__active__border-style: solid; @navigation-level0-item__active__border-width: 0 0 0 8px; @navigation-level0-item__active__color: ''; @@ -47,7 +47,7 @@ @submenu-item__active__background: ''; @submenu-item__active__border: 8px; -@submenu-item__active__border-color: @color-orange-red1; +@submenu-item__active__border-color: @active__color; @submenu-item__active__border-style: solid; @submenu-item__active__border-width: 0 0 0 @submenu-item__active__border; @submenu-item__active__color: ''; @@ -77,7 +77,7 @@ @navigation-desktop-level0-item__hover__text-decoration: @navigation-desktop-level0-item__text-decoration; @navigation-desktop-level0-item__active__background: ''; -@navigation-desktop-level0-item__active__border-color: @color-orange-red1; +@navigation-desktop-level0-item__active__border-color: @active__color; @navigation-desktop-level0-item__active__border-style: solid; @navigation-desktop-level0-item__active__border-width: 0 0 3px; @navigation-desktop-level0-item__active__color: @navigation-desktop-level0-item__hover__color; @@ -109,7 +109,7 @@ @submenu-desktop-item__hover__text-decoration: @navigation-desktop-level0-item__text-decoration; @submenu-desktop-item__active__background: ''; -@submenu-desktop-item__active__border-color: @color-orange-red1; +@submenu-desktop-item__active__border-color: @active__color; @submenu-desktop-item__active__border-style: solid; @submenu-desktop-item__active__border-width: 0 0 0 3px; @submenu-desktop-item__active__color: ''; diff --git a/lib/web/css/source/lib/variables/_rating.less b/lib/web/css/source/lib/variables/_rating.less index 2ffdab8beddfc..ec60d5916315c 100644 --- a/lib/web/css/source/lib/variables/_rating.less +++ b/lib/web/css/source/lib/variables/_rating.less @@ -14,6 +14,6 @@ @rating-icon__letter-spacing: -10px; @rating-icon__color: @color-gray78; -@rating-icon__active__color: @color-orange-red1; +@rating-icon__active__color: @active__color; @rating-label__hide: false; diff --git a/lib/web/css/source/lib/variables/_typography.less b/lib/web/css/source/lib/variables/_typography.less index bf88990fe05c8..205b1fa9c7a3b 100644 --- a/lib/web/css/source/lib/variables/_typography.less +++ b/lib/web/css/source/lib/variables/_typography.less @@ -83,13 +83,13 @@ // Links // --------------------------------------------- -@link__color: @color-blue1; +@link__color: @theme__color__primary; @link__text-decoration: none; @link__visited__color: @link__color; @link__visited__text-decoration: none; -@link__hover__color: @color-blue2; +@link__hover__color: @theme__color__primary-alt; @link__hover__text-decoration: underline; @link__active__color: @active__color; diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index ebd6bdd003b81..373708ac35a00 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -181,8 +181,8 @@ .fotorama__active { .fotorama__dot { - background-color: @color-orange-red1; - border-color: @color-orange-red1; + background-color: @active__color; + border-color: @active__color; } } @@ -237,7 +237,7 @@ &:extend(.fotorama-print-background); backface-visibility: hidden; background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(64, 64, 64, 0.1)); - border: 1px solid @color-orange-red1; + border: 1px solid @active__color; left: 0; position: absolute; top: 0; diff --git a/lib/web/mage/gallery/module/_extends.less b/lib/web/mage/gallery/module/_extends.less index cfcec77603409..ab38cf40f63d9 100644 --- a/lib/web/mage/gallery/module/_extends.less +++ b/lib/web/mage/gallery/module/_extends.less @@ -42,7 +42,7 @@ .fotorama-focus-overlay { &:after { &:extend(.fotorama-stretch); - background-color: @color-blue2; + background-color: @theme__color__primary-alt; border-radius: inherit; content: ''; }