feat: make the 'b2c' theme a configurable theme dynamically customiza…

…ble with CSS custom properties (#1427) * removed 'darken' and 'lighten' * added Bootstrap overrides that are necessary when working with var color values and the '$primary' and '$secondary' SCSS variable are not necessarily fitting colors * changed 'b2c' theme to a configurable theme with CSS custom properties that can be dynamically configured via ICM CMS Configuration component
intershop · Jun 1, 2023 · 849ebc1 · 849ebc1
1 parent 51203d9
commit 849ebc1
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 46 deletions.
diff --git a/src/styles/components/header/main-navigation.scss b/src/styles/components/header/main-navigation.scss
@@ -102,7 +102,7 @@
       .category-level3,
       .category-level4 {
         > li > a {
-          color: lighten($text-color-primary, 35%);
+          color: $text-color-tertiary;
         }
       }
     }
@@ -231,7 +231,7 @@
 
             a {
               font-size: $font-size-sub-menu-item;
-              color: lighten($text-color-primary, 35%);
+              color: $text-color-tertiary;
               text-transform: none;
             }
           }

diff --git a/src/styles/global/breadcrumbs.scss b/src/styles/global/breadcrumbs.scss
@@ -27,7 +27,7 @@
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
   }

diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -12,6 +12,61 @@
     clear: both;
   }
 
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+  }
+
+  &-primary {
+    background-color: $CORPORATE-PRIMARY;
+    border-color: $CORPORATE-PRIMARY;
+
+    &:hover {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+      box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+    }
+
+    &.disabled,
+    &:disabled {
+      background-color: $CORPORATE-LIGHT;
+      border-color: $CORPORATE-LIGHT;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+      }
+    }
+  }
+
+  &-secondary {
+    &:focus,
+    &.focus {
+      box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      background-color: $CORPORATE-SECONDARY;
+      border-color: $CORPORATE-SECONDARY;
+
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
+      }
+    }
+  }
+
   & ~ .btn.btn-block {
     margin-left: 0;
   }
@@ -35,9 +90,8 @@
     border-color: $button-default-border;
 
     &:not(:disabled):hover {
-      //color: $button-default-color;
-      background-color: darken($button-default-bg, 10%);
-      border-color: darken($button-default-border, 10%);
+      background-color: $color-tertiary;
+      border-color: $CORPORATE-SECONDARY;
     }
   }
 }

diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
@@ -124,7 +124,7 @@ input.form-check-input {
 
 .form-control:focus {
   border-color: $color-special-tertiary;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-special-tertiary;
 }
 
 .input-help {
@@ -197,7 +197,7 @@ optgroup {
 
     &:focus {
       border-color: $error-color;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($error-color, 20%);
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $error-color;
     }
   }
 

diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
@@ -21,6 +21,10 @@
 }
 
 // Global Styles
+body {
+  color: $text-color-primary;
+}
+
 h1,
 .h1,
 h2,
@@ -76,6 +80,16 @@ a {
   }
 }
 
+.text {
+  &-primary {
+    color: $CORPORATE-PRIMARY !important;
+  }
+
+  &-secondary {
+    color: $CORPORATE-SECONDARY !important;
+  }
+}
+
 .link-separator {
   &::before {
     margin-right: 7.5px;
@@ -224,7 +238,7 @@ img.marketing {
 
     &:hover {
       color: $text-color-inverse;
-      background: lighten($CORPORATE-PRIMARY, 5%);
+      background: $CORPORATE-SECONDARY;
     }
   }
 }

diff --git a/src/styles/global/lists.scss b/src/styles/global/lists.scss
@@ -25,7 +25,7 @@
   }
 
   a {
-    $disabled-link-color: darken($CORPORATE-PRIMARY, $default-color-adjust);
+    $disabled-link-color: $CORPORATE-SECONDARY;
 
     color: $disabled-link-color;
 
@@ -34,7 +34,7 @@
     }
 
     &:hover &:hover > .ng-fa-icon {
-      color: darken($disabled-link-color, $default-color-adjust);
+      color: $CORPORATE-DARK;
     }
   }
 }
diff --git a/src/styles/pages/account/account-navigation.scss b/src/styles/pages/account/account-navigation.scss
@@ -6,7 +6,7 @@
     background: $color-tertiary;
 
     &:hover {
-      background: darken($color-tertiary, 10%) none repeat scroll 0 0;
+      background: $color-quaternary none repeat scroll 0 0;
     }
 
     &.account-nav-header {

diff --git a/src/styles/pages/checkout/checkout.scss b/src/styles/pages/checkout/checkout.scss
@@ -64,15 +64,15 @@
         text-transform: none;
 
         &:hover {
-          color: darken($text-color-inverse, 15%);
+          color: $text-color-quaternary;
         }
       }
 
       button.btn {
         color: $text-color-inverse;
 
         &:hover {
-          color: darken($text-color-inverse, 15%);
+          color: $text-color-quaternary;
         }
       }
 

diff --git a/src/styles/pages/productdetail/product-info.scss b/src/styles/pages/productdetail/product-info.scss
@@ -33,7 +33,7 @@ a.product-title {
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
   }

diff --git a/src/styles/pages/productdetail/productdetail.scss b/src/styles/pages/productdetail/productdetail.scss
@@ -42,7 +42,7 @@
       color: $text-color-quaternary;
 
       &:hover {
-        color: darken($text-color-quaternary, 10%);
+        color: $text-color-tertiary;
       }
     }
 

diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
@@ -35,6 +35,9 @@ $font-size-corporate: 0.875rem; // 14px is the bootstrap 3 default font size (1r
 
 $CORPORATE-PRIMARY: #688dc3; // BLUE
 $CORPORATE-SECONDARY: darken($CORPORATE-PRIMARY, 10%);
+$CORPORATE-LIGHT: lighten($CORPORATE-PRIMARY, 10%);
+$CORPORATE-DARK: darken($CORPORATE-PRIMARY, 20%);
+$CORPORATE-SHADOW: #7f9ecc80; // with alpha transparency
 
 //
 //TEXT COLORS
@@ -58,6 +61,7 @@ $color-corporate: $CORPORATE-PRIMARY;
 $color-primary: #222;
 $color-secondary: #2c2d2e;
 $color-tertiary: #eee;
+$color-quaternary: #d5d5d5;
 
 $color-dark: #000;
 $color-inverse: #fff;
@@ -88,6 +92,7 @@ $border-width-default: 1px;
 // primary buttons
 $button-primary-bg: $CORPORATE-PRIMARY;
 $button-primary-border: $CORPORATE-SECONDARY;
+$button-focus-box-shadow: $CORPORATE-SHADOW;
 
 // default buttons
 $button-default-color: $CORPORATE-PRIMARY;
@@ -186,8 +191,8 @@ $body-color: $color-primary;
 //
 // Style anchor elements.
 
-$link-color: $primary;
-$link-hover-color: darken($link-color, 10%);
+$link-color: $CORPORATE-PRIMARY;
+$link-hover-color: $CORPORATE-SECONDARY;
 
 // Components
 //

diff --git a/src/styles/themes/b2c/properties.scss b/src/styles/themes/b2c/properties.scss
@@ -0,0 +1,42 @@
+:root {
+  //
+  // LOGOS
+  --logo: url('/assets/themes/b2c/img/logo.png');
+  --logo-width: 114px;
+  --logo-height: 40px;
+  --logo-mobile: url('/assets/themes/b2c/img/logo_mobile.png');
+  --logo-mobile-width: 41px;
+  --logo-mobile-height: 41px;
+
+  //
+  // FONTS
+  --font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif;
+  --font-family-bold: 'robotobold', 'Helvetica', 'Arial', sans-serif;
+  --font-family-condensedregular: 'roboto_condensedregular', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
+  --font-family-condensedbold: 'roboto_condensedbold', 'Helvetica Neue', helvetica, 'Arial', sans-serif;
+
+  //
+  // CORPORATE DESIGN COLORS
+  --corporate-primary: #ff6d00; // ORANGE
+  --corporate-secondary: #cc5700; // darken($CORPORATE-PRIMARY, 10%);
+  --corporate-light: #ff8a33; // lighten($CORPORATE-PRIMARY, 10%);
+  --corporate-dark: #994100; // darken($CORPORATE-PRIMARY, 20%);
+  --corporate-shadow: #ff832680; // with alpha transparency
+
+  //
+  // TEXT COLOR
+  --text-color-corporate: var(--corporate-primary);
+  --text-color-primary: #222;
+  --text-color-secondary: #555;
+  --text-color-tertiary: #8b8b8b;
+  --text-color-quaternary: #999;
+  --text-color-quinary: #eee;
+
+  //
+  // GENERAL COLORS
+  --color-corporate: var(--corporate-primary);
+  --color-primary: #222;
+  --color-secondary: #2c2d2e;
+  --color-tertiary: #eee;
+  --color-quaternary: #d5d5d5;
+}
diff --git a/src/styles/themes/b2c/style.scss b/src/styles/themes/b2c/style.scss
@@ -1,10 +1,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 //
-// THEME SPECIFIC CONFIGURATION
+// THEME SPECIFIC CONFIGURATION with CSS Custom Properties
 //
 ///////////////////////////////////////////////////////////////////////////////
 
-// set theme specific variables
+// set CSS custom properties (can be overridden at runtime)
+@import 'properties';
+
+// set theme specific variables (partially with CSS custom properties)
 @import 'variables';
 
 // import general main theme