@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/index.js

@@ -1,24 +0,0 @@
-import { Bottomnav, BottomnavItem } from './core/bottomnav/index';
-import { Button } from './core/button/index';
-import { List, ListItem } from './core/list/index';
-import { Menu, MenuItem } from './core/menu/index';
-import { ProgressCircle } from './core/progress/index';
-import { Tab, TabItem } from './core/tab/index';
-import { TextField } from './core/textfield/index';
-
-import { Search } from './complex/search/index';
-
-export {
-  Bottomnav,
-  BottomnavItem,
-  Button,
-  List,
-  ListItem,
-  Menu,
-  MenuItem,
-  ProgressCircle,
-  Tab,
-  TabItem,
-  TextField,
-  Search,
-};

package/components/template/theming.scss

@@ -1,31 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$templateColors: (
-  text-color:    ((#000, 0.54), (#fff, 0.87), (#fff, 1.00)),
-  border-color:  (('primary', '700', 0.87), ('primary', '200', 1.0)),
-);
-
-@function templateThemeValue($key, $type, $theme) {
-  @return themeValue('template', $templateColors, $key, $type, $theme);
-}
-
-@mixin templateThemeVariables($color, $lightness) {
-  @include themeVariables('template', $templateColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin templateContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-template {
-      color: templateThemeValue("text-color", $type, $theme);
-    }
-  }
-}
-
-// Varies by theme
-@mixin templateThemeRules($theme: null) {
-  .mdw-template[mdw-theme-fill] {
-    border-color: templateThemeValue('border-color', null, $theme);
-  }
-}

package/components/theming/theming.scss

@@ -1,504 +0,0 @@
-@import 'palettes.scss';
-@import '../common/functions.scss';
-@import '../core/bottomnav/theming.scss';
-@import '../core/button/theming.scss';
-@import '../core/list/theming.scss';
-@import '../core/menu/theming.scss';
-@import '../core/selection/theming.scss';
-@import '../core/tab/theming.scss';
-@import '../core/textfield/theming.scss';
-@import '../core/toolbar/theming.scss';
-@import '../core/type/theming.scss';
-
-@import '../complex/dialog/theming.scss';
-@import '../complex/navdrawer/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', 'list', 'menu', 'selection', 'tab', 'textfield', 'toolbar', 'dialog', 'navdrawer');
-  $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") {
-  @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, 'list')) {
-    @include listThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuThemeVariables($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');
-  }
-  
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogThemeVariables($color, 'light');
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerThemeVariables($color, 'light');
-  }
-}
-
-@mixin darkVariables($color:"background") {
-  @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, 'list')) {
-    @include listThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuThemeVariables($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');
-  }
-
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogThemeVariables($color, 'dark');
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerThemeVariables($color, 'dark');
-  }
-}
-
-@mixin componentContrastAndThemeRules($type: 'var', $theme: null) {
-  @if (index($mdw-theme__components, 'textfield')) {
-    @include textfieldContrastAndThemeRules($type, $theme);
-  }
-}
-
-@mixin componentContrastRules($type: 'var', $theme: null) {
-  @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, 'list')) {
-    @include listContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'menu')) {
-    @include menuContrastRules($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);
-  }
-
-  @if (index($mdw-theme__components, 'dialog')) {
-    @include dialogContrastRules($type, $theme);
-  }
-  @if (index($mdw-theme__components, 'navdrawer')) {
-    @include navdrawerContrastRules($type, $theme);
-  }
-}
-
-@mixin componentThemeRules($theme: null) {
-  @if (index($mdw-theme__components, 'button')) {
-    @include buttonThemeRules($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', '@at-root', unquote(".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') {
-          #{$namespace} {
-            [mdw-theme-fill~="#{$color}"] {
-              background-color: $value;
-            }
-            [mdw-theme-color~="#{$color}"] {
-              color: $value;
-            }
-          }
-        }
-        #{$namespace} {
-          [mdw-theme-fill~="#{$color}-#{$tone}"] {
-            background-color: $value;
-          }
-          [mdw-theme-color~="#{$color}-#{$tone}"] {
-            color: $value;
-          }
-        }
-        
-      }
-    }
-    #{$namespace} {
-      @include componentThemeRules($theme);
-      [mdw-theme-fill~="light"] {
-        @include componentContrastAndThemeRules('light', $theme);
-      }
-      [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, unquote(".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: unquote("255,255,255");
-  }
-  [mdw-theme-color~="white"] {
-    --color: unquote("255,255,255");
-  }
-  @each $color in ('primary', 'accent', 'warn', 'background') { 
-    @each $tone in $tone-list {
-      @if ($tone == '500') {
-        [mdw-theme-fill~="#{$color}"] {
-          --background-color: unquote("var(--#{$color}-color)");
-        }
-        [mdw-theme-color~="#{$color}"] {
-          --color: unquote("var(--#{$color}-color)");
-        }
-      }
-      [mdw-theme-fill~="#{$color}-#{$tone}"] {
-        --background-color: unquote("var(--#{$color}-#{$tone}-color)");
-      }
-      [mdw-theme-color~="#{$color}-#{$tone}"] {
-        --color: unquote("var(--#{$color}-#{$tone}-color)");
-      }
-    }
-  }
-  [mdw-theme-fill~="black"] {
-    --background-color: unquote("0,0,0");
-  }
-  [mdw-theme-color~="black"] {
-    --color: unquote("0,0,0");
-  }
-  @each $color in $mdw-theme__explicit-colors {
-    @each $tone in $tone-list {
-      @if ($tone == '500') {
-        [mdw-theme-fill~="#{$color}"] {
-          --background-color: unquote("var(--#{$color}-color)");
-        }
-        [mdw-theme-color~="#{$color}"] {
-          --color: unquote("var(--#{$color}-color)");
-        }
-      }
-      [mdw-theme-fill~="#{$color}-#{$tone}"] {
-        --background-color: unquote("var(--#{$color}-#{$tone}-color)");
-      }
-      [mdw-theme-color~="#{$color}-#{$tone}"] {
-        --color: unquote("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', '@at-root', unquote(".mdw-theme-#{$name}"));
-      @each $color in ('primary', 'accent', 'warn', 'background') {
-        $palette: getThemePalette($color, $theme);
-        $lightTones: map-get($palette, 'light');
-        #{$namespace} {
-          @each $tone in $lightTones {
-            @if ($tone == '500') {
-              [mdw-theme-fill~="#{$color}"] {
-                @include lightVariables($color);
-              }
-            }
-            [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', '@at-root', unquote(".mdw-theme-#{$name}"));
-      @each $color in ('primary', 'accent', 'warn') {
-        $palette: getThemePalette($color, $theme);
-        $darkTones: map-get($palette, 'dark');
-        #{$namespace} {
-          @each $tone in $darkTones {
-            $value: map-get($palette, $tone);
-            @if ($tone == '500') {
-              [mdw-theme-fill~="#{$color}"] {
-                @include darkVariables($color);
-              }
-            }
-            [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', '@at-root', unquote(".mdw-theme-#{$name}"));
-      $color: 'background';
-      $palette: getThemePalette('background', $theme);
-      $darkTones: map-get($palette, 'dark');
-      #{$namespace} {
-        @each $tone in $darkTones {
-          $value: map-get($palette, $tone);
-          @if ($tone == '500') {
-            [mdw-theme-fill~="#{$color}"] {
-              @include darkVariables($color);
-            }
-          }
-          [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") {
-        --#{$color}-color: var(--#{$name}-color);
-      } 
-    }
-  }
-}