material-sass 1.4.1 → 4.0.0.alpha5

data/app/assets/stylesheets/material/utilities/_text.scss

@@ -0,0 +1,95 @@
+// alignment
+  .text-justify {
+    text-align: justify !important;
+  }
+
+  .text-nowrap {
+    white-space: nowrap !important;
+  }
+
+  .text-truncate {
+    @include text-truncate;
+  }
+
+  // horizontal
+    @each $breakpoint in map-keys($grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint) {
+        .text-#{$breakpoint}-center {
+          text-align: center !important;
+        }
+
+        .text-#{$breakpoint}-left {
+          text-align: left !important;
+        }
+
+        .text-#{$breakpoint}-right {
+          text-align: right !important;
+        }
+      }
+    }
+
+// color
+  // black and white
+    @include text-emphasis-variant('.text-black', $black);
+    @include text-emphasis-variant('.text-black-primary', $black-primary);
+    @include text-emphasis-variant('.text-black-secondary', $black-secondary);
+    @include text-emphasis-variant('.text-black-hint', $black-hint);
+    @include text-emphasis-variant('.text-black-divider', $black-divider);
+
+    @include text-emphasis-variant('.text-white', $white);
+    @include text-emphasis-variant('.text-white-primary', $white-primary);
+    @include text-emphasis-variant('.text-white-secondary', $white-secondary);
+    @include text-emphasis-variant('.text-white-hint', $white-hint);
+    @include text-emphasis-variant('.text-white-divider', $white-divider);
+
+  // font colour
+    @include text-emphasis-variant('.text-gray-dark', $black-primary, $black);
+
+  // offwhite
+    @include text-emphasis-variant('.text-muted', $text-muted, $text-muted-active);
+
+  // palette
+    @each $color in $palettes {
+      $i: index($palettes, $color);
+
+      @include text-emphasis-variant('.text-#{$color}', nth($palettes-color, $i), nth($palettes-color-dark, $i));
+    }
+
+    @include text-emphasis-variant('.text-inverse', $white-primary, $white);
+
+// italcs and weight
+  .font-italic {
+    font-style: italic;
+  }
+
+  .font-weight-bold,
+  .font-weight-medium {
+    font-weight: $font-weight-medium;
+  }
+
+  .font-weight-light {
+    font-weight: $font-weight-light;
+  }
+
+  .font-weight-normal,
+  .font-weight-regular {
+    font-weight: $font-weight-regular;
+  }
+
+// misc
+  .text-hide {
+    @include text-hide;
+  }
+
+// transformation
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }

data/app/assets/stylesheets/material/utilities/_visibility.scss

@@ -0,0 +1,50 @@
+.invisible {
+  visibility: hidden !important;
+}
+
+//
+// print
+//
+  .hidden-print {
+    @media print {
+      display: none !important;
+    }
+  }
+
+  .visible-print-block {
+    display: none !important;
+    @media print {
+      display: block !important;
+    }
+  }
+
+  .visible-print-inline {
+    display: none !important;
+    @media print {
+      display: inline !important;
+    }
+  }
+
+  .visible-print-inline-block {
+    display: none !important;
+    @media print {
+      display: inline-block !important;
+    }
+  }
+
+//
+// responsive
+//
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    .hidden-#{$breakpoint}-up {
+      @include media-breakpoint-up($breakpoint) {
+        display: none !important;
+      }
+    }
+
+    .hidden-#{$breakpoint}-down {
+      @include media-breakpoint-down($breakpoint) {
+        display: none !important;
+      }
+    }
+  }

data/app/assets/stylesheets/material/utilities/_waves.scss

@@ -0,0 +1,48 @@
+/*
+ * waves v0.7.4
+ * http://fian.my.id/Waves
+ */
+
+.waves-effect {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  .waves-ripple {
+    background-clip: content-box;
+    background-color: $waves-bg;
+    border-radius: 50%;
+    height: $waves-size;
+    margin-top: ($waves-size / -2);
+    margin-left: ($waves-size / -2);
+    opacity: 0;
+    position: absolute;
+    transform: scale(0) translate(0, 0);
+    width: $waves-size;
+    @include transition-standard(opacity, transform);
+  }
+  &.waves-light .waves-ripple {
+    background-color: $waves-bg-light;
+  }
+}
+
+.waves-wrap {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  user-select: none;
+  .waves-circle > & {
+    border-radius: 50%;
+
+    // r='0' disables rendering of the element
+    // the fake mask fixes an issue in Firefox
+    // it replaces `mask: url()` in previous versions
+    // because `url()` may cause issues with some build tools
+    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='none' r='0' stroke-width='0' /%3E%3C/svg%3E");
+
+    transform: translateZ(0);
+    -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
+  }
+}

data/app/assets/stylesheets/material/variables/_animation.scss

@@ -0,0 +1,22 @@
+//
+// the movement of an element is based on https://material.google.com/motion/movement.html
+//
+
+// based on https://material.google.com/motion/duration-easing.html#duration-easing-common-durations
+  $transition-duration:                     0.3s !default;
+  $transition-duration-lg:                  0.375s !default;
+  $transition-duration-sm:                  0.225s !default;
+
+  $transition-duration-desktop:             0.2s !default;
+  $transition-duration-desktop-lg:          0.25s !default;
+  $transition-duration-desktop-sm:          0.15s !default;
+
+  $transition-duration-tablet:              0.39s !default;
+  $transition-duration-tablet-lg:           0.4875s !default;
+  $transition-duration-tablet-sm:           0.2925s !default;
+
+// based on https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+  $transition-timing-function-acceleration: cubic-bezier(0.4, 0.0, 1, 1) !default;
+  $transition-timing-function-deceleration: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
+  $transition-timing-function-sharp:        cubic-bezier(0.4, 0.0, 0.6, 1) !default;
+  $transition-timing-function-standard:     cubic-bezier(0.4, 0.0, 0.2, 1) !default;

data/app/assets/stylesheets/material/variables/_colour.scss

@@ -0,0 +1,389 @@
+//
+// basic colour
+// based on https://material.google.com/style/color.html#color-color-palette
+//
+  $palette-amber-050:             #fff8e1 !default;
+  $palette-amber-100:             #ffecb3 !default;
+  $palette-amber-200:             #ffe082 !default;
+  $palette-amber-300:             #ffd54f !default;
+  $palette-amber-400:             #ffca28 !default;
+  $palette-amber-500:             #ffc107 !default;
+  $palette-amber-600:             #ffb300 !default;
+  $palette-amber-700:             #ffa000 !default;
+  $palette-amber-800:             #ff8f00 !default;
+  $palette-amber-900:             #ff6f00 !default;
+  $palette-amber-a100:            #ffe57f !default;
+  $palette-amber-a200:            #ffd740 !default;
+  $palette-amber-a400:            #ffc400 !default;
+  $palette-amber-a700:            #ffab00 !default;
+
+  $palette-blue-050:              #e3f2fd !default;
+  $palette-blue-100:              #bbdefb !default;
+  $palette-blue-200:              #90caf9 !default;
+  $palette-blue-300:              #64b5f6 !default;
+  $palette-blue-400:              #42a5f5 !default;
+  $palette-blue-500:              #2196f3 !default;
+  $palette-blue-600:              #1e88e5 !default;
+  $palette-blue-700:              #1976d2 !default;
+  $palette-blue-800:              #1565c0 !default;
+  $palette-blue-900:              #0d47a1 !default;
+  $palette-blue-a100:             #82b1ff !default;
+  $palette-blue-a200:             #448aff !default;
+  $palette-blue-a400:             #2979ff !default;
+  $palette-blue-a700:             #2962ff !default;
+
+  $palette-blue-grey-050:         #eceff1 !default;
+  $palette-blue-grey-100:         #cfd8dc !default;
+  $palette-blue-grey-200:         #b0bec5 !default;
+  $palette-blue-grey-300:         #90a4ae !default;
+  $palette-blue-grey-400:         #78909c !default;
+  $palette-blue-grey-500:         #607d8b !default;
+  $palette-blue-grey-600:         #546e7a !default;
+  $palette-blue-grey-700:         #455a64 !default;
+  $palette-blue-grey-800:         #37474f !default;
+  $palette-blue-grey-900:         #263238 !default;
+
+  $palette-brown-050:             #efebe9 !default;
+  $palette-brown-100:             #d7ccc8 !default;
+  $palette-brown-200:             #bcaaa4 !default;
+  $palette-brown-300:             #a1887f !default;
+  $palette-brown-400:             #8d6e63 !default;
+  $palette-brown-500:             #795548 !default;
+  $palette-brown-600:             #6d4c41 !default;
+  $palette-brown-700:             #5d4037 !default;
+  $palette-brown-800:             #4e342e !default;
+  $palette-brown-900:             #3e2723 !default;
+
+  $palette-cyan-050:              #e0f7fa !default;
+  $palette-cyan-100:              #b2ebf2 !default;
+  $palette-cyan-200:              #80deea !default;
+  $palette-cyan-300:              #4dd0e1 !default;
+  $palette-cyan-400:              #26c6da !default;
+  $palette-cyan-500:              #00bcd4 !default;
+  $palette-cyan-600:              #00acc1 !default;
+  $palette-cyan-700:              #0097a7 !default;
+  $palette-cyan-800:              #00838f !default;
+  $palette-cyan-900:              #006064 !default;
+  $palette-cyan-a100:             #84ffff !default;
+  $palette-cyan-a200:             #18ffff !default;
+  $palette-cyan-a400:             #00e5ff !default;
+  $palette-cyan-a700:             #00b8d4 !default;
+
+  $palette-deep-orange-050:       #fbe9e7 !default;
+  $palette-deep-orange-100:       #ffccbc !default;
+  $palette-deep-orange-200:       #ffab91 !default;
+  $palette-deep-orange-300:       #ff8a65 !default;
+  $palette-deep-orange-400:       #ff7043 !default;
+  $palette-deep-orange-500:       #ff5722 !default;
+  $palette-deep-orange-600:       #f4511e !default;
+  $palette-deep-orange-700:       #e64a19 !default;
+  $palette-deep-orange-800:       #d84315 !default;
+  $palette-deep-orange-900:       #bf360c !default;
+  $palette-deep-orange-a100:      #ff9e80 !default;
+  $palette-deep-orange-a200:      #ff6e40 !default;
+  $palette-deep-orange-a400:      #ff3d00 !default;
+  $palette-deep-orange-a700:      #ee2c00 !default;
+
+  $palette-deep-purple-050:       #ede7f6 !default;
+  $palette-deep-purple-100:       #d1c4e9 !default;
+  $palette-deep-purple-200:       #b39ddb !default;
+  $palette-deep-purple-300:       #9575cd !default;
+  $palette-deep-purple-400:       #7e57c2 !default;
+  $palette-deep-purple-500:       #673ab7 !default;
+  $palette-deep-purple-600:       #5e35b1 !default;
+  $palette-deep-purple-700:       #512da8 !default;
+  $palette-deep-purple-800:       #4527a0 !default;
+  $palette-deep-purple-900:       #311b92 !default;
+  $palette-deep-purple-a100:      #b388ff !default;
+  $palette-deep-purple-a200:      #7c4dff !default;
+  $palette-deep-purple-a400:      #651fff !default;
+  $palette-deep-purple-a700:      #6200ea !default;
+
+  $palette-green-050:             #e8f5e9 !default;
+  $palette-green-100:             #c8e6c9 !default;
+  $palette-green-200:             #a5d6a7 !default;
+  $palette-green-300:             #81c784 !default;
+  $palette-green-400:             #66bb6a !default;
+  $palette-green-500:             #4caf50 !default;
+  $palette-green-600:             #43a047 !default;
+  $palette-green-700:             #388e3c !default;
+  $palette-green-800:             #2e7d32 !default;
+  $palette-green-900:             #1b5e20 !default;
+  $palette-green-a100:            #b9f6ca !default;
+  $palette-green-a200:            #69f0ae !default;
+  $palette-green-a400:            #00e676 !default;
+  $palette-green-a700:            #00c853 !default;
+
+  $palette-grey-050:              #fafafa !default;
+  $palette-grey-100:              #f5f5f5 !default;
+  $palette-grey-200:              #eeeeee !default;
+  $palette-grey-300:              #e0e0e0 !default;
+  $palette-grey-400:              #bdbdbd !default;
+  $palette-grey-500:              #9e9e9e !default;
+  $palette-grey-600:              #757575 !default;
+  $palette-grey-700:              #616161 !default;
+  $palette-grey-800:              #424242 !default;
+  $palette-grey-900:              #212121 !default;
+
+  $palette-indigo-050:            #e8eaf6 !default;
+  $palette-indigo-100:            #c5cae9 !default;
+  $palette-indigo-200:            #9fa8da !default;
+  $palette-indigo-300:            #7986cb !default;
+  $palette-indigo-400:            #5c6bc0 !default;
+  $palette-indigo-500:            #3f51b5 !default;
+  $palette-indigo-600:            #3949ab !default;
+  $palette-indigo-700:            #303f9f !default;
+  $palette-indigo-800:            #283593 !default;
+  $palette-indigo-900:            #1a237e !default;
+  $palette-indigo-a100:           #8c9eff !default;
+  $palette-indigo-a200:           #536dfe !default;
+  $palette-indigo-a400:           #3d5afe !default;
+  $palette-indigo-a700:           #304ffe !default;
+
+  $palette-light-blue-050:        #e1f5fe !default;
+  $palette-light-blue-100:        #b3e5fc !default;
+  $palette-light-blue-200:        #81d4fa !default;
+  $palette-light-blue-300:        #4fc3f7 !default;
+  $palette-light-blue-400:        #29b6f6 !default;
+  $palette-light-blue-500:        #03a9f4 !default;
+  $palette-light-blue-600:        #039be5 !default;
+  $palette-light-blue-700:        #0288d1 !default;
+  $palette-light-blue-800:        #0277bd !default;
+  $palette-light-blue-900:        #01579b !default;
+  $palette-light-blue-a100:       #80d8ff !default;
+  $palette-light-blue-a200:       #40c4ff !default;
+  $palette-light-blue-a400:       #00b0ff !default;
+  $palette-light-blue-a700:       #0091ea !default;
+
+  $palette-light-green-050:       #f1f8e9 !default;
+  $palette-light-green-100:       #dcedc8 !default;
+  $palette-light-green-200:       #c5e1a5 !default;
+  $palette-light-green-300:       #aed581 !default;
+  $palette-light-green-400:       #9ccc65 !default;
+  $palette-light-green-500:       #8bc34a !default;
+  $palette-light-green-600:       #7cb342 !default;
+  $palette-light-green-700:       #689f38 !default;
+  $palette-light-green-800:       #558b2f !default;
+  $palette-light-green-900:       #33691e !default;
+  $palette-light-green-a100:      #ccff90 !default;
+  $palette-light-green-a200:      #b2ff59 !default;
+  $palette-light-green-a400:      #76ff03 !default;
+  $palette-light-green-a700:      #64dd17 !default;
+
+  $palette-lime-050:              #f9fbe7 !default;
+  $palette-lime-100:              #f0f4c3 !default;
+  $palette-lime-200:              #e6ee9c !default;
+  $palette-lime-300:              #dce775 !default;
+  $palette-lime-400:              #d4e157 !default;
+  $palette-lime-500:              #cddc39 !default;
+  $palette-lime-600:              #c0ca33 !default;
+  $palette-lime-700:              #afb42b !default;
+  $palette-lime-800:              #9e9d24 !default;
+  $palette-lime-900:              #827717 !default;
+  $palette-lime-a100:             #f4ff81 !default;
+  $palette-lime-a200:             #eeff41 !default;
+  $palette-lime-a400:             #c6ff00 !default;
+  $palette-lime-a700:             #aeea00 !default;
+
+  $palette-orange-050:            #fff3e0 !default;
+  $palette-orange-100:            #ffe0b2 !default;
+  $palette-orange-200:            #ffcc80 !default;
+  $palette-orange-300:            #ffb74d !default;
+  $palette-orange-400:            #ffa726 !default;
+  $palette-orange-500:            #ff9800 !default;
+  $palette-orange-600:            #fb8c00 !default;
+  $palette-orange-700:            #f57c00 !default;
+  $palette-orange-800:            #ef6c00 !default;
+  $palette-orange-900:            #e65100 !default;
+  $palette-orange-a100:           #ffd180 !default;
+  $palette-orange-a200:           #ffab40 !default;
+  $palette-orange-a400:           #ff9100 !default;
+  $palette-orange-a700:           #ff6d00 !default;
+
+  $palette-pink-050:              #fce4ec !default;
+  $palette-pink-100:              #f8bbd0 !default;
+  $palette-pink-200:              #f48fb1 !default;
+  $palette-pink-300:              #f06292 !default;
+  $palette-pink-400:              #ec407a !default;
+  $palette-pink-500:              #e91e63 !default;
+  $palette-pink-600:              #d81b60 !default;
+  $palette-pink-700:              #c2185b !default;
+  $palette-pink-800:              #ad1457 !default;
+  $palette-pink-900:              #880e4f !default;
+  $palette-pink-a100:             #ff80ab !default;
+  $palette-pink-a200:             #ff4081 !default;
+  $palette-pink-a400:             #f50057 !default;
+  $palette-pink-a700:             #c51162 !default;
+
+  $palette-purple-050:            #f3e5f5 !default;
+  $palette-purple-100:            #e1bee7 !default;
+  $palette-purple-200:            #ce93d8 !default;
+  $palette-purple-300:            #ba68c8 !default;
+  $palette-purple-400:            #ab47bc !default;
+  $palette-purple-500:            #9c27b0 !default;
+  $palette-purple-600:            #8e24aa !default;
+  $palette-purple-700:            #7b1fa2 !default;
+  $palette-purple-800:            #6a1b9a !default;
+  $palette-purple-900:            #4a148c !default;
+  $palette-purple-a100:           #ea80fc !default;
+  $palette-purple-a200:           #e040fb !default;
+  $palette-purple-a400:           #d500f9 !default;
+  $palette-purple-a700:           #aa00ff !default;
+
+  $palette-red-050:               #ffebee !default;
+  $palette-red-100:               #ffcdd2 !default;
+  $palette-red-200:               #ef9a9a !default;
+  $palette-red-300:               #e57373 !default;
+  $palette-red-400:               #ef5350 !default;
+  $palette-red-500:               #f44336 !default;
+  $palette-red-600:               #e53935 !default;
+  $palette-red-700:               #d32f2f !default;
+  $palette-red-800:               #c62828 !default;
+  $palette-red-900:               #b71c1c !default;
+  $palette-red-a100:              #ff8a80 !default;
+  $palette-red-a200:              #ff5252 !default;
+  $palette-red-a400:              #ff1744 !default;
+  $palette-red-a700:              #d50000 !default;
+
+  $palette-teal-050:              #e0f2f1 !default;
+  $palette-teal-100:              #b2dfdb !default;
+  $palette-teal-200:              #80cbc4 !default;
+  $palette-teal-300:              #4db6ac !default;
+  $palette-teal-400:              #26a69a !default;
+  $palette-teal-500:              #009688 !default;
+  $palette-teal-600:              #00897b !default;
+  $palette-teal-700:              #00796b !default;
+  $palette-teal-800:              #00695c !default;
+  $palette-teal-900:              #004d40 !default;
+  $palette-teal-a100:             #a7ffeb !default;
+  $palette-teal-a200:             #64ffda !default;
+  $palette-teal-a400:             #1de9b6 !default;
+  $palette-teal-a700:             #00bfa5 !default;
+
+  $palette-yellow-050:            #fffde7 !default;
+  $palette-yellow-100:            #fff9c4 !default;
+  $palette-yellow-200:            #fff59d !default;
+  $palette-yellow-300:            #fff176 !default;
+  $palette-yellow-400:            #ffee58 !default;
+  $palette-yellow-500:            #ffeb3b !default;
+  $palette-yellow-600:            #fdd835 !default;
+  $palette-yellow-700:            #fbc02d !default;
+  $palette-yellow-800:            #f9a825 !default;
+  $palette-yellow-900:            #f57f17 !default;
+  $palette-yellow-a100:           #ffff8d !default;
+  $palette-yellow-a200:           #ffff00 !default;
+  $palette-yellow-a400:           #ffea00 !default;
+  $palette-yellow-a700:           #ffd600 !default;
+
+//
+// black and white
+// based on https://material.google.com/style/color.html#color-text-background-colors
+//
+  $black:                         #000000 !default;
+  $black-primary:                 rgba(red($black), green($black), blue($black), 0.87) !default;
+  $black-secondary:               rgba(red($black), green($black), blue($black), 0.54) !default;
+  $black-hint:                    rgba(red($black), green($black), blue($black), 0.38) !default;
+  $black-divider:                 rgba(red($black), green($black), blue($black), 0.12) !default;
+  $black-primary-solid:           #212121 !default;
+  $black-secondary-solid:         #757575 !default;
+  $black-hint-solid:              #9e9e9e !default;
+  $black-divider-solid:           #e1e1e1 !default;
+
+  $white:                         #ffffff !default;
+  $white-primary:                 rgba(red($white), green($white), blue($white), 1.00) !default;
+  $white-secondary:               rgba(red($white), green($white), blue($white), 0.70) !default;
+  $white-hint:                    rgba(red($white), green($white), blue($white), 0.50) !default;
+  $white-divider:                 rgba(red($white), green($white), blue($white), 0.12) !default;
+
+//
+// offwhite
+// based on https://material.google.com/style/color.html#color-themes
+//
+  $offwhite:                      $palette-grey-100 !default;
+  $offwhite-dark:                 $palette-grey-300 !default;
+  $offwhite-light:                $palette-grey-050 !default;
+
+//
+// palette
+// based on https://material.google.com/style/color.html#color-color-schemes
+// change these values to customise colour palettes
+//
+  $brand-color:                   $palette-purple-500 !default;
+  $brand-color-dark:              $palette-purple-700 !default;
+  $brand-color-light:             $palette-purple-100 !default;
+  $brand-text-color:              $white-primary !default;
+  $brand-text-color-dark:         $white-primary !default;
+  $brand-text-color-light:        $black-primary !default;
+
+  $brand-color-accent:            $palette-pink-a200 !default;
+  $brand-color-accent-dark:       $palette-pink-a400 !default;
+  $brand-color-accent-light:      $palette-pink-a100 !default;
+  $brand-text-color-accent:       $white-primary !default;
+  $brand-text-color-accent-dark:  $white-primary !default;
+  $brand-text-color-accent-light: $black-primary !default;
+
+  // change the following lists to add, edit, or remove colours used throughout material css
+    $palettes: (
+      "primary",
+      // "primary" inherits brand colour, so that the naming is in line with Bootstrap 4
+      "secondary",
+      // "secondary" inherits brand accent colour, so that the naming is in line with Bootstrap 4
+      "danger",
+      "info",
+      "success",
+      "warning"
+    ) !default;
+
+    $palettes-color: (
+      $brand-color,
+      $brand-color-accent,
+      $palette-red-500,
+      $palette-blue-500,
+      $palette-green-500,
+      $palette-orange-500
+    ) !default;
+
+    $palettes-color-dark: (
+      $brand-color-dark,
+      $brand-color-accent-dark,
+      $palette-red-700,
+      $palette-blue-700,
+      $palette-green-700,
+      $palette-orange-700
+    ) !default;
+
+    $palettes-color-light: (
+      $brand-color-light,
+      $brand-color-accent-light,
+      $palette-red-300,
+      $palette-blue-300,
+      $palette-green-300,
+      $palette-orange-300
+    ) !default;
+
+    $palettes-text-color: (
+      $brand-text-color,
+      $brand-text-color-accent,
+      $white-primary,
+      $white-primary,
+      $black-primary,
+      $black-primary
+    ) !default;
+
+    $palettes-text-color-dark: (
+      $brand-text-color-dark,
+      $brand-text-color-accent-dark,
+      $white-primary,
+      $white-primary,
+      $white-primary,
+      $black-primary
+    ) !default;
+
+    $palettes-text-color-light: (
+      $brand-text-color-light,
+      $brand-text-color-accent-light,
+      $black-primary,
+      $black-primary,
+      $black-primary,
+      $black-primary
+    ) !default;