@weavy/uikit-react 13.0.0 → 14.0.1

package/src/scss/theme/base/_palette.scss

@@ -0,0 +1,130 @@
+// initial color used to generate palette
+$seed: #00658e;
+
+// primary
+$primary-0: #000000;
+$primary-10: #001e2e;
+$primary-20: #00344c;
+$primary-30: #004c6c;
+$primary-40: #00658e;
+$primary-50: #007fb2;
+$primary-60: #2f9ad0;
+$primary-70: #53b5ec;
+$primary-80: #84cfff;
+$primary-90: #c7e7ff;
+$primary-95: #e4f3ff;
+$primary-99: #fbfcff;
+$primary-100: #ffffff;
+
+// secondary
+$secondary-0: #000000;
+$secondary-10: #201c00;
+$secondary-20: #373100;
+$secondary-30: #504700;
+$secondary-40: #6a5f00;
+$secondary-50: #857800;
+$secondary-60: #a0921a;
+$secondary-70: #bcad36;
+$secondary-80: #d9c84f;
+$secondary-90: #f6e468;
+$secondary-95: #fff2a4;
+$secondary-99: #fffbff;
+$secondary-100: #ffffff;
+
+// tertiary
+$tertiary-0: #000000;
+$tertiary-10: #002106;
+$tertiary-20: #003910;
+$tertiary-30: #00531b;
+$tertiary-40: #206c2f;
+$tertiary-50: #3c8645;
+$tertiary-60: #56a15c;
+$tertiary-70: #70bc75;
+$tertiary-80: #8bd88e;
+$tertiary-90: #a6f5a8;
+$tertiary-95: #c7ffc4;
+$tertiary-99: #f6fff1;
+$tertiary-100: #ffffff;
+
+// error
+$error-0: #000000;
+$error-10: #410002;
+$error-20: #690005;
+$error-30: #93000a;
+$error-40: #ba1a1a;
+$error-50: #de3730;
+$error-60: #ff5449;
+$error-70: #ff897d;
+$error-80: #ffb4ab;
+$error-90: #ffdad6;
+$error-95: #ffedea;
+$error-99: #fffbff;
+$error-100: #ffffff;
+
+// neutral
+$neutral-0: #000000;
+$neutral-10: #191c1e;
+$neutral-20: #2e3133;
+$neutral-30: #454749;
+$neutral-40: #5c5e61;
+$neutral-50: #75777a;
+$neutral-60: #8f9193;
+$neutral-70: #aaabae;
+$neutral-80: #c5c6c9;
+$neutral-90: #e2e2e5;
+$neutral-95: #f0f1f3;
+$neutral-99: #fcfcff;
+$neutral-100: #ffffff;
+
+// neutral variant
+$neutral-variant-0: #000000;
+$neutral-variant-10: #161c21;
+$neutral-variant-20: #2b3136;
+$neutral-variant-30: #41484d;
+$neutral-variant-40: #595f65;
+$neutral-variant-50: #71787e;
+$neutral-variant-60: #8b9198;
+$neutral-variant-70: #a5acb2;
+$neutral-variant-80: #c1c7ce;
+$neutral-variant-90: #dde3ea;
+$neutral-variant-95: #ebf1f8;
+$neutral-variant-99: #fbfcff;
+$neutral-variant-100: #ffffff;
+
+// custom colors
+$blue-light: #7aadfa;
+$indigo-light: #8489e0;
+$purple-light: #bd78c2;
+$pink-light: #d072a2;
+$red-light: #da717c;
+$orange-light: #ef9646;
+$yellow-light: #d9c84f;
+$green-light: #56a15c;
+$teal-light: #00a29d;
+$cyan-light: #008398;
+$gray-light: #75777a;
+
+$blue-dark: #a7c8ff;
+$indigo-dark: #8489e0;
+$purple-dark: #da92de;
+$pink-dark: #ee8cbe;
+$red-dark: #da717c;
+$orange-dark: #ef9646;
+$yellow-dark: #d9c84f;
+$green-dark: #56a15c;
+$teal-dark: #00a29d;
+$cyan-dark: #009fb8;
+$gray-dark: #8f9193;
+
+// surface levels
+$surface-1-light: #f0f4f9; // $neutral-99 + $primary-40 with 5% opacity
+$surface-2-light: #e8f0f6; // $neutral-99 + $primary-40 with 8% opacity
+$surface-3-light: #e0ebf2; // $neutral-99 + $primary-40 with 11% opacity
+$surface-4-light: #deeaf1; // $neutral-99 + $primary-40 with 12% opacity
+$surface-5-light: #d9e7ef; // $neutral-99 + $primary-40 with 14 opacity
+
+$surface-1-dark: #1e2428; // $neutral-10 + $primary-80 with 5% opacity
+$surface-2-dark: #212a2f; // $neutral-10 + $primary-80 with 8% opacity
+$surface-3-dark: #242f36; // $neutral-10 + $primary-80 with 11% opacity
+$surface-4-dark: #253138; // $neutral-10 + $primary-80 with 12% opacity
+$surface-5-dark: #27343c; // $neutral-10 + $primary-80 with 14 opacity

package/src/scss/theme/{mixins → base}/_position.scss

@@ -1,11 +1,11 @@
-@use "../variables";
+@use "vars";
 
 @mixin fixed-top {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
-  z-index: variables.$zindex-fixed;
+  z-index: vars.$zindex-fixed;
 }
 
 @mixin fixed-bottom {
@@ -13,14 +13,14 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: variables.$zindex-fixed;
+  z-index: vars.$zindex-fixed;
 }
 
 @mixin sticky-top {
   @supports (position: sticky) {
     position: sticky;
     top: 0;
-    z-index: variables.$zindex-sticky;
+    z-index: vars.$zindex-sticky;
   }
 }
 
@@ -28,6 +28,6 @@
   @supports (position: sticky) {
     position: sticky;
     bottom: 0;
-    z-index: variables.$zindex-sticky;
+    z-index: vars.$zindex-sticky;
   }
 }

package/src/scss/theme/base/_reboot.scss

@@ -0,0 +1,51 @@
+@use "sass:selector";
+@use "colors";
+@use "vars";
+
+// Some cherry-picked and ported from bootstrap/scss/reboot
+// Use :where() to get specificity 0 https://developer.mozilla.org/en-US/docs/Web/CSS/:where
+
+// General style reboot selector for all classes starting with wy-
+:where([class^='wy-'], [class*=' wy-']) {
+  box-sizing: border-box;
+  // See https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+  *::before, *::after {
+    box-sizing: inherit;
+  }
+  // Self and descendants
+  &, & * {
+    // A
+    &:where(a) {
+      text-decoration: vars.$link-decoration;
+      color: colors.$link;
+
+      &:hover {
+        text-decoration: vars.$link-hover-decoration;
+      }
+
+      &:where(:not([href]):not([class])) {
+
+        &, &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+    // P
+    &:where(p) {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+    // LABEL
+    &:where(label) {
+      cursor: inherit;
+    }
+
+    &[hidden] {
+      display: none !important;
+    }
+
+    &:where([role="button"]) {
+      cursor: pointer;
+    }
+  }
+}

package/src/scss/theme/base/_scroll.scss

@@ -0,0 +1,180 @@
+@use "sass:selector";
+@use "colors";
+
+@mixin scroll-y {
+  overflow-y: auto;
+  touch-action: pan-y, pan-x;
+
+  // to enable HW acceleration and not cause repaint on scroll
+  // opacity needed for custom scrollbar to paint
+  will-change: scroll-position, opacity;
+  backface-visibility: hidden;
+
+  // ios momentum scrolling on iOS <= 12, cannot be used on the <body> element!
+  &:not(body) {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  max-height: 100%;
+}
+
+@mixin scroll-x {
+  overflow-x: auto;
+  touch-action: pan-y, pan-x;
+
+  // to enable HW acceleration and not cause repaint on scroll
+  will-change: scroll-position, opacity;
+  backface-visibility: hidden;
+  max-width: 100%;
+}
+
+// custom scrollbar styling
+@mixin custom-scrollbar {
+  // custom scrollbar for webkit browsers
+  // reference https://webkit.org/blog/363/styling-scrollbars/
+
+  &::-webkit-scrollbar {
+    height: .625rem;
+    width: .625rem;
+    background: transparent;
+    z-index: 999;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    //background-color: rgba(colors.$gray-500, 0.75);
+    background-color: colors.$outline;
+    border: .125rem solid transparent;
+    border-radius: .5rem;
+    background-clip: padding-box;
+    opacity: 75%;
+
+    &:hover {
+      //background-color: rgba(colors.$gray-700, 0.75);
+      background-color: colors.$outline-variant;
+      opacity: 75%;
+    }
+
+    &:window-inactive {
+      //background-color: rgba(colors.$gray-500, 0.5);
+      background-color: colors.$outline;
+      opacity: 50%;
+    }
+  }
+
+  // custom scrollbar for firefox
+  scrollbar-width: thin;
+  //scrollbar-color: rgba(colors.$gray-500, 0.75) transparent;
+  scrollbar-color: #{colors.$outline} transparent;
+}
+
+// custom scrollbar styling
+@mixin thin-scrollbar {
+  // custom scrollbar for webkit browsers
+  &::-webkit-scrollbar {
+    height: .375rem;
+    width: .375rem;
+    background: transparent;
+    z-index: 999;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    //background-color: rgba(colors.$gray-700, 0.75);
+    background-color: colors.$outline-variant;
+    opacity: 75%;
+    border: 0 solid transparent;
+    border-radius: 0;
+    background-clip: padding-box;
+
+    &:hover {
+      //background-color: rgba(colors.$gray-500, 0.75);
+      background-color: colors.$outline;
+      opacity: 75%;
+    }
+
+    &:window-inactive {
+      //background-color: rgba(colors.$gray-500, 0.5);
+      background-color: colors.$outline;
+      opacity: 50%;
+    }
+  }
+  
+  // custom scrollbar for firefox
+  scrollbar-width: thin;
+  //scrollbar-color: rgba(colors.$gray-700, 0.75) transparent;
+  scrollbar-color: #{colors.$outline-variant} transparent;
+}
+
+@mixin scrollbar-top-padding($scrollbar-padding) {
+  &::-webkit-scrollbar-button:vertical:start:single-button {
+    height: $scrollbar-padding;
+  }
+}
+
+@mixin scrollbar-bottom-padding($scrollbar-padding) {
+  &::-webkit-scrollbar-button:vertical:end:single-button {
+    height: $scrollbar-padding;
+  }
+}
+
+// Exposed styles
+
+.wy-scroll-y {
+  @include scroll-y;
+
+  &:not(.wy-scroll-x) {
+    overflow-x: hidden;
+    touch-action: pan-y;
+  }
+}
+
+.wy-scroll-x {
+  @include scroll-x;
+
+  &:not(.wy-scroll-y) {
+    overflow-y: hidden;
+    touch-action: pan-x;
+  }
+}
+
+.wy-scrollbars {
+  // custom scrollbar styling
+  // use overlay scrollbars if supported
+
+  &.wy-scroll-y, .wy-scroll-y {
+    @supports (overflow-y: overlay) {
+      overflow-y: overlay;
+    }
+
+    @include custom-scrollbar;
+
+    // scrollbar offsets
+    @include scrollbar-top-padding(#{'var(--wy-scrollbar-adjust-top, 0)'});
+    @include scrollbar-bottom-padding(#{'var(--wy-scrollbar-adjust-bottom, 0)'});
+  }
+}
+
+// prevent scroll when opening modals etc.
+.wy-block-scroll {
+  overflow: hidden !important;
+}
+
+// element for detecting scrollbar capabilities (visibility, overlay etc.)
+.wy-scrollbar-detection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 8rem;
+  height: 8rem;
+  overflow: scroll;
+  z-index: -99999;
+  pointer-events: none;
+  visibility: hidden;
+}

package/src/scss/theme/base/_svg.scss

@@ -0,0 +1,49 @@
+@use "sass:string";
+
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+    $index: string.index($string, $search);
+  
+    @if $index {
+      @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+  
+    @return $string;
+  }
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape($string) {
+  @if string.index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// spinner.svg encoded with https://codepen.io/jakob-e/pen/doMoML
+$spinner: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3Eg%7Banimation:rotate 2s linear infinite;transform-origin:center center%7Dcircle%7Bstroke-dasharray:1,100;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite%7D@keyframes rotate%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes dash%7B0%25%7Bstroke-dasharray:1,100;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-17.5px%7D100%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-62px%7D%7D@keyframes color%7B0%25,100%25%7Bstroke:%23216eb4%7D40%25%7Bstroke:%2328b7cf%7D66%25%7Bstroke:%23216eb4%7D80%25,90%25%7Bstroke:%2328b7cf%7D%7D%3C/style%3E%3Cg%3E%3Ccircle fill='none' cx='12' cy='12' r='11' stroke-linecap='butt' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E")

package/src/scss/theme/base/_text.scss

@@ -0,0 +1,23 @@
+@use "vars";
+
+// Text truncate
+// Requires inline-block or block for proper styling
+@mixin truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Use stretched-link on links to to make its containing block clickable via a ::after pseudo element.
+// In most cases, this means that an element with position: relative; that contains a link is clickable.
+@mixin stretched-link {
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    content: "";
+  }
+}

package/src/scss/theme/base/_vars.scss

@@ -0,0 +1,203 @@
+@use "colors";
+@use "md";
+
+// Breakpoints for responsive layout
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
+
+// Z-index master list
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+//$zindex-offcanvas-backdrop:         1040 !default;
+//$zindex-offcanvas:                  1045 !default;
+$zindex-modal-backdrop:             1050 !default;
+$zindex-modal:                      1055 !default;
+$zindex-popover:                    1070 !default;
+$zindex-tooltip:                    1080 !default;
+$zindex-toast:                      1090 !default;
+
+$zindex-max: 2147483647 !default;
+
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+$font-weight-thin:          100;
+$font-weight-extralight:    200;
+$font-weight-light:         300;
+$font-weight-normal:        400;
+$font-weight-medium:        500;
+$font-weight-semibold:      600;
+$font-weight-bold:          700;
+$font-weight-extrabold:     800;
+$font-weight-black:         900;
+$font-weight-extrablack:    950;
+
+// Components
+$appbar-height: 3rem;
+$footerbar-height: 4rem;
+
+// VARIABLES
+
+:where(:root, :host > *) {
+    /* Typography */
+
+    // Font should be inherited/unset by default
+    --wy-font-family:               unset; // #{$font-family-sans-serif};
+    --wy-font-weight:               unset; // #{$font-weight-normal};
+
+    --wy-line-height:               1.5;
+
+    --wy-font-size-base:            1rem; // Assumes the browser default, typically 16px
+    --wy-font-size-xxs:             calc(.625 * var(--wy-font-size-base)); // .625rem 10px
+    --wy-font-size-xs:              calc(.75  * var(--wy-font-size-base)); //  .75rem 12px
+    --wy-font-size-sm:              calc(.875 * var(--wy-font-size-base)); // .875rem 14px
+    --wy-font-size-lg:              calc(1.25 * var(--wy-font-size-base)); // 1.25rem 20px
+
+    --wy-headings-font-style:       unset;
+    --wy-headings-font-family:      var(--wy-font-family);
+    --wy-headings-font-weight:      #{$font-weight-medium};
+    --wy-headings-line-height:      var(--wy-line-height);
+
+    /* Border */
+    --wy-border-radius:             .5rem;
+    --wy-border-radius-sm:          calc(.75 * var(--wy-border-radius)); // .375rem;
+    --wy-border-radius-lg:          calc(1.5 * var(--wy-border-radius)); // .75rem;
+    --wy-border-radius-xl:          calc(2   * var(--wy-border-radius)); //  1rem;
+    --wy-border-radius-pill:        50rem;
+
+    /* Links */
+    //--wy-link-color:                #{colors.$primary};  ---> --wy-link in colors
+    --wy-link-decoration:           none;
+    --wy-link-hover-decoration:     null;
+
+    /* Tables */
+    --wy-table-cell-padding-x:      .25rem;
+    --wy-table-cell-padding-y:      .25rem;
+
+    /* Inputs */
+    --wy-input-padding-y:           .4375rem;
+    --wy-input-padding-x:           .75rem;
+    --wy-input-font-family:         unset;
+    --wy-input-font-size:           var(--wy-font-size-base);
+    --wy-input-font-weight:         var(--wy-font-weight);
+    --wy-input-line-height:         var(--wy-line-height);
+    --wy-input-border-width:        1px;
+    --wy-input-border-radius:       var(--wy-border-radius);
+
+
+    /* Shadows */
+    --wy-shadow-level0:             none; // xxs
+    --wy-shadow-level1:             #{md.$shadow-2dp}; // xs
+    --wy-shadow-level2:             #{md.$shadow-4dp}; // sm
+    --wy-shadow-level3:             #{md.$shadow-8dp}; // 
+    --wy-shadow-level4:             #{md.$shadow-16dp}; // lg
+
+    /* Transitions */
+    --wy-transition-curve:          #{md.$animation-curve-default};
+    --wy-transition-duration:       #{md.$animation-duration};
+    --wy-transition-duration-fast:  #{md.$animation-duration-fast};
+    --wy-transition:                var(--wy-transition-duration) var(--wy-transition-curve);
+    --wy-transition-fast:           var(--wy-transition-duration-fast) var(--wy-transition-curve);
+
+    /* Opacity */
+    --wy-opacity-backdrop:          95%;
+    --wy-opacity-muted:             38%;
+    --wy-opacity-disabled:          38%;
+    /*
+    --wy-opacity-disabled:          12%;
+    --wy-opacity-on-disabled:       38%;
+    */
+
+    /* State layer */
+    --wy-opacity-state-hover:       8%;
+    --wy-opacity-state-focus:       12%;
+    --wy-opacity-state-active:      12%;
+    --wy-opacity-state-drag:        16%;
+
+    /* Surface elevation */
+    --wy-surface-1-mix:             5%;
+    --wy-surface-2-mix:             8%;
+    --wy-surface-3-mix:             11%;
+    --wy-surface-4-mix:             12%;
+    --wy-surface-5-mix:             14%;
+
+}
+  
+// Rounded corners
+$border-radius-sm: var(--wy-border-radius-sm);
+$border-radius: var(--wy-border-radius);
+$border-radius-lg: var(--wy-border-radius-lg);
+$border-radius-xl: var(--wy-border-radius-xl);
+$border-radius-pill: var(--wy-border-radius-pill);
+
+// Typography
+$font-family-base: var(--wy-font-family);
+$font-weight-base: var(--wy-font-weight);
+
+$line-height-base: var(--wy-line-height);
+
+$font-size-xxs: var(--wy-font-size-xxs);
+$font-size-xs:   var(--wy-font-size-xs);
+$font-size-sm:   var(--wy-font-size-sm);
+$font-size-base: var(--wy-font-size-base);
+$font-size-lg:   var(--wy-font-size-lg);
+
+$headings-font-style: var(--wy-headings-font-style);
+$headings-font-family: var(--wy-headings-font-family);
+$headings-font-weight: var(--wy-headings-font-weight);
+$headings-line-height: var(--wy-headings-line-height);
+
+// Links
+//$link-color: var(--wy-link-color); ---> colors.$link;
+$link-decoration: var(--wy-link-decoration);
+$link-hover-decoration: var(--wy-link-hover-decoration);
+
+// Tables
+$table-cell-padding-x: var(--wy-table-cell-padding-x);
+$table-cell-padding-y: var(--wy-table-cell-padding-y);
+
+// Forms, Inputs
+$input-padding-y: var(--wy-input-padding-y);
+$input-padding-x: var(--wy-input-padding-x);
+$input-font-family: var(--wy-input-font-family);
+$input-font-size: var(--wy-input-font-size);
+$input-font-weight: var(--wy-input-font-weight);
+$input-line-height: var(--wy-input-line-height);
+$input-border-width: var(--wy-input-border-width);
+$input-border-radius: var(--wy-input-border-radius);
+
+// Shadows
+$shadow-level0: var(--wy-shadow-level0);
+$shadow-level1: var(--wy-shadow-level1);
+$shadow-level2: var(--wy-shadow-level2);
+$shadow-level3: var(--wy-shadow-level3);
+$shadow-level4: var(--wy-shadow-level4);
+
+// Transitions
+$transition-curve: var(--wy-transition-curve);
+$transition-duration: var(--wy-transition-duration);
+$transition-duration-fast: var(--wy-transition-duration-fast);
+$transition: var(--wy-transition);
+$transition-fast: var(--wy-transition-fast);
+
+// Opacity
+$opacity-backdrop: var(--wy-opacity-backdrop);
+$opacity-muted: var(--wy-opacity-muted);
+$opacity-disabled: var(--wy-opacity-disabled);
+$opacity-on-disabled: var(--wy-opacity-on-disabled);
+
+// State layer
+$opacity-state-hover: var(--wy-opacity-state-hover);
+$opacity-state-focus: var(--wy-opacity-state-focus);
+$opacity-state-active: var(--wy-opacity-state-active);
+$opacity-state-drag: var(--wy-opacity-state-drag);
+
+// Surface elevation
+$surface-1-mix: var(--wy-surface-1-mix);
+$surface-2-mix: var(--wy-surface-2-mix);
+$surface-3-mix: var(--wy-surface-3-mix);
+$surface-4-mix: var(--wy-surface-4-mix);
+$surface-5-mix: var(--wy-surface-5-mix);

package/src/scss/theme/base/fonts/_index.scss

@@ -0,0 +1,2 @@
+@import './fontmapping-roboto';
+@import './fontmapping-segoe-ui'; // Needed by Firefox