feat(ripple): css variable color

ionic-team · Mar 24, 2018 · 77fc792 · 77fc792
1 parent 08f5976
commit 77fc792
Show file tree

Hide file tree

Showing 12 changed files with 11 additions and 37 deletions.
diff --git a/core/scripts/theme-builder/src/theme-variables.ts b/core/scripts/theme-builder/src/theme-variables.ts
@@ -242,6 +242,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [
   {
     property: '--ion-overlay-background-color'
   },
+  {
+    property: '--ion-ripple-background-color'
+  },
   {
     property: '--ion-background-color',
     quickPick: {

diff --git a/core/src/components/ripple-effect/ripple-effect.ios.scss b/core/src/components/ripple-effect/ripple-effect.ios.scss
diff --git a/core/src/components/ripple-effect/ripple-effect.ios.vars.scss b/core/src/components/ripple-effect/ripple-effect.ios.vars.scss
diff --git a/core/src/components/ripple-effect/ripple-effect.md.scss b/core/src/components/ripple-effect/ripple-effect.md.scss
diff --git a/core/src/components/ripple-effect/ripple-effect.md.vars.scss b/core/src/components/ripple-effect/ripple-effect.md.vars.scss
diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals";
+@import "../../themes/ionic.theme.default";
+
 
 // Material Design Ripple Effect
 // --------------------------------------------------
@@ -17,10 +19,10 @@ ion-ripple-effect {
   @include border-radius(50%);
   position: absolute;
 
+  background-color: $ripple-background-color;
   opacity: 0;
 
   will-change: transform, opacity;
-
   pointer-events: none;
   animation-name: rippleAnimation;
   animation-duration: 200ms;

diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -4,13 +4,7 @@ import { DomController } from '../../global/dom-controller';
 
 @Component({
   tag: 'ion-ripple-effect',
-  styleUrls: {
-    ios: 'ripple-effect.ios.scss',
-    md: 'ripple-effect.md.scss'
-  },
-  host: {
-    theme: 'ripple'
-  }
+  styleUrl: 'ripple-effect.scss',
 })
 export class RippleEffect {
 

diff --git a/core/src/themes/css/default.css b/core/src/themes/css/default.css
@@ -69,6 +69,7 @@
   --ion-color-dark-tint: #383838;
   --ion-backdrop-color: #000000;
   --ion-overlay-background-color: #fafafa;
+  --ion-ripple-background-color: #000000;
   --ion-background-color: #ffffff;
   --ion-background-color-rgb:  255,255,255;
   --ion-background-color-step-50: #f2f2f2;

diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
@@ -22,7 +22,7 @@ $alpha-ios-border-high:                       css-var($alpha-border-high, alpha-
 $alpha-ios-disabled:                          css-var($alpha-disabled, alpha-ios-disabled) !default;
 $alpha-ios-focused:                           css-var($alpha-focused, alpha-ios-focused) !default;
 $alpha-ios-hover:                             css-var($alpha-hover, alpha-ios-hover) !default;
-$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default
+$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default;
 $alpha-ios-low:                               css-var($alpha-low, alpha-ios-low) !default;
 $alpha-ios-medium:                            css-var($alpha-medium, alpha-ios-medium) !default;
 $alpha-ios-high:                              css-var($alpha-high, alpha-ios-high) !default;

diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
@@ -22,7 +22,7 @@ $alpha-md-border-high:                  css-var($alpha-border-high, alpha-md-bor
 $alpha-md-disabled:                     css-var($alpha-disabled, alpha-md-disabled) !default;
 $alpha-md-focused:                      css-var(.1, alpha-md-focused) !default;
 $alpha-md-hover:                        css-var($alpha-hover, alpha-md-hover) !default;
-$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default
+$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default;
 $alpha-md-low:                          css-var($alpha-low, alpha-md-low) !default;
 $alpha-md-medium:                       css-var($alpha-medium, alpha-md-medium) !default;
 $alpha-md-high:                         css-var($alpha-high, alpha-md-high) !default;

diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss
@@ -167,6 +167,7 @@ $backdrop-color:                        css-var(#000, backdrop-color) !default;
 $border-color:                          css-var(#b2b2b2, border-color) !default;
 $box-shadow-color:                      css-var(#000, box-shadow-color) !default;
 $overlay-background-color:              css-var(#fafafa, overlay-background-color) !default;
+$ripple-background-color:               css-var(#000, ripple-background-color) !default;
 
 // Default Tabs & Tab bar
 // --------------------------------------------------

diff --git a/core/stencil.config.js b/core/stencil.config.js
@@ -21,7 +21,6 @@ exports.config = {
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
     { components: ['ion-modal', 'ion-modal-controller'] },
-    { components: ['ion-nav', 'ion-back-button'] },
     { components: ['ion-popover', 'ion-popover-controller'] },
     { components: ['ion-radio', 'ion-radio-group'] },
     { components: ['ion-reorder', 'ion-reorder-group'] },