feat(feature-targeting): Elevation, ripple, theme, typography (#4383)

material-components · Feb 12, 2019 · 4c2a63c · 4c2a63c
1 parent 49f62de
commit 4c2a63c
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss
@@ -25,6 +25,27 @@
 @import "@material/theme/variables";
 @import "./variables";
 
+@mixin mdc-elevation-core-styles($query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @for $z-value from 0 through 24 {
+    .mdc-elevation--z#{$z-value} {
+      @include mdc-elevation($z-value, $query: $query);
+    }
+  }
+
+  .mdc-elevation-transition {
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-elevation-transition-value();
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      will-change: $mdc-elevation-property;
+    }
+  }
+}
+
 // Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
 // The $z-value must be between 0 and 24.
 // If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use

diff --git a/packages/mdc-elevation/mdc-elevation.scss b/packages/mdc-elevation/mdc-elevation.scss
@@ -21,14 +21,4 @@
 //
 
 @import "./mixins";
-
-@for $z-value from 0 through 24 {
-  .mdc-elevation--z#{$z-value} {
-    @include mdc-elevation($z-value);
-  }
-}
-
-.mdc-elevation-transition {
-  transition: mdc-elevation-transition-value();
-  will-change: $mdc-elevation-property;
-}
+@include mdc-elevation-core-styles;
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/base/mixins";
 @import "@material/feature-targeting/functions";
@@ -29,6 +30,42 @@
 @import "./keyframes";
 @import "./variables";
 
+@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {
+  // postcss-bem-linter: define ripple-surface
+
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-ripple-surface {
+    @include mdc-ripple-surface($query: $query);
+    @include mdc-states($query: $query);
+    @include mdc-ripple-radius-bounded($query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      position: relative;
+      outline: none;
+      overflow: hidden;
+    }
+
+    &[data-mdc-ripple-is-unbounded] {
+      @include mdc-ripple-radius-unbounded($query: $query);
+
+      @include mdc-feature-targets($feat-structure) {
+        overflow: visible;
+      }
+    }
+
+    &--primary {
+      @include mdc-states(primary, $query: $query);
+    }
+
+    &--accent {
+      @include mdc-states(secondary, $query: $query);
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 @mixin mdc-ripple-common($query: mdc-feature-all()) {
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-structure: mdc-feature-create-target($query, structure);

diff --git a/packages/mdc-ripple/mdc-ripple.scss b/packages/mdc-ripple/mdc-ripple.scss
@@ -20,36 +20,6 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/functions";
-@import "@material/theme/mixins";
-@import "./common";
 @import "./mixins";
-@import "./variables";
-
-// postcss-bem-linter: define ripple-surface
-
-.mdc-ripple-surface {
-  @include mdc-ripple-surface;
-  @include mdc-states;
-  @include mdc-ripple-radius-bounded;
-
-  position: relative;
-  outline: none;
-  overflow: hidden;
-
-  &[data-mdc-ripple-is-unbounded] {
-    @include mdc-ripple-radius-unbounded;
-
-    overflow: visible;
-  }
-
-  &--primary {
-    @include mdc-states(primary);
-  }
-
-  &--accent {
-    @include mdc-states(secondary);
-  }
-}
-
-// postcss-bem-linter: end
+@include mdc-ripple-common;
+@include mdc-ripple-core-styles;
diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss
@@ -20,8 +20,47 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 
+@mixin mdc-theme-core-styles($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  :root {
+    @include mdc-feature-targets($feat-color) {
+      @each $style in map-keys($mdc-theme-property-values) {
+        --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
+      }
+    }
+  }
+
+  @each $style in map-keys($mdc-theme-property-values) {
+    @if $style != "background" and $style != "surface" {
+      .mdc-theme--#{$style} {
+        @include mdc-feature-targets($feat-color) {
+          @include mdc-theme-prop(color, $style, true);
+        }
+      }
+    } @else {
+      .mdc-theme--#{$style} {
+        @include mdc-feature-targets($feat-color) {
+          @include mdc-theme-prop(background-color, $style);
+        }
+      }
+    }
+  }
+
+  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.
+  @each $style in ("primary", "secondary") {
+    .mdc-theme--#{$style}-bg {
+      @include mdc-feature-targets($feat-color) {
+        @include mdc-theme-prop(background-color, $style, true);
+      }
+    }
+  }
+}
+
 // Applies the correct theme color style to the specified property.
 // $property is typically color or background-color, but can be any CSS property that accepts color values.
 // $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.
@@ -47,7 +86,7 @@
       @if $edgeOptOut {
         // stylelint-disable max-nesting-depth
         @at-root {
-          @supports not (-ms-ime-align:auto) {
+          @supports not (-ms-ime-align: auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
               /* @alternate */
@@ -67,7 +106,7 @@
       @if $edgeOptOut {
         // stylelint-disable max-nesting-depth
         @at-root {
-          @supports not (-ms-ime-align:auto) {
+          @supports not (-ms-ime-align: auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
               /* @alternate */

diff --git a/packages/mdc-theme/mdc-theme.scss b/packages/mdc-theme/mdc-theme.scss
@@ -21,28 +21,4 @@
 //
 
 @import "./mixins";
-
-:root {
-  @each $style in map-keys($mdc-theme-property-values) {
-    --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
-  }
-}
-
-@each $style in map-keys($mdc-theme-property-values) {
-  @if $style != "background" and $style != "surface" {
-    .mdc-theme--#{$style} {
-      @include mdc-theme-prop(color, $style, true);
-    }
-  } @else {
-    .mdc-theme--#{$style} {
-      @include mdc-theme-prop(background-color, $style);
-    }
-  }
-}
-
-// CSS rules for using primary and secondary (plus light/dark variants) as background colors.
-@each $style in ("primary", "secondary") {
-  .mdc-theme--#{$style}-bg {
-    @include mdc-theme-prop(background-color, $style, true);
-  }
-}
+@include mdc-theme-core-styles;
diff --git a/packages/mdc-theme/package.json b/packages/mdc-theme/package.json
@@ -11,5 +11,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/material-components/material-components-web.git"
+  },
+  "dependencies": {
+    "@material/feature-targeting": "^0.44.0"
   }
 }