@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/theming/theming.scss

@@ -1,559 +0,0 @@
-@import 'palettes.scss';
-@import '../common/functions.scss';
-
-
-@import './globals.scss';
-
-@import '../bottomnav/theming.scss';
-@import '../button/theming.scss';
-@import '../card/theming.scss';
-@import '../datatable/theming.scss';
-@import '../dialog/theming.scss';
-@import '../divider/theming.scss';
-@import '../list/theming.scss';
-@import '../menu/theming.scss';
-@import '../navdrawer/theming.scss';
-@import '../selection/theming.scss';
-@import '../tab/theming.scss';
-@import '../textfield/theming.scss';
-@import '../toolbar/theming.scss';
-@import '../type/theming.scss';
-
-$tone-list: ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700");
-$added-palettes-list: ();
-
-
-@mixin buildMDWThemes($config-map: ()) {
-  $theme-components: (
-    'bottomnav',
-    'button',
-    'card',
-    'datatable',
-    'dialog',
-    'divider',
-    'list',
-    'menu',
-    'navdrawer',
-    'selection',
-    'tab',
-    'textfield',
-    'toolbar'
-  );
-  $themes: (
-    "default": ('indigo', 'pink', 'red'),
-  );
-  $explicit-colors: ();
-  $automatic-contrast: 'no';
-  $ie11-support: 'only';
-  $ie11-media-wrap: 'no';
-  @if (map-has-key($config-map, $key: "theme-components")) {
-    $theme-components: map-get($config-map, "theme-components");
-  }
-  @if (map-has-key($config-map, $key: "themes")) {
-    $themes: map-get($config-map, "themes");
-  }
-  @if (map-has-key($map: $config-map, $key: "explicit-colors")) {
-    $explicit-colors: map-get($config-map, "explicit-colors");
-  }
-  @if (map-has-key($map: $config-map, $key: "automatic-contrast")) {
-    $automatic-contrast: map-get($config-map, "automatic-contrast");
-  }
-  @if (map-has-key($map: $config-map, $key: "ie11-support")) {
-    $ie11-support: map-get($config-map, "ie11-support");
-  }
-  @if (map-has-key($map: $config-map, $key: "ie11-media-wrap")) {
-    $ie11-media-wrap: map-get($config-map, "ie11-media-wrap");
-  }
-  $mdw-theme__components: $theme-components !global;
-  $mdw-theme__explicit-colors: $explicit-colors !global;
-  $mdw-theme__automatic-contrast: $automatic-contrast !global;
-  $mdw-theme__ie11-support: $ie11-support !global;
-  $mdw-theme__themes: $themes !global;
-  $mdw-theme__ie11-media-wrap: $ie11-media-wrap !global;
-  @include buildThemes();
-}
-
-@mixin lightVariables($color:"background") {
-  @include globalThemeVariables($color, 'light');
-
-  @if (index($mdw-theme__components, 'bottomnav')) {
-    @include bottomnavThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'button')) {
-    @include buttonThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'card')) {
-    @include cardThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'datatable')) {
-    @include datatableThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'divider')) {
-    @include dividerThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'list')) {
-    @include listThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'selection')) {
-    @include selectionThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'tab')) {
-    @include tabThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'textfield')) {
-    @include textfieldThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'toolbar')) {
-    @include toolbarThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'type')) {
-    @include typeThemeVariables($color, 'light');
-  }
-}
-
-@mixin darkVariables($color:"background") {
-  @include globalThemeVariables($color, 'dark');
-
-  @if (index($mdw-theme__components, 'bottomnav')) {
-    @include bottomnavThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'button')) {
-    @include buttonThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'card')) {
-    @include cardThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'datatable')) {
-    @include datatableThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'divider')) {
-    @include dividerThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'list')) {
-    @include listThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'selection')) {
-    @include selectionThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'tab')) {
-    @include tabThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'textfield')) {
-    @include textfieldThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'toolbar')) {
-    @include toolbarThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'type')) {
-    @include typeThemeVariables($color, 'dark');
-  }
-}
-
-@mixin componentContrastAndThemeRules($type: 'var', $theme: null) {
-  @if (index($mdw-theme__components, 'datatable')) {
-    @include datatableContrastAndThemeRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'textfield')) {
-    @include textfieldContrastAndThemeRules($type, $theme);
-  }
-}
-
-@mixin componentContrastRules($type: 'var', $theme: null) {
-  @include globalContrastRules($type, $theme);
-  @if (index($mdw-theme__components, 'bottomnav')) {
-    @include bottomnavContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'button')) {
-    @include buttonContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'card')) {
-    @include cardContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'datatable')) {
-    @include datatableContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'divider')) {
-    @include dividerContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'list')) {
-    @include listContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'selection')) {
-    @include selectionContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'tab')) {
-    @include tabContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'textfield')) {
-    @include textfieldContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'toolbar')) {
-    @include toolbarContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'type')) {
-    @include typeContrastRules($type, $theme);
-  }
-}
-
-@mixin componentThemeRules($theme: null) {
-  @if (index($mdw-theme__components, 'button')) {
-    @include buttonThemeRules($theme);
-  }
-  @if (index($mdw-theme__components, 'bottomnav')) {
-    @include bottomnavThemeRules($theme);
-  }
-}
-
-
-@mixin buildThemes() {
-  @if ($mdw-theme__ie11-support and $mdw-theme__ie11-support != 'no' and $mdw-theme__ie11-support != false) {
-    @if ($mdw-theme__ie11-media-wrap and $mdw-theme__ie11-media-wrap != 'no' and $mdw-theme__ie11-media-wrap != false) {
-      @include IEOnly() {
-        @include buildFallbackThemes();
-      }
-    } @else {
-      @include buildFallbackThemes();
-    }
-  }
-  @if ($mdw-theme__ie11-support != 'only') {
-    @include buildVariableThemes();
-  }
-}
-
-@mixin buildFallbackThemes() {
-  @if (map-has-key($mdw-theme__themes, "default")) {
-    [mdw-theme-fill~="white"] {
-      background-color: white;
-    }
-
-    [mdw-theme-fill~="light"] {
-      @include componentContrastRules('light');
-    }
-    [mdw-theme-color~="white"] {
-      color: white;
-    }
-  }
-
-  @each $name in map-keys($mdw-theme__themes) {
-    // $name: map-get($theme, "name");
-    $theme: map-get($mdw-theme__themes, $name);
-    $namespace: if($name == 'default', null, ".mdw-theme-#{$name}");
-    @each $color in ('primary', 'accent', 'warn', 'background') {
-      $palette: getThemePalette($color, $theme);
-      @each $tone in $tone-list {
-        $value: map-get($palette, $tone);
-        $rgbValue: red($value), green($value), blue($value);
-        @if ($tone == '500') {
-          @if ($color != 'background') {
-            #{$namespace} [mdw-theme-fill~="#{$color}"] {
-              background-color: #{$value};
-            }
-          }
-          #{$namespace} [mdw-theme-color~="#{$color}"] {
-            color: #{$value};
-          }
-        }
-        #{$namespace} [mdw-theme-fill~="#{$color}-#{$tone}"] {
-          background-color: #{$value};
-        }
-        #{$namespace} [mdw-theme-color~="#{$color}-#{$tone}"] {
-          color: #{$value};
-        }
-      }
-    }
-    @if ($namespace) {
-      #{$namespace} {
-        @include componentThemeRules($theme);
-      }
-    } @else {
-      @include componentThemeRules($theme);
-    }
-    #{$namespace} [mdw-theme-fill~="light"] {
-      @include componentContrastAndThemeRules('light', $theme);
-    }
-    #{$namespace} [mdw-theme-fill~="dark"] {
-      @include componentContrastAndThemeRules('dark', $theme);
-    }
-  }
-  @if (map-has-key($mdw-theme__themes, "default")) {
-    [mdw-theme-fill~="black"] {
-      background-color: black;
-    }
-    [mdw-theme-color~="black"] {
-      color: black;
-    }
-    [mdw-theme-fill~="dark"] {
-      @include componentContrastRules('dark');
-    }
-  }
-
-  @each $color in $mdw-theme__explicit-colors {
-    $palette: map-get($palettes, $color);
-    @each $tone in $tone-list {
-      $value: map-get($palette, $tone);
-      @if ($tone == '500') {
-        [mdw-theme-fill~="#{$color}"] {
-          background-color: #{$value};
-        }
-        [mdw-theme-color~="#{$color}"] {
-          color: #{$value};
-        }
-      }
-      [mdw-theme-fill~="#{$color}-#{$tone}"] {
-        background-color: #{$value};
-      }
-      [mdw-theme-color~="#{$color}-#{$tone}"] {
-        color: #{$value};
-      }
-    }
-  }
-}
-
-@mixin buildVariableThemes() {
-  @each $color in $mdw-theme__explicit-colors {
-    @include addSinglePaletteColorVariables($color);
-  }
-  @each $theme in map-values($mdw-theme__themes) {
-    @each $color in $theme {
-      @if (length($theme) < 4) {
-        @if (index($mdw-theme__explicit-colors, 'grey') == null) {
-          @include addSinglePaletteColorVariables('grey');
-        }
-      }
-      @if (index($mdw-theme__explicit-colors, $color) == null) {
-        @include addSinglePaletteColorVariables($color);
-      }
-    }
-  }
-
-  @each $name in map-keys($mdw-theme__themes) {
-    // $name: map-get($theme, "name");
-    $theme: map-get($mdw-theme__themes, $name);
-    $namespace: if($name == 'default', null, ".mdw-theme-#{$name}");
-    $primary: nth($theme, 1);
-    $accent: nth($theme, 2);
-    $warn: nth($theme, 3);
-    $background: 'grey';
-    @if (length($theme) > 3) {
-      $background: nth($theme, 4);
-    }
-    @include buildPalettes($namespace, $primary, $accent, $warn, $background);
-  }
-
-  [mdw-theme-fill~="white"] {
-    --background-color: 255,255,255;
-  }
-  [mdw-theme-color~="white"] {
-    --color: 255,255,255;
-  }
-  @each $color in ('primary', 'accent', 'warn', 'background') { 
-    @each $tone in $tone-list {
-      @if ($tone == '500') {
-        @if ($color != 'background') {
-          [mdw-theme-fill~="#{$color}"] {
-            --background-color: var(--#{$color}-color);
-          }
-        }
-        [mdw-theme-color~="#{$color}"] {
-          --color: var(--#{$color}-color);
-        }
-      }
-      [mdw-theme-fill~="#{$color}-#{$tone}"] {
-        --background-color: var(--#{$color}-#{$tone}-color);
-      }
-      [mdw-theme-color~="#{$color}-#{$tone}"] {
-        --color: var(--#{$color}-#{$tone}-color);
-      }
-    }
-  }
-  [mdw-theme-fill~="black"] {
-    --background-color: 0,0,0;
-  }
-  [mdw-theme-color~="black"] {
-    --color: 0,0,0;
-  }
-  @each $color in $mdw-theme__explicit-colors {
-    @each $tone in $tone-list {
-      @if ($tone == '500') {
-        [mdw-theme-fill~="#{$color}"] {
-          --background-color: var(--#{$color}-color);
-        }
-        [mdw-theme-color~="#{$color}"] {
-          --color: var(--#{$color}-color);
-        }
-      }
-      [mdw-theme-fill~="#{$color}-#{$tone}"] {
-        --background-color: var(--#{$color}-#{$tone}-color);
-      }
-      [mdw-theme-color~="#{$color}-#{$tone}"] {
-        --color: var(--#{$color}-#{$tone}-color);
-      }
-    }
-  }
-
-  [mdw-theme-fill] {
-    background-color: unquote("rgb(var(--background-color))");
-  }
-  [mdw-theme-color] {
-    color: unquote("rgb(var(--color))");
-  }
-
-
-  // Light rules
-  [mdw-theme-fill~="white"],
-  [mdw-theme-fill~="light"],
-  :root {
-    @include lightVariables();
-  }
-
-  @if ($mdw-theme__automatic-contrast != 'no' and $mdw-theme__automatic-contrast != false) {
-    @each $name in map-keys($mdw-theme__themes) {
-      $theme: map-get($mdw-theme__themes, $name);
-      $namespace: if($name == 'default', null, ".mdw-theme-#{$name}");
-      @each $color in ('primary', 'accent', 'warn', 'background') {
-        $palette: getThemePalette($color, $theme);
-        $lightTones: map-get($palette, 'light');
-        
-        @each $tone in $lightTones {
-          @if ($tone == '500' and $color != 'background') {
-            #{$namespace} [mdw-theme-fill~="#{$color}"] {
-              @include lightVariables($color);
-            }
-          }
-          #{$namespace} [mdw-theme-fill~="#{$color}-#{$tone}"] {
-            @include lightVariables($color);
-          }
-        }
-        
-      }
-      @each $color in ('primary', 'accent', 'warn') {
-        [mdw-theme-fill~="#{$color}"][mdw-theme-fill~="light"],
-        [mdw-theme-fill|="#{$color}"][mdw-theme-fill~="light"] {
-          @include lightVariables($color);
-        }
-      }
-    }
-
-    // Dark Variables
-    @each $name in map-keys($mdw-theme__themes) {
-      $theme: map-get($mdw-theme__themes, $name);
-      $namespace: if($name == 'default', null, ".mdw-theme-#{$name}");
-      @each $color in ('primary', 'accent', 'warn') {
-        $palette: getThemePalette($color, $theme);
-        $darkTones: map-get($palette, 'dark');
-       
-        @each $tone in $darkTones {
-          $value: map-get($palette, $tone);
-          @if ($tone == '500' and $color != 'background') {
-            #{$namespace} [mdw-theme-fill~="#{$color}"] {
-              @include darkVariables($color);
-            }
-          }
-          #{$namespace} [mdw-theme-fill~="#{$color}-#{$tone}"] {
-            @include darkVariables($color);
-          }
-        }
-        
-      }
-      @each $color in ('primary', 'accent', 'warn') {
-        [mdw-theme-fill~="#{$color}"][mdw-theme-fill~="dark"],
-        [mdw-theme-fill|="#{$color}"][mdw-theme-fill~="dark"] {
-          @include darkVariables($color);
-        }
-      }
-    }
-
-    // Dark Background Variables
-    @each $name in map-keys($mdw-theme__themes) {
-      $theme: map-get($mdw-theme__themes, $name);
-      $namespace: if($name == 'default', null, ".mdw-theme-#{$name}");
-      $color: 'background';
-      $palette: getThemePalette('background', $theme);
-      $darkTones: map-get($palette, 'dark');
-      @each $tone in $darkTones {
-        $value: map-get($palette, $tone);
-        @if ($tone == '500' and $color != 'background') {
-          #{$namespace} [mdw-theme-fill~="#{$color}"] {
-            @include darkVariables($color);
-          }
-        }
-        #{$namespace} [mdw-theme-fill~="#{$color}-#{$tone}"] {
-          @include darkVariables($color);
-        }
-      }
-    }
-  }
-
-
-  [mdw-theme-fill~="black"],
-  [mdw-theme-fill~="dark"] {
-    @include darkVariables('background');
-  }
-
-  @include componentContrastAndThemeRules();
-  @include componentContrastRules();
-  @include componentThemeRules();
-}
-
-@mixin addSinglePaletteColorVariables($name) {
-  $palette: map-get($palettes, $name);
-  @if (index($added-palettes-list, $name) == null) {
-    @each $tone in map-keys(map-remove($palette, "light", "dark")) {
-      $value: map-get($palette, $tone);
-      :root {
-        --#{$name}-#{$tone}-color: #{red($value),green($value),blue($value)};
-        @if ($tone == "500") {
-          --#{$name}-color: #{red($value),green($value),blue($value)};
-        } 
-      }
-      $added-palettes-list: append($added-palettes-list, $name) !global;
-    }
-  }
-}
-
-@mixin buildPalettes($namespace, $primary, $accent, $warn, $background) {
-  @include buildPalette($namespace, 'primary', $primary);
-  @include buildPalette($namespace, 'accent', $accent);
-  @include buildPalette($namespace, 'warn', $warn);
-  @include buildPalette($namespace, 'background', $background);
-}
-
-@mixin buildPalette($namespace, $color, $name) {
-  $palette: map-get($palettes, $name);
-  @each $tone in map-keys(map-remove($palette, "light", "dark")) {
-    $value: map-get($palette, $tone);
-    #{if($namespace, #{$namespace}, ":root, .mdw-theme-default")} {
-      --#{$color}-#{$tone}-color: var(--#{$name}-#{$tone}-color);
-      @if ($tone == "500" and $color != 'background') {
-        --#{$color}-color: var(--#{$name}-color);
-      } 
-    }
-  }
-}