@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/core/color/_theme.scss

@@ -1,390 +0,0 @@
-// https://material.io/design/interaction/states.html
-
-@use '../theme/_mixins.scss' as theme;
-@use "../_platform.scss" as platform;
-
-@function _resortColors($list) {
-  $newList: ();
-  @each $color in $list {
-    @if (index($newList, $color) == null) {
-      $newList: append($newList, $color);
-      $palette: theme.getThemeParamValue($color);
-      @each $color2 in $list {
-        @if (index($newList, $color2) == null) {
-          $palette2: theme.getThemeParamValue($color2);
-          @if ($palette == $palette2) {
-            $newList: append($newList, $color2);
-          }
-        }
-      }
-    }
-  }
-  @return $newList;
-}
-
-// Resort colors with aliases for CSS rule merging
-$sortedInks: _resortColors(theme.$inks);
-$sortedSurfaces: _resortColors(theme.$surfaces);
-
-$themeValues: (
-  default-ink:                theme.$foreground,
-
-  high-ink-opacity:           theme.$high-opacity,
-  medium-ink-opacity:         theme.$medium-opacity,
-  inactive-ink-opacity:       theme.$inactive-opacity,
-  divider-ink-opacity:        theme.$divider-opacity,
-
-  card-surface:           ((#fff, null),               (#121212, null)),
-  binary-surface:         ((#fff, null),               (#000, null)),
-) !default;
-
-@each $color in $sortedInks {
-  $newInkMap: (
-    #{$color}-default-ink: (($color, nth(theme.$default-color-ink, 1),null), ($color, nth(theme.$default-color-ink, 2), null)),
-    #{$color}-contrast-ink: (($color, nth(theme.$contrast-color-ink, 1),null), ($color, nth(theme.$contrast-color-ink, 2), null)),
-    #{$color}-light-ink: (($color, nth(theme.$light-color-ink, 1),null), ($color, nth(theme.$light-color-ink, 2), null)),
-  );
-  $themeValues: map-merge($themeValues, $newInkMap);
-}
-
-@each $color in $sortedSurfaces {
-  $newSurfaceMap: (
-    #{$color}-default-surface: (($color, nth(theme.$default-color-surface, 1),null), ($color, nth(theme.$default-color-surface, 2), null)),
-    #{$color}-alt-surface: (($color, nth(theme.$alt-color-surface, 1),null), ($color, nth(theme.$alt-color-surface, 2), null)),
-  );
-  $themeValues: map-merge($themeValues, $newSurfaceMap);
-}
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('color', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  @if ($type == 'var') {
-    .mdw-theme {
-      /** Surface Colors **/
-
-      &[mdw-surface] {
-        background-color: RGB(var(--mdw-surface));
-      }
-    }
-
-    svg.mdw-theme[mdw-surface] {
-      background-color: transparent;
-
-      fill: RGB(var(--mdw-surface));
-    }
-
-    .mdw-theme {
-      &[mdw-surface]:not([mdw-ink]) {
-        --mdw-ink: #{getThemeValue("default-ink", $type)};
-        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
-        color: RGBA(var(--mdw-ink),var(--mdw-ink-opacity));
-      }
-
-      &[mdw-surface="white"] {
-        --mdw-surface: 255,255,255;
-      }
-
-      &[mdw-surface="black"] {
-        --mdw-surface: 0,0,0;
-      }
-
-      &[mdw-surface="binary"] {
-        --mdw-surface: #{getThemeValue("binary-surface", $type)};
-      }
-    
-      &[mdw-surface="card"] {
-        --mdw-surface: #{getThemeValue("card-surface", $type)};
-      }
-
-      @each $surface in $sortedSurfaces {
-        &[mdw-surface~="#{$surface}"] {
-          --mdw-surface: #{getThemeValue("#{$surface}-default-surface", $type)};
-        }
-      }
-      
-      @each $surface in $sortedSurfaces {
-        &[mdw-surface~="#{$surface}"] {
-          $palette: theme.getThemeParamValue($surface);
-          @each $tone in theme.$surface-tones {
-            $value: map-get($palette, $tone);
-            --#{$tone}-surface: #{red($value),green($value),blue($value)};
-          }
-        }
-      }
-
-      @each $surface in $sortedSurfaces {
-        &[mdw-surface="#{$surface} alt"] {
-          --mdw-surface: #{getThemeValue("#{$surface}-alt-surface", $type)};
-        }
-      }
-
-      @each $tone in theme.$surface-tones {
-        &[mdw-surface~="#{$tone}"] {
-          --mdw-surface: var(--#{$tone}-surface);
-        }
-      }
-
-      /** Ink Color **/
-
-      &[mdw-ink] {
-        --mdw-ink: #{getThemeValue("default-ink", $type)};
-        --mdw-ink-opacity: 1;
-        color: RGBA(var(--mdw-ink),var(--mdw-ink-opacity));
-      }
-
-      &[mdw-ink=""],
-      &[mdw-ink~="default"] {
-        --mdw-ink: #{getThemeValue("default-ink", $type)};
-        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
-      }
-
-      &[mdw-ink~="white"] {
-        --mdw-ink: 255,255,255;
-      }
-
-      &[mdw-ink~="black"] {
-        --mdw-ink: 0,0,0;
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink~="#{$ink}"] {
-          --mdw-ink: #{getThemeValue("#{$ink}-default-ink", $type)};
-        }
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink~="#{$ink}"] {
-          $palette: theme.getThemeParamValue($ink);
-          @each $tone in theme.$ink-tones {
-            $value: map-get($palette, $tone);
-            --mdw-ink-#{$tone}: #{red($value),green($value),blue($value)};
-          }
-        }
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink^="#{$ink} contrast"] {
-          --mdw-ink: #{getThemeValue("#{$ink}-contrast-ink", $type)};
-        }
-      }
-
-      @each $ink in $sortedInks {
-        @if ($ink != 'background') {
-          &[mdw-ink^="#{$ink} light"] {
-            --mdw-ink: #{getThemeValue("#{$ink}-light-ink", $type)};
-          }
-        }
-      }
-
-      @each $tone in theme.$ink-tones {
-        &[mdw-ink~="#{$tone}"] {
-          --mdw-ink: var(--mdw-ink-#{$tone});
-        }
-      }
-
-      /** Ink Opacity **/
-
-      &[mdw-ink~="solid"] {
-        --mdw-ink-opacity: 1;
-      }
-
-      &[mdw-ink~="high"] {
-        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
-      }
-    
-      &[mdw-ink~="medium"] {
-        --mdw-ink-opacity: #{getThemeValue("medium-ink-opacity", $type)};
-      }
-    
-      &[mdw-ink~="inactive"] {
-        --mdw-ink-opacity: #{getThemeValue("inactive-ink-opacity", $type)};
-      }
-    
-      &[mdw-ink~="divider"] {
-        --mdw-ink-opacity: #{getThemeValue("divider-ink-opacity", $type)};
-      }
-
-      /** Border Ink **/
-
-      &[mdw-border-ink] {
-        border-color: #{RGBA(var(--mdw-ink), getThemeValue("divider-ink-opacity", $type))};
-      }
-
-      &[mdw-border-ink="default"] {
-        border-color: #{RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type))};
-      }
-
-      &[mdw-border-ink="none"] {
-        border-color: transparent;
-      }
-    }
-  } @else {
-    & {
-      &[mdw-ink="default"],
-      &[mdw-surface]:not([mdw-ink]) {
-        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
-      }
-      
-      &[mdw-surface="binary"] {
-        background-color: RGB(getThemeValue("binary-surface", $type));
-      }
-    
-      &[mdw-surface="card"] {
-        background-color: RGB(getThemeValue("card-surface", $type));
-      }
-
-      @each $surface in $sortedSurfaces {
-        &[mdw-surface="#{$surface}"] {
-          background-color: RGB(getThemeValue("#{$surface}-default-surface", $type));
-        }
-      }
-
-      @each $surface in $sortedSurfaces {
-        &[mdw-surface="#{$surface} alt"] {
-          background-color: RGB(getThemeValue("#{$surface}-alt-surface", $type));
-        }
-      }
-
-      &[mdw-ink~="solid"] {
-        color: RGB(getThemeValue("default-ink", $type));
-      }
-
-      &[mdw-ink~="high"] {
-        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
-      }
-    
-      &[mdw-ink~="medium"] {
-        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("medium-ink-opacity", $type));
-      }
-    
-      &[mdw-ink~="inactive"] {
-        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("inactive-ink-opacity", $type));
-      }
-    
-      &[mdw-ink~="divider"] {
-        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("divider-ink-opacity", $type));
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink="#{$ink}"] {
-          &,
-          &.mdw-overlay::before {
-            color: RGB(getThemeValue("#{$ink}-default-ink", $type));
-          }
-        }
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink="#{$ink} contrast"] {
-          &,
-          &.mdw-overlay::before {
-            color: RGB(getThemeValue("#{$ink}-contrast-ink", $type));
-          }
-        }
-      }
-
-      @each $ink in $sortedInks {
-        &[mdw-ink="#{$ink} light"] {
-          &,
-          &.mdw-overlay::before {
-            color: RGB(getThemeValue("#{$ink}-light-ink", $type));
-          }
-        }
-      }
-
-      &[mdw-border-ink],
-      &[mdw-border-ink="default"] {
-        border-color: RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type));
-      }
-
-      &[mdw-border-ink="none"] {
-        border-color: transparent;
-      }
-    }
-  }
-}
-
-@mixin addThemeFallbackRules() {
-  .mdw-theme[mdw-surface="white"] {
-    background-color: #fff;
-  }
-
-  .mdw-theme[mdw-surface="black"] {
-    background-color: #000;
-  }
-
-  @each $surface in $sortedSurfaces {
-    $palette: theme.getThemeParamValue($surface);
-    @each $tone in theme.$surface-tones {
-      $value: map-get($palette, $tone);
-
-      .mdw-theme[mdw-surface="#{$surface} #{$tone}"] {
-        background-color: #{$value};
-      }
-    }
-  }
-
-  /** Ink Fallback Colors **/
-
-  .mdw-theme[mdw-ink~="white"] {
-    &,
-    &.mdw-overlay::before {
-      color: #fff;
-    }
-  }
-
-  .mdw-theme[mdw-ink~="black"] {
-    &,
-    &.mdw-overlay::before {
-      color: #000;
-    }
-  }
-
-  @each $tone in theme.$surface-tones {
-    @each $surface in $sortedSurfaces {
-      $palette: theme.getThemeParamValue($surface);
-      $value: map-get($palette, $tone);
-
-      .mdw-theme[mdw-surface^="#{$surface} #{$tone}"] {
-        background-color: #{$value};
-      }
-    }
-  }
-
-  @each $tone in theme.$ink-tones {
-    @each $ink in $sortedInks {
-      $palette: theme.getThemeParamValue($ink);
-      $value: map-get($palette, $tone);
-      .mdw-theme[mdw-ink^="#{$ink} #{$tone}"] {
-        &,
-        &.mdw-overlay::before {
-          color: #{$value};
-        }
-      }
-    }
-  }
-
-  .mdw-theme[mdw-light],
-  .mdw-theme[mdw-light] .mdw-theme:not([mdw-dark]) {
-    @include addThemeRules('light');
-  }
-
-  .mdw-theme[mdw-dark],
-  .mdw-theme[mdw-dark] .mdw-theme:not([mdw-light]) {
-    @include addThemeRules('dark');
-  }
-}
-
-@if (theme.$fallbacks == 'ieonly') {
-  @include platform.ifIE() {
-    @include addThemeFallbackRules();
-  }
-} @else if (theme.$fallbacks != false) {
-  @include addThemeFallbackRules();
-}
-
-@include theme.addComponentCSSVariableRules('color', $themeValues) {
-  @include addThemeRules();
-}

package/core/color/index.scss

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

package/core/document/index.js

@@ -1,39 +0,0 @@
-/** @return {void} */
-export function detectStandalone() {
-  // @ts-ignore: Safari uses navigator.standalone
-  if (navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches) {
-    document.documentElement.setAttribute('mdw-standalone', '');
-  }
-}
-
-/** @return {void} */
-export function detectUserAgent() {
-  const ua = navigator.userAgent.toLowerCase();
-  if (/iphone/i.test(ua) || /ipad/i.test(ua) || /macintosh/i.test(ua)) {
-    document.documentElement.setAttribute('mdw-ios', '');
-  }
-}
-
-/** @return {void} */
-export function detectColorScheme() {
-  // Auto lightness and fill
-  if (!document.documentElement.hasAttribute('mdw-surface')
-    && !document.documentElement.hasAttribute('mdw-light')
-    && !document.documentElement.hasAttribute('mdw-dark')) {
-    if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
-      document.documentElement.setAttribute('mdw-dark', '');
-    } else {
-      document.documentElement.setAttribute('mdw-light', '');
-    }
-  }
-}
-
-/**
- * Run before document has loaded
- * @return {void}
- */
-export function onPrerender() {
-  detectStandalone();
-  detectUserAgent();
-  detectColorScheme();
-}

package/core/overlay/_spec.scss

@@ -1,31 +0,0 @@
-.mdw-overlay {
-  position: relative;
-
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  // Remove Firefox inner
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  
-  &::before {
-    content: '';
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    
-    transition-delay: 1ms;
-    transition-duration: 0ms;
-    transition-property: opacity, color, background-color;
-
-    opacity: 0;
-    pointer-events: none;
-
-    background-color: currentColor;
-    border-radius: inherit;
-  }
-}

package/core/overlay/_theme.scss

@@ -1,171 +0,0 @@
-// https://material.io/design/interaction/states.html
-
-@use '../theme/_mixins.scss' as theme;
-
-$themeValues: (
-  overlay-color:                 theme.$foreground,
-
-  high-opacity:                  theme.$high-opacity,
-  medium-opacity:                theme.$medium-opacity,
-  inactive-opacity:              theme.$inactive-opacity,
-  divider-opacity:               theme.$divider-opacity,
-  
-  disabled-opacity:              (0.38, 0.50),
-  
-  // states   
-
-  hover-opacity:                 (0.04, 0.08),
-  focus-opacity:                 (0.12, 0.24),
-  selected-opacity:              (0.08, 0.16),
-  activated-opacity:             (0.12, 0.24),
-  
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
-
-  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
-
-  activated-hover-opacity:       (0.12 + 0.04, 0.24 + 0.08),
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.24),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('overlay', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  .mdw-overlay {
-    &,
-    &[aria-pressed="false"]:active,
-    &[aria-selected="true"],
-    &[aria-pressed="true"],
-    &[aria-current] {
-      &::before {
-        @if ($type == 'var') {
-          color: RGB(var(--mdw-ink));
-        } @else {
-          // Handled by mdw-color
-        }
-      }
-    }
-
-    &[aria-selected="false"],
-    &[aria-pressed="false"],
-    &[aria-disabled="true"],
-    &[aria-disabled="true"]:active {
-      &::before {
-        @if ($type == 'var') {
-          color: RGB(getThemeValue("overlay-color", $type));
-        } @else {
-          background-color: RGB(getThemeValue("overlay-color", $type));
-        }
-      }
-    }
-
-    // Off color
-    &[aria-selected="false"],
-    &[aria-pressed="false"],
-    &[aria-selected="true"]:not([aria-current]) {
-      #{if($type == 'var', '&', '&,&.mdw-theme')} {
-        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("high-opacity", $type));
-        &[mdw-border-ink] {
-          border-color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
-        }
-        &[mdw-overlay-default="medium"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("medium-opacity", $type));
-        }
-        &[mdw-overlay-default="inactive"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
-        }
-        &[mdw-overlay-default="divider"] {
-          color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("divider-opacity", $type));
-        }
-      }
-    }
-
-    &[aria-disabled="true"] {
-      &[mdw-overlay-disabled="ink"] {
-        color: RGBA(getThemeValue("overlay-color", $type), getThemeValue("inactive-opacity", $type));
-      }
-      &:not([mdw-overlay-disabled]) {
-        opacity: getThemeValue("disabled-opacity", $type);
-      }
-    }
-
-    &:not([mdw-overlay-touch="true"]) {
-      &:focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-        opacity: getThemeValue("focus-opacity", $type);
-      }
-
-      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
-        &:hover:not([mdw-overlay-off~="hover"])::before {
-          opacity: getThemeValue("hover-opacity", $type);
-        }
-
-        &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("hover-focus-opacity", $type);
-        }
-      }
-    }
-
-    // Selected
-    &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
-      &::before {
-        opacity: getThemeValue("selected-opacity", $type);
-      }
-
-      &:not([mdw-overlay-touch="true"]) {
-        &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("selected-focus-opacity", $type);
-        }
-
-        &:not([aria-disabled="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: getThemeValue("selected-hover-opacity", $type);
-          }
-
-          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("selected-hover-focus-opacity", $type);
-          }
-        }
-      }
-    }
-
-    // Activated
-    &[aria-current]:not([mdw-overlay-off~="activated"]),
-    &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
-      &::before {
-        opacity: getThemeValue("activated-opacity", $type);
-      }
-
-      &:not([mdw-overlay-touch="true"]) {
-        &:focus:not([mdw-overlay-off~="focus"])::before {
-          opacity: getThemeValue("activated-focus-opacity", $type);
-        }
-
-        &:not([aria-disabled="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"])::before {
-            opacity: getThemeValue("activated-hover-opacity", $type);
-          }
-
-          &:hover:focus:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("activated-hover-focus-opacity", $type);
-          }
-        }
-      }
-    }
-  }
-}
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-
-@include theme.addComponentCSSVariableRules('overlay', $themeValues) {
-  @include addThemeRules();
-}