toggle-components-library 1.28.2 → 1.28.3-zonalbeta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.28.2",
+  "version": "1.28.3-zonalbeta.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/icons/booster_close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 31.998 32">
+  <path id="Subtraction_5" data-name="Subtraction 5" d="M-12255-3623a15.914,15.914,0,0,1-6.227-1.257,15.938,15.938,0,0,1-5.086-3.429,15.942,15.942,0,0,1-3.43-5.085A15.912,15.912,0,0,1-12271-3639a15.908,15.908,0,0,1,1.256-6.228,15.937,15.937,0,0,1,3.43-5.085,15.938,15.938,0,0,1,5.086-3.429A15.9,15.9,0,0,1-12255-3655a15.9,15.9,0,0,1,6.229,1.257,15.973,15.973,0,0,1,5.086,3.429,15.974,15.974,0,0,1,3.43,5.085A15.908,15.908,0,0,1-12239-3639a15.912,15.912,0,0,1-1.256,6.229,15.98,15.98,0,0,1-3.43,5.085,15.981,15.981,0,0,1-5.086,3.429A15.917,15.917,0,0,1-12255-3623Zm.139-13.37h0l3.217,3.219a1.7,1.7,0,0,0,1.211.5,1.7,1.7,0,0,0,1.213-.5,1.717,1.717,0,0,0,0-2.424l-3.219-3.219,3.219-3.221a1.7,1.7,0,0,0,.5-1.208,1.713,1.713,0,0,0-.5-1.217,1.7,1.7,0,0,0-1.213-.5,1.7,1.7,0,0,0-1.211.5l-3.217,3.219-3.15-3.149a1.707,1.707,0,0,0-1.215-.5,1.707,1.707,0,0,0-1.215.5,1.724,1.724,0,0,0,0,2.424l3.152,3.152-3.152,3.15a1.724,1.724,0,0,0,0,2.424,1.707,1.707,0,0,0,1.215.5,1.707,1.707,0,0,0,1.215-.5l3.148-3.15Z" transform="translate(12271 3655.001)" fill="#fff"/>
+</svg>

package/src/assets/img/loyaltybooster.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="290.327" height="52.513" viewBox="0 0 290.327 52.513">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1075" data-name="Rectangle 1075" width="290.327" height="52.513" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_363" data-name="Group 363" transform="translate(0 0)">
+    <g id="Group_359" data-name="Group 359" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Path_295" data-name="Path 295" d="M49.754,1.931a101.435,101.435,0,0,1,46.07,11.06,3.2,3.2,0,0,1,1.753,2.861v20.1a3.2,3.2,0,0,1-1.753,2.861A101.272,101.272,0,0,1,65.5,48.644a101.878,101.878,0,0,1-15.749,1.229A101.893,101.893,0,0,1,34,48.644,101.314,101.314,0,0,1,3.684,38.812a3.2,3.2,0,0,1-1.753-2.861v-20.1A3.2,3.2,0,0,1,3.684,12.99,101.44,101.44,0,0,1,49.754,1.931m0-1.931A103.354,103.354,0,0,0,2.808,11.271h0A5.141,5.141,0,0,0,0,15.852v20.1a5.142,5.142,0,0,0,2.807,4.581h0a103.222,103.222,0,0,0,30.9,10.019A103.778,103.778,0,0,0,49.754,51.8,103.768,103.768,0,0,0,65.8,50.551,103.2,103.2,0,0,0,96.7,40.533a5.142,5.142,0,0,0,2.807-4.581v-20.1A5.14,5.14,0,0,0,96.7,11.271,103.351,103.351,0,0,0,49.754,0" transform="translate(0 0)" fill="#fff"/>
+      <path id="Path_296" data-name="Path 296" d="M212.52,2.379V4.053h-.346V2.379h-.565V2.063h1.476v.316Zm2.519,1.674V2.425L214.5,4h-.249l-.54-1.572V4.053h-.346V2.063h.545l.474,1.435.473-1.435h.53v1.99Z" transform="translate(-114.033 -1.112)" fill="#fff"/>
+      <path id="Path_297" data-name="Path 297" d="M105.06,41.14a2.575,2.575,0,0,0-2.572,2.573v1.017a2.021,2.021,0,0,0,.415,1.414l2.873,5.069c.011.017.017.026.017.02a1.352,1.352,0,0,1,0,.154v1a.736.736,0,1,1-1.471,0V51.7a.608.608,0,0,0-.6-.6h-.638a.607.607,0,0,0-.6.6v.677a2.573,2.573,0,1,0,5.145,0v-1a2.016,2.016,0,0,0-.415-1.394l-2.873-5.067c-.009-.015-.015-.027-.017-.022a1.434,1.434,0,0,1,0-.173V43.713a.736.736,0,1,1,1.471,0v.677a.593.593,0,0,0,.6.6h.638a.593.593,0,0,0,.6-.6v-.677a2.576,2.576,0,0,0-2.573-2.573" transform="translate(-55.23 -22.17)" fill="#fff"/>
+      <path id="Path_298" data-name="Path 298" d="M30.152,31.74a2.766,2.766,0,0,0-.412-.032c-1.674,0-2.937,1.575-2.937,3.664V53.581a.694.694,0,0,0,.156.45.515.515,0,0,0,.39.19.4.4,0,0,0,.07-.006l.875-.134a.734.734,0,0,0,.57-.755V43.973l2.5-.036v8.98a.653.653,0,0,0,.144.425.5.5,0,0,0,.472.175l.875-.134a.711.711,0,0,0,.57-.721V36a4.278,4.278,0,0,0-3.276-4.261m1.215,4.087v5.741l-2.5-.037V35.546c0-.86.552-1.489,1.246-1.4a1.644,1.644,0,0,1,1.257,1.685" transform="translate(-14.443 -17.087)" fill="#fff"/>
+      <path id="Path_299" data-name="Path 299" d="M57.668,36.085l-.875-.134a.537.537,0,0,0-.617.558v17.5a.519.519,0,0,0,.524.537.583.583,0,0,0,.093-.007l.875-.134a.669.669,0,0,0,.569-.652V36.736a.7.7,0,0,0-.569-.652" transform="translate(-30.273 -19.37)" fill="#fff"/>
+      <path id="Path_300" data-name="Path 300" d="M78.679,39.473l-2.268-.347a.968.968,0,0,0-.8.2.74.74,0,0,0-.258.564V54.328a.45.45,0,0,0,.154.344.543.543,0,0,0,.358.125.69.69,0,0,0,.1-.008l.874-.134a.662.662,0,0,0,.57-.582V47.789l1.226-.018,0-.155.04.155a1.4,1.4,0,0,1,.87.281.831.831,0,0,1,.342.651v4.964a.479.479,0,0,0,.617.427l.875-.134a.618.618,0,0,0,.569-.549V48.635a2.237,2.237,0,0,0-.86-1.722,2.182,2.182,0,0,0,.86-1.7V42.486c0-1.385-1.469-2.737-3.275-3.013m1.215,2.839v2.834a.806.806,0,0,1-.341.631,1.439,1.439,0,0,1-.894.279h0l-1.241-.018v-5l1.219.15a1.331,1.331,0,0,1,1.257,1.126" transform="translate(-40.609 -21.077)" fill="#fff"/>
+      <path id="Path_301" data-name="Path 301" d="M131.676,38.464l-.847.1a.645.645,0,0,0-.574.585v6.555l-2.5.029V39.479a.514.514,0,0,0-.612-.461l-.875.107a.634.634,0,0,0-.574.58V53.523a.609.609,0,0,0,.574.558l.875.107a.5.5,0,0,0,.612-.462V47.491l2.5.03v6.531a.621.621,0,0,0,.574.585l.847.1a.63.63,0,0,0,.082.006.5.5,0,0,0,.53-.493v-15.3a.524.524,0,0,0-.612-.488" transform="translate(-67.733 -20.725)" fill="#fff"/>
+      <path id="Path_302" data-name="Path 302" d="M156.456,35.955l-.875.107a.681.681,0,0,0-.574.668V53.8a.657.657,0,0,0,.574.64l.875.107a.58.58,0,0,0,.074,0,.531.531,0,0,0,.538-.548V36.5a.546.546,0,0,0-.612-.544" transform="translate(-83.531 -19.374)" fill="#fff"/>
+      <path id="Path_303" data-name="Path 303" d="M181.619,36.78c0-2.149-1.493-3.8-3.317-3.576l-2.705.33a.72.72,0,0,0-.574.727V53.53a.69.69,0,0,0,.574.7l.874.107a.52.52,0,0,0,.059,0,.564.564,0,0,0,.526-.606V45.018l1.3.015c1.8,0,3.268-1.746,3.268-3.891Zm-2.061,4.415a1.4,1.4,0,0,1-1.239,1.5l-1.263.015V35.665l1.281-.126c.679-.069,1.222.55,1.222,1.38Z" transform="translate(-94.317 -17.882)" fill="#fff"/>
+      <line id="Line_299" data-name="Line 299" x1="4.863" y2="33.909" transform="translate(114.609 9.071)" fill="none" stroke="#fe6c66" stroke-width="1"/>
+      <path id="Path_304" data-name="Path 304" d="M283.719,53.384l4.654-33.335h6.085l-3.892,27.965h14.274l-.761,5.37Z" transform="translate(-152.893 -10.804)" fill="#fff"/>
+      <path id="Path_305" data-name="Path 305" d="M347.11,63.8a12.484,12.484,0,0,1-6.176-1.544,11.626,11.626,0,0,1-6.041-10.447,13.05,13.05,0,0,1,4.005-9.531,13.994,13.994,0,0,1,4.362-2.863,13.536,13.536,0,0,1,5.28-1.03,12.573,12.573,0,0,1,6.219,1.544,11.59,11.59,0,0,1,4.385,4.228,11.85,11.85,0,0,1,1.611,6.219,12.784,12.784,0,0,1-1.075,5.213,13.762,13.762,0,0,1-2.953,4.3A13.517,13.517,0,0,1,347.11,63.8m.089-5.369a6.836,6.836,0,0,0,3.826-1.1,7.49,7.49,0,0,0,2.617-2.953,8.933,8.933,0,0,0,.94-4.094,7.187,7.187,0,0,0-.761-3.378,5.713,5.713,0,0,0-2.125-2.282,6.053,6.053,0,0,0-3.2-.828,6.951,6.951,0,0,0-3.848,1.1,7.48,7.48,0,0,0-2.64,2.931,8.8,8.8,0,0,0-.939,4.072,7.189,7.189,0,0,0,.76,3.378,5.8,5.8,0,0,0,2.148,2.3,6.034,6.034,0,0,0,3.221.85" transform="translate(-180.47 -20.687)" fill="#fff"/>
+      <path id="Path_306" data-name="Path 306" d="M393.652,73.827a8.607,8.607,0,0,1-2.036-.224,7.786,7.786,0,0,1-1.633-.582l.357-4.788q.582.134,1.365.246a9.924,9.924,0,0,0,1.365.112,4.914,4.914,0,0,0,2.26-.469,5.168,5.168,0,0,0,1.61-1.3,13.445,13.445,0,0,0,1.275-1.812l2.193-3.58-.582,4.922-6.8-26.8h6.04l4.654,19.778h-2.326l10.2-19.778h6.667L403.853,66.535a18.512,18.512,0,0,1-2.8,3.96,11.041,11.041,0,0,1-3.379,2.483,9.461,9.461,0,0,1-4.026.85" transform="translate(-210.157 -21.315)" fill="#fff"/>
+      <path id="Path_307" data-name="Path 307" d="M457.841,63.8a10.738,10.738,0,0,1-4.183-.76,6.366,6.366,0,0,1-2.841-2.237,6.173,6.173,0,0,1-1.03-3.624,6.659,6.659,0,0,1,1.186-3.982,8.844,8.844,0,0,1,3.244-2.707,15.386,15.386,0,0,1,4.742-1.454l8.188-1.3-.448,4.475-6.891,1.208a6.68,6.68,0,0,0-2.774,1.141,2.658,2.658,0,0,0-1.119,2.259,2.123,2.123,0,0,0,.917,1.879,4.075,4.075,0,0,0,2.349.627,6.322,6.322,0,0,0,3.222-.828,7.163,7.163,0,0,0,2.371-2.215,6.625,6.625,0,0,0,1.119-3.042l.85-6.085a3.027,3.027,0,0,0-.4-2.036,3.477,3.477,0,0,0-1.522-1.275,5.239,5.239,0,0,0-2.192-.448,6.177,6.177,0,0,0-3.58,1.074,7.324,7.324,0,0,0-2.416,2.729l-4.608-2.55a9.5,9.5,0,0,1,2.55-3.311,12.52,12.52,0,0,1,3.826-2.17,13.42,13.42,0,0,1,4.586-.783,11.622,11.622,0,0,1,5.3,1.163,8.382,8.382,0,0,1,3.512,3.177,6.879,6.879,0,0,1,.805,4.7l-2.192,15.84h-5.594l.581-4.161,1.477.044a12.015,12.015,0,0,1-2.506,2.618,9.5,9.5,0,0,1-3.021,1.544,12.109,12.109,0,0,1-3.512.492" transform="translate(-242.385 -20.687)" fill="#fff"/>
+      <path id="Path_308" data-name="Path 308" d="M508.358,52.756,513.1,18.885h5.906l-4.742,33.871Z" transform="translate(-273.948 -10.177)" fill="#fff"/>
+      <path id="Path_309" data-name="Path 309" d="M545.418,57.679q-4.206,0-6.241-2.349t-1.5-6.421l1.477-10.6h-4.206l.76-5.235h.314A4.374,4.374,0,0,0,539,32.04a4.461,4.461,0,0,0,1.454-2.819l.224-1.7h5.951l-.76,5.548h3.2l1.129,5.235H545.1l-1.477,10.56a4.8,4.8,0,0,0,.068,2.058,1.957,1.957,0,0,0,1.028,1.208,4.815,4.815,0,0,0,2.171.4q.4,0,.805-.022a8.537,8.537,0,0,0,.939-.112l-.447,5.011a6.535,6.535,0,0,1-1.409.224q-.784.044-1.366.045" transform="translate(-288.277 -14.831)" fill="#fff"/>
+      <path id="Path_310" data-name="Path 310" d="M571.964,73.827a8.6,8.6,0,0,1-2.035-.224,7.776,7.776,0,0,1-1.634-.582l.358-4.788c.389.089.842.172,1.365.246a9.934,9.934,0,0,0,1.364.112,4.914,4.914,0,0,0,2.26-.469,5.171,5.171,0,0,0,1.611-1.3,13.6,13.6,0,0,0,1.275-1.812l2.192-3.58-.581,4.922-6.8-26.8h6.04l4.654,19.778H579.7l10.2-19.778h6.667L582.166,66.535a18.574,18.574,0,0,1-2.8,3.96,11.049,11.049,0,0,1-3.378,2.483,9.466,9.466,0,0,1-4.028.85" transform="translate(-306.247 -21.315)" fill="#fff"/>
+    </g>
+  </g>
+</svg>

package/src/components/boosters/ToggleBoosterBasicButton.vue

@@ -0,0 +1,45 @@
+<template>
+
+    <button :class="['toggle-booster-basic-button', boosterType, {'disabled': disabled}]" :disabled="disabled" @click="click">
+      <slot>{{buttonText}}</slot>
+    </button>
+  
+</template>
+  
+  <script>
+  
+  export default {
+    name: 'ToggleBoosterBasicButton',
+    components: {
+    },
+    props: {
+      buttonText: {
+        type: String,
+        default: "Create sign up form"
+      },
+        // boosterType will define which logo and colour palette is used 
+        boosterType: {
+        type: String,
+        default: 'loyalty'
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    methods: {
+      click() {
+        /**
+         * Emitted when the button is clicked.
+         * @event click
+         * @type {Event}
+         */
+        this.$emit('click');
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  
+  </style>

package/src/components/boosters/ToggleBoosterButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <button :class="['toggle-booster-button-container', boosterType]" @click="click">
+
+    <img
+      :src="logo.src"
+      :alt="logo.alt"
+      class="toggle-booster-button-logo"
+    >
+
+    <div :class="['toggle-booster-button', boosterType]" >
+      <p class="plus">+</p>
+      <slot>{{buttonText}}</slot>
+    </div>
+  </button>
+</template>
+  
+  <script>
+  
+  export default {
+    name: 'ToggleBoosterButton',
+    components: {
+    },
+    props: {
+      // boosterType will define which logo and colour palette is used 
+      boosterType: {
+        type: String,
+        default: 'loyalty'
+      },
+      buttonText: {
+        type: String,
+        default: "Create sign up form"
+      },
+      logo: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      click() {
+        /**
+         * Emitted when the button is clicked.
+         * @event click
+         * @type {Event}
+         */
+        this.$emit('click');
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  
+  </style>

package/src/components/boosters/ToggleBoosterModal.vue

@@ -0,0 +1,99 @@
+<template>
+        <transition name="toggle-modal">
+            <div class="toggle-modal-mask toggle-modal-close" v-if="showModal" @mousedown="backgroundClick">
+              <div class="toggle-modal-wrapper toggle-modal-close" >
+                <div :class="['toggle-modal-container','toggle-booster-modal', boosterType]" >
+
+                    <span class="toggle-booster-modal-close-button" @click="showModal = false"></span>
+                    
+                    <img
+                    :src="logo.src"
+                    :alt="logo.alt"
+                    class="toggle-booster-modal-logo"
+                    >
+
+                    <slot></slot>
+
+                    <a v-if="showContactPrompt" :href="contactLink" class="toggle-booster-contact-prompt"><span class="contact-us-prompt">Contact us</span> {{ contactPromptText }}</a>
+                
+                </div>
+              </div>
+          </div>
+        </transition>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        logo: {
+            type: Object,
+            required: true,
+        },
+        boosterType: {
+            type: String,
+            default: 'loyalty'
+        },
+        showContactPrompt: {
+            type: Boolean,
+            default: false
+        },
+        contactPromptText:{
+            type: String,
+            default: 'to activate this feature'
+        },
+        contactLink:{
+            type: String,
+            default:'https://www.usetoggle.com/demo'
+        }
+    },
+
+    components: {
+    },
+
+    data : function(){
+        return {
+            showModal:false
+        }; 
+    },
+    created : function(){
+        this.$toggle_event.$on('modal_show', this.show);
+        this.$toggle_event.$on('modal_hide', this.hide);
+
+    },
+    beforeDestroy() {
+        this.$toggle_event.$off('modal_show', this.show);
+        this.$toggle_event.$off('modal_hide', this.hide);
+    },
+    computed: {
+       
+    },
+    methods: {
+
+        show(payload)
+        {
+            if(payload == this.name)
+                this.showModal = true;
+        },
+        hide(payload)
+        {
+            if(payload == this.name)
+                this.showModal = false;
+        },
+
+        backgroundClick(e)
+        {
+            if(e.target.classList.contains('toggle-modal-close'))
+                this.showModal = false;
+        }
+    }
+}
+
+</script>

package/src/index.js

@@ -23,6 +23,10 @@ import ToggleInputNumber from "./components/forms/ToggleInputNumber.vue";
 import ToggleColourPicker from "./components/forms/ToggleColourPicker.vue";
 import ToggleModal from "./components/modals/ToggleModal.vue";
 
+import ToggleBoosterButton from "./components/boosters/ToggleBoosterButton.vue";
+import ToggleBoosterBasicButton from "./components/boosters/ToggleBoosterBasicButton.vue";
+import ToggleBoosterModal from "./components/boosters/ToggleBoosterModal.vue";
+
 import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
 import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
 import ToggleButton from "./components/buttons/ToggleButton.vue";
@@ -133,8 +137,10 @@ const Components = {
     ToggleMetricPieChart,
     ToggleMetricFunnelChart,
     ToggleThreeDots,
-    ToggleThreeDotsButton
-
+    ToggleThreeDotsButton,
+    ToggleBoosterButton,
+    ToggleBoosterBasicButton,
+    ToggleBoosterModal
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_boosters.scss

@@ -0,0 +1,142 @@
+.toggle-booster-button-container{
+    border: 0;
+    font-family: $toggle-font-family;
+    width: fit-content;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+   
+    &.loyalty{
+        background-color: $booster-loyalty-colour-light;
+    }
+
+    &.test{
+        background-color: $booster-test-colour-light;
+    }
+}
+
+.toggle-booster-button-logo{
+    width: auto;
+    height: 1.1rem;
+    margin-left: 0.6rem;
+    margin-right: 0.9rem;
+}
+    
+.toggle-booster-button {
+    font-family: $toggle-font-family;
+    padding-right: 0.6rem;
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    height: 30px;
+    border-radius: 0.3rem;
+    border: none;
+    grid-column: 3;
+    color: #ffffff;
+    cursor: pointer;
+
+    //additional colours follow below pattern - background transparency without changing text
+    &.loyalty{ 
+        background-color: rgba($booster-loyalty-colour-med, 0.8);
+        &:hover{
+            background-color: rgba($booster-loyalty-colour-med, 1);
+        }
+    }
+
+    &.test{
+        background-color: rgba($booster-test-colour-med, 0.8);
+        &:hover{
+            background-color: rgba($booster-test-colour-med, 1);
+        }
+    }
+
+    .plus{
+    padding-right: 0.5rem;
+    padding-left: 0.6rem;
+    }
+}
+
+.toggle-booster-basic-button{
+    font-family: $toggle-font-family;
+    font-size: 1rem;
+    padding-right: 0.5rem;
+    font-weight: bold;
+    height: 3rem;
+    width: 16rem;
+    background-color: #fff;
+    border-radius: 0.5rem;
+    border: none;
+    opacity: 0.9;
+    cursor: pointer;
+
+    &:hover{
+        opacity: 1;
+    }
+
+    &.loyalty{
+        color: $booster-loyalty-colour-light;
+    }
+
+    &.test{
+        color: $booster-test-colour-light;
+    }
+
+    &.disabled{
+        opacity:0.5;
+    }
+}
+
+.toggle-booster-modal{
+    width: fit-content;
+    min-width: 0;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    border-radius: 1.5rem;
+
+    &.loyalty{
+        background-color: $booster-loyalty-colour-light;
+    }
+
+    &.test{
+        background-color: $booster-test-colour-light;
+    } 
+    .toggle-booster-modal-logo{
+        height: 2rem;
+        width: auto;
+        margin-bottom: 1rem;
+    }
+    .toggle-booster-contact-prompt{
+        margin: 0;
+        color: #fff;
+        font-family: $toggle-font-family;
+        font-size: 0.7rem;
+        
+        .contact-us-prompt{
+        text-decoration: underline;
+        }
+    }
+}
+
+.toggle-booster-modal-close-button{
+    background-image: url("../assets/icons/booster_close.svg");
+    position:absolute;
+    width:1rem;
+    height:1rem;
+    right:1rem;
+    top:1rem;
+    cursor: pointer;
+    z-index: 99;
+    opacity   : 0.5;
+
+    &:hover{
+        opacity: 1;
+    }
+  
+  }
+

package/src/sass/includes/_as_modals.scss

@@ -53,6 +53,7 @@
     background-image: url("../assets/icons/delete-grey.svg");
 }
 
+
 /*
  * The following styles are auto-applied to elements with
  * transition="modal" when their visibility is toggled

package/src/sass/includes/_as_variables.scss

@@ -41,6 +41,15 @@ $toggle-button-neutral:$toggle-light-blue;
 $toggle-button-disabled:#d6d6d6;
 $toggle-button-amber: #E6A831;
 
+/* Booster Colours */
+$booster-loyalty-colour-light:#aacc00;
+$booster-loyalty-colour-med:#97b500;
+$booster-loyalty-colour-dark:#7da400;
+
+$booster-test-colour-light:#02add3;
+$booster-test-colour-med:#0098ac;
+$booster-test-colour-dark:#008ba4;
+
 /* metrics */
 $toggle-metric-label-blue: #477EF6;
 $toggle-metric-label-black: #354B64;

package/src/sass/main.scss

@@ -20,3 +20,4 @@
 @import "./includes/_as_notifications.scss";
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
+@import "./includes/_as_boosters.scss";