From dffe295800f1bed02a9b83612f2392981999037e Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 18 Oct 2017 12:49:11 -0700 Subject: [PATCH 1/5] feat(elevation): Update mixin to accept theme color param --- demos/elevation.html | 23 ++++++++++-------- demos/elevation.scss | 4 ++++ packages/mdc-elevation/README.md | 2 +- packages/mdc-elevation/_mixins.scss | 32 ++++++++++++++++++++------ packages/mdc-elevation/_variables.scss | 4 +--- packages/mdc-elevation/package.json | 3 ++- 6 files changed, 46 insertions(+), 22 deletions(-) diff --git a/demos/elevation.html b/demos/elevation.html index 4191308adee..50684e5230b 100644 --- a/demos/elevation.html +++ b/demos/elevation.html @@ -47,6 +47,14 @@ background: white; } + .hero .demo-surface { + width: 120px; + height: 48px; + margin: 24px 24px; + background-color: #212121; + color: #f0f0f0; + } + #hover-el { display: flex; align-items: center; @@ -54,14 +62,6 @@ padding: 2rem; border-radius: 4px; } - - .hero .demo-surface { - width: 96px; - height: 48px; - margin: 24px 24px; - background-color: #212121; - color: #f0f0f0; - } @@ -81,8 +81,11 @@
FLAT 0dp
-
-
RAISED 4dp
+
+
RAISED 8dp
+
+
+
CUSTOM 16dp
diff --git a/demos/elevation.scss b/demos/elevation.scss index 5d108822ae2..7c911107861 100644 --- a/demos/elevation.scss +++ b/demos/elevation.scss @@ -18,3 +18,7 @@ @import "../packages/mdc-elevation/mdc-elevation"; @import "../packages/mdc-typography/mdc-typography"; + +.demo-elevation--custom-color { + @include mdc-elevation(16, secondary); +} diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md index 5e88b545b73..7534e4ed3f1 100644 --- a/packages/mdc-elevation/README.md +++ b/packages/mdc-elevation/README.md @@ -55,7 +55,7 @@ CSS Class | Description Mixin | Description --- | --- -`mdc-elevation($z-value)` | Sets the elevation to the z-space for that given elevation +`mdc-elevation($z-value, $color)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color of the shadow `mdc-elevation-transition($duration, $easing)` | Applies the correct css rules to transition an element between elevations Variable | Description diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss index dedee2ca285..4b55edf6a8e 100644 --- a/packages/mdc-elevation/_mixins.scss +++ b/packages/mdc-elevation/_mixins.scss @@ -14,25 +14,43 @@ // limitations under the License. // +@import "@material/theme/variables"; @import "./variables"; /** - * Applies the correct css rules to an element to give it the elevation specified by $z-value. + * 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. + * The $color must have an alpha of 1 (e.g., `rgba(0, 0, 0, .9)` is not permitted). */ -@mixin mdc-elevation($z-value) { +@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color) { @if type-of($z-value) != number or not unitless($z-value) { - @error "$z-value must be a unitless number"; + @error "$z-value must be a unitless number, but received '#{$z-value}'"; } @if $z-value < 0 or $z-value > 24 { - @error "$z-value must be between 0 and 24"; + @error "$z-value must be between 0 and 24, but received '#{$z-value}'"; } + @if map-has-key($mdc-theme-property-values, $color) { + $color: map-get($mdc-theme-property-values, $color); + } + + @if type-of($color) != color { + @error "$color must be a valid color, but '#{$color}' is of type #{type-of($color)}"; + } + + @if alpha($color) < 1 { + @error "$color must have an alpha of 1, but '#{$color}' has an alpha of #{alpha($color)}"; + } + + $umbra-color: rgba($color, .2); + $penumbra-color: rgba($color, .14); + $ambient-color: rgba($color, .12); + #{$mdc-elevation-property}: - #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mdc-elevation-umbra-color}"}, - #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mdc-elevation-penumbra-color}"}, - #{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color; + #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$umbra-color}"}, + #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$penumbra-color}"}, + #{map-get($mdc-elevation-ambient-map, $z-value)} $ambient-color; } /** diff --git a/packages/mdc-elevation/_variables.scss b/packages/mdc-elevation/_variables.scss index 2fd17f7ed09..bee976c0e2c 100644 --- a/packages/mdc-elevation/_variables.scss +++ b/packages/mdc-elevation/_variables.scss @@ -16,9 +16,7 @@ @import "@material/animation/variables"; -$mdc-elevation-umbra-color: rgba(black, .2); -$mdc-elevation-penumbra-color: rgba(black, .14); -$mdc-elevation-ambient-color: rgba(black, .12); +$mdc-elevation-baseline-color: black; $mdc-elevation-umbra-map: ( 0: "0px 0px 0px 0px", diff --git a/packages/mdc-elevation/package.json b/packages/mdc-elevation/package.json index 3075b1065be..54db60877f2 100644 --- a/packages/mdc-elevation/package.json +++ b/packages/mdc-elevation/package.json @@ -13,6 +13,7 @@ "url": "https://github.com/material-components/material-components-web.git" }, "dependencies": { - "@material/animation": "^0.4.1" + "@material/animation": "^0.4.1", + "@material/theme": "^0.4.0" } } From 41d2155774648c67de7645237b1b5e2e4eefbb10 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 18 Oct 2017 13:37:27 -0700 Subject: [PATCH 2/5] WIP: Create variables for opacity values --- packages/mdc-elevation/_mixins.scss | 6 +++--- packages/mdc-elevation/_variables.scss | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss index 4b55edf6a8e..fc141934e85 100644 --- a/packages/mdc-elevation/_mixins.scss +++ b/packages/mdc-elevation/_mixins.scss @@ -43,9 +43,9 @@ @error "$color must have an alpha of 1, but '#{$color}' has an alpha of #{alpha($color)}"; } - $umbra-color: rgba($color, .2); - $penumbra-color: rgba($color, .14); - $ambient-color: rgba($color, .12); + $umbra-color: rgba($color, $mdc-elevation-umbra-opacity); + $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity); + $ambient-color: rgba($color, $mdc-elevation-ambient-opacity); #{$mdc-elevation-property}: #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$umbra-color}"}, diff --git a/packages/mdc-elevation/_variables.scss b/packages/mdc-elevation/_variables.scss index bee976c0e2c..938d8637f01 100644 --- a/packages/mdc-elevation/_variables.scss +++ b/packages/mdc-elevation/_variables.scss @@ -17,6 +17,9 @@ @import "@material/animation/variables"; $mdc-elevation-baseline-color: black; +$mdc-elevation-umbra-opacity: .2; +$mdc-elevation-penumbra-opacity: .14; +$mdc-elevation-ambient-opacity: .12; $mdc-elevation-umbra-map: ( 0: "0px 0px 0px 0px", From ab84f855e71fb36c712ee4cd767698e67ea8bba0 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 18 Oct 2017 18:52:25 -0700 Subject: [PATCH 3/5] WIP: Extract variables to improve readability --- packages/mdc-elevation/_mixins.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss index fc141934e85..f6ac50fa37e 100644 --- a/packages/mdc-elevation/_mixins.scss +++ b/packages/mdc-elevation/_mixins.scss @@ -43,14 +43,18 @@ @error "$color must have an alpha of 1, but '#{$color}' has an alpha of #{alpha($color)}"; } + $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value); + $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value); + $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value); + $umbra-color: rgba($color, $mdc-elevation-umbra-opacity); $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity); $ambient-color: rgba($color, $mdc-elevation-ambient-opacity); - #{$mdc-elevation-property}: - #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$umbra-color}"}, - #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$penumbra-color}"}, - #{map-get($mdc-elevation-ambient-map, $z-value)} $ambient-color; + box-shadow: + #{"#{$umbra-z-value} #{$umbra-color}"}, + #{"#{$penumbra-z-value} #{$penumbra-color}"}, + #{$ambient-z-value} $ambient-color; } /** From b0f154ac196e1e2e438e68cb2676dad0b7664e23 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 18 Oct 2017 19:30:54 -0700 Subject: [PATCH 4/5] WIP: Add $opacity-boost param --- demos/elevation.scss | 2 +- packages/mdc-elevation/README.md | 2 +- packages/mdc-elevation/_mixins.scss | 15 ++++++--------- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/demos/elevation.scss b/demos/elevation.scss index 7c911107861..fdd92bf4f5e 100644 --- a/demos/elevation.scss +++ b/demos/elevation.scss @@ -20,5 +20,5 @@ @import "../packages/mdc-typography/mdc-typography"; .demo-elevation--custom-color { - @include mdc-elevation(16, secondary); + @include mdc-elevation(16, $color: secondary-dark, $opacity-boost: .1); } diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md index 7534e4ed3f1..5687c50b5c3 100644 --- a/packages/mdc-elevation/README.md +++ b/packages/mdc-elevation/README.md @@ -55,7 +55,7 @@ CSS Class | Description Mixin | Description --- | --- -`mdc-elevation($z-value, $color)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color of the shadow +`mdc-elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow `mdc-elevation-transition($duration, $easing)` | Applies the correct css rules to transition an element between elevations Variable | Description diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss index f6ac50fa37e..4f5465d0bab 100644 --- a/packages/mdc-elevation/_mixins.scss +++ b/packages/mdc-elevation/_mixins.scss @@ -20,9 +20,10 @@ /** * 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. - * The $color must have an alpha of 1 (e.g., `rgba(0, 0, 0, .9)` is not permitted). + * If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use + * $opacity-boost. */ -@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color) { +@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) { @if type-of($z-value) != number or not unitless($z-value) { @error "$z-value must be a unitless number, but received '#{$z-value}'"; } @@ -39,17 +40,13 @@ @error "$color must be a valid color, but '#{$color}' is of type #{type-of($color)}"; } - @if alpha($color) < 1 { - @error "$color must have an alpha of 1, but '#{$color}' has an alpha of #{alpha($color)}"; - } - $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value); $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value); $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value); - $umbra-color: rgba($color, $mdc-elevation-umbra-opacity); - $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity); - $ambient-color: rgba($color, $mdc-elevation-ambient-opacity); + $umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost); + $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost); + $ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost); box-shadow: #{"#{$umbra-z-value} #{$umbra-color}"}, From 78d98a151e2f59791dff5ef5ae2619945214cbf5 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Fri, 3 Nov 2017 12:59:05 -0700 Subject: [PATCH 5/5] WIP: Remove unnecessary param name --- demos/elevation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/elevation.scss b/demos/elevation.scss index fdd92bf4f5e..1cab9a70253 100644 --- a/demos/elevation.scss +++ b/demos/elevation.scss @@ -20,5 +20,5 @@ @import "../packages/mdc-typography/mdc-typography"; .demo-elevation--custom-color { - @include mdc-elevation(16, $color: secondary-dark, $opacity-boost: .1); + @include mdc-elevation(16, secondary-dark, $opacity-boost: .1); }