ENGCOM-3596: Use semantic theme color variables, including global primary/secondary colors #19467

sidolov · web-flow · commit 657c1b3fd472 · 2019-01-03T16:44:19.000-06:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -146,12 +146,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1863,7 +1863,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: '';
     }

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`.error-block {`
`50`		`- color: @color-red10;`
	`50`	`+ color: @error__color;`
`51`	`51`
`52`	`52`	`.error-label {`
`53`	`53`	`font-weight: @font-weight__bold;`
`@@ -222,7 +222,7 @@`
`222`	`222`	`}`
`223`	`223`
`224`	`224`	`.error-description {`
`225`		`- color: @color-red10;`
	`225`	`+ color: @error__color;`
`226`	`226`	`font-weight: @font-weight__regular;`
`227`	`227`	`margin-bottom: @indent__s;`
`228`	`228`	`margin-top: -@indent__s;`
Original file line number	Diff line number	Diff line change
`@@ -146,12 +146,6 @@`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`&:extend(.abs-adjustment-incl-excl-tax all);`
`149`		`-`
`150`		`- .action {`
`151`		`- &.multicheckout {`
`152`		`- color: @color-blue2;`
`153`		`- }`
`154`		`- }`
`155`	`149`	`}`
`156`	`150`
`157`	`151`	`// Totals block`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.error-block {`
`51`		`- color: @color-red10;`
	`51`	`+ color: @error__color;`
`52`	`52`
`53`	`53`	`.error-label {`
`54`	`54`	`font-weight: @font-weight__bold;`
`@@ -230,7 +230,7 @@`
`230`	`230`	`}`
`231`	`231`
`232`	`232`	`.error-description {`
`233`		`- color: @color-red10;`
	`233`	`+ color: @error__color;`
`234`	`234`	`font-weight: @font-weight__regular;`
`235`	`235`	`margin-bottom: @indent__s;`
`236`	`236`	`margin-top: -@indent__s;`
Original file line number	Diff line number	Diff line change
`@@ -1863,7 +1863,7 @@`
`1863`	`1863`
`1864`	`1864`	`> .title {`
`1865`	`1865`	`strong {`
`1866`		`- color: @color-blue1;`
	`1866`	`+ color: @link__color;`
`1867`	`1867`	`font-weight: @font-weight__regular;`
`1868`	`1868`	`}`
`1869`	`1869`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`.fotorama-focus-overlay {`
`43`	`43`	`&:after {`
`44`	`44`	`&:extend(.fotorama-stretch);`
`45`		`- background-color: @color-blue2;`
	`45`	`+ background-color: @theme__color__primary-alt;`
`46`	`46`	`border-radius: inherit;`
`47`	`47`	`content: '';`
`48`	`48`	`}`