@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/{components/theming/palettes.scss → core/theme/_palettes.scss}

@@ -1,63 +1,47 @@
 // https://material.io/guidelines/style/color.html#color-color-tool
 
-$palette-red: (
-  "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")
-);
 
-$palette-pink: (
-  "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")
-);
+$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;
 
-$palette-purple: (
-  "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,
+$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")
-);
+  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
+  "shadow": #1A237E,
+) !default;
 
-$palette-deeppurple: (
+$deeppurplePalette: (
   "50": #EDE7F6,
   "100": #D1C4E9,
   "200": #B39DDB,
@@ -73,48 +57,31 @@ $palette-deeppurple: (
   "A400": #651FFF,
   "A700": #6200EA,
   "light": ("50", "100", "200", "A100"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700")
-);
+  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
+  "shadow": #1A237E,
+) !default;
 
-$palette-indigo: (
-  "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,
+$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")
-);
+  "dark": ("300", "400", "500", "600", "700", "800", "900", "A200", "A400", "A700"),
+  "shadow": #1A237E,
+) !default;
 
-$palette-blue: (
-  "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")
-);
-
-$palette-lightblue: (
+$lightbluePalette: (
   "50": #E1F5FE,
   "100": #B3E5FC,
   "200": #81D4FA,
@@ -130,10 +97,11 @@ $palette-lightblue: (
   "A400": #00B0FF,
   "A700": #0091EA,
   "light": ("50", "100", "200", "300", "400", "500", "600", "A100", "A200", "A400"),
-  "dark": ("700", "800", "900", "A700")
-);
+  "dark": ("700", "800", "900", "A700"),
+  "shadow": #263238,
+) !default;
 
-$palette-cyan: (
+$cyanPalette: (
   "50": #E0F7FA,
   "100": #B2EBF2,
   "200": #80DEEA,
@@ -149,10 +117,11 @@ $palette-cyan: (
   "A400": #00E5FF,
   "A700": #00B8D4,
   "light": ("50", "100", "200", "300", "400", "500", "600", "A100", "A200", "A400", "A700"),
-  "dark": ("700", "800", "900")
-);
+  "dark": ("700", "800", "900"),
+  "shadow": #263238,
+) !default;
 
-$palette-teal: (
+$tealPalette: (
   "50": #E0F2F1,
   "100": #B2DFDB,
   "200": #80CBC4,
@@ -168,10 +137,11 @@ $palette-teal: (
   "A400": #1DE9B6,
   "A700": #00BFA5,
   "light": ("50", "100", "200", "300", "400", "A100", "A200", "A400", "A700"),
-  "dark": ("500", "600", "700", "800", "900")
-);
+  "dark": ("500", "600", "700", "800", "900"),
+  "shadow": #263238,
+) !default;
 
-$palette-green: (
+$greenPalette: (
   "50": #E8F5E9,
   "100": #C8E6C9,
   "200": #A5D6A7,
@@ -187,10 +157,11 @@ $palette-green: (
   "A400": #00E676,
   "A700": #00C853,
   "light": ("50", "100", "200", "300", "400", "500", "A100", "A200", "A400", "A700"),
-  "dark": ("600", "700", "800", "900")
-);
+  "dark": ("600", "700", "800", "900"),
+  "shadow": #263238,
+) !default;
 
-$palette-lightgreen: (
+$lightgreenPalette: (
   "50": #F1F8E9,
   "100": #DCEDC8,
   "200": #C5E1A5,
@@ -206,10 +177,11 @@ $palette-lightgreen: (
   "A400": #76FF03,
   "A700": #64DD17,
   "light": ("50", "100", "200", "300", "400", "500", "600", "700", "A100", "A200", "A400", "A700"),
-  "dark": ("800", "900")
-);
+  "dark": ("800", "900"),
+  "shadow": #263238,
+) !default;
 
-$palette-lime: (
+$limePalette: (
   "50": #F9FBE7,
   "100": #F0F4C3,
   "200": #E6EE9C,
@@ -225,10 +197,11 @@ $palette-lime: (
   "A400": #C6FF00,
   "A700": #AEEA00,
   "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "A100", "A200", "A400", "A700"),
-  "dark": ("900")
-);
+  "dark": ("900"),
+  "shadow": #263238,
+) !default;
 
-$palette-yellow: (
+$yellowPalette: (
   "50": #FFFDE7,
   "100": #FFF9C4,
   "200": #FFF59D,
@@ -244,10 +217,11 @@ $palette-yellow: (
   "A400": #FFEA00,
   "A700": #FFD600,
   "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
-  "dark": ()
-);
+  "dark": (),
+  "shadow": #BF360C,
+) !default;
 
-$palette-amber: (
+$amberPalette: (
   "50": #FFF8E1,
   "100": #FFECB3,
   "200": #FFE082,
@@ -264,9 +238,10 @@ $palette-amber: (
   "A700": #FFAB00,
   "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
   "dark": (),
-);
+  "shadow": #BF360C,
+) !default;
 
-$palette-orange: (
+$orangePalette: (
   "50": #FFF3E0,
   "100": #FFE0B2,
   "200": #FFCC80,
@@ -282,10 +257,11 @@ $palette-orange: (
   "A400": #FF9100,
   "A700": #FF6D00,
   "light": ("50", "100", "200", "300", "400", "500", "600", "700", "800", "A100", "A200", "A400", "A700"),
-  "dark": ("900")
-);
+  "dark": ("900"),
+  "shadow": #BF360C,
+) !default;
 
-$palette-deeporange: (
+$deeporangePalette: (
   "50": #FBE9E7,
   "100": #FFCCBC,
   "200": #FFAB91,
@@ -301,10 +277,51 @@ $palette-deeporange: (
   "A400": #FF3D00,
   "A700": #DD2C00,
   "light": ("50", "100", "200", "300", "400", "500", "A100", "A200"),
-  "dark": ("600", "700", "800", "900", "A400", "A700")
-);
+  "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;
 
-$palette-brown: (
+$brownPalette: (
   "50": #EFEBE9,
   "100": #D7CCC8,
   "200": #BCAAA4,
@@ -320,10 +337,11 @@ $palette-brown: (
   "A400": #8D6E63,
   "A700": #5D4037,
   "light": ("50", "100", "200", "A100", "A200"),
-  "dark": ("300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700")
-);
+  "dark": ("300", "400", "500", "600", "700", "800", "900", "A100", "A200", "A400", "A700"),
+  "shadow": #3E2723,
+) !default;
 
-$palette-grey: (
+$grayPalette: (
   "50": #FAFAFA,
   "100": #F5F5F5,
   "200": #EEEEEE,
@@ -339,10 +357,11 @@ $palette-grey: (
   "A400": #BDBDBD,
   "A700": #616161,
   "light": ("50", "100", "200", "300", "400", "500", "A100", "A200", "A400"),
-  "dark": ("600", "700", "800", "900", "A700")
-);
+  "dark": ("600", "700", "800", "900", "A700"),
+  "shadow": #212121,
+) !default;
 
-$palette-bluegrey: (
+$bluegrayPalette: (
   "50": #ECEFF1,
   "100": #CFD8DC,
   "200": #B0BEC5,
@@ -356,28 +375,32 @@ $palette-bluegrey: (
   "A100": #CFD8DC,
   "A200": #B0BEC5,
   "A400": #78909C,
-  "A700": #455A64, 
+  "A700": #455A64,
   "light": ("50", "100", "200", "300", "A100", "A200"),
-  "dark": ("400", "500", "600", "700", "800", "900", "A400", "A700")
-);
+  "dark": ("400", "500", "600", "700", "800", "900", "A400", "A700"),
+  "shadow": #263238,
+) !default;
 
 $palettes: (
-  "red": $palette-red,
-  "pink": $palette-pink,
-  "purple": $palette-purple,
-  "deeppurple": $palette-deeppurple,
-  "indigo": $palette-indigo,
-  "blue": $palette-blue,
-  "lightblue": $palette-lightblue,
-  "cyan": $palette-cyan,
-  "teal": $palette-teal,
-  "green": $palette-green,
-  "lightgreen": $palette-lightgreen,
-  "lime": $palette-lime,
-  "yellow": $palette-yellow,
-  "amber": $palette-amber,
-  "orange": $palette-orange,
-  "deeporange": $palette-deeporange,
-  "brown": $palette-brown,
-  "grey": $palette-grey
-);
+  "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

@@ -0,0 +1,24 @@
+$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

@@ -0,0 +1,50 @@
+/**
+ * @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

@@ -0,0 +1,42 @@
+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();
+  }
+}