@qhealth-design-system/core 1.0.38

package/src/styles/imports/variables.scss

@@ -0,0 +1,484 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// GLOBAL VARIABLES
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+@import "figma.scss";
+/**
+ * QLD-pixelfallback enable pixel fallbacks
+ */
+$QLD-pixelfallback: true !default;
+
+ /**
+  * QLD-media Breakpoints
+  */
+$QLD-media-sm: 400px;
+$QLD-media-md: 699px;
+$QLD-media-lg: 992px;
+$QLD-media-xl: 1312px;
+// $QLD-media-xxl: 1599px;
+$QLD-main-nav-breakpoint: lg;
+ 
+ /**
+  * QLD-rem value used for REM calculation
+  */
+$QLD-rem: 16 !default;
+ 
+ /**
+  * QLD-unit used for all type and grid calculations
+  */
+$QLD-unit: 4 !default;
+ 
+ /**
+  * QLD-font stack
+  * QLD-font-monospace stack
+  */
+$QLD-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$QLD-font-monospace: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+$QLD-font-heading: "ff-meta-web-pro", "Lato", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+ 
+ /**
+  * QLD-fontsize-map
+  *
+  * Predetermined pixel sizes from a 1.25 typescale rounded to the nearest $QLD-unit (vertical grid)
+  */
+$QLD-fontsize-map: (
+    xs:   14,
+    sm:   16,
+    md:   20,
+    lg:   24,
+    xl:   32,
+    xxl:  40,
+    xxxl: 52
+) !default;
+
+// Base font
+$base-font-scale: 1; // The font scale multiplier (e.g. 2 = 32px/2em/2rem)
+$base-font-pixel: 16; // Used for font size calculations & conversions
+ 
+/**
+  * QLD-maxwidth for line lengths (the ‘measure’)
+  */
+  $QLD-font-maxwidth: 46rem !default; // Answer to life, the universe, and everything (keeps things readable on wide viewports).
+
+
+ 
+ /**
+  * QLD-lineheight-map
+  * 
+  * Predetermined lineheight mapped to keyword
+  */
+
+$QLD-lineheight-map: (
+  nospace: 1,
+  heading: 1.25,
+  default: 1.5,
+  h3: 4/3,
+  h4: 1.2,
+  h6: 8/7,
+  small: 1.4,
+);
+
+ /**
+  * QLD-spacing-map
+  *
+  * Predetermined standard spacing mapped to keyword
+  */
+  $QLD-space-map: (
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 32,
+    8: 36,
+    9: 40,
+    10: 48,
+    11: 56,
+    12: 64,
+    13: 80,
+    14: 96,
+    15: 128,
+    16: 160 
+) !default;
+
+
+ /**
+* QLD vertical container padding
+*/
+$QLD-container-padding-mobile: 9;
+$QLD-container-padding-desktop: 12;
+
+/**
+* QLD grid gutter padding
+*/
+$QLD-grid-gutter-sm:4;
+$QLD-grid-gutter-md:7;
+$QLD-grid-gutter-lg:10;
+
+/**
+* QLD grid inner nested body conntainer-fluid padding
+*/
+$QLD-grid-inner-container-mobile: 4;
+$QLD-grid-inner-container-desktop: 7;
+
+
+/**
+* QLD-maxwidth for line lengths (the ‘measure’)
+*/
+
+$QLD-grid-maxwidth: 88rem;
+
+
+
+
+
+  // $QLD-container-padding-xs: 1rem;
+  // $QLD-container-padding-md: 2.5rem;
+  // $QLD-container-padding-lg: 4rem;
+  // $QLD-container-padding-xl: 9rem;
+  // $QLD-container-padding-xxl: 10rem;
+
+/**
+* QLD border-width values
+*/
+$QLD-border-width-thin: 1px;
+$QLD-border-width-default: 2px;
+$QLD-border-width-medium: 3px;
+$QLD-border-width-thick: 4px;
+$QLD-border-width-extra-thick: 8px; 
+
+
+/**
+* QLD border-radius values
+*/
+$QLD-border-radius-xs: map-get( $QLD-space-map, 1 ) + px;
+$QLD-border-radius-sm: map-get( $QLD-space-map, 3 ) + px;
+$QLD-border-radius-md: map-get( $QLD-space-map, 4 ) + px;
+$QLD-border-radius-lg: map-get( $QLD-space-map, 7 ) + px;
+$QLD-border-radius-xl: map-get( $QLD-space-map, 9 ) + px;
+$QLD-border-radius-xxl: map-get( $QLD-space-map, 12 ) + px;
+ 
+/**
+* QLD box shadow values
+*/
+$QLD-box-shaddow-level-one: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
+$QLD-box-shaddow-level-two: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+$QLD-box-shaddow-level-three: 0px 4px 8px 3px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2);
+$QLD-box-shaddow-level-four: 7px 6px 13px rgba(0, 0, 0, 0.02), 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 13px 20px rgba(0, 0, 0, 0.1);
+
+/**
+* QLD icon sizes
+*/
+$QLD-icon-size-xs:map-get( $QLD-space-map, 2 ) + px;//8px
+$QLD-icon-size-sm:map-get( $QLD-space-map, 4 ) + px;//16px
+$QLD-icon-size-md:map-get( $QLD-space-map, 5 ) + px;//20px
+$QLD-icon-size-lg:map-get( $QLD-space-map, 6 ) + px;//24px
+$QLD-icon-size-xl:map-get( $QLD-space-map, 12 ) + px;//64px
+
+/**
+* QLD default icons
+*/
+$QLD-icon-arrow-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M379.8 225.7C376.7 229.3 372.3 231.1 368 231.1c-3.844 0-7.703-1.426-10.77-4.31L208 86.12v377.3c0 9.171-7.156 16.59-15.1 16.59S176 472.6 176 463.4V86.12l-149.2 140.7C20.25 232.1 10.14 232.5 4.156 225.7C-1.781 218.9-1.297 208.4 5.234 202.2l176-165.9c6.094-5.768 15.44-5.768 21.53 0l176 165.9C385.3 208.4 385.8 218.9 379.8 225.7z"/></svg>' ;
+$QLD-icon-arrow-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z"/></svg>';
+$QLD-icon-arrow-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M378.8 309.8l-176 165.9C199.7 478.6 195.9 480 192 480s-7.719-1.426-10.77-4.31l-176-165.9C-1.297 303.6-1.781 293.1 4.156 286.3c5.953-6.838 16.09-7.259 22.61-1.134L176 425.9V48.59c0-9.171 7.156-16.59 15.1-16.59S208 39.42 208 48.59v377.3l149.2-140.7c6.516-6.125 16.66-5.704 22.61 1.134C385.8 293.1 385.3 303.6 378.8 309.8z"/></svg>';
+$QLD-icon-arrow-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 256C448 264.8 440.6 272 431.4 272H54.11l140.7 149.3c6.157 6.531 5.655 16.66-1.118 22.59C190.5 446.6 186.5 448 182.5 448c-4.505 0-9.009-1.75-12.28-5.25l-165.9-176c-5.752-6.094-5.752-15.41 0-21.5l165.9-176c6.19-6.562 16.69-7 23.45-1.094c6.773 5.938 7.275 16.06 1.118 22.59L54.11 240h377.3C440.6 240 448 247.2 448 256z"/></svg>';
+
+$QLD-icon-arrow-view-all: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.3 148.7c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62L329.4 240H144C135.2 240 128 247.2 128 256s7.156 16 16 16h185.4l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0l96-96C382.4 264.2 384 260.1 384 256s-1.562-8.188-4.688-11.31L283.3 148.7zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480z"/></svg>';
+
+$QLD-icon-chevron-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M443.8 330.8C440.6 334.3 436.3 336 432 336c-3.891 0-7.781-1.406-10.86-4.25L224 149.8l-197.1 181.1c-6.5 6-16.64 5.625-22.61-.9062c-6-6.5-5.594-16.59 .8906-22.59l208-192c6.156-5.688 15.56-5.688 21.72 0l208 192C449.3 314.3 449.8 324.3 443.8 330.8z"/></svg>';
+$QLD-icon-chevron-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M85.14 475.8c-3.438-3.141-5.156-7.438-5.156-11.75c0-3.891 1.406-7.781 4.25-10.86l181.1-197.1L84.23 58.86c-6-6.5-5.625-16.64 .9062-22.61c6.5-6 16.59-5.594 22.59 .8906l192 208c5.688 6.156 5.688 15.56 0 21.72l-192 208C101.7 481.3 91.64 481.8 85.14 475.8z"/></svg>';
+$QLD-icon-chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z"/></svg>';
+$QLD-icon-chevron-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M234.8 36.25c3.438 3.141 5.156 7.438 5.156 11.75c0 3.891-1.406 7.781-4.25 10.86L53.77 256l181.1 197.1c6 6.5 5.625 16.64-.9062 22.61c-6.5 6-16.59 5.594-22.59-.8906l-192-208c-5.688-6.156-5.688-15.56 0-21.72l192-208C218.2 30.66 228.3 30.25 234.8 36.25z"/></svg>';
+
+$QLD-icon-close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z"/></svg>';
+$QLD-icon-close-hover: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/></svg>';
+
+$QLD-icon-error: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM362.4 131.8c-6.688-5.75-16.8-4.938-22.55 1.75L256 231.4l-83.86-97.84C166.4 126.9 156.3 126.2 149.6 131.8c-6.719 5.75-7.5 15.88-1.734 22.56L234.9 256l-87.08 101.6c-5.766 6.688-4.984 16.81 1.734 22.56C152.6 382.8 156.3 384 160 384c4.5 0 8.984-1.906 12.14-5.594L256 280.6l83.86 97.84C343 382.1 347.5 384 352 384c3.688 0 7.391-1.281 10.41-3.844c6.719-5.75 7.5-15.88 1.734-22.56L277.1 256l87.08-101.6C369.9 147.7 369.1 137.6 362.4 131.8z"/></svg>';
+$QLD-icon-success: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z"/></svg>';
+$QLD-icon-warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z"/></svg>';
+$QLD-icon-info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S200 146.7 200 160C200 173.3 210.7 184 224 184zM384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96C448 60.65 419.3 32 384 32zM416 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h320c17.64 0 32 14.36 32 32V416zM272 352h-32V240C240 231.2 232.8 224 224 224H192C183.2 224 176 231.2 176 240S183.2 256 192 256h16v96h-32C167.2 352 160 359.2 160 368C160 376.8 167.2 384 176 384h96c8.836 0 16-7.164 16-16C288 359.2 280.8 352 272 352z"/></svg>';
+$QLD-icon-search: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M507.3 484.7l-141.5-141.5C397 306.8 415.1 259.7 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c51.68 0 98.85-18.96 135.2-50.15l141.5 141.5C487.8 510.4 491.9 512 496 512s8.188-1.562 11.31-4.688C513.6 501.1 513.6 490.9 507.3 484.7zM208 384C110.1 384 32 305 32 208S110.1 32 208 32S384 110.1 384 208S305 384 208 384z"/></svg>';
+
+/**
+  * QLD-color- system colours
+  */
+$QLD-color-system-darkest:#0E1435;
+$QLD-color-system-grey-text: #414141;
+$QLD-color-system-grey-dark: #595959;
+$QLD-color-system-grey-medium: #78797E;
+$QLD-color-system-grey: #E0E0E0;
+$QLD-color-system-grey-light: #EBEBEB;
+$QLD-color-system-grey-extra-light: #E8EEF0;
+$QLD-color-system-white: #FFFFFF;
+
+/**
+  * QLD-color- global styles
+  */
+$QLD-color-error: #E22339 !default;
+$QLD-color-error__light: #FFF6F6 !default;
+$QLD-color-error__shade: #FDF0F0 !default;
+
+$QLD-color-success: #6BBE27 !default;
+$QLD-color-success__light: #F7FBF8 !default;
+$QLD-color-success__shade: #F2FAF4 !default;
+
+$QLD-color-warning: #FFCC2C !default; 
+$QLD-color-warning__shade: #FFCC2C !default;
+
+$QLD-color-info: #0085B3 !default;
+$QLD-color-info__shade: #0085B3 !default;
+
+ /**
+  * QLD-color-light styles
+  */
+$QLD-color-light-siteTitle: #022A50 !default;
+$QLD-color-light-designAccent:#73BE27 !default;
+$QLD-color-light-heading: #03213F !default;
+$QLD-color-light-text: #414141 !default;
+$QLD-color-light-text__muted:#636363 !default;
+$QLD-color-light-link: #09549F !default;
+$QLD-color-light-link__visited: #551A8B !default;
+$QLD-color-light-button__text: #FFFFFF !default;
+$QLD-color-light-button: #09549F !default;
+$QLD-color-light-button__hover:#003E7D !default;
+$QLD-color-light-focus: #0085B3 !default;
+$QLD-color-light-border: #EBEBEB !default;
+$QLD-color-light-background: #FFFFFF !default;
+$QLD-color-light-background__shade: #F5F5F5 !default;
+$QLD-color-light-hint: #6f777b !default;
+
+
+ /**
+  * QLD-color-light-alt styles
+  */
+$QLD-color-light-alt-button: #008733 !default;
+$QLD-color-light-alt-button__hover: #005B23 !default;
+$QLD-color-light-alt-border: #7A7A7A !default; 
+$QLD-color-light-alt-background: #EBEBEB !default;
+$QLD-color-light-alt-background__shade: #E0E0E0 !default;
+$QLD-color-light-alt-hint: #61696B !default;
+
+ /**
+  * QLD-color-dark styles
+  */
+$QLD-color-dark-siteTitle: #FFFFFF !default;
+$QLD-color-dark-designAccent:#6BBE27 !default;
+$QLD-color-dark-heading: #FFFFFF !default;
+$QLD-color-dark-text: #FFFFFF !default;
+$QLD-color-dark-text__muted:#DEEBF9 !default;
+$QLD-color-dark-link: #FFFFFF !default;
+$QLD-color-dark-link__visited: #A668F4 !default;
+$QLD-color-dark-button__text: #121940 !default;
+$QLD-color-dark-button: #9AC02C !default;
+$QLD-color-dark-button__hover:#ADD33F !default;
+$QLD-color-dark-focus: #01B0E5 !default;
+$QLD-color-dark-border: #1D9AC6 !default;
+$QLD-color-dark-background: #09549F !default;
+$QLD-color-dark-background__shade: #04498F !default;
+
+ /**
+  * QLD-color-alt-dark styles
+  */
+$QLD-color-dark-alt-button: #EFD700 !default;
+$QLD-color-dark-alt-button__hover: #FFE817 !default;
+$QLD-color-dark-alt-border: #11B2D4 !default;
+$QLD-color-dark-alt-background: #05325F !default;
+$QLD-color-dark-alt-background__shade: #052C53 !default;
+
+
+
+
+ /**
+  * Figma QLD-color-light styles
+  */
+@if global-variable-exists(Figma-QLD-color-light-siteTitle){
+    $QLD-color-light-siteTitle: $Figma-QLD-color-light-siteTitle;
+}
+@if global-variable-exists(Figma-QLD-color-light-designAccent){
+    $QLD-color-light-designAccent: $Figma-QLD-color-light-designAccent;
+}
+@if global-variable-exists(Figma-QLD-color-light-heading){
+  $QLD-color-light-heading: $Figma-QLD-color-light-heading;
+}
+@if global-variable-exists(Figma-QLD-color-light-text){
+  $QLD-color-light-text: $Figma-QLD-color-light-text;
+}
+@if global-variable-exists(Figma-QLD-color-light-text__muted){
+  $QLD-color-light-text__muted: $Figma-QLD-color-light-text__muted;
+}
+@if global-variable-exists(Figma-QLD-color-light-link){
+  $QLD-color-light-link: $Figma-QLD-color-light-link;
+}
+@if global-variable-exists(Figma-QLD-color-light-link__visited){
+  $QLD-color-light-link__visited: $Figma-QLD-color-light-link__visited;
+}
+@if global-variable-exists(Figma-QLD-color-light-button__text){
+  $QLD-color-light-button__text: $Figma-QLD-color-light-button__text;
+}
+@if global-variable-exists(Figma-QLD-color-light-button){
+  $QLD-color-light-button: $Figma-QLD-color-light-button;
+}
+@if global-variable-exists(Figma-QLD-color-light-button__hover){
+  $QLD-color-light-button__hover: $Figma-QLD-color-light-button__hover;
+}
+@if global-variable-exists(Figma-QLD-color-light-focus){
+  $QLD-color-light-focus: $Figma-QLD-color-light-focus;
+}
+@if global-variable-exists(Figma-QLD-color-light-border){
+  $QLD-color-light-border: $Figma-QLD-color-light-border;
+}
+@if global-variable-exists(Figma-QLD-color-light-background){
+  $QLD-color-light-background: $Figma-QLD-color-light-background;
+}
+@if global-variable-exists(Figma-QLD-color-light-background__shade){
+  $QLD-color-light-background__shade: $Figma-QLD-color-light-background__shade;
+}
+
+  
+   /**
+    * Figma QLD-color-light-alt styles
+    */
+@if global-variable-exists(Figma-QLD-color-light-alt-button){
+  $QLD-color-light-alt-button: $Figma-QLD-color-light-alt-button;
+}
+@if global-variable-exists(Figma-QLD-color-light-alt-button__hover){
+  $QLD-color-light-alt-button__hover: $Figma-QLD-color-light-alt-button__hover;
+}
+@if global-variable-exists(Figma-QLD-color-light-alt-border){
+  $QLD-color-light-alt-border: $Figma-QLD-color-light-alt-border;
+}
+@if global-variable-exists(Figma-QLD-color-light-alt-background){
+  $QLD-color-light-alt-background: $Figma-QLD-color-light-alt-background;
+}
+@if global-variable-exists(Figma-QLD-color-light-alt-background__shade){
+  $QLD-color-light-alt-background__shade: $Figma-QLD-color-light-alt-background__shade;
+}
+
+  
+   /**
+    * Figma QLD-color-dark styles
+    */
+@if global-variable-exists(Figma-QLD-color-dark-siteTitle){
+  $QLD-color-dark-siteTitle: $Figma-QLD-color-dark-siteTitle;
+}
+@if global-variable-exists(Figma-QLD-color-dark-designAccent){
+  $QLD-color-dark-designAccent: $Figma-QLD-color-dark-designAccent;
+}
+@if global-variable-exists(Figma-QLD-color-dark-heading){
+  $QLD-color-dark-heading: $Figma-QLD-color-dark-heading;
+}
+@if global-variable-exists(Figma-QLD-color-dark-text){
+  $QLD-color-dark-text: $Figma-QLD-color-dark-text;
+}
+@if global-variable-exists(Figma-QLD-color-dark-text__muted){
+  $QLD-color-dark-text__muted: $Figma-QLD-color-dark-text__muted;
+}
+@if global-variable-exists(Figma-QLD-color-dark-link){
+  $QLD-color-dark-link: $Figma-QLD-color-dark-link;
+}
+@if global-variable-exists(Figma-QLD-color-dark-link__visited){
+  $QLD-color-dark-link__visited: $Figma-QLD-color-dark-link__visited;
+}
+@if global-variable-exists(Figma-QLD-color-dark-button__text){
+  $QLD-color-dark-button__text: $Figma-QLD-color-dark-button__text;
+}
+@if global-variable-exists(Figma-QLD-color-dark-button){
+  $QLD-color-dark-button: $Figma-QLD-color-dark-button;
+}
+@if global-variable-exists(Figma-QLD-color-dark-button__hover){
+  $QLD-color-dark-button__hover: $Figma-QLD-color-dark-button__hover;
+}
+@if global-variable-exists(Figma-QLD-color-dark-focus){
+  $QLD-color-dark-focus: $Figma-QLD-color-dark-focus;
+}
+@if global-variable-exists(Figma-QLD-color-dark-border){
+  $QLD-color-dark-border: $Figma-QLD-color-dark-border;
+}
+@if global-variable-exists(Figma-QLD-color-dark-background){
+  $QLD-color-dark-background: $Figma-QLD-color-dark-background;
+}
+@if global-variable-exists(Figma-QLD-color-dark-background__shade){
+  $QLD-color-dark-background__shade: $Figma-QLD-color-dark-background__shade;
+}
+  
+   /**
+    * Figma QLD-color-alt-dark styles
+    */
+@if global-variable-exists(Figma-QLD-color-dark-alt-button){
+  $QLD-color-dark-alt-button: $Figma-QLD-color-dark-alt-button;
+}
+@if global-variable-exists(Figma-QLD-color-dark-alt-button__hover){
+  $QLD-color-dark-alt-button__hover: $Figma-QLD-color-dark-alt-button__hover;
+}
+@if global-variable-exists(Figma-QLD-color-dark-alt-border){
+  $QLD-color-dark-alt-border: $Figma-QLD-color-dark-alt-border;
+}
+@if global-variable-exists(Figma-QLD-color-dark-alt-background){
+  $QLD-color-dark-alt-background: $Figma-QLD-color-dark-alt-background;
+}
+@if global-variable-exists(Figma-QLD-color-dark-alt-background__shade){
+  $QLD-color-dark-alt-background__shade: $Figma-QLD-color-dark-alt-background__shade;
+}
+
+
+ /**
+  * QLD-border-radius styles
+  */
+$QLD-border-radius: $QLD-unit + 0px !default;
+
+
+/**
+* QLD custom properties (CSS variables) - defaults
+*/
+:root,
+::after,
+::before {
+  --QLD-color-light-siteTitle: #{$QLD-color-light-siteTitle};
+  --QLD-color-light-designAccent:#{$QLD-color-light-designAccent};
+  --QLD-color-light-heading: #{$QLD-color-light-heading};
+  --QLD-color-light-text: #{$QLD-color-light-text};
+  --QLD-color-light-text__muted:#{$QLD-color-light-text__muted};
+  --QLD-color-light-link: #{$QLD-color-light-link};
+  --QLD-color-light-link__visited: #{$QLD-color-light-link__visited};
+  --QLD-color-light-button__text: #{$QLD-color-light-button__text};
+  --QLD-color-light-button: #{$QLD-color-light-button};
+  --QLD-color-light-button__hover: #{$QLD-color-light-button__hover};
+  --QLD-color-light-focus: #{$QLD-color-light-focus};
+  --QLD-color-light-border: #{$QLD-color-light-border};
+  --QLD-color-light-background: #{$QLD-color-light-background};
+  --QLD-color-light-background__shade: #{$QLD-color-light-background__shade};
+  --QLD-color-light-hint: #{$QLD-color-light-hint};
+
+  --QLD-color-light-alt-button: #{$QLD-color-light-alt-button};
+  --QLD-color-light-alt-button__hover: #{$QLD-color-light-alt-button__hover};
+  --QLD-color-light-alt-border: #{$QLD-color-light-alt-border}; 
+  --QLD-color-light-alt-background: #{$QLD-color-light-alt-background};
+  --QLD-color-light-alt-background__shade: #{$QLD-color-light-alt-background__shade};
+  --QLD-color-light-alt-hint: #{$QLD-color-light-alt-hint};
+
+  --QLD-color-dark-siteTitle: #{$QLD-color-dark-siteTitle};
+  --QLD-color-dark-designAccent:#{$QLD-color-dark-designAccent};
+  --QLD-color-dark-heading: #{$QLD-color-dark-heading};
+  --QLD-color-dark-text: #{$QLD-color-dark-text};
+  --QLD-color-dark-text__muted: #{$QLD-color-dark-text__muted};
+  --QLD-color-dark-link: #{$QLD-color-dark-link};
+  --QLD-color-dark-link__visited: #{$QLD-color-dark-link__visited};
+  --QLD-color-dark-button__text: #{$QLD-color-dark-button__text};
+  --QLD-color-dark-button: #{$QLD-color-dark-button};
+  --QLD-color-dark-button__hover: #{$QLD-color-dark-button__hover};
+  --QLD-color-dark-focus: #{$QLD-color-dark-focus};
+  --QLD-color-dark-border: #{$QLD-color-dark-border};
+  --QLD-color-dark-background: #{$QLD-color-dark-background};
+  --QLD-color-dark-background__shade: #{$QLD-color-dark-background__shade};
+
+  --QLD-color-dark-alt-button: #{$QLD-color-dark-alt-button};
+  --QLD-color-dark-alt-button__hover: #{$QLD-color-dark-alt-button__hover};
+  --QLD-color-dark-alt-border: #{$QLD-color-dark-alt-border};
+  --QLD-color-dark-alt-background: #{$QLD-color-dark-alt-background};
+  --QLD-color-dark-alt-background__shade: #{$QLD-color-dark-alt-background__shade};
+}

package/src/styles/postcss.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    plugins: [require("autoprefixer")]
+};
+

package/webpack/JsonMergePlugin.js

@@ -0,0 +1,35 @@
+const glob = require('glob');
+const fs = require('fs');
+var path = require("path");
+const apiDir = `./dist/api/service_finder`;
+
+// A JavaScript class.
+class JsonMergePlugin {
+    constructor(options = {}) {
+      this.options = options;
+    }
+
+    apply(compiler) {
+      const inputPath = this.options.input;
+      const outputPath = this.options.output.endsWith('/') ? this.options.output.slice(0, -1) : this.options.output;
+
+      const output = {};
+
+      glob(inputPath, (error, files) => {
+          files.forEach((filename) => {
+              const contents = JSON.parse(fs.readFileSync(filename, 'utf8'));
+              var key = path.basename(filename, path.extname(filename));
+              output[key] = contents;
+          });
+
+          if(!fs.existsSync(apiDir)) {
+            fs.mkdirSync(apiDir, {recursive: true});
+          }
+
+          fs.writeFileSync(outputPath, JSON.stringify(output));
+      });
+
+    }
+}
+
+module.exports = JsonMergePlugin;