chore(item): don't set ion-color properties

references #14808
ionic-team · Sep 20, 2018 · a9af2f5 · a9af2f5
1 parent c7d4b02
commit a9af2f5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
@@ -5,10 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: var(--ion-item-background-color, transparent);
-  --ion-color-contrast: #{$item-ios-text-color};
-  --ion-color-tint: #{$item-ios-background-color-active};
-  --ion-color-shade: #{$item-ios-border-bottom-color};
   --transition: background-color 200ms linear;
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};
@@ -17,6 +13,14 @@
   font-size: $item-ios-font-size;
 }
 
+:host(:not(.ion-color)) {
+  --background: var(--ion-item-background-color, transparent);
+  --background-activated: #{$item-ios-background-color-active};
+  --border-color: #{$item-ios-border-bottom-color};
+  --color: #{$item-ios-text-color};
+  --detail-push-color: #{$item-ios-border-bottom-color};
+}
+
 :host(.activated) {
   --transition: none;
 }

diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
@@ -6,10 +6,6 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: var(--ion-item-background-color, transparent);
-  --ion-color-contrast: #{$item-md-text-color};
-  --ion-color-tint: #{$item-md-background-color-active};
-  --ion-color-shade: #{$item-md-border-bottom-color};
   --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
   --padding-start: #{$item-md-padding-start};
   --inner-padding-end: #{$item-md-padding-end / 2};
@@ -21,6 +17,15 @@
   text-transform: none;
 }
 
+:host(:not(.ion-color)) {
+  --background: var(--ion-item-background-color, transparent);
+  --background-activated: #{$item-md-background-color-active};
+  --border-color: #{$item-md-border-bottom-color};
+  --color: #{$item-md-text-color};
+  --detail-push-color: #{$item-md-border-bottom-color};
+}
+
+
 // Material Design Item Lines
 // --------------------------------------------------
 

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -6,7 +6,7 @@
 :host {
   --min-height: #{$item-min-height};
   --background: #{current-color(base)};
-  --background-active: #{current-color(tint)};
+  --background-activated: #{current-color(tint)};
   --color: #{current-color(contrast)};
   --detail-push-color: #{current-color(shade)};
   --border-radius: 0;
@@ -33,7 +33,7 @@
 
   display: block;
 
-  color: #{current-color(contrast)};
+  color: var(--color);
 
   font-family: $font-family-base;
 
@@ -43,8 +43,8 @@
   box-sizing: border-box;
 }
 
-:host(.activated) {
-  --background: var(--background-active);
+:host(.activated) .item-native {
+  background: var(--background-activated);
 }
 
 :host(.item-disabled) {
@@ -77,7 +77,7 @@
 
   outline: none;
 
-  background-color: var(--background);
+  background: var(--background);
 
   box-shadow: var(--box-shadow);
   overflow: hidden;