Refactored color naming convention

src/themes/default/components/core/Breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumbs h5 c-darkgray hidden-xs">
+  <div class="breadcrumbs h5 cl-accent hidden-xs">
     <span v-for="link in routes" :key="link.route_link">
       <router-link :to="link.route_link">
         {{ link.name | htmlDecode }}

src/themes/default/components/core/ColorButton.vue

@@ -1,12 +1,12 @@
 <template>
   <button
-    class="mr10 mb5 bg-transparent brdr-1 brdr-circle brdr-c-transparent relative inline-flex pointer color"
+    class="mr10 mb5 bg-cl-transparent brdr-1 brdr-circle brdr-cl-transparent :brdr-cl-bg-primary relative inline-flex pointer color"
     @click="switchFilter(id, label)"
     :class="{ active: active }"
     :aria-label="$t('Select color ') + label"
   >
     <div
-      class="absolute brdr-circle brdr-1 brdr-c-alto block color-inside"
+      class="absolute brdr-circle brdr-1 brdr-cl-secondary block color-inside"
       :style="colorFrom(label)"
     />
   </button>
@@ -30,21 +30,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $emperor: map-get($colors, emperor);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-active: color(primary);
 
   .color {
     width: 40px;
     height: 40px;
 
-    &:hover,
-    &:focus {
-      border-color: $lightgray-secondary;
-    }
-
     &.active {
-      border-color: $emperor;
+      border-color: $color-active;
     }
   }
 

src/themes/default/components/core/CookieNotification.vue

@@ -1,13 +1,13 @@
 <template>
   <transition name="fade" appear>
-    <div class="cookie fixed w-100 bg-darkgray c-lightgray-secondary" v-if="isOpen">
+    <div class="cookie fixed w-100 bg-cl-th-accent cl-tertiary" v-if="isOpen">
       <div class="container">
         <div class="row between-xs middle-xs px15">
           <div class="col-xs-10 start-xs">
             <span class="pr5">
               {{ message }}
             </span>
-            <router-link :to="detailsLink" :title="detailsLinkText" class="c-gray">
+            <router-link :to="detailsLink" :title="detailsLinkText" class="cl-bg-tertiary">
               {{ detailsLinkText }}
             </router-link>
           </div>
@@ -65,18 +65,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-icon: color(black);
+$bg-icon: color(suva-gray);
 
-  $gray: map-get($colors, gray);
-  $black: map-get($colors, black);
-
-  .cookie {
-    z-index: 2;
-    bottom: 0;
-  }
+.cookie {
+  z-index: 2;
+  bottom: 0;
+}
 
-  .icon:hover {
-    color: $black;
-    background-color: $gray;
-  }
+.icon:hover {
+  color: $color-icon;
+  background-color: $bg-icon;
+}
 </style>

src/themes/default/components/core/Loader.vue

@@ -2,11 +2,11 @@
   <div class="loader-container fixed" v-if="isVisible">
     <div class="loader-inner-container fixed">
       <div class="spinner relative">
-        <div class="double-bounce1 absolute w-100 brdr-circle bg-ocean-green"/>
-        <div class="double-bounce2 absolute w-100 brdr-circle bg-ocean-green"/>
+        <div class="double-bounce1 absolute w-100 brdr-circle bg-cl-th-success"/>
+        <div class="double-bounce2 absolute w-100 brdr-circle bg-cl-th-success"/>
       </div>
       <div
-        class="loader-message-container mt15 py5 px15 align-center h6 c-white"
+        class="loader-message-container mt15 py5 px15 align-center h6 cl-white"
         v-if="message"
       >
         {{ message }}
@@ -25,8 +25,10 @@ export default {
 
 <style lang="scss" scoped>
 @import '~theme/css/base/global_vars';
-$black: map-get($colors, black);
-$ocean-green: map-get($colors, ocean-green);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-container-bg: color(black);
+$color-message-bg: color(success);
 $z-index-loader: map-get($z-index, loader);
 
 .loader-container {
@@ -35,7 +37,7 @@ $z-index-loader: map-get($z-index, loader);
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: rgba($black, 0.65);
+  background-color: rgba($color-container-bg, 0.65);
 }
 
 .loader-inner-container {
@@ -45,7 +47,7 @@ $z-index-loader: map-get($z-index, loader);
 }
 
 .loader-message-container {
-  background-color: rgba($ocean-green, 0.75);
+  background-color: rgba($color-message-bg, 0.75);
   border-radius: 50px;
   letter-spacing: 0.5px;
 }

src/themes/default/components/core/Modal.vue

@@ -6,9 +6,9 @@
          @click.self="close">
       <div class="modal-wrapper">
         <div class="modal-center">
-          <div class="modal-container bg-white" ref="modal-content" :style="style">
-            <header class="modal-header py25 px65 h1 serif weight-700 bg-lightgray" v-if="$slots.header">
-              <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+          <div class="modal-container bg-cl-primary" ref="modal-content" :style="style">
+            <header class="modal-header py25 px65 h1 serif weight-700 bg-cl-secondary" v-if="$slots.header">
+              <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
               <slot name="header"/>
             </header>
             <div class="modal-content pt30 pb60 px65" v-if="$slots.content || staticData">

src/themes/default/components/core/NewsletterPopup.vue

@@ -10,16 +10,16 @@
             {{ $t('Sign up to our newsletter and receive a coupon for 10% off!') }}
           </p>
           <input
-            class="border-box w-100 brdr-none brdr-bottom brdr-c-lightgray-secondary py10 h4 weight-200"
+            class="border-box w-100 brdr-none brdr-bottom brdr-cl-primary py10 h4 weight-200"
             autofocus
             type="email"
             name="email"
             v-model="email"
             autocomplete="email"
             :placeholder="$t('E-mail address *')"
           >
-          <p class="m0 c-red h6" v-if="$v.email.$error && !$v.email.required">Field is required.</p>
-          <p class="m0 c-red h6" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</p>
+          <p class="m0 cl-error h6" v-if="$v.email.$error && !$v.email.required">Field is required.</p>
+          <p class="m0 cl-error h6" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</p>
         </div>
         <div class="mb35 center-xs">
           <button-full
@@ -81,18 +81,17 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $black: map-get($colors, black);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
 
   input::-webkit-input-placeholder,
   input::-moz-placeholder {
-    color: $lightgray-secondary;
+    color: color(tertiary);
   }
 
   input:focus {
     outline: none;
-    border-color: $black;
+    border-color: color(black);
     transition: 0.3s all;
   }
 </style>

src/themes/default/components/core/Notification.vue

@@ -2,7 +2,7 @@
   <div class="notifications fixed">
     <transition-group name="fade-in-down">
       <div
-        class="notification mt30 border-box c-white"
+        class="notification mt30 border-box cl-white"
         v-for="(notification, index) in notifications"
         :key="index"
         :class="{
@@ -36,12 +36,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
 $z-index-notification: map-get($z-index, notification);
-$red: map-get($colors, red);
-$la-palma: map-get($colors, la-palma);
-$russet: map-get($colors, russet);
-$darkgray: map-get($colors, darkgray);
-$black: map-get($colors, black);
+$color-error: color(error);
+$color-success: color(success);
+$color-warning: color(warning);
+$color-info: color(accent);
+$color-action: color(black);
 
 .notifications {
   top: 100px;
@@ -63,25 +65,25 @@ $black: map-get($colors, black);
   }
 }
 .notification {
-  box-shadow: 0px 0px 35px -5px rgba($black, .7);
+  box-shadow: 0px 0px 35px -5px rgba($color-action, .7);
 
   &:first-child  {
     margin-top: 0;
   }
 }
 .actions {
-  background: rgba($black, .2);
+  background: rgba($color-action, .2);
 }
 .success {
-  background: $la-palma;
+  background: $color-success;
 }
 .error {
-  background: $red;
+  background: $color-error;
 }
 .warning {
-  background: $russet;
+  background: $color-warning;
 }
 .info {
-  background: $darkgray;
+  background: $color-info;
 }
 </style>

src/themes/default/components/core/OfflineBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="!isOnline"
-    class="offline-badge fixed w-100 p10 bg-red c-white center-xs"
+    class="offline-badge fixed w-100 p10 bg-cl-th-error cl-white center-xs"
   >
     {{ $t('You are offline, some of the functionalities are limited') }}
   </div>

src/themes/default/components/core/Overlay.vue

@@ -26,14 +26,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~theme/css/base/global_vars';
-$black: map-get($colors, black);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-bg: color(black);
 
 .overlay {
   height: 100vh;
   top: 0;
   left: 0;
-  background-color: rgba($black, 0.4);
+  background-color: rgba($color-bg, 0.4);
   z-index: 3;
 }
 </style>

src/themes/default/components/core/PriceButton.vue

@@ -1,11 +1,11 @@
 <template>
   <span @click="switchFilter(id, from, to)">
     <button
-      class="relative brdr-c-gray brdr-1 bg-transparent mr10 pointer price-button"
+      class="relative brdr-cl-bg-tertiary brdr-1 bg-cl-transparent mr10 pointer price-button"
       :class="{ active: active }"
       :aria-label="$t('Price ') + content"
     >
-      <div class="bg-transparent absolute block square"/>
+      <div class="bg-cl-transparent absolute block square"/>
     </button>
     <span>{{ content }}</span>
   </span>
@@ -20,9 +20,10 @@ export default { // TODO: move logic to parent component
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $darkgray: map-get($colors, darkgray);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-event: color(tertiary);
+  $color-active: color(accent);
 
   .price-button {
     width: 20px;
@@ -31,13 +32,13 @@ export default { // TODO: move logic to parent component
     &:hover,
     &:focus {
       .square {
-        background-color: $lightgray-secondary;
+        background-color: $color-event;
       }
     }
 
     &.active {
       .square {
-        background-color: $darkgray;
+        background-color: $color-active;
       }
     }
   }

src/themes/default/components/core/ProductAttribute.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="py10 c-gray-secondary">
+  <li class="py10 cl-secondary">
     <span>{{ label|htmlDecode }} </span>
     <span class="weight-700">{{ value|htmlDecode }}</span>
   </li>

src/themes/default/components/core/ProductLinks.vue

@@ -4,7 +4,7 @@
       <div class="py10" v-if="productLink.product">
         <div class="row middle-xs h4 mb10">
           <p class="col-xs-7 serif m0">{{ productLink.product.name | htmlDecode }}</p>
-          <div class="col-xs-4 c-gray">
+          <div class="col-xs-4 cl-bg-tertiary">
             <div v-if="productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax">
               <span class="price-special">{{ productLink.product.priceInclTax | price }}</span>&nbsp;
               <span class="price-original" >{{ productLink.product.originalPriceInclTax | price }}</span>
@@ -16,12 +16,12 @@
         </div>
 
         <div v-if="productLink.product" class="py5">
-          <p class="h6 c-gray m0">
+          <p class="h6 cl-bg-tertiary m0">
             {{ $t('Quantity') }}
           </p>
           <input
             type="number"
-            class="product-qty py10 brdr-c-lightgray-secondary bg-transparent h4 weight-300"
+            class="product-qty py10 brdr-cl-primary bg-cl-transparent h4 weight-300"
             min="1"
             autofocus
             v-model.number="productLink.product.qty"