@shortfuse/materialdesignweb 0.4.0 → 0.5.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/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/_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;