@worksafevictoria/wcl7.5 1.0.0

package/src/components/TheWelcome.vue

@@ -0,0 +1,88 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>

package/src/components/WelcomeItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>

package/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/includes/scss/all.scss

@@ -0,0 +1,2 @@
+@import 'vars/all';
+@import 'mixins/all';

package/src/includes/scss/mixins/all.scss

@@ -0,0 +1,6 @@
+@import 'src/grid.scss';
+@import 'src/fp.scss';
+@import 'src/mq.scss';
+@import 'src/rtl.scss';
+@import 'src/units.scss';
+@import 'src/focus.scss';

package/src/includes/scss/mixins/src/focus.scss

@@ -0,0 +1,38 @@
+$border-radius: 3px;
+@mixin focus-outline($mode: 'light') {
+  @if $mode == 'dark' {
+    outline: solid 3px $outline-dark !important;
+  } @else {
+    outline: solid 3px $outline !important;
+  }
+  outline-offset: 2px;
+  border-radius: $border-radius;
+  box-shadow: none !important;
+}
+
+@mixin focus-group() {
+  a,
+  button,
+  input,
+  textarea,
+  select,
+  [tabindex],
+  tr,
+  th {
+    &:focus {
+      @include focus-outline();
+    }
+  }
+  a.dark,
+  button.dark {
+    &:focus {
+      @include focus-outline('dark');
+    }
+  }
+  a.wcl-cta.dark,
+  a.cta-button.dark {
+    &:focus {
+      @include focus-outline();
+    }
+  }
+}

package/src/includes/scss/mixins/src/fp.scss

@@ -0,0 +1,31 @@
+// Usage
+//
+// h1 {
+//   @include fp(font-size, 50, 100); //50px at 320, 100px at 1920;
+// }
+
+@mixin fp(
+  $property,
+  $min,
+  $max,
+  $start: 320,
+  $end: 1680,
+  $clip: true,
+  $clipAtStart: true,
+  $clipAtEnd: true
+) {
+  $multiplier: calc(($max - $min) / ($end - $start) * 100);
+  $adder: calc(($min * $end - $max * $start) / ($end - $start));
+  $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
+  @if $clip and $clipAtStart {
+    @media (max-width: #{$start + 0px}) {
+      #{$property}: $min + 0px;
+    }
+  }
+  @if $clip and $clipAtEnd {
+    @media (min-width: #{$end + 0px}) {
+      #{$property}: $max + 0px;
+    }
+  }
+  #{$property}: $formula;
+}

package/src/includes/scss/mixins/src/grid.scss

@@ -0,0 +1,125 @@
+/* stylelint-disable */
+$grid-columns: 12;
+$grid-gutter-width: 30px;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+);
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin make-container($gutter: $grid-gutter-width) {
+  width: 100%;
+  padding-right: calc(#{$gutter} / 2);
+  padding-left: calc(#{$gutter} / 2);
+  margin-right: auto;
+  margin-left: auto;
+  color: $black;
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(-#{$gutter} / 2);
+  margin-left: calc(-#{$gutter} / 2);
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin make-max-widths-container-width(
+  $max-widths: $container-max-widths,
+  $breakpoints: $grid-breakpoints
+) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin make-col-ready($gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: calc(#{$gutter} / 2);
+  padding-left: calc(#{$gutter} / 2);
+
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns);
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%; // Reset earlier grid tiers
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: calc(#{$size} / #{$columns});
+  margin-left: if($num == 0, 0, percentage($num));
+}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 calc(100% / #{$count});
+    max-width: calc(100% / #{$count});
+  }
+}
+
+//
+// Usage
+//
+//
+// .test {
+//   width: 800px;
+//   @include make-container();
+//   @include make-max-widths-container-width(
+//     $container-max-widths,
+//     $grid-breakpoints
+//   );
+// }
+
+// .test-row {
+//   @include make-row();
+// }
+/* stylelint-enable */

package/src/includes/scss/mixins/src/mq.scss

@@ -0,0 +1,30 @@
+//
+// $mq-breakpoints defined in vars folder
+//
+
+@mixin mq($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($mq-breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($mq-breakpoints, $breakpoint))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Available breakpoints are: #{map-keys($mq-breakpoints)}.";
+  }
+}
+
+///
+// Usage -> Check breakpoints here src/includes/scss/vars/src/breakpoints.scss
+//
+// .selector {
+//   color: red;
+
+//   @include mq('small') {
+//     color: blue;
+//   }
+// }

package/src/includes/scss/mixins/src/rtl.scss

@@ -0,0 +1,8 @@
+@mixin makeRTL {
+  direction: rtl;
+  text-align: right;
+}
+@mixin makeRTLFlip {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}

package/src/includes/scss/mixins/src/units.scss

@@ -0,0 +1,110 @@
+$current-rootsize: 16px;
+
+// Returns a unitless number
+@function no-unit($n) {
+    @return calc(#{$n} / (#{$n} * 0 + 1));
+}
+
+// Converts an em value to px. Should only work in absolute em document context (root level)
+@function em-to-px($value, $context: $current-rootsize) {
+  $result: ();
+  
+    @each $val in $value {
+      @if unit($val) == "em" {
+          $val : no-unit($val) * no-unit($current-rootsize);
+          $val : $val * 1px;
+          $result: append($result, $val);
+      }
+    }
+    @return $result;
+}
+
+// Converts an rem value to px. Should only work in absolute em document context (root level)
+@function rem-to-px($value, $context: $current-rootsize) {
+    $result: ();
+
+    @each $val in $value {
+      @if unit($val) == "rem" {
+          $val : no-unit($val) * no-unit($current-rootsize);
+          $val : $value * 1px;
+          $result: append($result, $val);
+      }
+    }
+    @return $result;
+}
+
+
+// Converts a px value to ems. Should only work in absolute em document context (root level), unless $context is specified
+@function px-to-em($value, $context: $current-rootsize) {
+    @if unit($context) == "em" {
+        $context: em-to-px($context);
+    }
+    $result: ();
+
+    @each $val in $value {
+      @if unit($val) == "px" {
+          $val : calc(no-unit($val) / no-unit($context));
+          $val : calc($val * 1em);
+          $result: append($result, $val);
+      }
+    }
+    @return $result;
+}
+
+
+// Converts a px value to rems. Should only work in absolute em document context (root level), unless $context is specified
+@function px-to-rem($value, $context: $current-rootsize) {
+    @if unit($context) == "rem" {
+        $context: rem-to-px($context);
+    }
+    $result: ();
+
+    @each $val in $value {
+      @if unit($val) == "px" {
+          $val : calc(no-unit($val) / no-unit($context));
+          $val : calc($val * 1rem);
+          $result: append($result, $val);
+      }
+    }
+    @return $result;
+}
+
+// Converts a em value to rems. Should only work in absolute em document context (root level), unless $context is specified
+@function em-to-rem($value) {
+  $result: ();
+
+  @each $val in $value {
+    @if unit($val) == "em" {
+        $val : no-unit($val) * 1rem;
+        $result: append($result, $val);
+      }
+    }
+    @return $result;
+}
+
+// type conversion to number
+@function number($string) {
+  // Matrices
+  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
+  $numbers:  0   1   2   3   4   5   6   7   8   9;
+
+  // Result
+  $result: 0;
+
+  // Looping through all characters
+
+  @for $i from 1 through str-length($string) {
+      $character: str-slice($string, $i, $i);
+      $index: index($strings, $character);
+
+      @if not $index {
+        @warn "Unknown character `#{$character}`.";
+        @return false;
+      }
+
+      $number: nth($numbers, $index);
+      $result: $result * 10 + $number;
+    }
+
+  @return $result;
+}

package/src/includes/scss/vars/all.scss

@@ -0,0 +1,2 @@
+@import 'src/breakpoints.scss';
+@import 'src/colors.scss';

package/src/includes/scss/vars/src/breakpoints.scss

@@ -0,0 +1,20 @@
+$mq-breakpoints: (
+  'xxs': (
+    max-width: 321.98px
+  ),
+  'xs': (
+    max-width: 575.98px
+  ),
+  'sm': (
+    max-width: 767.98px
+  ),
+  'mm': (
+    max-width: 980.98px
+  ),
+  'md': (
+    max-width: 991.98px
+  ),
+  'lg': (
+    max-width: 1199.98px
+  )
+) !default;

package/src/includes/scss/vars/src/colors.module.scss

@@ -0,0 +1,53 @@
+$gold: #f4ce69;
+$orange: #fdcd59;
+$orange100: #fdb813;
+$orange20: #fff0cf;
+$white: #ffffff;
+$lightgray: #f3f3f3;
+$darkgray: #4c4c4c;
+$gray: #bababa;
+$gray-alt: #e7e7e7;
+$black: #191919;
+$red: #e60000;
+$pink: #b74f6f;
+$lightred: #f8d8d4;
+$blue: #02819e;
+$lightblue: #cce6ec;
+$green: #4e7840;
+$form-green: #33a532;
+$lightgreen: #d9e4d9;
+$yellow: #ffd229;
+$lightyellow: #fff6d4;
+$outline: #da47ff;
+$outline-dark: #ffffff;
+
+$theme-colors: (
+  'gold': $gold,
+  'orange': $orange,
+  'orange100': $orange100,
+  'orange20': $orange20,
+  'white': $white,
+  'lightgray': $lightgray,
+  'darkgray': $darkgray,
+  'gray': $gray,
+  'gray-alt': $gray-alt,
+  'black': $black,
+  'red': $red,
+  'pink': $pink,
+  'lightred': $lightred,
+  'blue': $blue,
+  'lightblue': $lightblue,
+  'green': $green,
+  'form-green': $form-green,
+  'lightgreen': $lightgreen,
+  'yellow': $yellow,
+  'lightyellow': $lightyellow,
+  'outline': $outline,
+  'outline-dark': $outline-dark
+);
+
+:export {
+  @each $key, $value in $theme-colors {
+    #{unquote($key)}: $value;
+  }
+}