@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/core/theme/_mixins.scss

@@ -1,172 +0,0 @@
-@forward './_variables.scss';
-@forward './_palettes.scss';
-
-@use '../_platform.scss' as platform;
-@use './_variables.scss' as variables;
-@use './_palettes.scss' as palettes;
-
-@mixin _addCSSVariables($component, $map, $lightness) {
-  @each $key in map-keys($map) {
-    $item: _getThemeMapItem($map, $key, $lightness);
-    $value: null;
-    $length: length($item);
-    @if ($length == 1) {
-      @if (type_of($item) == color) {
-        $value: red($item),green($item),blue($item);
-      } @else {
-        $value: $item;
-      }
-    } @else if ($length == 2) {
-      $color: nth($item, 1);
-      $opacity: nth($item, 2);
-      @if (type_of($color) == string) {
-        $color: _getThemeParamColor($color);
-      }
-      $value: red($color),green($color),blue($color),$opacity;
-    } @else {
-      $color: nth($item, 1);
-      $tone: nth($item, 2);
-      $opacity: nth($item, 3);
-      @if ($tone == null) {
-        @error '$tone cannot be null';
-      }
-      @if ($color == null) {
-        $value: var(--#{$tone}-color);
-      } @else {
-        @if (type_of($color) == string) {
-          $color: _getThemeParamColor($color, $tone);
-        }
-        @if ($opacity == null) {
-          $value: red($color),green($color),blue($color);
-        } @else {
-          $value: red($color),green($color),blue($color),$opacity;
-        }
-      }
-    }
-    --mdw-#{$component}__#{$key}: #{$value};
-  }
-}
-
-@mixin _addComponentCSSVariableRules($component, $values) {
-  :root,
-  .mdw-theme[mdw-light] {
-    @include _addCSSVariables($component, $values, 'light');
-  }
-
-  .mdw-theme[mdw-dark] {
-    @include _addCSSVariables($component, $values, 'dark');
-  }
-}
-
-@mixin addComponentCSSVariableRules($component, $values) {
-  @if (variables.$cssvars == 'supports') {
-    @supports(--v:v) {
-      @content;
-      @include _addComponentCSSVariableRules($component, $values);
-    }
-  } @else if (variables.$cssvars != false) {
-    @content;
-    @include _addComponentCSSVariableRules($component, $values);
-  }
-}
-
-@mixin addComponentFallbackRules($lightness) {
-  @if (variables.$fallbacks == 'ieonly') {
-    @include platform.ifIE() {
-      @include fallbackWrapper($lightness) {
-        @content;
-      }
-    }
-  } @else if (variables.$fallbacks != false) {
-    @include fallbackWrapper($lightness) {
-      @content;
-    }
-  }
-}
-
-@function getThemeParamValue($param) {
-  @if ($param == 'primary') {
-    @return map-get(palettes.$palettes, variables.$primary);
-  } @else if ($param == 'secondary') {
-    @return map-get(palettes.$palettes, variables.$secondary);
-  } @else if ($param == 'warn') {
-    @return map-get(palettes.$palettes, variables.$warn);
-  } @else if ($param == 'background') {
-    @return map-get(palettes.$palettes, variables.$background);
-  } @else if ($param == 'foreground-light') {
-    @return nth(variables.$foreground, 1);
-  } @else if ($param == 'foreground-dark') {
-    @return nth(variables.$foreground, length(variables.$foreground));
-  } @else {
-    @return map-get(palettes.$palettes, $param);
-  }
-}
-
-@function _getThemeParamColor($param, $tone: null) {
-  $paramValue: getThemeParamValue($param);
-  @if (($param == 'foreground-light') or ($param == 'foreground-dark')) {
-    @return $paramValue;
-  }
-  @return map-get($paramValue, $tone);
-}
-
-@function _getThemeMapItem($colorMap, $key, $lightness) {
-  $list: map-get($colorMap, $key);
-  $length: length($list);
-
-  @if ($lightness == 'dark') {
-    @if ($length > 1) {
-      @return nth($list, 2);
-    } @else {
-      @error 'Variable not found' $key;
-    }
-  }
-  @return nth($list, 1);
-}
-
-@function getThemeValue($component, $colorMap, $key, $type) {
-  @if ($type == 'var') {
-    @return var(--mdw-#{$component}__#{$key});
-  }
-  $item: _getThemeMapItem($colorMap, $key, $type);
-  $length: length($item);
-  @if ($length == 1) {
-    @if (type_of($item) == color) {
-      @return red($item),green($item),blue($item);
-    }
-    @return $item;
-  } @else if ($length == 2) {
-    $color: nth($item, 1);
-    $opacity: nth($item, 2);
-    @if (type_of($color) == string) {
-      $color: _getThemeParamColor($color);
-    }
-    @return red($color),green($color),blue($color),$opacity;
-  } @else {
-    $color: nth($item, 1);
-    $tone: nth($item, 2);
-    $opacity: nth($item, 3);
-    $value: _getThemeParamColor($color, $tone);
-    @if ($opacity == null) {
-      @return red($value),green($value),blue($value);
-    }
-    @return red($value),green($value),blue($value),$opacity;
-  }
-  @return null;
-}
-
-@mixin fallbackWrapper($scope) {
-  @if ($scope == 'global') {
-    @content;
-  } @else if ($scope == 'light') {
-    .mdw-theme[mdw-light],
-    .mdw-theme[mdw-dark] .mdw-theme[mdw-light] {
-      @content;
-    }
-  } @else if ($scope == 'dark') {
-    .mdw-theme[mdw-dark],
-    .mdw-theme[mdw-light] .mdw-theme[mdw-dark] {
-      @content;
-    }
-  }
-}

package/core/theme/_palettes.scss

@@ -1,406 +0,0 @@
-// https://material.io/guidelines/style/color.html#color-color-tool
-
-
-$bluePalette: (
-  "50": #E3F2FD,
-  "100": #BBDEFB,
-  "200": #90CAF9,
-  "300": #64B5F6,
-  "400": #42A5F5,
-  "500": #2196F3,
-  "600": #1E88E5,
-  "700": #1976D2,
-  "800": #1565C0,
-  "900": #0D47A1,
-  "A100": #82B1FF,
-  "A200": #448AFF,
-  "A400": #2979FF,
-  "A700": #2962FF,
-  "light": ("50", "100", "200", "300", "400", "500", "A100"),
-  "dark": ("600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #1A237E,
-) !default;
-
-$indigoPalette: (
-  "50": #E8EAF6,
-  "100": #C5CAE9,
-  "200": #9FA8DA,
-  "300": #7986CB,
-  "400": #5C6BC0,
-  "500": #3F51B5,
-  "600": #3949AB,
-  "700": #303F9F,
-  "800": #283593,
-  "900": #1A237E,
-  "A100": #8C9EFF,
-  "A200": #536DFE,
-  "A400": #3D5AFE,
-  "A700": #304FFE,
-  "light": ("50", "100", "200", "A100"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #1A237E,
-) !default;
-
-$deeppurplePalette: (
-  "50": #EDE7F6,
-  "100": #D1C4E9,
-  "200": #B39DDB,
-  "300": #9575CD,
-  "400": #7E57C2,
-  "500": #673AB7,
-  "600": #5E35B1,
-  "700": #512DA8,
-  "800": #4527A0,
-  "900": #311B92,
-  "A100": #B388FF,
-  "A200": #7C4DFF,
-  "A400": #651FFF,
-  "A700": #6200EA,
-  "light": ("50", "100", "200", "A100"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #1A237E,
-) !default;
-
-$purplePalette: (
-  "50": #F3E5F5,
-  "100": #E1BEE7,
-  "200": #CE93D8,
-  "300": #BA68C8,
-  "400": #AB47BC,
-  "500": #9C27B0,
-  "600": #8E24AA,
-  "700": #7B1FA2,
-  "800": #6A1B9A,
-  "900": #4A148C,
-  "A100": #EA80FC,
-  "A200": #E040FB,
-  "A400": #D500F9,
-  "A700": #AA00FF,
-  "light": ("50", "100", "200", "A100"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #1A237E,
-) !default;
-
-$lightbluePalette: (
-  "50": #E1F5FE,
-  "100": #B3E5FC,
-  "200": #81D4FA,
-  "300": #4FC3F7,
-  "400": #29B6F6,
-  "500": #03A9F4,
-  "600": #039BE5,
-  "700": #0288D1,
-  "800": #0277BD,
-  "900": #01579B,
-  "A100": #80D8FF,
-  "A200": #40C4FF,
-  "A400": #00B0FF,
-  "A700": #0091EA,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "A100", "A200", "A400"),
-  "dark": ("700", "800", "900", "A700"),
-  "shadow": #263238,
-) !default;
-
-$cyanPalette: (
-  "50": #E0F7FA,
-  "100": #B2EBF2,
-  "200": #80DEEA,
-  "300": #4DD0E1,
-  "400": #26C6DA,
-  "500": #00BCD4,
-  "600": #00ACC1,
-  "700": #0097A7,
-  "800": #00838F,
-  "900": #006064,
-  "A100": #84FFFF,
-  "A200": #18FFFF,
-  "A400": #00E5FF,
-  "A700": #00B8D4,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "A100", "A200", "A400", "A700"),
-  "dark": ("700", "800", "900"),
-  "shadow": #263238,
-) !default;
-
-$tealPalette: (
-  "50": #E0F2F1,
-  "100": #B2DFDB,
-  "200": #80CBC4,
-  "300": #4DB6AC,
-  "400": #26A69A,
-  "500": #009688,
-  "600": #00897B,
-  "700": #00796B,
-  "800": #00695C,
-  "900": #004D40,
-  "A100": #A7FFEB,
-  "A200": #64FFDA,
-  "A400": #1DE9B6,
-  "A700": #00BFA5,
-  "light": ("50", "100", "200", "300", "400", "A100", "A200", "A400", "A700"),
-  "dark": ("500", "600", "700", "800", "900"),
-  "shadow": #263238,
-) !default;
-
-$greenPalette: (
-  "50": #E8F5E9,
-  "100": #C8E6C9,
-  "200": #A5D6A7,
-  "300": #81C784,
-  "400": #66BB6A,
-  "500": #4CAF50,
-  "600": #43A047,
-  "700": #388E3C,
-  "800": #2E7D32,
-  "900": #1B5E20,
-  "A100": #B9F6CA,
-  "A200": #69F0AE,
-  "A400": #00E676,
-  "A700": #00C853,
-  "light": ("50", "100", "200", "300", "400", "500", "A100", "A200", "A400", "A700"),
-  "dark": ("600", "700", "800", "900"),
-  "shadow": #263238,
-) !default;
-
-$lightgreenPalette: (
-  "50": #F1F8E9,
-  "100": #DCEDC8,
-  "200": #C5E1A5,
-  "300": #AED581,
-  "400": #9CCC65,
-  "500": #8BC34A,
-  "600": #7CB342,
-  "700": #689F38,
-  "800": #558B2F,
-  "900": #33691E,
-  "A100": #CCFF90,
-  "A200": #B2FF59,
-  "A400": #76FF03,
-  "A700": #64DD17,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "700", "A100", "A200", "A400", "A700"),
-  "dark": ("800", "900"),
-  "shadow": #263238,
-) !default;
-
-$limePalette: (
-  "50": #F9FBE7,
-  "100": #F0F4C3,
-  "200": #E6EE9C,
-  "300": #DCE775,
-  "400": #D4E157,
-  "500": #CDDC39,
-  "600": #C0CA33,
-  "700": #AFB42B,
-  "800": #9E9D24,
-  "900": #827717,
-  "A100": #F4FF81,
-  "A200": #EEFF41,
-  "A400": #C6FF00,
-  "A700": #AEEA00,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "A100", "A200", "A400", "A700"),
-  "dark": ("900"),
-  "shadow": #263238,
-) !default;
-
-$yellowPalette: (
-  "50": #FFFDE7,
-  "100": #FFF9C4,
-  "200": #FFF59D,
-  "300": #FFF176,
-  "400": #FFEE58,
-  "500": #FFEB3B,
-  "600": #FDD835,
-  "700": #FBC02D,
-  "800": #F9A825,
-  "900": #F57F17,
-  "A100": #FFFF8D,
-  "A200": #FFFF00,
-  "A400": #FFEA00,
-  "A700": #FFD600,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
-  "dark": (),
-  "shadow": #BF360C,
-) !default;
-
-$amberPalette: (
-  "50": #FFF8E1,
-  "100": #FFECB3,
-  "200": #FFE082,
-  "300": #FFD54F,
-  "400": #FFCA28,
-  "500": #FFC107,
-  "600": #FFB300,
-  "700": #FFA000,
-  "800": #FF8F00,
-  "900": #FF6F00,
-  "A100": #FFE57F,
-  "A200": #FFD740,
-  "A400": #FFC400,
-  "A700": #FFAB00,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
-  "dark": (),
-  "shadow": #BF360C,
-) !default;
-
-$orangePalette: (
-  "50": #FFF3E0,
-  "100": #FFE0B2,
-  "200": #FFCC80,
-  "300": #FFB74D,
-  "400": #FFA726,
-  "500": #FF9800,
-  "600": #FB8C00,
-  "700": #F57C00,
-  "800": #EF6C00,
-  "900": #E65100,
-  "A100": #FFD180,
-  "A200": #FFAB40,
-  "A400": #FF9100,
-  "A700": #FF6D00,
-  "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "A100", "A200", "A400", "A700"),
-  "dark": ("900"),
-  "shadow": #BF360C,
-) !default;
-
-$deeporangePalette: (
-  "50": #FBE9E7,
-  "100": #FFCCBC,
-  "200": #FFAB91,
-  "300": #FF8A65,
-  "400": #FF7043,
-  "500": #FF5722,
-  "600": #F4511E,
-  "700": #E64A19,
-  "800": #D84315,
-  "900": #BF360C,
-  "A100": #FF9E80,
-  "A200": #FF6E40,
-  "A400": #FF3D00,
-  "A700": #DD2C00,
-  "light": ("50", "100", "200", "300", "400", "500", "A100", "A200"),
-  "dark": ("600", "700", "800", "900", "A400", "A700"),
-  "shadow": #3E2723
-) !default;
-
-$redPalette: (
-  "50" : #FFEBEE,
-  "100": #FFCDD2,
-  "200": #EF9A9A,
-  "300": #E57373,
-  "400": #EF5350,
-  "500": #F44336,
-  "600": #E53935,
-  "700": #D32F2F,
-  "800": #C62828,
-  "900": #B71C1C,
-  "A100": #FF8A80,
-  "A200": #FF5252,
-  "A400": #FF1744,
-  "A700": #D50000,
-  "light": ("50", "100", "200", "300", "A100"),
-  "dark": ("400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #3E2723,
-) !default;
-
-$pinkPalette: (
-  "50": #FCE4EC,
-  "100": #F8BBD0,
-  "200": #F48FB1,
-  "300": #F06292,
-  "400": #EC407A,
-  "500": #E91E63,
-  "600": #D81B60,
-  "700": #C2185B,
-  "800": #AD1457,
-  "900": #880E4F,
-  "A100": #FF80AB,
-  "A200": #FF4081,
-  "A400": #F50057,
-  "A700": #C51162,
-  "light": ("50", "100", "200", "300", "A100"),
-  "dark": ("400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
-  "shadow": #3E2723,
-) !default;
-
-$brownPalette: (
-  "50": #EFEBE9,
-  "100": #D7CCC8,
-  "200": #BCAAA4,
-  "300": #A1887F,
-  "400": #8D6E63,
-  "500": #795548,
-  "600": #6D4C41,
-  "700": #5D4037,
-  "800": #4E342E,
-  "900": #3E2723,
-  "A100": #D7CCC8,
-  "A200": #BCAAA4,
-  "A400": #8D6E63,
-  "A700": #5D4037,
-  "light": ("50", "100", "200", "A100", "A200"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
-  "shadow": #3E2723,
-) !default;
-
-$grayPalette: (
-  "50": #FAFAFA,
-  "100": #F5F5F5,
-  "200": #EEEEEE,
-  "300": #E0E0E0,
-  "400": #BDBDBD,
-  "500": #9E9E9E,
-  "600": #757575,
-  "700": #616161,
-  "800": #424242,
-  "900": #212121,
-  "A100": #F5F5F5,
-  "A200": #EEEEEE,
-  "A400": #BDBDBD,
-  "A700": #616161,
-  "light": ("50", "100", "200", "300", "400", "500", "A100", "A200", "A400"),
-  "dark": ("600", "700", "800", "900", "A700"),
-  "shadow": #212121,
-) !default;
-
-$bluegrayPalette: (
-  "50": #ECEFF1,
-  "100": #CFD8DC,
-  "200": #B0BEC5,
-  "300": #90A4AE,
-  "400": #78909C,
-  "500": #607D8B,
-  "600": #546E7A,
-  "700": #455A64,
-  "800": #37474F,
-  "900": #263238,
-  "A100": #CFD8DC,
-  "A200": #B0BEC5,
-  "A400": #78909C,
-  "A700": #455A64,
-  "light": ("50", "100", "200", "300", "A100", "A200"),
-  "dark": ("400", "500", "600", "700", "800", "900", "A400", "A700"),
-  "shadow": #263238,
-) !default;
-
-$palettes: (
-  "blue": $bluePalette,
-  "indigo": $indigoPalette,
-  "deeppurple": $deeppurplePalette,
-  "purple": $purplePalette,
-  "lightblue": $lightbluePalette,
-  "cyan": $cyanPalette,
-  "teal": $tealPalette,
-  "green": $greenPalette,
-  "lightgreen": $lightgreenPalette,
-  "lime": $limePalette,
-  "yellow": $yellowPalette,
-  "amber": $amberPalette,
-  "orange": $orangePalette,
-  "deeporange": $deeporangePalette,
-  "red": $redPalette,
-  "pink": $pinkPalette,
-  "brown": $brownPalette,
-  "bluegrey": $bluegrayPalette,
-  "bluegray": $bluegrayPalette,
-  "grey": $grayPalette,
-  "gray": $grayPalette,
-) !default;

package/core/theme/_variables.scss

@@ -1,24 +0,0 @@
-$fallbacks: 'ieonly' !default;
-$cssvars: 'supports' !default;
-
-$inks: ('primary', 'secondary', 'warn') !default;
-$surfaces: ('primary', 'secondary', 'warn', 'background') !default;
-$ink-tones: ("A100", "A200", "A400", "A700") !default;
-$surface-tones: ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900") !default;
-$primary: 'blue' !default;
-$secondary: 'pink' !default;
-$warn: 'red' !default;
-$background: 'gray' !default;
-$foreground: (#000, #fff) !default;
-
-$high-opacity: (0.87, 1.00) !default;
-$medium-opacity: (0.60, 0.70) !default;
-$inactive-opacity: (0.38, 0.50) !default;
-$divider-opacity: (0.12, 0.24) !default;
-
-$default-color-surface: ('50', '900') !default;
-$alt-color-surface: ('100', '800') !default;
-
-$default-color-ink: ('A700', 'A200') !default;
-$contrast-color-ink: ('A700', 'A100') !default;
-$light-color-ink: ('A400', 'A100') !default;

package/core/theme/index.js

@@ -1,50 +0,0 @@
-/**
- * @param {Element} element
- * @param {string} palette
- * @param {''|'light'|'contrast'|'A100'|'A200'|'A400'|'A700'} [tone='']
- * @param {''|'solid'|'high'|'medium'|'inactive'|'divider'} [opacity='']
- * @return {void}
- */
-export function setInk(element, palette, tone, opacity) {
-  if (tone) {
-    if (opacity) {
-      element.setAttribute('mdw-ink', `${palette} ${tone} ${opacity}`);
-    } else {
-      element.setAttribute('mdw-ink', `${palette} ${tone}`);
-    }
-  } else if (opacity) {
-    element.setAttribute('mdw-ink', `${palette} ${opacity}`);
-  } else {
-    element.setAttribute('mdw-ink', palette);
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function removeInk(element) {
-  element.removeAttribute('mdw-ink');
-}
-
-/**
- * @param {Element} element
- * @param {string} palette
- * @param {''|'alt'|'50'|'100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900'} [tone='']
- * @return {void}
- */
-export function setSurface(element, palette, tone) {
-  if (tone) {
-    element.setAttribute('mdw-surface', `${palette} ${tone}`);
-  } else {
-    element.setAttribute('mdw-surface', palette);
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function removeSurface(element) {
-  element.removeAttribute('mdw-surface');
-}

package/core/throttler.js

@@ -1,42 +0,0 @@
-export default class Throttler {
-  /** @param {number} throttleTimeMs */
-  constructor(throttleTimeMs) {
-    this.pending = false;
-    this.queued = false;
-    this.queue = null;
-    this.throttleTimeMs = throttleTimeMs;
-  }
-
-  abort() {
-    if (this.queue) {
-      clearTimeout(this.queue);
-      this.queue = null;
-    }
-    this.pending = false;
-    this.queued = false;
-  }
-
-  /**
-   * @param {Function} fn
-   * @return {void}
-   */
-  run(fn) {
-    if (this.pending) {
-      this.queued = true;
-      return;
-    }
-    if (this.queue) {
-      clearTimeout(this.queue);
-      this.queue = null;
-    }
-    this.queued = false;
-    this.pending = true;
-    this.queue = setTimeout(() => {
-      this.pending = false;
-      if (this.queued) {
-        this.run(fn);
-      }
-    }, this.throttleTimeMs);
-    fn();
-  }
-}