npm - @colijnit/transaction - Versions diffs - 301.1.9 → 301.1.11 - Mend

@colijnit/transaction 301.1.9 → 301.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/lib/component/delivery-planning/style/_layout.scss CHANGED Viewed

@@ -1,9 +1,8 @@
 @include export-module('cc-delivery-planning-layout') {
-  @import "../../delivery-planning-main/style/material";
   .co-delivery-planning {
     position: relative;
     * {
-      font-family: $font-family;
+      font-family: $tp-delivery-planning-font-family;
     }
     .row {
       display: flex;
@@ -16,8 +15,8 @@
                 top: 30px;
                 right: 50px;
                 .co-icon {
-                  width: 35px;
-                  height: 35px;
+                  width: $tp-delivery-planning-tile-view-modes-icon-size;
+                  height: $tp-delivery-planning-tile-view-modes-icon-size;
                 }
               }
             }
@@ -36,8 +35,8 @@
         }
         .delivery-main-wrapper{
           width: 100%;
-          background: #FFF;
-          padding: 30px 15px 0 15px;
+          background: $tp-delivery-planning-main-wrapper-background;
+          padding: $tp-delivery-planning-main-wrapper-padding;
         }
       }
       .planning-selection-wrapper {
@@ -54,22 +53,22 @@
           grid-row-gap: 10px;
           row-gap: 10px;
           padding: 10px;
-          box-shadow: 0 0 3px 0 rgba(1, 1, 1, 0.5);
+          box-shadow: $tp-delivery-planning-options-box-shadow;
           border-radius: 0;
-          background-color: #212437;
+          background-color: $tp-delivery-planning-options-background;
           top: 30px;
           overflow: auto;
           width: 100%;
           min-width: 180px;
           .option {
-            color: #FFF;
-            background: #2e3350;
+            color: $tp-delivery-planning-option-color;
+            background: $tp-delivery-planning-option-background;
             cursor: pointer;
             padding: 5px;
-            font-size: 12px;
+            font-size: $tp-delivery-planning-option-font-size;
             &:hover {
-              background: #e8eceb;
-              color: #171721;
+              background: $tp-delivery-planning-option-hover-background;
+              color: $tp-delivery-planning-option-hover-color;
             }
             span {
               width: 100%;
@@ -110,7 +109,7 @@
                 display: flex;
                 font-weight: bold;
               }
-              border: 1px solid #DEF8EF;
+              border: $tp-delivery-planning-weekday-block-border;
             }
           }
           .sc-agenda {
@@ -125,14 +124,14 @@
                 display: flex;
                 gap: 10px;
                 .label {
-                  background: #F5F5FA;
+                  background: $tp-delivery-planning-hour-label-background;
                   padding: 2px 5px;
-                  font-size: 11px;
-                  border-radius: 3px;
+                  font-size: $tp-delivery-planning-hour-label-font-size;
+                  border-radius: $tp-delivery-planning-hour-label-border-radius;
                   cursor: pointer;
                   &.active {
-                    background: #1A73E8;
-                    color: #FFF;
+                    background: $tp-delivery-planning-hour-label-active-background;
+                    color: $tp-delivery-planning-hour-label-active-color;
                   }
                 }
               }

package/lib/component/delivery-planning/style/_material-definition.scss CHANGED Viewed

@@ -1 +1,17 @@
-$font-family: Inter,sans-serif
+$tp-delivery-planning-font-family: $tp-font-family !default;
+$tp-delivery-planning-tile-view-modes-icon-size: 35px !default;
+$tp-delivery-planning-main-wrapper-background: $tp-color-light !default;
+$tp-delivery-planning-main-wrapper-padding: 30px 15px 0 15px !default;
+$tp-delivery-planning-options-background: #212437 !default;
+$tp-delivery-planning-options-box-shadow: 0 0 3px 0 rgba(1, 1, 1, 0.5) !default;
+$tp-delivery-planning-option-background: $tp-color-label !default;
+$tp-delivery-planning-option-color: $tp-color-light !default;
+$tp-delivery-planning-option-font-size: $tp-font-size !default;
+$tp-delivery-planning-option-hover-background: $tp-color-hover !default;
+$tp-delivery-planning-option-hover-color: $tp-color-font !default;
+$tp-delivery-planning-weekday-block-border: 1px solid #DEF8EF !default;
+$tp-delivery-planning-hour-label-background: #F5F5FA !default;
+$tp-delivery-planning-hour-label-font-size: 11px !default;
+$tp-delivery-planning-hour-label-border-radius: 3px !default;
+$tp-delivery-planning-hour-label-active-background: $tp-color-action !default;
+$tp-delivery-planning-hour-label-active-color: $tp-color-light !default;

package/lib/component/delivery-planning/style/material.scss CHANGED Viewed

@@ -1,4 +1,5 @@
 @import "../../../style/mixin";
 @import "./material-definition";
+@import "../../delivery-planning-main/style/material";
 @import "./layout";
 @import "./theme";

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-popup/style/_layout.scss CHANGED Viewed

@@ -26,7 +26,7 @@
       co-editable-label {
         display: flex;
         flex: 1;
-        max-width: 250px;
+        max-width: $tp-delivery-planning-overview-popup-editable-label-max-width;
       }
     }
@@ -35,8 +35,8 @@
       flex-direction: column;
       gap: 0.5em;
       .h1 {
-        font-size: 14px;
-        font-weight: 600;
+        font-size: $tp-delivery-planning-overview-popup-subtitle-font-size;
+        font-weight: $tp-delivery-planning-overview-popup-subtitle-font-weight;
         padding: 5px 0 10px 0;
       }
     }
@@ -60,23 +60,23 @@
     }
     .co-dialog {
       .co-dialog-wrapper {
-        max-width: 460px;
+        max-width: $tp-delivery-planning-overview-popup-max-width;
       }
       .footer-header-title {
-        font-weight: 700;
-        font-size: 16px;
+        font-weight: $tp-delivery-planning-overview-popup-title-font-weight;
+        font-size: $tp-delivery-planning-overview-popup-title-font-size;
       }
       .dialog-header-wrapper {
         .co-icon {
-          width: 40px;
-          height: 40px;
+          width: $tp-delivery-planning-overview-popup-header-icon-size;
+          height: $tp-delivery-planning-overview-popup-header-icon-size;
           path {
             &.fa-secondary {
-              fill: #000;
-              opacity: .2;
+              fill: $tp-delivery-planning-overview-popup-header-icon-secondary-color;
+              opacity: $tp-delivery-planning-overview-popup-header-icon-secondary-opacity;
             }
             &.fa-primary {
-              fill: #1A73E8;
+              fill: $tp-delivery-planning-overview-popup-header-icon-primary-color;
             }
           }
         }
@@ -84,8 +84,8 @@
       .remark-wrapper {
         padding-bottom: 10px;
         span {
-          font-size: 14px;
-          font-weight: 600;
+          font-size: $tp-delivery-planning-overview-popup-subtitle-font-size;
+          font-weight: $tp-delivery-planning-overview-popup-subtitle-font-weight;
           padding: 10px 0;
           display: block;
         }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-popup/style/_material-definition.scss CHANGED Viewed

@@ -0,0 +1,10 @@
+$tp-delivery-planning-overview-popup-max-width: 460px !default;
+$tp-delivery-planning-overview-popup-title-font-size: 16px !default;
+$tp-delivery-planning-overview-popup-title-font-weight: 700 !default;
+$tp-delivery-planning-overview-popup-subtitle-font-size: $tp-font-size-big !default;
+$tp-delivery-planning-overview-popup-subtitle-font-weight: 600 !default;
+$tp-delivery-planning-overview-popup-header-icon-size: 40px !default;
+$tp-delivery-planning-overview-popup-header-icon-primary-color: $tp-color-action !default;
+$tp-delivery-planning-overview-popup-header-icon-secondary-color: #000 !default;
+$tp-delivery-planning-overview-popup-header-icon-secondary-opacity: .2 !default;
+$tp-delivery-planning-overview-popup-editable-label-max-width: 250px !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-short-line/style/_layout.scss CHANGED Viewed

@@ -6,15 +6,15 @@
     align-items: center;
     .planning-line-short {
       span {
-        font-size: 11px;
+        font-size: $tp-delivery-planning-overview-short-line-font-size;
         display: block;
       }
       &:before {
-        width: 10px;
-        height: 10px;
+        width: $tp-delivery-planning-overview-short-line-dot-size;
+        height: $tp-delivery-planning-overview-short-line-dot-size;
         position: absolute;
         border-radius: 100%;
-        background: #DCE4EA;
+        background: $tp-delivery-planning-overview-short-line-dot-color;
         content: '';
         left: -15px;
         top: 50%;
@@ -29,7 +29,7 @@
         width: 2px;
         height: 9px;
         position: absolute;
-        background: #ccc;
+        background: $tp-delivery-planning-overview-short-line-connector-color;
         content: '';
         left: -11px;
         top: calc(50% + 12px);

@@ -0,0 +1,4 @@
+$tp-delivery-planning-overview-short-line-font-size: 11px !default;
+$tp-delivery-planning-overview-short-line-dot-size: 10px !default;
+$tp-delivery-planning-overview-short-line-dot-color: $tp-color-border !default;
+$tp-delivery-planning-overview-short-line-connector-color: #ccc !default;

@@ -1,7 +1,7 @@
 @include export-module('cc-delivery-planning-overview-tile-dropdown-layout') {
   .co-delivery-planning-overview-tile-dropdown {
     display: block;
-    background: white;
+    background: $tp-delivery-planning-overview-tile-dropdown-background;
     z-index: 100;
     .dropdown-panel {
@@ -9,10 +9,10 @@
       flex-direction: column;
       gap: 0.25rem;
       padding: 0.5rem;
-      border: 1px solid #dce3eb;
-      border-radius: 0.375rem;
-      background: white;
-      box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
+      border: $tp-delivery-planning-overview-tile-dropdown-border;
+      border-radius: $tp-delivery-planning-overview-tile-dropdown-border-radius;
+      background: $tp-delivery-planning-overview-tile-dropdown-background;
+      box-shadow: $tp-delivery-planning-overview-tile-dropdown-box-shadow;
     }
     .dropdown-action {
@@ -21,9 +21,9 @@
       width: 100%;
       padding: 0.625rem 0.75rem;
       border: 1px solid transparent;
-      border-radius: 0.25rem;
+      border-radius: $tp-delivery-planning-overview-tile-dropdown-action-border-radius;
       background: transparent;
-      color: #202938;
+      color: $tp-delivery-planning-overview-tile-dropdown-action-color;
       cursor: pointer;
       font: inherit;
       text-align: left;
@@ -32,30 +32,30 @@
               border-color 120ms ease;
       &:hover {
-        background: #f3f7fc;
+        background: $tp-delivery-planning-overview-tile-dropdown-action-hover-background;
       }
       &:focus-visible {
-        border-color: #8fb8ea;
-        background: #f3f7fc;
+        border-color: $tp-delivery-planning-overview-tile-dropdown-action-focus-border-color;
+        background: $tp-delivery-planning-overview-tile-dropdown-action-hover-background;
         outline: none;
       }
       &:active {
-        background: #e7f0fb;
+        background: $tp-delivery-planning-overview-tile-dropdown-action-active-background;
       }
       span {
-        font-size: 0.875rem;
-        font-weight: 600;
+        font-size: $tp-delivery-planning-overview-tile-dropdown-action-font-size;
+        font-weight: $tp-delivery-planning-overview-tile-dropdown-action-font-weight;
         line-height: 1.25rem;
       }
     }
     .dropdown-action--selected {
-      border-color: #a8c8ee;
-      background: #eaf3ff;
-      color: #172b4d;
+      border-color: $tp-delivery-planning-overview-tile-dropdown-action-selected-border-color;
+      background: $tp-delivery-planning-overview-tile-dropdown-action-selected-background;
+      color: $tp-delivery-planning-overview-tile-dropdown-action-selected-color;
     }
   }
 }

@@ -1 +1,14 @@
+$tp-delivery-planning-overview-tile-dropdown-background: white !default;
+$tp-delivery-planning-overview-tile-dropdown-border: 1px solid #dce3eb !default;
+$tp-delivery-planning-overview-tile-dropdown-border-radius: 0.375rem !default;
+$tp-delivery-planning-overview-tile-dropdown-box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08) !default;
+$tp-delivery-planning-overview-tile-dropdown-action-color: #202938 !default;
+$tp-delivery-planning-overview-tile-dropdown-action-border-radius: 0.25rem !default;
+$tp-delivery-planning-overview-tile-dropdown-action-font-size: 0.875rem !default;
+$tp-delivery-planning-overview-tile-dropdown-action-font-weight: 600 !default;
+$tp-delivery-planning-overview-tile-dropdown-action-hover-background: #f3f7fc !default;
+$tp-delivery-planning-overview-tile-dropdown-action-focus-border-color: #8fb8ea !default;
+$tp-delivery-planning-overview-tile-dropdown-action-active-background: #e7f0fb !default;
+$tp-delivery-planning-overview-tile-dropdown-action-selected-border-color: #a8c8ee !default;
+$tp-delivery-planning-overview-tile-dropdown-action-selected-background: #eaf3ff !default;
+$tp-delivery-planning-overview-tile-dropdown-action-selected-color: #172b4d !default;

@@ -1,7 +1,7 @@
 @include export-module('cc-delivery-planning-overview-tile-line-layout') {
   .co-delivery-planning-overview-tile-line {
     display: flex;
-    border-radius: 3px;
+    border-radius: $tp-delivery-planning-overview-tile-line-border-radius;
     position: relative;
     gap: 0;
     .planning-line-wrapper {
@@ -12,33 +12,38 @@
       left: 0;
       width: 100%;
       top: 0;
-      background: #F5F5FC;
+      background: $tp-delivery-planning-overview-tile-line-background;
       padding: 0;
+      &.loose-task .planning-line-content .planning-time {
+        text-decoration: none;
+        color: inherit;
+      }
       .planning-line-content {
-        padding: 3px 7px;
+        padding: $tp-delivery-planning-overview-tile-line-content-padding;
         line-height: 12px;
         .planning-time {
-          font-size: 11px;
+          font-size: $tp-delivery-planning-overview-tile-line-time-font-size;
           text-decoration: underline;
           display: flex;
           gap: 5px;
-          color: #1A73E8;
+          color: $tp-delivery-planning-overview-tile-line-time-color;
           .co-icon {
             height: 12px;
             width: 12px;
             svg {
-              fill: #1A73E8;
+              fill: $tp-delivery-planning-overview-tile-line-time-color;
             }
             svg [fill] {
-              fill: #1A73E8;
+              fill: $tp-delivery-planning-overview-tile-line-time-color;
             }
           }
         }
         .planning-order {
           a {
             text-decoration: none;
-            color: #000;
+            color: $tp-delivery-planning-overview-tile-line-order-color;
           }
         }
       }
@@ -49,10 +54,10 @@
           .lines-content {
             position: relative;
             padding: 10px 30px 10px 10px;
-            background: #FFF;
-            border-color: #ccc;
+            background: $tp-delivery-planning-overview-tile-line-order-line-background;
+            border-color: $tp-delivery-planning-overview-tile-line-order-line-border-color;
             border-style: solid;
-            border-radius: 5px;
+            border-radius: $tp-delivery-planning-overview-tile-line-order-line-border-radius;
             border-width: 1px 1px 0 1px;
             &:last-child {
               border-width: 1px 1px 1px 1px;
@@ -64,9 +69,9 @@
           gap: 15px;
           padding: 5px 0 5px 10px;
           width: 100%;
-          border-top: 1px solid #DCE4EA;
-          background: #FFF;
-          font-size: 12px;
+          border-top: $tp-delivery-planning-overview-tile-line-tabs-border-top;
+          background: $tp-delivery-planning-overview-tile-line-tabs-background;
+          font-size: $tp-delivery-planning-overview-tile-line-tabs-font-size;
           .co-icon {
             width: 16px;
             height: 16px;
@@ -74,7 +79,7 @@
           span {
             cursor: pointer;
             &.active {
-              color: #1A73E8;
+              color: $tp-delivery-planning-overview-tile-line-tabs-active-color;
             }
           }
         }
@@ -104,15 +109,15 @@
           display: flex;
           flex-direction: column;
           width: 100%;
-          background: #FFF;
-          max-height: 300px;
+          background: $tp-delivery-planning-overview-tile-line-order-lines-background;
+          max-height: $tp-delivery-planning-overview-tile-line-order-lines-max-height;
           overflow-y: auto;
           overflow-x: hidden;
         }
         .lines-header {
           padding: 10px 30px 3px 10px;
           span {
-            font-size: 10px;
+            font-size: $tp-delivery-planning-overview-tile-line-order-lines-header-font-size;
           }
         }
         .remove-line {
@@ -123,55 +128,55 @@
       }
       &.color-V {
         &:before {
-          background: #569eee;
+          background: $tp-delivery-planning-overview-tile-line-type-marker-color-v;
         }
       }
       &.color-I {
         &:before {
-          background: #45b8bf;
+          background: $tp-delivery-planning-overview-tile-line-type-marker-color-i;
         }
       }
       &.color-S {
         &:before {
-          background: #d0a46b;
+          background: $tp-delivery-planning-overview-tile-line-type-marker-color-s;
         }
       }
       &.color-O {
         &:before {
-          background: #8083a3;
+          background: $tp-delivery-planning-overview-tile-line-type-marker-color-o;
         }
       }
       &.color-K {
         &:before {
-          background: #0b378c;
+          background: $tp-delivery-planning-overview-tile-line-type-marker-color-k;
         }
       }
       &:before {
         content: "";
-        width: 4px;
+        width: $tp-delivery-planning-overview-tile-line-type-marker-width;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
-        background: #1a73e8;
+        background: $tp-delivery-planning-overview-tile-line-type-marker-color;
         z-index: 99;
         border-radius: 5px 0 0 5px;
       }
       &.active-lines {
-        box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: $tp-delivery-planning-overview-tile-line-box-shadow;
       }
     }
     .reorder-buttons {
-      background: #F5F5FC;
-      box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2);
+      background: $tp-delivery-planning-overview-tile-line-reorder-buttons-background;
+      box-shadow: $tp-delivery-planning-overview-tile-line-box-shadow;
       .co-icon {
         padding: 3px;
       }
     }
     &.normal-mode {
       .planning-line-wrapper {
-        box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: $tp-delivery-planning-overview-tile-line-box-shadow;
         border-radius: 0;
         &.active-lines {
           position: relative;
@@ -185,10 +190,10 @@
         }
         .planning-line-content {
           cursor: pointer;
-          padding: 10px;
+          padding: $tp-delivery-planning-overview-tile-line-normal-mode-content-padding;
           line-height: normal;
           .planning-time {
-            font-size: 11px;
+            font-size: $tp-delivery-planning-overview-tile-line-time-font-size;
           }
           .planning-line-left {
             .co-icon {
@@ -208,11 +213,11 @@
         gap: 10px;
         align-items: center;
         .planning-address {
-          font-size: 12px;
-          font-weight: 500;
+          font-size: $tp-delivery-planning-overview-tile-line-address-font-size;
+          font-weight: $tp-delivery-planning-overview-tile-line-address-font-weight;
         }
         .planning-relation {
-          font-size: 10px;
+          font-size: $tp-delivery-planning-overview-tile-line-relation-font-size;
         }
         .co-icon {
           width: 12px;
@@ -225,10 +230,10 @@
           .line-content-link {
             .co-icon {
               svg {
-                fill: #1A73E8;
+                fill: $tp-delivery-planning-overview-tile-line-link-color;
               }
               svg [fill] {
-                fill: #1A73E8;
+                fill: $tp-delivery-planning-overview-tile-line-link-color;
               }
             }
           }
@@ -292,14 +297,14 @@
     }
     .main {
-      color: $color-action-accent;
+      color: $tp-delivery-planning-overview-tile-line-main-color;
     }
     .dialog-header-wrapper {
       padding: 2em 0 4em 2em;
     }
     .footer-header-title {
-      font-weight: bold;
-      font-size: 20px;
+      font-weight: $tp-delivery-planning-overview-tile-line-dialog-title-font-weight;
+      font-size: $tp-delivery-planning-overview-tile-line-dialog-title-font-size;
     }
     co-icon {
       width: 20px;

@@ -0,0 +1,33 @@
+$tp-delivery-planning-overview-tile-line-border-radius: 3px !default;
+$tp-delivery-planning-overview-tile-line-background: #F5F5FC !default;
+$tp-delivery-planning-overview-tile-line-box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2) !default;
+$tp-delivery-planning-overview-tile-line-content-padding: 3px 7px !default;
+$tp-delivery-planning-overview-tile-line-normal-mode-content-padding: 10px !default;
+$tp-delivery-planning-overview-tile-line-time-font-size: 11px !default;
+$tp-delivery-planning-overview-tile-line-time-color: #1A73E8 !default;
+$tp-delivery-planning-overview-tile-line-link-color: #1A73E8 !default;
+$tp-delivery-planning-overview-tile-line-order-color: #000 !default;
+$tp-delivery-planning-overview-tile-line-address-font-size: $tp-font-size !default;
+$tp-delivery-planning-overview-tile-line-address-font-weight: 500 !default;
+$tp-delivery-planning-overview-tile-line-relation-font-size: $tp-font-size-small !default;
+$tp-delivery-planning-overview-tile-line-type-marker-width: 4px !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color: #1a73e8 !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color-v: #569eee !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color-i: #45b8bf !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color-s: #d0a46b !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color-o: #8083a3 !default;
+$tp-delivery-planning-overview-tile-line-type-marker-color-k: #0b378c !default;
+$tp-delivery-planning-overview-tile-line-tabs-font-size: $tp-font-size !default;
+$tp-delivery-planning-overview-tile-line-tabs-background: #FFF !default;
+$tp-delivery-planning-overview-tile-line-tabs-border-top: 1px solid #DCE4EA !default;
+$tp-delivery-planning-overview-tile-line-tabs-active-color: #1A73E8 !default;
+$tp-delivery-planning-overview-tile-line-order-lines-background: #FFF !default;
+$tp-delivery-planning-overview-tile-line-order-lines-max-height: 300px !default;
+$tp-delivery-planning-overview-tile-line-order-lines-header-font-size: $tp-font-size-small !default;
+$tp-delivery-planning-overview-tile-line-order-line-background: #FFF !default;
+$tp-delivery-planning-overview-tile-line-order-line-border-color: #ccc !default;
+$tp-delivery-planning-overview-tile-line-order-line-border-radius: 5px !default;
+$tp-delivery-planning-overview-tile-line-reorder-buttons-background: #F5F5FC !default;
+$tp-delivery-planning-overview-tile-line-main-color: #8083A3 !default;
+$tp-delivery-planning-overview-tile-line-dialog-title-font-size: $tp-font-size-xl !default;
+$tp-delivery-planning-overview-tile-line-dialog-title-font-weight: bold !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-tile-status/style/_layout.scss CHANGED Viewed

@@ -15,15 +15,15 @@
     }
     .volume-wrapper, .time-wrapper {
       position: relative;
-      height: 24px;
-      min-width: 90px;
+      height: $tp-delivery-planning-tile-status-bar-height;
+      min-width: $tp-delivery-planning-tile-status-bar-min-width;
       span {
-        font-size: 12px;
-        color: #FFF;
+        font-size: $tp-delivery-planning-tile-status-bar-font-size;
+        color: $tp-delivery-planning-tile-status-bar-color;
       }
     }
     .tile-label {
-      font-size: 10px;
+      font-size: $tp-delivery-planning-tile-status-label-font-size;
       margin: 5px 0;
       display: block;
       padding-bottom: 7px;
@@ -31,7 +31,7 @@
       white-space: nowrap;
       &:before {
         content: '';
-        background: #ccc;
+        background: $tp-delivery-planning-tile-status-label-marker-color;
         width: 2px;
         height: 8px;
         left: 2px;
@@ -43,15 +43,15 @@
       margin-left: 10px;
     }
     .volume-wrapper {
-      background-color: rgba($status-first-colour, 0.4);
-      border-radius: 0;
+      background-color: $tp-delivery-planning-tile-status-volume-background;
+      border-radius: $tp-delivery-planning-tile-status-bar-border-radius;
       .row {
         position: absolute;
         top: 4px;
       }
       &.overload {
         &::before {
-          background: $status-overload-colour;
+          background: $tp-delivery-planning-tile-status-overload-color;
         }
       }
     }
@@ -61,21 +61,21 @@
       justify-content: end;
       width: calc(var(--percent) * 1%);
       height: 100%;
-      background: $status-first-colour;
+      background: $tp-delivery-planning-tile-status-volume-color;
       white-space: nowrap;
       max-width:100%;
     }
     .time-wrapper {
-      background-color: rgba($status-second-colour, 0.4);
-      border-radius: 0;
+      background-color: $tp-delivery-planning-tile-status-time-background;
+      border-radius: $tp-delivery-planning-tile-status-bar-border-radius;
       .row {
         position: absolute;
         top: 4px;
       }
       &.overload {
         &::before {
-          background: $status-overload-colour;
+          background: $tp-delivery-planning-tile-status-overload-color;
         }
       }
     }
@@ -85,7 +85,7 @@
       justify-content: end;
       width: calc(var(--percent) * 1%);
       height: 100%;
-      background: $status-second-colour;
+      background: $tp-delivery-planning-tile-status-time-color;
       white-space: nowrap;
       max-width: 100%;
     }