@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/core/color/_theme.scss

@@ -1,212 +1,219 @@
 // https://material.io/design/interaction/states.html
 
-@import '../theme/index.scss';
-
-$mdw-color__theme-values: (
-  default-ink:            (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-
-  high-ink-opacity:       (0.87, 1.00),
-  medium-ink-opacity:     (0.60, 0.70),
-  inactive-ink-opacity:   (0.38, 0.50),
-  divider-ink-opacity:    (0.12, 0.24),
-
-  primary-ink:            (('primary',   'A700', 1.00), ('primary',   'A200', 1.00)),
-  secondary-ink:          (('secondary', 'A700', 1.00), ('secondary', 'A200', 1.00)),
-  warn-ink:               (('warn',      'A700', 1.00), ('warn',      'A200', 1.00)),
-  primary-contrast-ink:   (('primary',   'A700', 1.00), ('primary',   'A100', 1.00)),
-  secondary-contrast-ink: (('secondary', 'A700', 1.00), ('secondary', 'A100', 1.00)),
-  warn-contrast-ink:      (('warn',      'A700', 1.00), ('warn',      'A100', 1.00)),
-  primary-light-ink:      (('primary',   'A400', 1.00), ('primary',   'A100', 1.00)),
-  secondary-light-ink:    (('secondary', 'A400', 1.00), ('secondary', 'A100', 1.00)),
-  warn-light-ink:         (('warn',      'A400', 1.00), ('warn',      'A100', 1.00)),
-
-  card-surface:           ((#fff, 1.00),               ('background', '800', 1.00)),
-  binary-surface:         ((#fff, 1.00),               (#000, 1.00)),
-  background-surface:     (('background', '50', 1.00), ('background', '900', 1.00)),
-  primary-surface:        (('primary',    '50', 1.00), ('primary',    '900', 1.00)),
-  secondary-surface:      (('secondary',  '50', 1.00), ('secondary',  '900', 1.00)),
-  warn-surface:           (('warn',       '50', 1.00), ('warn',       '900', 1.00)),
-
-  background-alt-surface: (('background', '100', 1.00), ('background', '800', 1.00)),
-  primary-alt-surface:    (('primary',    '100', 1.00), ('primary',    '800', 1.00)),
-  secondary-alt-surface:  (('secondary',  '100', 1.00), ('secondary',  '800', 1.00)),
-  warn-alt-surface:       (('warn',       '100', 1.00), ('warn',       '800', 1.00)),
+@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;
 
-@function mdwColorThemeValue($key, $type) {
-  @return mdwGetThemeValue('color', $mdw-color__theme-values, $key, $type);
+@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);
 }
 
-@mixin mdw-color__theme-rules($type: 'var') {
+@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 {
-      &[mdw-surface] {
-        background-color: RGB(var(--surface-color));
-      }
-
-      &svg[mdw-surface] {
-        background-color: transparent;
+      /** Surface Colors **/
 
-        fill: RGBA(var(--surface-color));
+      &[mdw-surface] {
+        background-color: RGB(var(--mdw-surface));
       }
+    }
 
-      @each $color in ('primary', 'secondary', 'warn', 'background') {
-        &[mdw-surface~="#{$color}"] {
-          @each $tone in $mdw-theme__tone-list {
-            --#{$tone}-surface: var(--#{$color}-#{$tone}-color);
-          }
-        }
-    
-        &[mdw-ink~="#{$color}"] {
-          @each $tone in $mdw-theme__tone-list {
-            --#{$tone}-color: var(--#{$color}-#{$tone}-color);
-          }
-        }
-      }
+    svg.mdw-theme[mdw-surface] {
+      background-color: transparent;
 
-      &[mdw-ink] {
-        --ink-color: #{mdwColorThemeValue("default-ink", $type)};
-        --ink-opacity: #{mdwColorThemeValue("high-ink-opacity", $type)};
-        color: RGBA(var(--ink-color),var(--ink-opacity));
-      }
+      fill: RGB(var(--mdw-surface));
+    }
 
+    .mdw-theme {
       &[mdw-surface]:not([mdw-ink]) {
-        --ink-color: #{mdwColorThemeValue("default-ink", $type)};
-        --ink-opacity: #{mdwColorThemeValue("high-ink-opacity", $type)};
-        color: RGBA(var(--ink-color),var(--ink-opacity));
+        --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"] {
-        --surface-color: 255,255,255;
+        --mdw-surface: 255,255,255;
       }
 
       &[mdw-surface="black"] {
-        --surface-color: 0,0,0;
+        --mdw-surface: 0,0,0;
       }
 
       &[mdw-surface="binary"] {
-        --surface-color: #{mdwColorThemeValue("binary-surface", $type)};
+        --mdw-surface: #{getThemeValue("binary-surface", $type)};
       }
     
       &[mdw-surface="card"] {
-        --surface-color: #{mdwColorThemeValue("card-surface", $type)};
-      }
-    
-      &[mdw-surface="background"] {
-        --surface-color: #{mdwColorThemeValue("background-surface", $type)};
-      }
-    
-      &[mdw-surface="primary"] {
-        --surface-color: #{mdwColorThemeValue("primary-surface", $type)};
-      }
-    
-      &[mdw-surface="secondary"] {
-        --surface-color: #{mdwColorThemeValue("secondary-surface", $type)};
+        --mdw-surface: #{getThemeValue("card-surface", $type)};
       }
-    
-      &[mdw-surface="warn"] {
-        --surface-color: #{mdwColorThemeValue("warn-surface", $type)};
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface~="#{$surface}"] {
+          --mdw-surface: #{getThemeValue("#{$surface}-default-surface", $type)};
+        }
       }
       
-      &[mdw-surface="background alt"] {
-        --surface-color: #{mdwColorThemeValue("background-alt-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)};
+          }
+        }
       }
-    
-      &[mdw-surface="primary alt"] {
-        --surface-color: #{mdwColorThemeValue("primary-alt-surface", $type)};
+
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface} alt"] {
+          --mdw-surface: #{getThemeValue("#{$surface}-alt-surface", $type)};
+        }
       }
-    
-      &[mdw-surface="secondary alt"] {
-        --surface-color: #{mdwColorThemeValue("secondary-alt-surface", $type)};
+
+      @each $tone in theme.$surface-tones {
+        &[mdw-surface~="#{$tone}"] {
+          --mdw-surface: var(--#{$tone}-surface);
+        }
       }
-    
-      &[mdw-surface="warn alt"] {
-        --surface-color: #{mdwColorThemeValue("warn-alt-surface", $type)};
+
+      /** 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"] {
-        --ink-color: 255,255,255;
+        --mdw-ink: 255,255,255;
       }
 
       &[mdw-ink~="black"] {
-        --ink-color: 0,0,0;
+        --mdw-ink: 0,0,0;
       }
 
-      &[mdw-ink~="default"] {
-        --ink-color: #{mdwColorThemeValue("default-ink", $type)};
+      @each $ink in $sortedInks {
+        &[mdw-ink~="#{$ink}"] {
+          --mdw-ink: #{getThemeValue("#{$ink}-default-ink", $type)};
+        }
       }
 
-      &[mdw-ink~="primary"] {
-        --ink-opacity: 1;
-        --ink-color: #{mdwColorThemeValue("primary-ink", $type)};
-      }
-    
-      &[mdw-ink~="secondary"] {
-        --ink-opacity: 1;
-        --ink-color: #{mdwColorThemeValue("secondary-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)};
+          }
+        }
       }
-    
-      &[mdw-ink~="warn"] {
-        --ink-opacity: 1;
-        --ink-color: #{mdwColorThemeValue("warn-ink", $type)};
+
+      @each $ink in $sortedInks {
+        &[mdw-ink^="#{$ink} contrast"] {
+          --mdw-ink: #{getThemeValue("#{$ink}-contrast-ink", $type)};
+        }
       }
 
-      @each $tone in $mdw-theme__tone-list {
-        &[mdw-surface~="#{$tone}"] {
-          --surface-color: var(--#{$tone}-surface);
+      @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}"] {
-          --ink-color: var(--#{$tone}-color);
+          --mdw-ink: var(--mdw-ink-#{$tone});
         }
       }
 
-      &[mdw-ink^="primary contrast"] {
-        --ink-color: #{mdwColorThemeValue("primary-contrast-ink", $type)};
-      }
-    
-      &[mdw-ink^="secondary contrast"] {
-        --ink-color: #{mdwColorThemeValue("secondary-contrast-ink", $type)};
-      }
-    
-      &[mdw-ink^="warn contrast"] {
-        --ink-color: #{mdwColorThemeValue("warn-contrast-ink", $type)};
-      }
+      /** Ink Opacity **/
 
-      &[mdw-ink^="primary light"] {
-        --ink-color: #{mdwColorThemeValue("primary-light-ink", $type)};
+      &[mdw-ink~="solid"] {
+        --mdw-ink-opacity: 1;
       }
-    
-      &[mdw-ink^="secondary light"] {
-        --ink-color: #{mdwColorThemeValue("secondary-light-ink", $type)};
-      }
-    
-      &[mdw-ink^="warn light"] {
-        --ink-color: #{mdwColorThemeValue("warn-light-ink", $type)};
-      }
-    
+
       &[mdw-ink~="high"] {
-        --ink-opacity: #{mdwColorThemeValue("high-ink-opacity", $type)};
+        --mdw-ink-opacity: #{getThemeValue("high-ink-opacity", $type)};
       }
     
       &[mdw-ink~="medium"] {
-        --ink-opacity: #{mdwColorThemeValue("medium-ink-opacity", $type)};
+        --mdw-ink-opacity: #{getThemeValue("medium-ink-opacity", $type)};
       }
     
       &[mdw-ink~="inactive"] {
-        --ink-opacity: #{mdwColorThemeValue("inactive-ink-opacity", $type)};
+        --mdw-ink-opacity: #{getThemeValue("inactive-ink-opacity", $type)};
       }
     
       &[mdw-ink~="divider"] {
-        --ink-opacity: #{mdwColorThemeValue("divider-ink-opacity", $type)};
+        --mdw-ink-opacity: #{getThemeValue("divider-ink-opacity", $type)};
       }
 
+      /** Border Ink **/
+
       &[mdw-border-ink] {
-        border-color: #{RGBA(var(--ink-color), mdwColorThemeValue("divider-ink-opacity", $type))};
+        border-color: #{RGBA(var(--mdw-ink), getThemeValue("divider-ink-opacity", $type))};
       }
 
       &[mdw-border-ink="default"] {
-        border-color: #{RGBA(mdwColorThemeValue("default-ink", $type), mdwColorThemeValue("divider-ink-opacity", $type))};
+        border-color: #{RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type))};
       }
 
       &[mdw-border-ink="none"] {
@@ -217,104 +224,79 @@ $mdw-color__theme-values: (
     & {
       &[mdw-ink="default"],
       &[mdw-surface]:not([mdw-ink]) {
-        color: rgba(mdwColorThemeValue("default-ink", $type),mdwColorThemeValue("high-ink-opacity", $type));
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
       }
       
       &[mdw-surface="binary"] {
-        background-color: #{mdwColorThemeValue("binary-surface", $type)};
+        background-color: RGB(getThemeValue("binary-surface", $type));
       }
     
       &[mdw-surface="card"] {
-        background-color: #{mdwColorThemeValue("card-surface", $type)};
-      }
-    
-      &[mdw-surface="background"] {
-        background-color: #{mdwColorThemeValue("background-surface", $type)};
-      }
-    
-      &[mdw-surface="primary"] {
-        background-color: #{mdwColorThemeValue("primary-surface", $type)};
-      }
-    
-      &[mdw-surface="secondary"] {
-        background-color: #{mdwColorThemeValue("secondary-surface", $type)};
-      }
-    
-      &[mdw-surface="warn"] {
-        background-color: #{mdwColorThemeValue("warn-surface", $type)};
-      }
-      
-      &[mdw-surface="background alt"] {
-        background-color: #{mdwColorThemeValue("background-alt-surface", $type)};
-      }
-    
-      &[mdw-surface="primary alt"] {
-        background-color: #{mdwColorThemeValue("primary-alt-surface", $type)};
-      }
-    
-      &[mdw-surface="secondary alt"] {
-        background-color: #{mdwColorThemeValue("secondary-alt-surface", $type)};
-      }
-    
-      &[mdw-surface="warn alt"] {
-        background-color: #{mdwColorThemeValue("warn-alt-surface", $type)};
+        background-color: RGB(getThemeValue("card-surface", $type));
       }
 
-      &[mdw-ink~="primary"] {
-        color: #{mdwColorThemeValue("primary-ink", $type)};
-      }
-    
-      &[mdw-ink~="secondary"] {
-        color: #{mdwColorThemeValue("secondary-ink", $type)};
-      }
-    
-      &[mdw-ink~="warn"] {
-        color: #{mdwColorThemeValue("warn-ink", $type)};
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface}"] {
+          background-color: RGB(getThemeValue("#{$surface}-default-surface", $type));
+        }
       }
 
-      &[mdw-ink^="primary contrast"] {
-        color: #{mdwColorThemeValue("primary-contrast-ink", $type)};
-      }
-    
-      &[mdw-ink^="secondary contrast"] {
-        color: #{mdwColorThemeValue("secondary-contrast-ink", $type)};
-      }
-    
-      &[mdw-ink^="warn contrast"] {
-        color: #{mdwColorThemeValue("warn-contrast-ink", $type)};
+      @each $surface in $sortedSurfaces {
+        &[mdw-surface="#{$surface} alt"] {
+          background-color: RGB(getThemeValue("#{$surface}-alt-surface", $type));
+        }
       }
 
-      &[mdw-ink^="primary light"] {
-        color: #{mdwColorThemeValue("primary-light-ink", $type)};
-      }
-    
-      &[mdw-ink^="secondary light"] {
-        color: #{mdwColorThemeValue("secondary-light-ink", $type)};
-      }
-    
-      &[mdw-ink^="warn light"] {
-        color: #{mdwColorThemeValue("warn-light-ink", $type)};
+      &[mdw-ink~="solid"] {
+        color: RGB(getThemeValue("default-ink", $type));
       }
 
       &[mdw-ink~="high"] {
-        color: rgba(mdwColorThemeValue("default-ink", $type),mdwColorThemeValue("high-ink-opacity", $type));
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("high-ink-opacity", $type));
       }
     
       &[mdw-ink~="medium"] {
-        color: rgba(mdwColorThemeValue("default-ink", $type),mdwColorThemeValue("medium-ink-opacity", $type));
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("medium-ink-opacity", $type));
       }
     
       &[mdw-ink~="inactive"] {
-        color: rgba(mdwColorThemeValue("default-ink", $type),mdwColorThemeValue("inactive-ink-opacity", $type));
+        color: RGBA(getThemeValue("default-ink", $type),getThemeValue("inactive-ink-opacity", $type));
       }
     
       &[mdw-ink~="divider"] {
-        color: rgba(mdwColorThemeValue("default-ink", $type),mdwColorThemeValue("divider-ink-opacity", $type));
+        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(mdwColorThemeValue("default-ink", $type), mdwColorThemeValue("divider-ink-opacity", $type));
+        border-color: RGBA(getThemeValue("default-ink", $type), getThemeValue("divider-ink-opacity", $type));
       }
 
       &[mdw-border-ink="none"] {
@@ -324,7 +306,7 @@ $mdw-color__theme-values: (
   }
 }
 
-@mixin __mdw-color__add-fallbacks() {
+@mixin addThemeFallbackRules() {
   .mdw-theme[mdw-surface="white"] {
     background-color: #fff;
   }
@@ -333,98 +315,76 @@ $mdw-color__theme-values: (
     background-color: #000;
   }
 
-  .mdw-theme[mdw-ink="white"] {
-    color: #fff;
-  }
-
-  .mdw-theme[mdw-ink="black"] {
-    color: #000;
-  }
-
-  @each $tone in $mdw-theme__tone-list {
-    @each $param in ('primary', 'secondary', 'warn', 'background') {
-      $palette: mdwGetThemeParamValue($param);
+  @each $surface in $sortedSurfaces {
+    $palette: theme.getThemeParamValue($surface);
+    @each $tone in theme.$surface-tones {
       $value: map-get($palette, $tone);
 
-      .mdw-theme[mdw-surface="#{$param} #{$tone}"] {
+      .mdw-theme[mdw-surface="#{$surface} #{$tone}"] {
         background-color: #{$value};
       }
+    }
+  }
 
-      .mdw-theme[mdw-ink^="#{$param} #{$tone}"] {
-        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 $color in $mdw-theme__colors {
-      $palette: map-get($mdw-theme__palettes, $color);
+  }
+
+  @each $tone in theme.$surface-tones {
+    @each $surface in $sortedSurfaces {
+      $palette: theme.getThemeParamValue($surface);
       $value: map-get($palette, $tone);
 
-      .mdw-theme[mdw-surface^="#{$color} #{$tone}"] {
+      .mdw-theme[mdw-surface^="#{$surface} #{$tone}"] {
         background-color: #{$value};
       }
+    }
+  }
 
-      .mdw-theme[mdw-ink^="#{$color} #{$tone}"] {
-        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 mdw-color__theme-rules('light');
+    @include addThemeRules('light');
   }
 
   .mdw-theme[mdw-dark],
   .mdw-theme[mdw-dark] .mdw-theme:not([mdw-light]) {
-    @include mdw-color__theme-rules('dark');
+    @include addThemeRules('dark');
   }
 }
 
-@if ($mdw-theme__fallbacks == 'ieonly') {
-  @include mdw-platform__ie() {
-    @include __mdw-color__add-fallbacks();
+@if (theme.$fallbacks == 'ieonly') {
+  @include platform.ifIE() {
+    @include addThemeFallbackRules();
   }
-} @else if ($mdw-theme__fallbacks != false) {
-  @include __mdw-color__add-fallbacks();
+} @else if (theme.$fallbacks != false) {
+  @include addThemeFallbackRules();
 }
 
-
-@include mdw-theme__add-component-variable-rules('color', $mdw-color__theme-values, true) {
-  @each $color in $mdw-theme__colors {
-    $palette: map-get($mdw-theme__palettes, $color);
-    @each $tone in map-keys(map-remove($palette, "light", "dark")) {
-      $value: map-get($palette, $tone);
-
-      :root {
-        --#{$color}-#{$tone}-color: #{red($value),green($value),blue($value)};
-      }
-    }
-
-    .mdw-theme[mdw-surface~="#{$color}"] {
-      @each $tone in $mdw-theme__tone-list {
-        --#{$tone}-surface: var(--#{$color}-#{$tone}-color);
-      }
-    }
-
-    .mdw-theme[mdw-ink~="#{$color}"] {
-      @each $tone in $mdw-theme__tone-list {
-        --#{$tone}-color: var(--#{$color}-#{$tone}-color);
-      }
-    }
-  }
-
-  :root,
-  .mdw-theme {
-    --foreground-light-color: #{red($mdw-theme__foreground-light),green($mdw-theme__foreground-light),blue($mdw-theme__foreground-light)};
-    --foreground-dark-color: #{red($mdw-theme__foreground-dark),green($mdw-theme__foreground-dark),blue($mdw-theme__foreground-dark)};
-    @each $param in ('primary', 'secondary', 'warn', 'background') {
-      $palette: mdwGetThemeParamValue($param);
-      @each $tone in map-keys(map-remove($palette, "light", "dark")) {
-        $value: map-get($palette, $tone);
-    
-        --#{$param}-#{$tone}-color: #{red($value),green($value),blue($value)};
-      }
-    }
-  }
-
-  @include mdw-color__theme-rules();
+@include theme.addComponentCSSVariableRules('color', $themeValues) {
+  @include addThemeRules();
 }

package/core/color/index.scss

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