@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/card/_spec.scss

@@ -1,27 +1,31 @@
 // https://material.io/design/components/cards.html#specs
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use "sass:math";
 
-$mdw-card__horizontal-padding: dp(16) !default;
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
+
+
+$horizontalPadding: dp(16) !default;
 
 .mdw-card {
-  @include type-rules('body-2');
+  @include type.addRules('body-2');
 
   display: block;
   position: relative;
 
   outline: none;
 
-  transition-duration: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: box-shadow;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   border-radius: dp(4);
-  box-shadow: mdwElevation(0);
+  box-shadow: elevation.boxShadow(0);
 
   &::before {
     // Outline is behind content, not around it
@@ -41,9 +45,9 @@ $mdw-card__horizontal-padding: dp(16) !default;
     border-radius: inherit;
   }
 
-  @include mdw-breakpoint__tablet-device__max() {
+  @include breakpoint.maxTabletDevice() {
     &:not([mdw-elevation]) {
-      box-shadow: mdwElevation(1);
+      box-shadow: elevation.boxShadow(1);
 
       &::before {
         border-color: transparent;
@@ -52,14 +56,14 @@ $mdw-card__horizontal-padding: dp(16) !default;
   }
 
   &[mdw-elevation="1"] {
-    box-shadow: mdwElevation(1);
+    box-shadow: elevation.boxShadow(1);
   }
 
   &[mdw-elevation="8"],
   &[mdw-raised~="hover"]:hover,
   &[mdw-raised~="focus"]:focus,
   &[mdw-raised~="focus-within"]:focus-within {
-    box-shadow: mdwElevation(8);
+    box-shadow: elevation.boxShadow(8);
   }
 
   &[mdw-elevation="1"],
@@ -84,25 +88,25 @@ $mdw-card__horizontal-padding: dp(16) !default;
 .mdw-card__subheader,
 .mdw-card__supporting-text,
 .mdw-card__content {
-  padding: 0 $mdw-card__horizontal-padding;
+  padding: 0 $horizontalPadding;
 }
 
 .mdw-card__supporting-text {
-  @include texttop-to-top(14);
-  @include baseline-bottom(16);
+  @include type.textTopToTop(14);
+  @include type.baselineToBottom(16);
 }
 
 .mdw-card > .mdw-divider {
-  width: calc(100% - #{$mdw-card__horizontal-padding * 2});
-  margin-right: $mdw-card__horizontal-padding;
-  margin-left: $mdw-card__horizontal-padding;
+  width: calc(100% - #{$horizontalPadding * 2});
+  margin-right: $horizontalPadding;
+  margin-left: $horizontalPadding;
 }
 
 .mdw-card__thumbnail {
   margin-top: dp(16);
-  margin-right: $mdw-card__horizontal-padding;
+  margin-right: $horizontalPadding;
   margin-bottom: 0;
-  margin-left: $mdw-card__horizontal-padding;
+  margin-left: $horizontalPadding;
 }
 
 .mdw-card__start {
@@ -149,19 +153,19 @@ $mdw-card__horizontal-padding: dp(16) !default;
   }
 
   &[mdw-ratio="16:9"]::after {
-    padding-bottom: calc(100% / 16 * 9);
+    padding-bottom: #{math.div(100%, 16) * 9};
   }
 
   &[mdw-ratio="3:2"]::after {
-    padding-bottom: calc(100% / 3 * 2);
+    padding-bottom: #{math.div(100%, 3) * 2};
   }
 
   &[mdw-ratio="4:3"]::after {
-    padding-bottom: calc(100% / 4 * 3);
+    padding-bottom: #{math.div(100%, 4) * 3};
   }
 
   &[mdw-ratio="1:1"]::after {
-    padding-bottom: calc(100% / 1 * 1);
+    padding-bottom: #{math.div(100%, 1) * 1};
   }
 }
 
@@ -170,12 +174,12 @@ $mdw-card__horizontal-padding: dp(16) !default;
 
   min-height: dp(40);
   min-width: dp(40);
-  margin-right: $mdw-card__horizontal-padding;
+  margin-right: $horizontalPadding;
   margin-left: 0;
 
   :root[dir="rtl"] & {
     margin-right: 0;
-    margin-left: $mdw-card__horizontal-padding;
+    margin-left: $horizontalPadding;
   }
 }
 
@@ -184,24 +188,24 @@ $mdw-card__horizontal-padding: dp(16) !default;
 }
 
 h5.mdw-card__header {
-  @include texttop-to-top(16);
-  @include type-rules('h5');
-  @include baseline-bottom(28);
+  @include type.textTopToTop(16);
+  @include type.addRules('h5');
+  @include type.baselineToBottom(28);
   margin-bottom: dp(-28);
 }
 
 h6.mdw-card__header {
-  @include texttop-to-top(14);
-  @include type-rules('h6');
+  @include type.textTopToTop(14);
+  @include type.addRules('h6');
 }
 
 .mdw-card__header[mdw-two-line] {
-  @include baseline-bottom(22);
+  @include type.baselineToBottom(22);
   margin-bottom: dp(-22);
 
   & ~ .mdw-card__subheader {
-    @include texttop-to-top(8);
-    @include baseline-bottom(16);
+    @include type.textTopToTop(8);
+    @include type.baselineToBottom(16);
   }
 }
 

package/components/card/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';

package/components/chip/_spec.scss

@@ -1,9 +1,8 @@
 // https://material.io/design/components/chips.html
 
-@import '../../core/_platform.scss';
-@import '../../core/_breakpoint.scss';
+@use '../../core/_length.scss' as *;
 
-$mdw-chip__border-width: dp(1) !default;
+$borderWidth: dp(1) !default;
 
 .mdw-chip {
   margin: 0 0 dp(-8) dp(-8);
@@ -62,7 +61,7 @@ $mdw-chip__border-width: dp(1) !default;
   width: 100%;
   margin: 0;
   border-style: solid;
-  border-width: $mdw-chip__border-width;
+  border-width: $borderWidth;
 
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -80,10 +79,10 @@ $mdw-chip__border-width: dp(1) !default;
     content: '';
 
     position: absolute;
-    top: -$mdw-chip__border-width;
-    right: -$mdw-chip__border-width;
-    bottom: -$mdw-chip__border-width;
-    left: -$mdw-chip__border-width;
+    top: -$borderWidth;
+    right: -$borderWidth;
+    bottom: -$borderWidth;
+    left: -$borderWidth;
 
     transition: inherit;
     transition-property: background-color, opacity;

package/components/chip/_theme.scss

@@ -2,9 +2,9 @@
 // https://material.io/design/components/chips.html
 // https://material.io/design/iconography/system-icons.html#color
 
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-chip__theme-values: (
+$themeValues: (
   text-color:                    (('foreground-light', 0.87), ('foreground-dark', 1.00)),
   background-color:              (('foreground-light', 0.12), ('foreground-dark', 0.24)),
 
@@ -53,24 +53,24 @@ $mdw-chip__theme-values: (
 
 ) !default;
 
-@function mdwChipThemeValue($key, $type) {
-  @return mdwGetThemeValue('chip', $mdw-chip__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('chip', $themeValues, $key, $type);
 }
 
-@mixin mdw-chip__theme-rules($type: 'var') {
+@mixin addThemeRules($type: 'var') {
   .mdw-chip__thumbnail,
   .mdw-chip__remove,
   .mdw-chip__text {
-    color: mdwChipThemeValue("text-color", $type);
+    color: RGBA(getThemeValue("text-color", $type));
   }
 
   .mdw-chip__input {
     color: inherit;
 
     &::before {
-      opacity: mdwChipThemeValue("default-opacity", $type);
+      opacity: getThemeValue("default-opacity", $type);
 
-      background-color: mdwChipThemeValue("overlay-color", $type);
+      background-color: RGBA(getThemeValue("overlay-color", $type));
     }
 
     &:checked::before {
@@ -78,20 +78,20 @@ $mdw-chip__theme-values: (
     }
 
     &:hover::before {
-      opacity: mdwChipThemeValue("hover-opacity", $type);
+      opacity: getThemeValue("hover-opacity", $type);
     }
 
     &:focus::before {
-      opacity: mdwChipThemeValue("focus-opacity", $type);
+      opacity: getThemeValue("focus-opacity", $type);
     }
 
     &:hover:focus::before {
-      opacity: mdwChipThemeValue("hover-focus-opacity", $type);
+      opacity: getThemeValue("hover-focus-opacity", $type);
     }
 
     &:checked {
       & ~ .mdw-chip__text {
-        color: mdwChipThemeValue("activated-text-color", $type);
+        color: RGBA(getThemeValue("activated-text-color", $type));
       }
 
       &[type="radio"] {
@@ -102,61 +102,61 @@ $mdw-chip__theme-values: (
 
       &[type="checkbox"] {
         &::before {
-          opacity: mdwChipThemeValue("selected-opacity", $type);
+          opacity: getThemeValue("selected-opacity", $type);
         }
 
         &:hover::before {
-          opacity: mdwChipThemeValue("selected-hover-opacity", $type);
+          opacity: getThemeValue("selected-hover-opacity", $type);
         }
 
         &:focus::before {
-          opacity: mdwChipThemeValue("selected-focus-opacity", $type);
+          opacity: getThemeValue("selected-focus-opacity", $type);
         }
 
         &:hover:focus::before {
-          opacity: mdwChipThemeValue("selected-hover-focus-opacity", $type);
+          opacity: getThemeValue("selected-hover-focus-opacity", $type);
         }
       }
     }
   }
 
   .mdw-chip[mdw-outlined] .mdw-chip__input {
-    border-color: mdwChipThemeValue('outline-color', $type);
+    border-color: RGBA(getThemeValue('outline-color', $type));
 
     &:not(:checked) {
       &::before {
-        opacity: mdwChipThemeValue("outlined-opacity", $type);
+        opacity: getThemeValue("outlined-opacity", $type);
       }
 
       &:hover::before {
-        opacity: mdwChipThemeValue("outlined-hover-opacity", $type);
+        opacity: getThemeValue("outlined-hover-opacity", $type);
       }
 
       &:focus::before {
-        opacity: mdwChipThemeValue("outlined-focus-opacity", $type);
+        opacity: getThemeValue("outlined-focus-opacity", $type);
       }
 
       &:hover:focus::before {
-        opacity: mdwChipThemeValue("outlined-hover-focus-opacity", $type);
+        opacity: getThemeValue("outlined-hover-focus-opacity", $type);
       }
     }
 
     &:checked {
       &[type="checkbox"] {
         &::before {
-          opacity: mdwChipThemeValue("outlined-selected-opacity", $type);
+          opacity: getThemeValue("outlined-selected-opacity", $type);
         }
 
         &:hover::before {
-          opacity: mdwChipThemeValue("outlined-selected-hover-opacity", $type);
+          opacity: getThemeValue("outlined-selected-hover-opacity", $type);
         }
 
         &:focus::before {
-          opacity: mdwChipThemeValue("outlined-selected-focus-opacity", $type);
+          opacity: getThemeValue("outlined-selected-focus-opacity", $type);
         }
 
         &:hover:focus::before {
-          opacity: mdwChipThemeValue("outlined-selected-hover-focus-opacity", $type);
+          opacity: getThemeValue("outlined-selected-hover-focus-opacity", $type);
         }
       }
     }
@@ -164,14 +164,14 @@ $mdw-chip__theme-values: (
 }
 
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-chip__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
 
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-chip__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('chip', $mdw-chip__theme-values) {
-  @include mdw-chip__theme-rules();
+@include theme.addComponentCSSVariableRules('chip', $themeValues) {
+  @include addThemeRules();
 }

package/components/chip/index.js

@@ -1,7 +1,8 @@
 // https://www.w3.org/TR/wai-aria-practices/#Listbox
 
-import { iterateArrayLike } from '../../core/dom';
-import * as ChipItem from './item';
+import { iterateArrayLike } from '../../core/dom.js';
+
+import * as ChipItem from './item.js';
 
 /**
  * @param {Element} element

package/components/chip/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';

package/components/chip/item.js

@@ -1,6 +1,6 @@
 // https://www.w3.org/TR/wai-aria-practices/#Listbox
 
-import * as Ripple from '../../core/ripple/index';
+import * as Ripple from '../../core/ripple/index.js';
 
 /**
  * @param {Element} element
@@ -9,27 +9,12 @@ import * as Ripple from '../../core/ripple/index';
 export function attach(element) {
   element.classList.add('mdw-ripple');
   Ripple.attach(element);
-
-  attachCore(element);
 }
 
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachCore(element) {}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detachCore(element) {}
-
 /**
  * @param {Element} element
  * @return {void}
  */
 export function detach(element) {
-  detachCore(element);
   Ripple.detach(element);
 }

package/components/datatable/_spec.scss

@@ -1,12 +1,12 @@
 // https://material.io/guidelines/components/data-tables.html
 // https://material.io/guidelines/patterns/selection.html#selection-item-selection
 
-@import '../../core/_platform.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_breakpoint.scss';
-@import '../../core/_type.scss';
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
 
-$mdw-datatable__icon-size: dp(16) !default;
+$iconSize: dp(16) !default;
 
 .mdw-datatable {
   display: flex;
@@ -23,7 +23,7 @@ $mdw-datatable__icon-size: dp(16) !default;
 
 .mdw-datatable caption,
 .mdw-datatable__header {
-  @include type-rules('h6');
+  @include type.addRules('h6');
   min-height: dp(64);
 }
 
@@ -85,28 +85,65 @@ $mdw-datatable__icon-size: dp(16) !default;
 
 
 .mdw-datatable td {
-  @include type-rules('body-2');
-  //text-align: left;
+  @include type.addRules('body-2');
+  // text-align: left;
   // Expected line-height is 20dp. Support two lines within 48dp
   padding-top: dp(4);
   padding-bottom: dp(4 - 1); // Remove bottom border width
 
   outline: none;
 
-  &[mdw-selector] + td {
-    padding-right: dp(16);
-    padding-left: dp(12);
+}
+
+.mdw-datatable th {
+  @include type.addRules('caption');
+  white-space: nowrap;
+}
+
+.mdw-datatable th,
+.mdw-datatable td {
+  padding-right: dp(16);
+  padding-left: dp(16);
+
+  text-align: center;
+
+  &[mdw-checkbox] {
+    line-height: 0;
+  }
+
+  &[mdw-text] {
+    text-align: left;
+    text-align: start;
+  
+    :root[dir="rtl"] & {
+      text-align: right;
+      text-align: start;
+    }
+  }
+
+  &[mdw-number] {
+    text-align: right;
+    text-align: end;
 
     :root[dir="rtl"] & {
-      padding-right: dp(12);
-      padding-left: dp(16);
+      text-align: left;
+      text-align: end;
+    }
+  }
+
+  &[mdw-primary-column] {
+    width: 100%;
+    border-right-style: solid;
+    border-width: dp(1);
+
+    :root[dir="rtl"] & {
+      border-right-style: none;
+      border-left-style: solid;
     }
   }
-  
 }
 
-.mdw-datatable th[mdw-selector],
-.mdw-datatable td[mdw-selector] {
+.mdw-datatable th[mdw-selector] {
   width: dp(24);
   padding-right: 0;
   padding-left: dp(16);
@@ -115,13 +152,9 @@ $mdw-datatable__icon-size: dp(16) !default;
     padding-right: dp(16);
     padding-left: 0;
   }
-}
-
-.mdw-datatable th {
-  @include type-rules('caption');
-  white-space: nowrap;
 
-  &[mdw-selector] + th {
+  & + td,
+  & + th {
     padding-right: dp(16);
     padding-left: dp(12);
 
@@ -132,53 +165,28 @@ $mdw-datatable__icon-size: dp(16) !default;
   }
 }
 
-
-.mdw-datatable th,
-.mdw-datatable td {
-  padding-right: dp(16);
-  padding-left: dp(16);
-
-  text-align: center;
-
-  .mdw-selection__input {
-    // Remove ripple
-    visibility: hidden;
-  }
-}
-
-.mdw-datatable th[mdw-primary-column],
-.mdw-datatable td[mdw-primary-column] {
-  width: 100%;
-  border-right-style: solid;
-  border-width: dp(1);
-
-  :root[dir="rtl"] & {
-    border-right-style: none;
-    border-left-style: solid;
-  }
-}
-
 .mdw-datatable__sort-icon {
   display: inline-block;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
 
   max-width: 0;
 
-  transition-duration: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: transform;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
-  transform: translateX(-$mdw-datatable__icon-size) rotate(180deg);
-  transform-origin: ($mdw-datatable__icon-size / 2) ($mdw-datatable__icon-size / 2);
+  transform: translateX(-$iconSize) rotate(180deg);
+  transform-origin: ($iconSize * 0.5) ($iconSize * 0.5);
 
   color: transparent;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   &.material-icons {
-    font-size: $mdw-datatable__icon-size;
+    font-size: $iconSize;
   }
 }
 
-.mdw-datatable th[mdw-sortable] {
+.mdw-datatable th[aria-sort] {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   -moz-user-select: none;
@@ -187,42 +195,20 @@ $mdw-datatable__icon-size: dp(16) !default;
   user-select: none;
 
   &:hover,
-  &[mdw-sorted] {
+  &[aria-sort="ascending"] {
     .mdw-datatable__sort-icon {
-      transform: translateX(-$mdw-datatable__icon-size) rotate(180deg);
+      transform: translateX(-$iconSize) rotate(180deg);
 
       color: inherit;
     }
   }
 
-  &[mdw-sorted="desc"] {
+  &[aria-sort="descending"] {
     .mdw-datatable__sort-icon {
-      transform: translateX(-$mdw-datatable__icon-size) rotate(0deg);
-    }
-  }
-}
-
-
-
-.mdw-datatable th[data-type="text"],
-.mdw-datatable td[data-type="text"] {
-  text-align: left;
-  text-align: start;
-
-  :root[dir="rtl"] & {
-    text-align: right;
-    text-align: start;
-  }
-}
+      transform: translateX(-$iconSize) rotate(0deg);
 
-.mdw-datatable th[data-type="number"],
-.mdw-datatable td[data-type="number"] {
-  text-align: right;
-  text-align: end;
-
-  :root[dir="rtl"] & {
-    text-align: left;
-    text-align: end;
+      color: inherit;
+    }
   }
 }
 
@@ -231,7 +217,7 @@ $mdw-datatable__icon-size: dp(16) !default;
 }
 
 .mdw-datatable__footer {
-  @include type-rules('caption');
+  @include type.addRules('caption');
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -243,7 +229,7 @@ $mdw-datatable__icon-size: dp(16) !default;
 
 .mdw-datatable__header,
 .mdw-datatable__footer {
-  @include mdw-platform__ie() {
+  @include platform.ifIE() {
     // Fix IE min-height flexbug
     &::after {
       content: '';