@iamproperty/components 3.0.0 → 3.2.0

package/assets/sass/_functions/variables.scss

@@ -1,468 +1,468 @@
-@import "../../../node_modules/bootstrap/scss/_variables.scss";
-@import "../../../node_modules/bootstrap/scss/_maps.scss";
-
-// #region Grid Breakpoints, layouts
-$grid-breakpoints: (
-  xs: 0,
-  sm: 36em, /* 576 */
-  md: 62em  /* 992 */
-);
-
-@each $bp, $value in $grid-breakpoints {
-
-  $vars: map-merge((
-    --breakpoint-#{$bp}: #{$value}
-  ), $vars);
-}
-
-$device-xs-width: 375;
-$device-sm-width: 768;
-$device-md-width: 1440;
-
-$container-max-widths: (
-  sm: 0,
-  md: 80em
-);
-
-$grid-columns: 12;
-$grid-gutter-width: 1rem; // 15px
-
-$container-padding-x: 20;
-$container-padding-x-md: 60;
-$container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
-$container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
-
-$vars: map-merge((
-  "--container-padding-top": 0,
-  "--container-padding-bottom": #{rem(16)},
-  "--container-padding-x": #{rem($container-padding-x)},
-  "--container-padding-x-md": #{rem($container-padding-x-md)},
-  "--container-padding": $container-padding,
-  "--container-padding-md": $container-padding-md
-), $vars);
-
-$varsMD: map-merge((
-  "--container-padding": var(--container-padding-md),
-  "--container-padding-x": var(--container-padding-x-md)
-), $varsMD);
-// #endregion
-
-// #region Colours
-// Default Bootstrap Theme vars
-$primary:       #00313c;
-$secondary:     #b4e6a5;
-$success:       #b4e6a5;
-$info:          #1ebee6;
-$warning:       #ffa500;
-$danger:        #dc3545;
-$light:         #ffd2d2;
-$dark:          #46003c;
-
-
-// Functional/state variables 
-$colour-body: #6f6f6f;
-$colour-muted: #9d9d9d;
-$colour-border: #6f6f6f;
-$colour-link: $primary;
-$colour-focus: #000000;
-$colour-hover: #000000;
-$colour-active: $success;
-$colour-selected: $info;
-
-$colors: ();
-$grays: ();
-
-$theme-colors: ();
-$theme-colors: map-merge((
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark,
-  "admin":      #f0f0f0
-), $theme-colors);
-
-
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-
-
-@each $color, $value in $theme-colors-rgb {
-
-  $vars: map-merge((
-    --colour-#{$color}: rgba($value,var(--alpha, 1))
-  ), $vars);
-}
-
-//  RGB Theme colours
-@function show-css-var($identifier) {
-
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return var(--colour-#{$identifier});
-}
-@function show-css-var-text($identifier) {
-
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return var(--colour-#{$identifier});
-}
-
-$utilities-colors: $theme-colors-rgb;
-
-$utilities-colors: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
-  )
-);
-
-$utilities-bg-colors: map-loop($utilities-colors, show-css-var, "$key");
-$utilities-text-colors: map-loop($utilities-text, show-css-var-text, "$key");
-
-
-
-// Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
-$non-theme-colors: ();
-$non-theme-colors: map-merge((
-  "black":      #000000,
-  "white":      #ffffff,
-  "muted":      $colour-muted,
-  "border":           $colour-border,
-  "border-light":     #eeeeee,
-  "link":             $colour-link,
-  "focus":            $colour-focus,
-  "hover":            $colour-hover,
-  "active":           $colour-active,
-  "selected":         $colour-selected
-), $non-theme-colors);
-
-@each $color, $value in $non-theme-colors {
-
-  $vars: map-merge((
-    --colour-#{$color}-theme: #{$value},
-    --colour-#{$color}: #{'var(--colour-'+$color+'-theme)'}
-  ), $vars);
-}
-
-$vars: map-merge((
-  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
-  "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
-  "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
-  "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
-  "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
-  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1)),
-  "--colour-admin-theme":      #f0f0f0
-), $vars);
-
-$gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
-
-// #endregion
-
-// #region aspect ratios
-$aspect-ratios: (
-  "1x1": 100%,
-  "4x3": calc(3 / 4 * 100%),
-  "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
-);
-// #endregion
-
-// #region fonts
-
-$font-body: 'qanelasmedium', arial, sans-serif;
-$font-heading: 'qanelas_softextrabold', arial, sans-serif;
-
-$fonts: ();
-$fonts: map-merge((
-  "heading":   $font-heading,
-  "body":   $font-body
-), $fonts);
-
-
-@each $font, $value in $fonts {
-
-  $vars: map-merge((
-    --font-#{$font}: #{$value}
-  ), $vars);
-}
-
-// #endregion
-
-// #region Type
-
-$type-scale-1: #{rem(100)};
-$type-scale-2: #{rem(60)};
-$type-scale-3: #{rem(40)};
-$type-scale-4: #{rem(32)};
-$type-scale-5: #{rem(28)};
-$type-scale-6: #{rem(16)};
-$type-scale-7: #{rem(14)};
-
-$font-sizes: (
-  'display': $type-scale-3,
-  1: $type-scale-3,
-  2: $type-scale-4,
-  3: $type-scale-5,
-  4: $type-scale-6,
-  5: $type-scale-6,
-  6: $type-scale-6,
-  'badge': $badge-font-size,
-  'small': $type-scale-7,
-  'strapline': $type-scale-6
-);
-
-@each $size, $value in $font-sizes {
-
-  $vars: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $vars);
-}
-
-
-$h1-font-size: var(--fs-1);
-$h2-font-size: var(--fs-2);
-$h3-font-size: var(--fs-3);
-$h4-font-size: var(--fs-4);
-$h5-font-size: var(--fs-5);
-$h6-font-size: var(--fs-6);
-
-$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
-$headings-font-style: normal;
-$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
-$display-line-height: $headings-line-height;
-
-@if $compatible == 'true' {
-  $headings-font-family: $font-heading;
-  $headings-font-weight: 700;
-  $headings-color: $primary;
-}
-@else {
-  $headings-font-family: var(--font-heading);
-  $headings-font-weight: var(--heading-weight);
-  $headings-color: var(--colour-primary);
-}
-
-$font-md-sizes: (
-  'display': $type-scale-1,
-  1: $type-scale-2,
-  2: $type-scale-3,
-  3: $type-scale-4,
-  4: $type-scale-5,
-  'strapline': $type-scale-5
-);
-
-@each $size, $value in $font-md-sizes {
-
-  $varsMD: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $varsMD);
-}
-
-$vars: map-merge((
-  --heading-weight: 700
-), $vars);
-
-$content-max-width: rem(820);
-$paragraph-margin-bottom: 2rem;
-
-// #endregion 
-
-// #region Buttons
-$btn-border-radius: 1rem;
-$btn-border-radius-sm:        1rem;
-$btn-border-radius-lg:        1rem;
-
-$btn-padding-y: 0.5rem;
-$btn-padding-x: 1.5rem;
-$btn-padding-y-sm: $btn-padding-y;
-$btn-padding-x-sm: $btn-padding-x;
-$btn-padding-y-md: $btn-padding-y;
-$btn-padding-x-md: $btn-padding-x;
-
-// #endregion
-
-// #region Forms
-// label
-$form-label-font-size: $h5-font-size;
-$form-label-font-weight: bold;
-$form-label-color: var(--colour-heading);
-$form-label-margin-bottom: 0.25rem;
-// input field
-$input-font-size: 1rem;
-$input-font-weight: normal;
-$input-line-height: 1.5;
-$input-padding-y: 0.75em;
-$input-padding-x: 1em;
-$input-border-radius: rem(10);
-$input-border-color: var(--colour-border);
-
-// sm
-$input-height-sm: null;
-$input-font-size-sm: #{rem(14)};
-$input-border-radius-sm: null; // Inherit default value
-$input-padding-y-sm: null;
-$input-padding-x-sm: null;
-
-// lg
-$input-height-lg: null;
-$input-font-size-lg: #{rem(24)};
-$input-border-radius-lg: false; // Inherit default value
-$input-padding-y-lg: null;
-$input-padding-x-lg: null;
-
-// Input group
-$input-group-addon-bg: white;
-$input-group-addon-border-color: var(--colour-border);
-
-
-
-// Select 
-$form-select-padding-y: $input-padding-y;
-//$form-select-indicator-padding
-$form-select-padding-x: #{$input-padding-x};
-$form-select-border-color: var(--colour-border);
-$form-select-border-radius: $input-border-radius;
-
-// Checkbox
-$form-check-input-width: 1.5rem;
-$form-check-min-height: #{rem(28)};
-$form-check-padding-start: 2rem;
-$form-check-margin-bottom: #{rem(16)};
-
-$form-check-input-border: 1px solid var(--colour-border);
-
-$form-check-input-checked-color:          $primary;
-$form-check-input-checked-bg-color:       var(--colour-success);
-$form-check-input-checked-border-color:   var(--colour-border);
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
-
-$form-check-input-indeterminate-color:          $primary;
-$form-check-input-indeterminate-bg-color:       var(--colour-success);
-$form-check-input-indeterminate-border-color:   var(--colour-success);
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
-
-$form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
-$form-switch-focus-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-focus}'/></svg>");
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$primary}'/></svg>");
-
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$primary}'/></svg>");
-
-
-// #endregion
-
-// #region Cards
-$card-border-width:                 0;
-$card-border-radius:                rem(10);
-$card-spacer-y: 1.5rem;
-$card-spacer-x: 1.25rem;
-
-
-$card-cap-padding-y: 1.5rem;
-$card-cap-padding-x: 1.25rem;
-
-
-
-$card-cap-bg: transparent;
-// #endregion card-variables
-
-// #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
-$icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
-$icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
-$icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
-$icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
-$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z'></path></svg>");
-
-$vars: map-merge((
-  --icon-blank: #{escape-svg($icon-blank)},
-  --icon-sort: #{$icon-sort},
-  --icon-arrow: #{escape-svg($icon-arrow)},
-  --icon-close: #{escape-svg($icon-close)},
-  --icon-tick: #{escape-svg($icon-tick)},
-  --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)}
-), $vars);
-// #endregion
-
-// #region pagination
-// Default
-$pagination-color: var(--colour-heading);
-$pagination-disabled-color: var(--colour-muted);
-$pagination-bg: transparent;
-$pagination-border-width: 1px;
-$pagination-border-color: var(--colour-border);
-
-// Hover and focus
-$pagination-hover-color: var(--colour-heading);
-$pagination-hover-bg: var(--colour-muted);
-$pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-hover);
-$pagination-focus-bg: var(--colour-muted);
-
-// Active
-$pagination-active-color: var(--body-bg);
-$pagination-active-bg: var(--colour-heading);
-$pagination-active-border-color: var(--colour-heading);
-
-// Disabled
-$pagination-disabled-bg: $pagination-bg;
-$pagination-disabled-border-color: $pagination-border-color;
-// #endregion
-
-// #region Accordion
-$accordion-button-padding-y: var(--accordion-y-padding);
-$accordion-button-padding-x: var(--accordion-indent);
-$accordion-button-color: var(--colour-primary);
-$accordion-button-bg: transparent;
-
-$accordion-icon-color: $primary;
-$accordion-icon-active-color: $primary;
-
-$accordion-button-icon: var(--icon-arrow);
-
-$accordion-button-active-color: var(--colour-primary);
-$accordion-button-active-bg: transparent;
-
-$accordion-border-color: var(--colour-border);
-$accordion-border-width: 1px;
-$accordion-bg: transparent;
-
-$accordion-body-padding-y: 1rem;
-$accordion-body-padding-x: var(--accordion-indent);
-
-// #endregion
-
-// #region Z-index
-
-
-$vars: map-merge((
-  "--index-below":  -1,
-  "--index-base":  0,
-  "--index-focus":  2,
-  "--index-above":  10,
-  "--index-floating":  100,
-  "--index-menu":  200,
-  "--index-overlay":  1000,
-), $vars);
-
-
-$zindex-dropdown:                   var(--index-above);
-$zindex-sticky:                     var(--index-floating);
-$zindex-fixed:                      var(--index-floating);
-$zindex-offcanvas-backdrop:         var(--index-menu);
-$zindex-offcanvas:                  var(--index-menu);
-$zindex-modal-backdrop:             var(--index-overlay);
-$zindex-modal:                      var(--index-overlay);
-$zindex-popover:                    var(--index-above);
-$zindex-tooltip:                    var(--index-above);
+@import "../../../node_modules/bootstrap/scss/_variables.scss";
+@import "../../../node_modules/bootstrap/scss/_maps.scss";
+
+// #region Grid Breakpoints, layouts
+$grid-breakpoints: (
+  xs: 0,
+  sm: 36em, /* 576 */
+  md: 62em  /* 992 */
+);
+
+@each $bp, $value in $grid-breakpoints {
+
+  $vars: map-merge((
+    --breakpoint-#{$bp}: #{$value}
+  ), $vars);
+}
+
+$device-xs-width: 375;
+$device-sm-width: 768;
+$device-md-width: 1440;
+
+$container-max-widths: (
+  sm: 0,
+  md: 80em
+);
+
+$grid-columns: 12;
+$grid-gutter-width: 1rem; // 15px
+
+$container-padding-x: 20;
+$container-padding-x-md: 60;
+$container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
+$container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
+
+$vars: map-merge((
+  "--container-padding-top": 0,
+  "--container-padding-bottom": #{rem(16)},
+  "--container-padding-x": #{rem($container-padding-x)},
+  "--container-padding-x-md": #{rem($container-padding-x-md)},
+  "--container-padding": $container-padding,
+  "--container-padding-md": $container-padding-md
+), $vars);
+
+$varsMD: map-merge((
+  "--container-padding": var(--container-padding-md),
+  "--container-padding-x": var(--container-padding-x-md)
+), $varsMD);
+// #endregion
+
+// #region Colours
+// Default Bootstrap Theme vars
+$primary:       #00313c;
+$secondary:     #b4e6a5;
+$success:       #b4e6a5;
+$info:          #1ebee6;
+$warning:       #ffa500;
+$danger:        #dc3545;
+$light:         #ffd2d2;
+$dark:          #46003c;
+
+
+// Functional/state variables 
+$colour-body: #6f6f6f;
+$colour-muted: #9d9d9d;
+$colour-border: #6f6f6f;
+$colour-link: $primary;
+$colour-focus: #000000;
+$colour-hover: #000000;
+$colour-active: $success;
+$colour-selected: $info;
+
+$colors: ();
+$grays: ();
+
+$theme-colors: ();
+$theme-colors: map-merge((
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark,
+  "admin":      #f0f0f0
+), $theme-colors);
+
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
+
+@each $color, $value in $theme-colors-rgb {
+
+  $vars: map-merge((
+    --colour-#{$color}: rgba($value,var(--alpha, 1))
+  ), $vars);
+}
+
+//  RGB Theme colours
+@function show-css-var($identifier) {
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
+}
+@function show-css-var-text($identifier) {
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
+}
+
+$utilities-colors: $theme-colors-rgb;
+
+$utilities-colors: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+);
+
+$utilities-bg-colors: map-loop($utilities-colors, show-css-var, "$key");
+$utilities-text-colors: map-loop($utilities-text, show-css-var-text, "$key");
+
+
+
+// Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
+$non-theme-colors: ();
+$non-theme-colors: map-merge((
+  "black":      #000000,
+  "white":      #ffffff,
+  "muted":      $colour-muted,
+  "border":           $colour-border,
+  "border-light":     #eeeeee,
+  "link":             $colour-link,
+  "focus":            $colour-focus,
+  "hover":            $colour-hover,
+  "active":           $colour-active,
+  "selected":         $colour-selected
+), $non-theme-colors);
+
+@each $color, $value in $non-theme-colors {
+
+  $vars: map-merge((
+    --colour-#{$color}-theme: #{$value},
+    --colour-#{$color}: #{'var(--colour-'+$color+'-theme)'}
+  ), $vars);
+}
+
+$vars: map-merge((
+  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
+  "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1)),
+  "--colour-admin-theme":      #f0f0f0
+), $vars);
+
+$gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
+
+// #endregion
+
+// #region aspect ratios
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "21x9": calc(9 / 21 * 100%)
+);
+// #endregion
+
+// #region fonts
+
+$font-body: 'qanelasmedium', arial, sans-serif;
+$font-heading: 'qanelas_softextrabold', arial, sans-serif;
+
+$fonts: ();
+$fonts: map-merge((
+  "heading":   $font-heading,
+  "body":   $font-body
+), $fonts);
+
+
+@each $font, $value in $fonts {
+
+  $vars: map-merge((
+    --font-#{$font}: #{$value}
+  ), $vars);
+}
+
+// #endregion
+
+// #region Type
+
+$type-scale-1: #{rem(100)};
+$type-scale-2: #{rem(60)};
+$type-scale-3: #{rem(40)};
+$type-scale-4: #{rem(32)};
+$type-scale-5: #{rem(28)};
+$type-scale-6: #{rem(16)};
+$type-scale-7: #{rem(14)};
+
+$font-sizes: (
+  'display': $type-scale-3,
+  1: $type-scale-3,
+  2: $type-scale-4,
+  3: $type-scale-5,
+  4: $type-scale-6,
+  5: $type-scale-6,
+  6: $type-scale-6,
+  'badge': $badge-font-size,
+  'small': $type-scale-7,
+  'strapline': $type-scale-6
+);
+
+@each $size, $value in $font-sizes {
+
+  $vars: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $vars);
+}
+
+
+$h1-font-size: var(--fs-1);
+$h2-font-size: var(--fs-2);
+$h3-font-size: var(--fs-3);
+$h4-font-size: var(--fs-4);
+$h5-font-size: var(--fs-5);
+$h6-font-size: var(--fs-6);
+
+$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
+$headings-font-style: normal;
+$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
+$display-line-height: $headings-line-height;
+
+@if $compatible == 'true' {
+  $headings-font-family: $font-heading;
+  $headings-font-weight: 700;
+  $headings-color: $primary;
+}
+@else {
+  $headings-font-family: var(--font-heading);
+  $headings-font-weight: var(--heading-weight);
+  $headings-color: var(--colour-primary);
+}
+
+$font-md-sizes: (
+  'display': $type-scale-1,
+  1: $type-scale-2,
+  2: $type-scale-3,
+  3: $type-scale-4,
+  4: $type-scale-5,
+  'strapline': $type-scale-5
+);
+
+@each $size, $value in $font-md-sizes {
+
+  $varsMD: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $varsMD);
+}
+
+$vars: map-merge((
+  --heading-weight: 700
+), $vars);
+
+$content-max-width: rem(820);
+$paragraph-margin-bottom: 2rem;
+
+// #endregion 
+
+// #region Buttons
+$btn-border-radius: 1rem;
+$btn-border-radius-sm:        1rem;
+$btn-border-radius-lg:        1rem;
+
+$btn-padding-y: 0.5rem;
+$btn-padding-x: 1.5rem;
+$btn-padding-y-sm: $btn-padding-y;
+$btn-padding-x-sm: $btn-padding-x;
+$btn-padding-y-md: $btn-padding-y;
+$btn-padding-x-md: $btn-padding-x;
+
+// #endregion
+
+// #region Forms
+// label
+$form-label-font-size: $h5-font-size;
+$form-label-font-weight: bold;
+$form-label-color: var(--colour-heading);
+$form-label-margin-bottom: 0.25rem;
+// input field
+$input-font-size: 1rem;
+$input-font-weight: normal;
+$input-line-height: 1.5;
+$input-padding-y: 0.75em;
+$input-padding-x: 1em;
+$input-border-radius: rem(10);
+$input-border-color: var(--colour-border);
+
+// sm
+$input-height-sm: null;
+$input-font-size-sm: #{rem(14)};
+$input-border-radius-sm: null; // Inherit default value
+$input-padding-y-sm: null;
+$input-padding-x-sm: null;
+
+// lg
+$input-height-lg: null;
+$input-font-size-lg: #{rem(24)};
+$input-border-radius-lg: false; // Inherit default value
+$input-padding-y-lg: null;
+$input-padding-x-lg: null;
+
+// Input group
+$input-group-addon-bg: white;
+$input-group-addon-border-color: var(--colour-border);
+
+
+
+// Select 
+$form-select-padding-y: $input-padding-y;
+//$form-select-indicator-padding
+$form-select-padding-x: #{$input-padding-x};
+$form-select-border-color: var(--colour-border);
+$form-select-border-radius: $input-border-radius;
+
+// Checkbox
+$form-check-input-width: 1.5rem;
+$form-check-min-height: #{rem(28)};
+$form-check-padding-start: 2rem;
+$form-check-margin-bottom: #{rem(16)};
+
+$form-check-input-border: 1px solid var(--colour-border);
+
+$form-check-input-checked-color:          $primary;
+$form-check-input-checked-bg-color:       var(--colour-success);
+$form-check-input-checked-border-color:   var(--colour-border);
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
+
+$form-check-input-indeterminate-color:          $primary;
+$form-check-input-indeterminate-bg-color:       var(--colour-success);
+$form-check-input-indeterminate-border-color:   var(--colour-success);
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
+
+$form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
+$form-switch-focus-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-focus}'/></svg>");
+$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$primary}'/></svg>");
+
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$primary}'/></svg>");
+
+
+// #endregion
+
+// #region Cards
+$card-border-width:                 0;
+$card-border-radius:                rem(10);
+$card-spacer-y: 1.5rem;
+$card-spacer-x: 1.25rem;
+
+
+$card-cap-padding-y: 1.5rem;
+$card-cap-padding-x: 1.25rem;
+
+
+
+$card-cap-bg: transparent;
+// #endregion card-variables
+
+// #region Icons
+$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
+$icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
+$icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
+$icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
+$icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
+$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z'></path></svg>");
+
+$vars: map-merge((
+  --icon-blank: #{escape-svg($icon-blank)},
+  --icon-sort: #{$icon-sort},
+  --icon-arrow: #{escape-svg($icon-arrow)},
+  --icon-close: #{escape-svg($icon-close)},
+  --icon-tick: #{escape-svg($icon-tick)},
+  --icon-question: #{escape-svg($icon-question)},
+  --icon-warning: #{escape-svg($icon-warning)}
+), $vars);
+// #endregion
+
+// #region pagination
+// Default
+$pagination-color: var(--colour-heading);
+$pagination-disabled-color: var(--colour-muted);
+$pagination-bg: transparent;
+$pagination-border-width: 1px;
+$pagination-border-color: var(--colour-border);
+
+// Hover and focus
+$pagination-hover-color: var(--colour-heading);
+$pagination-hover-bg: var(--colour-muted);
+$pagination-hover-border-color: var(--colour-border);
+$pagination-focus-color: var(--colour-hover);
+$pagination-focus-bg: var(--colour-muted);
+
+// Active
+$pagination-active-color: var(--body-bg);
+$pagination-active-bg: var(--colour-heading);
+$pagination-active-border-color: var(--colour-heading);
+
+// Disabled
+$pagination-disabled-bg: $pagination-bg;
+$pagination-disabled-border-color: $pagination-border-color;
+// #endregion
+
+// #region Accordion
+$accordion-button-padding-y: var(--accordion-y-padding);
+$accordion-button-padding-x: var(--accordion-indent);
+$accordion-button-color: var(--colour-primary);
+$accordion-button-bg: transparent;
+
+$accordion-icon-color: $primary;
+$accordion-icon-active-color: $primary;
+
+$accordion-button-icon: var(--icon-arrow);
+
+$accordion-button-active-color: var(--colour-primary);
+$accordion-button-active-bg: transparent;
+
+$accordion-border-color: var(--colour-border);
+$accordion-border-width: 1px;
+$accordion-bg: transparent;
+
+$accordion-body-padding-y: 1rem;
+$accordion-body-padding-x: var(--accordion-indent);
+
+// #endregion
+
+// #region Z-index
+
+
+$vars: map-merge((
+  "--index-below":  -1,
+  "--index-base":  0,
+  "--index-focus":  2,
+  "--index-above":  10,
+  "--index-floating":  100,
+  "--index-menu":  200,
+  "--index-overlay":  1000,
+), $vars);
+
+
+$zindex-dropdown:                   var(--index-above);
+$zindex-sticky:                     var(--index-floating);
+$zindex-fixed:                      var(--index-floating);
+$zindex-offcanvas-backdrop:         var(--index-menu);
+$zindex-offcanvas:                  var(--index-menu);
+$zindex-modal-backdrop:             var(--index-overlay);
+$zindex-modal:                      var(--index-overlay);
+$zindex-popover:                    var(--index-above);
+$zindex-tooltip:                    var(--index-above);
 // #endregion