Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/_variables.scss b/node_modules/mdl-ext/src/_variables.scss
new file mode 100644
index 0000000..908b337
--- /dev/null
+++ b/node_modules/mdl-ext/src/_variables.scss
@@ -0,0 +1,581 @@
+/**
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "functions";
+
+// ----------------------------------------------------------------
+// Sample colors
+// ----------------------------------------------------------------
+$mdlext-palette-amber-50: #FFF8E1;
+$mdlext-palette-amber-100: #FFECB3;
+$mdlext-palette-amber-500: #FFC107;
+$mdlext-palette-amber-700: #FFA000;
+$mdlext-palette-blue-grey-500: #607D8B;
+$mdlext-palette-deep-orange-500: #FF5722;
+$mdlext-palette-deep-purple-100: #D1C4E9;
+$mdlext-palette-deep-purple-500: #512DA8;
+$mdlext-palette-deep-purple-700: #673AB7;
+$mdlext-palette-green-50: #E8F5E9;
+$mdlext-palette-green-100: #C8E6C9;
+$mdlext-palette-green-500: #4CAF50;
+$mdlext-palette-green-700: #388E3C;
+$mdlext-palette-grey-50: #FAFAFA;
+$mdlext-palette-grey-100: #F5F5F5;
+$mdlext-palette-grey-200: #EEEEEE;
+$mdlext-palette-grey-300: #E0E0E0;
+$mdlext-palette-grey-400: #BDBDBD;
+$mdlext-palette-grey-500: #9E9E9E;
+$mdlext-palette-grey-600: #757575;
+$mdlext-palette-grey-700: #616161;
+$mdlext-palette-grey-800: #424242;
+$mdlext-palette-grey-900: #212121;
+$mdlext-palette-indigo-A200: #536DFE;
+$mdlext-palette-light-blue-500: #03A9F4;
+$mdlext-palette-light-green-500: #8BC34A;
+$mdlext-palette-pink-500: #E91E63;
+$mdlext-palette-pink-700: #C2185B;
+$mdlext-palette-pink-A400: #F50057;
+$mdlext-palette-purple-A200: #E040FB;
+$mdlext-palette-red-700: #D32F2F;
+$mdlext-palette-red-A200: #FF5252;
+$mdlext-palette-red-A400: #FF1744;
+$mdlext-palette-yellow-500: #FFEB3B;
+$mdlext-color-black: #000000;
+$mdlext-color-white: #FFFFFF;
+
+
+/* ========== Sticky Header ========== */
+$mdlext-sticky-header-background-color : transparent !default;
+$mdlext-sticky-header-background-color-scroll : transparent !default;
+$mdlext-sticky-header-gradient-color : rgb-string-to-hex($color-primary) !default;
+$mdlext-sticky-header-gradient-color-start : $mdlext-sticky-header-gradient-color !default;
+$mdlext-sticky-header-gradient-color-end : $mdlext-sticky-header-gradient-color-start !default;
+$mdlext-sticky-header-gradient-color-scroll-start: rgba($mdlext-sticky-header-gradient-color, 0.98) !default;
+$mdlext-sticky-header-gradient-color-scroll-end : rgba($mdlext-sticky-header-gradient-color, 0.95) !default;
+
+// Background shorthand
+/* stylelint-disable */
+$mdlext-sticky-header-background : $mdlext-sticky-header-background-color
+ linear-gradient(to bottom,
+ $mdlext-sticky-header-gradient-color-start 0,
+ $mdlext-sticky-header-gradient-color-end 100%) !default;
+
+// Background shorthand when content is scrolling
+$mdlext-sticky-header-background-scroll : $mdlext-sticky-header-background-color-scroll
+ linear-gradient(to bottom,
+ $mdlext-sticky-header-gradient-color-scroll-start 100%,
+ $mdlext-sticky-header-gradient-color-scroll-end 100%) !default;
+/* stylelint-enable */
+
+/* ========== Accordion ========== */
+$mdlext-accordion-header-background-color-base : $mdlext-palette-grey-500 !default;
+$mdlext-accordion-header-background-color : rgba($mdlext-accordion-header-background-color-base, 0.20) !default;
+$mdlext-accordion-header-background-open-color : rgba($mdlext-accordion-header-background-color-base, 0.30) !default;
+$mdlext-accordion-header-background-active-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
+$mdlext-accordion-header-border-color : rgba($mdlext-accordion-header-background-color-base, 0.50) !default;
+$mdlext-accordion-header-background-hover-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
+$mdlext-accordion-header-focus-outline-color : invert !default;
+$mdlext-accordion-header-disabled-color : rgba($mdlext-accordion-header-background-color-base, 0.12) !default;
+$mdlext-accordion-header-secondary-color : $mdlext-color-black !default;
+$mdlext-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-accordion-header-highlight-color : darken($mdlext-accordion-header-border-color, 3%) !default;
+$mdlext-accordion-ripple-color : rgba(rgb-string-to-hex($color-accent-contrast), 0.5) !default;
+$mdlext-accordion-header-padding : 8px !default;
+$mdlext-accordion-header-height : 56px !default;
+$mdlext-accordion-content-padding : $mdlext-accordion-header-padding !default;
+$mdlext-accordion-content-color : inherit !default;
+$mdlext-accordion-content-background-color : transparent !default;
+
+
+/* ========== Dialog ========== */
+$mdlext-dialog-padding : 0;
+$mdlext-dialog-background-color : transparent !default;
+$mdlext-dialog-backdrop-color : rgba(0, 0, 0, 0.86) !default;
+$mdlext-dialog-open-animation : 0.5s 0.2s forwards !default;
+$mdlext-dialog-backdrop-animation: 0.2s forwards !default;
+
+
+/* ========== Lightbox ========== */
+$mdlext-lightbox-background-color : $card-background-color !default;
+$mdlext-lightbox-border : 0 !default;
+$mdlext-lightbox-border-radius : 0 !default;
+$mdlext-lightbox-figure-margin : 0 !default;
+$mdlext-lightbox-figure-padding : 0 !default;
+$mdlext-lightbox-figcaption-background-color: rgba(255, 255, 255, 0.76) !default;
+$mdlext-lightbox-footer-background-color : rgba(255, 255, 255, 0.86) !default;
+
+
+/* ========== Lightboard ========== */
+$mdlext-lightboard-medium-small-breakpoint : $grid-tablet-breakpoint !default; // 480
+$mdlext-lightboard-medium-breakpoint : $grid-tablet-breakpoint + 180px !default; // 480 + 180
+$mdlext-lightboard-medium-large-breakpoint : $grid-desktop-breakpoint !default; // 840
+$mdlext-lightboard-large-breakpoint : $grid-desktop-breakpoint + 360px !default; // 840+360
+
+$mdlext-lightboard-small-gutter : 2px !default;
+$mdlext-lightboard-small-margin : 0 !default;
+$mdlext-lightboard-small-columns : 2 !default;
+$mdlext-lightboard-small-frame-width : 8px !default;
+
+$mdlext-lightboard-medium-small-gutter : 4px !default;
+$mdlext-lightboard-medium-small-margin : 0 !default;
+$mdlext-lightboard-medium-small-columns : 4 !default;
+$mdlext-lightboard-medium-small-frame-width : 8px !default;
+
+$mdlext-lightboard-medium-gutter : 4px !default;
+$mdlext-lightboard-medium-margin : 0 !default;
+$mdlext-lightboard-medium-columns : 5 !default;
+$mdlext-lightboard-medium-frame-width : 8px !default;
+
+$mdlext-lightboard-medium-large-gutter : 8px !default;
+$mdlext-lightboard-medium-large-margin : 0 !default;
+$mdlext-lightboard-medium-large-columns : 6 !default;
+$mdlext-lightboard-medium-large-frame-width : 12px !default;
+
+$mdlext-lightboard-large-gutter : 8px !default;
+$mdlext-lightboard-large-margin : 0 !default;
+$mdlext-lightboard-large-columns : 7 !default;
+$mdlext-lightboard-large-frame-width : 12px !default;
+
+$mdlext-lightboard-slide-max-size : 250px !default;
+$mdlext-lightboard-slide-border-color : #D8D8D8 !default;
+$mdlext-lightboard-slide-background-color : #F8F8F8 !default;
+$mdlext-lightboard-slide-border-radius : 5px !default;
+$mdlext-lightboard-slide-inner-border-radius : 3px !default;
+$mdlext-lightboard-slide-box-shadow : 2px 2px 6px -1px rgba(219, 215, 219, 0.5) !default;
+$mdlext-lightboard-slide-border-color-hover : #B8B8B8 !default;
+$mdlext-lightboard-slide-background-color-hover: #E8E8E8 !default;
+$mdlext-lightboard-slide-active-bacground-color: #E8E8E8 !default;
+$mdlext-lightboard-slide-box-shadow-hover : 2px 2px 12px -1px rgba(219, 215, 219, 1) !default;
+$mdlext-lightboard-ripple-color : $tab-highlight-color !default;
+$mdlext-lightboard-focus-outline-color : inherit !default;
+$mdlext-lightboard-figcaption-text-color : rgb-string-to-hex($palette-grey-400) !default;
+
+
+/* ========== Carousel ========== */
+$mdlext-carousel-slide-border-top-width : 2px !default;
+$mdlext-carousel-slide-border-top-color : rgb-string-to-hex($color-accent) !default;
+$mdlext-carousel-slide-margin-horizontal : 0;
+$mdlext-carousel-slide-figcaption-color : $mdlext-lightboard-figcaption-text-color !default;
+$mdlext-carousel-slide-ripple-color : $mdlext-lightboard-ripple-color !default;
+
+
+/* ========== Bordered fields ========== */
+$mdlext-bordered-field-vertical-spacing-top : 0 !default;
+$mdlext-bordered-field-vertical-spacing-bottom : $input-text-vertical-spacing !default;
+
+$mdlext-bordered-field-input-text-font-size : $input-text-font-size !default;
+$mdlext-bordered-field-font-weight : normal !default;
+$mdlext-bordered-field-border-width : 1px !default;
+$mdlext-bordered-field-border-radius : 3px !default;
+$mdlext-bordered-field-padding : $input-text-padding + 4px !default;
+$mdlext-bordered-field-padding-top : $input-text-vertical-spacing !default;
+$mdlext-bordered-field-padding-bottom : $input-text-padding !default;
+
+$mdlext-bordered-field-input-text-color : inherit !default;
+$mdlext-bordered-field-border-color : rgba($mdlext-color-black, 0.26) !default;
+$mdlext-bordered-field-background-color : rgba(#FFFFFF, 0.2) !default;
+$mdlext-bordered-field-focus-border-color : rgb-string-to-hex($color-primary) !default;
+$mdlext-bordered-field-focus-background-color : rgba(#EEEEEE, 0.2) !default;
+
+$mdlext-bordered-field-input-text-disabled-text-color : rgba($mdlext-color-black, 0.12) !default;
+$mdlext-bordered-field-disabled-border-color : rgba($mdlext-color-black, 0.12) !default;
+$mdlext-bordered-field-disabled-background-color : $mdlext-bordered-field-background-color !default;
+
+$mdlext-bordered-field-input-text-error-color : $mdlext-bordered-field-input-text-color !default;
+$mdlext-bordered-field-error-border-color : rgb-string-to-hex($input-text-error-color) !default;
+$mdlext-bordered-field-error-background-color : rgba(lighten($mdlext-bordered-field-error-border-color, 50%), 0.5) !default;
+$mdlext-bordered-field-error-focus-border-color : darken($mdlext-bordered-field-error-border-color, 10%) !default;
+$mdlext-bordered-field-error-focus-background-color : $mdlext-bordered-field-error-background-color !default;
+
+$mdlext-bordered-field-input-text-label-color : rgba($mdlext-color-black, 0.26) !default;
+$mdlext-bordered-field-input-text-label-focus-color : $mdlext-bordered-field-focus-border-color !default;
+$mdlext-bordered-field-input-text-label-error-color : $mdlext-bordered-field-error-border-color !default;
+$mdlext-bordered-field-input-text-label-disabled-color: rgba($mdlext-color-black, 0.12) !default;
+
+$mdlext-bordered-field-label-font-size : $mdlext-bordered-field-input-text-font-size !default;
+$mdlext-bordered-field-floating-label-font-size : $input-text-floating-label-fontsize !default;
+$mdlext-bordered-field-floating-label-font-weight : normal !default;
+
+$mdlext-bordered-field-height : $mdlext-bordered-field-padding-top + $mdlext-bordered-field-padding-bottom + $mdlext-bordered-field-input-text-font-size + 6px !default;
+$mdlext-bordered-field-floating-label-focus-bottom : $mdlext-bordered-field-height - $mdlext-bordered-field-floating-label-font-size - $mdlext-bordered-field-padding-top/2 !default;
+
+
+// MDL can not handle required attribute properly. Planned for MDL-v2
+//$mdlext-bordered-field-required-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
+//$mdlext-bordered-field-required-background-color : $mdlext-bordered-field-background-color !default;
+//$mdlext-bordered-field-required-focus-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
+//$mdlext-bordered-field-required-focus-background-color: $mdlext-bordered-field-background-color !default;
+//$mdlext-bordered-field-label-required-color : $mdlext-bordered-field-required-border-color !default;
+
+
+
+/* ========== Color Themes ========== */
+
+// ----------------------------------------------------------------
+// Light Color Theme.
+// ----------------------------------------------------------------
+$mdlext-light-color-primary: #4CAF50 !default;
+$mdlext-light-color-primary-dark: #388E3C !default;
+$mdlext-light-color-primary-light: #4CAF50 !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #C8E6C9 !default; // text color on primary/primary dark background
+$mdlext-light-color-accent: #E040FB !default;
+$mdlext-light-color-accent-light: #E040FB !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast: #FAFAFA !default;
+
+$mdlext-light-content-background-color: #FAFAFA !default; // background color on content (paper/card) background
+$mdlext-light-text-color-primary: rgba($mdlext-color-black, 0.87) !default; // text color on content (paper/card) background
+$mdlext-light-text-color-secondary: rgba($mdlext-color-black, 0.54) !default; // text color on content (paper/card) background
+$mdlext-light-text-color-disabled: rgba($mdlext-color-black, 0.38) !default; // disabled text, hint text, and icons
+$mdlext-light-divider-color: rgba($mdlext-color-black, 0.12) !default; // -> $card-border-color
+$mdlext-light-error-color: #D32F2F !default;
+
+// Anchor
+$mdlext-light-text-link-color: $mdlext-light-color-accent !default;
+
+// Card
+$mdlext-light-card-background-color: $mdlext-light-content-background-color !default;
+$mdlext-light-card-text-color: $mdlext-light-text-color-primary !default;
+$mdlext-light-card-image-placeholder-color: $mdlext-light-color-accent !default;
+$mdlext-light-card-supporting-text-text-color: rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-card-border-color: rgba(0, 0, 0, 0.1) !default;
+$mdlext-light-card-subtitle-color: rgba($mdlext-color-black, 0.54) !default;
+
+// Item
+
+// Default Item Colors
+$mdlext-light-default-item-text-color: rgba($mdlext-color-black, 0.87) !default;
+$mdlext-light-default-item-outline-color: $mdlext-palette-grey-400 !default;
+$mdlext-light-default-item-hover-bg-color: $mdlext-palette-grey-200 !default;
+$mdlext-light-default-item-focus-bg-color: $mdlext-palette-grey-200 !default;
+$mdlext-light-default-item-active-bg-color: $mdlext-palette-grey-300 !default;
+$mdlext-light-default-item-divider-color: rgba($mdlext-color-black, 0.12) !default;
+
+// Disabled Button Colors
+$mdlext-light-disabled-item-text-color: $mdlext-palette-grey-400 !default;
+
+// Dropdown menu / menu-button
+$mdlext-light-default-dropdown-bg-color: $mdlext-color-white !default;
+
+// Badge
+$mdlext-light-badge-color: $mdlext-light-color-accent-contrast !default;
+$mdlext-light-badge-color-inverse: $mdlext-light-color-accent !default;
+$mdlext-light-badge-background: $mdlext-light-color-accent !default;
+$mdlext-light-badge-background-inverse: $mdlext-light-color-accent-contrast !default;
+
+// Default button colors.
+$mdlext-light-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default;
+$mdlext-light-button-secondary-color: $mdlext-color-black !default;
+$mdlext-light-button-hover-color: $mdlext-light-button-primary-color !default;
+$mdlext-light-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default;
+$mdlext-light-button-focus-color: rgba($mdlext-color-black, 0.12) !default;
+
+// Colored button colors.
+$mdlext-light-button-primary-color-alt: $mdlext-light-color-primary-light !default;
+$mdlext-light-button-secondary-color-alt: $mdlext-light-color-primary-contrast !default;
+$mdlext-light-button-hover-color-alt: darken($mdlext-light-color-primary-light, 10%) !default;
+$mdlext-light-button-active-color-alt: darken($mdlext-light-color-primary-light, 10%) !default;
+$mdlext-light-button-focus-color-alt: $mdlext-light-button-focus-color !default;
+
+// Ripple color for colored raised buttons.
+$mdlext-light-button-ripple-color-alt: $mdlext-light-color-primary-contrast !default;
+
+// Disabled button colors.
+$mdlext-light-button-primary-color-disabled: rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-button-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
+
+// FAB colors and sizes.
+$mdlext-light-button-fab-color-alt: $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-hover-color-alt: $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-active-color-alt: $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-text-color-alt: $mdlext-light-color-accent-contrast !default;
+$mdlext-light-button-fab-ripple-color-alt: $mdlext-light-color-accent-contrast !default;
+
+// Slider
+$mdlext-light-range-bg-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-range-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-range-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-range-bg-focus-color: rgba($mdlext-color-black, 0.12) !default;
+
+// Textfields
+$mdlext-light-input-text-background-color: transparent !default;
+$mdlext-light-input-text-label-color: rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-input-text-bottom-border-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-input-text-highlight-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-input-text-disabled-color: rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-input-text-disabled-text-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-input-text-error-color: $mdlext-light-error-color !default;
+
+// Checkboxes
+$mdlext-light-checkbox-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-checkbox-off-color: rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-checkbox-disabled-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-checkbox-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
+
+// Icon Toggles
+$mdlext-light-icon-toggle-color: $mdlext-palette-grey-700 !default;
+$mdlext-light-icon-toggle-focus-color: $mdlext-light-button-focus-color !default;
+$mdlext-light-icon-toggle-checked-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-icon-toggle-checked-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-icon-toggle-disabled-color: rgba($mdlext-color-black, 0.26) !default;
+
+// Radio Buttons
+$mdlext-light-radio-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-radio-off-color: rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-radio-disabled-color: rgba($mdlext-color-black, 0.26) !default;
+
+// Switches
+$mdlext-light-switch-color: $mdlext-light-color-accent-light !default;
+$mdlext-light-switch-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-switch-thumb-color: $mdlext-light-switch-color !default;
+$mdlext-light-switch-track-color: rgba($mdlext-light-color-accent-light, 0.54) !default;
+$mdlext-light-switch-off-thumb-color: $mdlext-palette-grey-50 !default;
+$mdlext-light-switch-off-track-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-switch-disabled-thumb-color: $mdlext-palette-grey-400 !default;
+$mdlext-light-switch-disabled-track-color: rgba($mdlext-color-black, 0.12) !default;
+
+// Data table
+$mdlext-light-data-table-background-color: $mdlext-light-content-background-color !default;
+$mdlext-light-data-table-header-color: rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-data-table-header-sorted-color: rgba($mdlext-color-black, 0.87) !default;
+$mdlext-light-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-data-table-hover-color: $mdlext-palette-grey-200 !default;
+$mdlext-light-data-table-selection-color: $mdlext-palette-grey-200 !default;
+$mdlext-light-data-table-divider-color: rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-data-table-dividers: 1px solid $mdlext-light-data-table-divider-color !default;
+
+
+// Selectfield
+// Uses variables from textfield
+$mdlext-selectfield-arrow-width: 0.7em;
+$mdlext-selectfield-arrow-length: 0.5em;
+
+
+// Accordion
+$mdlext-light-accordion-header-background-color-base : $mdlext-palette-grey-600 !default;
+$mdlext-light-accordion-header-background-color : rgba($mdlext-light-accordion-header-background-color-base, 0.20) !default;
+$mdlext-light-accordion-header-background-open-color : rgba($mdlext-light-accordion-header-background-color-base, 0.30) !default;
+$mdlext-light-accordion-header-background-active-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
+$mdlext-light-accordion-header-border-color : rgba($mdlext-light-accordion-header-background-color-base, 0.50) !default;
+$mdlext-light-accordion-header-background-hover-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
+$mdlext-light-accordion-header-focus-outline-color : darken($mdlext-light-accordion-header-border-color, 3%) !default;
+$mdlext-light-accordion-header-disabled-color : rgba($mdlext-light-accordion-header-background-color-base, 0.12) !default;
+$mdlext-light-accordion-header-secondary-color : $mdlext-color-black !default;
+$mdlext-light-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-accordion-header-highlight-color : darken($mdlext-light-accordion-header-border-color, 6%) !default;
+$mdlext-light-accordion-ripple-color : rgba($mdlext-light-accordion-header-background-color-base, 0.4) !default;
+$mdlext-light-accordion-content-color : inherit !default;
+$mdlext-light-accordion-content-background-color : transparent !default;
+
+
+// Bordered fields
+$mdlext-light-bordered-field-input-text-color : inherit !default;
+$mdlext-light-bordered-field-border-color : $mdlext-light-input-text-bottom-border-color !default;
+$mdlext-light-bordered-field-background-color : rgba($mdlext-light-content-background-color, 0.1) !default;
+$mdlext-light-bordered-field-focus-border-color : $mdlext-light-color-accent-light !default;
+$mdlext-light-bordered-field-focus-background-color : rgba(darken($mdlext-light-bordered-field-background-color, 10%), 0.1) !default;
+
+$mdlext-light-bordered-field-input-text-disabled-text-color : $mdlext-light-input-text-disabled-text-color;
+$mdlext-light-bordered-field-disabled-border-color : $mdlext-light-input-text-disabled-color !default;
+$mdlext-light-bordered-field-disabled-background-color : $mdlext-light-bordered-field-background-color !default;
+
+$mdlext-light-bordered-field-input-text-error-color : $mdlext-light-bordered-field-input-text-color !default;
+$mdlext-light-bordered-field-error-border-color : $mdlext-light-input-text-error-color !default;
+$mdlext-light-bordered-field-error-background-color : rgba(lighten($mdlext-light-bordered-field-error-border-color, 50%), 0.5) !default;
+$mdlext-light-bordered-field-error-focus-border-color : darken($mdlext-light-bordered-field-error-border-color, 10%) !default;
+$mdlext-light-bordered-field-error-focus-background-color : $mdlext-light-bordered-field-error-background-color !default;
+
+$mdlext-light-bordered-field-input-text-label-color : $mdlext-light-input-text-label-color !default;
+$mdlext-light-bordered-field-input-text-label-focus-color : $mdlext-light-bordered-field-focus-border-color !default;
+$mdlext-light-bordered-field-input-text-label-error-color : $mdlext-light-bordered-field-error-border-color !default;
+$mdlext-light-bordered-field-input-text-label-disabled-color: $mdlext-light-input-text-disabled-text-color !default;
+
+
+
+// ----------------------------------------------------------------
+// Dark Color Theme.
+// ----------------------------------------------------------------
+$mdlext-dark-color-primary: #FFC107 !default;
+$mdlext-dark-color-primary-dark: #FFA000 !default;
+$mdlext-dark-color-primary-light: #FFC107 !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-dark-color-primary-contrast: #FFF8E1 !default; // text color on primary/primary dark background
+$mdlext-dark-color-accent: #536DFE !default;
+$mdlext-dark-color-accent-light: #536DFE !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-dark-color-accent-contrast: #FFFFFF !default;
+
+$mdlext-dark-content-background-color: #303030 !default; // #424242 or #303030, background color on content (paper/card) background
+$mdlext-dark-text-color-primary: rgba(#FFFFFF, 1.00) !default; // text color on content (paper/card) background
+$mdlext-dark-text-color-secondary: rgba(#FFFFFF, 0.70) !default; // text color on content (paper/card) background
+$mdlext-dark-text-color-disabled: rgba(#FFFFFF, 0.50) !default; // disabled text, hint text, and icons
+$mdlext-dark-divider-color: rgba(#FFFFFF, 0.12) !default; // -> $card-border-color
+$mdlext-dark-error-color: #FF1744 !default;
+
+// Anchor
+$mdlext-dark-text-link-color: $mdlext-dark-color-accent !default;
+
+// Card
+$mdlext-dark-card-background-color: $mdlext-dark-content-background-color !default;
+$mdlext-dark-card-text-color: $mdlext-dark-text-color-primary !default;
+$mdlext-dark-card-image-placeholder-color: $mdlext-dark-color-accent !default;
+$mdlext-dark-card-supporting-text-text-color: rgba($mdlext-color-white, 0.70) !default;
+$mdlext-dark-card-border-color: rgba(0, 0, 0, 0.1) !default;
+$mdlext-dark-card-subtitle-color: rgba($mdlext-color-black, 0.70) !default;
+
+// Item
+
+// Default Item Colors
+$mdlext-dark-default-item-text-color: rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-default-item-outline-color: $mdlext-palette-grey-700 !default;
+$mdlext-dark-default-item-hover-bg-color: $mdlext-palette-grey-900 !default;
+$mdlext-dark-default-item-focus-bg-color: $mdlext-palette-grey-900 !default;
+$mdlext-dark-default-item-active-bg-color: $mdlext-palette-grey-800 !default;
+$mdlext-dark-default-item-divider-color: rgba($mdlext-color-white, 0.20) !default;
+
+// Disabled Button Colors
+$mdlext-dark-disabled-item-text-color: $mdlext-palette-grey-500 !default;
+
+// Dropdown menu / menu-button
+$mdlext-dark-default-dropdown-bg-color: $mdlext-color-black !default;
+
+// Badge
+$mdlext-dark-badge-color: $mdlext-dark-color-accent-contrast !default;
+$mdlext-dark-badge-color-inverse: $mdlext-dark-color-accent !default;
+$mdlext-dark-badge-background: $mdlext-dark-color-accent !default;
+$mdlext-dark-badge-background-inverse: $mdlext-dark-color-accent-contrast !default;
+
+// Default button colors.
+$mdlext-dark-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default;
+$mdlext-dark-button-secondary-color: $mdlext-color-white !default;
+$mdlext-dark-button-hover-color: $mdlext-dark-button-primary-color !default;
+$mdlext-dark-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default;
+$mdlext-dark-button-focus-color: rgba($mdlext-color-black, 0.12) !default;
+
+// Colored button colors.
+$mdlext-dark-button-primary-color-alt: $mdlext-dark-color-primary-light !default;
+$mdlext-dark-button-secondary-color-alt: $mdlext-dark-color-primary-contrast !default;
+$mdlext-dark-button-hover-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default;
+$mdlext-dark-button-active-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default;
+$mdlext-dark-button-focus-color-alt: $mdlext-dark-button-focus-color !default;
+
+// Ripple color for colored raised buttons.
+$mdlext-dark-button-ripple-color-alt: $mdlext-dark-color-primary-contrast !default;
+
+// Disabled button colors.
+$mdlext-dark-button-primary-color-disabled: rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-button-secondary-color-disabled: rgba($mdlext-color-white, 0.26) !default;
+
+// FAB colors and sizes.
+$mdlext-dark-button-fab-color-alt: $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-hover-color-alt: $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-active-color-alt: $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-text-color-alt: $mdlext-dark-color-accent-contrast !default;
+$mdlext-dark-button-fab-ripple-color-alt: $mdlext-dark-color-accent-contrast !default;
+
+// Slider
+$mdlext-dark-range-bg-color: rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-range-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-range-faded-color: rgba($mdlext-dark-color-accent-light, 0.50) !default;
+$mdlext-dark-range-bg-focus-color: rgba($mdlext-color-white, 0.50) !default;
+
+// Textfields
+$mdlext-dark-input-text-background-color: transparent !default;
+$mdlext-dark-input-text-label-color: rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-input-text-bottom-border-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-input-text-highlight-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-input-text-disabled-color: rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-input-text-disabled-text-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-input-text-error-color: $mdlext-dark-error-color !default;
+
+// Checkboxes
+$mdlext-dark-checkbox-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-checkbox-off-color: rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-checkbox-disabled-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-checkbox-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
+
+// Icon Toggles
+$mdlext-dark-icon-toggle-color: $mdlext-palette-grey-700 !default;
+$mdlext-dark-icon-toggle-focus-color: $mdlext-dark-button-focus-color !default;
+$mdlext-dark-icon-toggle-checked-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-icon-toggle-checked-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
+$mdlext-dark-icon-toggle-disabled-color: rgba($mdlext-color-white, 0.50) !default;
+
+// Radio Buttons
+$mdlext-dark-radio-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-radio-off-color: rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-radio-disabled-color: rgba($mdlext-color-white, 0.26) !default;
+
+// Switches
+$mdlext-dark-switch-color: $mdlext-dark-color-accent-light !default;
+$mdlext-dark-switch-faded-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
+$mdlext-dark-switch-thumb-color: $mdlext-dark-switch-color !default;
+$mdlext-dark-switch-track-color: rgba($mdlext-dark-color-accent-light, 0.5) !default;
+$mdlext-dark-switch-off-thumb-color: $mdlext-palette-grey-50 !default;
+$mdlext-dark-switch-off-track-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-switch-disabled-thumb-color: $mdlext-palette-grey-50 !default;
+$mdlext-dark-switch-disabled-track-color: rgba($mdlext-color-white, 0.12) !default;
+
+// Data table
+$mdlext-dark-data-table-background-color: $mdlext-dark-content-background-color !default;
+$mdlext-dark-data-table-header-color: rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-data-table-header-sorted-color: rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-data-table-hover-color: $mdlext-dark-default-item-hover-bg-color !default;
+$mdlext-dark-data-table-selection-color: $mdlext-dark-default-item-active-bg-color !default;
+$mdlext-dark-data-table-divider-color: rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-data-table-dividers: 1px solid $mdlext-dark-data-table-divider-color !default;
+
+
+// Selectfield
+// Uses variables from textfield
+
+
+// Accordion
+$mdlext-dark-accordion-header-background-color-base : $mdlext-color-black !default;
+$mdlext-dark-accordion-header-background-color : rgba($mdlext-dark-accordion-header-background-color-base, 1.0) !default;
+$mdlext-dark-accordion-header-background-open-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.9) !default;
+$mdlext-dark-accordion-header-border-color : $mdlext-palette-grey-800 !default;
+$mdlext-dark-accordion-header-background-hover-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.5) !default;
+$mdlext-dark-accordion-header-background-active-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.6) !default;
+$mdlext-dark-accordion-header-focus-outline-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
+$mdlext-dark-accordion-header-disabled-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.4) !default;
+$mdlext-dark-accordion-header-secondary-color : $mdlext-dark-text-color-primary !default;
+$mdlext-dark-accordion-header-secondary-color-disabled: $mdlext-dark-text-color-disabled !default;
+$mdlext-dark-accordion-header-highlight-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
+$mdlext-dark-accordion-ripple-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.3) !default;
+$mdlext-dark-accordion-content-color : inherit !default;
+$mdlext-dark-accordion-content-background-color : transparent !default;
+
+
+// Bordered fields
+$mdlext-dark-bordered-field-input-text-color : inherit !default;
+$mdlext-dark-bordered-field-border-color : $mdlext-dark-input-text-bottom-border-color !default;
+$mdlext-dark-bordered-field-background-color : rgba($mdlext-dark-content-background-color, 0.1) !default;
+$mdlext-dark-bordered-field-focus-border-color : $mdlext-dark-color-accent-light !default;
+$mdlext-dark-bordered-field-focus-background-color : rgba(darken($mdlext-dark-bordered-field-background-color, 10%), 0.1) !default;
+
+$mdlext-dark-bordered-field-input-text-disabled-text-color : $mdlext-dark-input-text-disabled-text-color;
+$mdlext-dark-bordered-field-disabled-border-color : $mdlext-dark-input-text-disabled-color !default;
+$mdlext-dark-bordered-field-disabled-background-color : $mdlext-dark-bordered-field-background-color !default;
+
+$mdlext-dark-bordered-field-input-text-error-color : $mdlext-dark-bordered-field-input-text-color !default;
+$mdlext-dark-bordered-field-error-border-color : $mdlext-dark-input-text-error-color !default;
+$mdlext-dark-bordered-field-error-background-color : rgba($mdlext-dark-bordered-field-error-border-color, 0.1) !default;
+$mdlext-dark-bordered-field-error-focus-border-color : darken($mdlext-dark-bordered-field-error-border-color, 10%) !default;
+$mdlext-dark-bordered-field-error-focus-background-color : $mdlext-dark-bordered-field-error-background-color !default;
+
+$mdlext-dark-bordered-field-input-text-label-color : $mdlext-dark-input-text-label-color !default;
+$mdlext-dark-bordered-field-input-text-label-focus-color : $mdlext-dark-bordered-field-focus-border-color !default;
+$mdlext-dark-bordered-field-input-text-label-error-color : $mdlext-dark-bordered-field-error-border-color !default;
+$mdlext-dark-bordered-field-input-text-label-disabled-color: $mdlext-dark-input-text-disabled-text-color !default;