diff --git a/packages/core/src/components/popover/popover.vars.scss b/packages/core/src/components/popover/popover.vars.scss
index ef72cfe9a1..e21c162d17 100644
--- a/packages/core/src/components/popover/popover.vars.scss
+++ b/packages/core/src/components/popover/popover.vars.scss
@@ -1,7 +1 @@
@import "../../themes/ionic.globals";
-
-// Popover
-// --------------------------------------------------
-
-/// @prop - Color of the popover backdrop
-$popover-backdrop-color: #000 !default;
diff --git a/packages/core/src/components/radio/radio.ios.scss b/packages/core/src/components/radio/radio.ios.scss
index bb09bade06..0be38776f3 100644
--- a/packages/core/src/components/radio/radio.ios.scss
+++ b/packages/core/src/components/radio/radio.ios.scss
@@ -61,11 +61,11 @@
width: 36px;
height: 36px;
- background: #86a8df;
+ background: $radio-ios-background-color-focused;
content: "";
- opacity: .3;
+ opacity: .2;
}
@@ -99,7 +99,8 @@
// iOS Radio Color Mixin
// --------------------------------------------------
-@mixin radio-theme-ios($color-name, $color-base) {
+@mixin radio-theme-ios($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
.item-radio-ios-#{$color-name}.item-radio-checked ion-label {
color: $color-base;
@@ -112,13 +113,12 @@
.radio-ios-#{$color-name} .radio-checked .radio-inner {
border-color: $color-base;
}
-
}
// Generate iOS Radio Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- @include radio-theme-ios($color-name, $color-base);
+@each $color-name, $color-value in $colors-ios {
+ @include radio-theme-ios($color-name);
}
diff --git a/packages/core/src/components/radio/radio.ios.vars.scss b/packages/core/src/components/radio/radio.ios.vars.scss
index c143f2c49e..39fb3fc225 100644
--- a/packages/core/src/components/radio/radio.ios.vars.scss
+++ b/packages/core/src/components/radio/radio.ios.vars.scss
@@ -6,7 +6,10 @@
// --------------------------------------------------
/// @prop - Color of the checked radio
-$radio-ios-color-on: color($colors-ios, primary) !default;
+$radio-ios-color-on: ion-color($colors-ios, primary, base, ios) !default;
+
+/// @prop - Background color of focus indicator for radio when focused
+$radio-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default;
/// @prop - Width of the radio icon
$radio-ios-icon-width: 16px !default;
diff --git a/packages/core/src/components/radio/radio.md.scss b/packages/core/src/components/radio/radio.md.scss
index 6953bd0fd2..0f4c539a25 100644
--- a/packages/core/src/components/radio/radio.md.scss
+++ b/packages/core/src/components/radio/radio.md.scss
@@ -83,11 +83,11 @@
width: 36px;
height: 36px;
- background: #86a8df;
+ background: $radio-md-background-color-focused;
content: "";
- opacity: .3;
+ opacity: .2;
}
@@ -121,7 +121,8 @@
// Material Design Radio Color Mixin
// --------------------------------------------------
-@mixin radio-theme-md($color-name, $color-base, $color-contrast) {
+@mixin radio-theme-md($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
.item-radio-md-#{$color-name}.item-radio-checked ion-label {
color: $color-base;
@@ -134,13 +135,12 @@
.radio-md-#{$color-name} .radio-inner {
background-color: $color-base;
}
-
}
// Generate Material Design Radio Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
- @include radio-theme-md($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-md {
+ @include radio-theme-md($color-name);
}
diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss
index 0372c76d57..d8fdf21c07 100644
--- a/packages/core/src/components/radio/radio.md.vars.scss
+++ b/packages/core/src/components/radio/radio.md.vars.scss
@@ -6,10 +6,13 @@
// --------------------------------------------------
/// @prop - Color of the checked radio
-$radio-md-color-on: color($colors-md, primary) !default;
+$radio-md-color-on: ion-color($colors-md, primary, base, md) !default;
+
+/// @prop - Background color of focus indicator for radio when focused
+$radio-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default;
/// @prop - Color of the unchecked radio
-$radio-md-color-off: darken($list-md-border-color, 40%) !default;
+$radio-md-color-off: $text-md-color-step-300 !default;
/// @prop - Width of the radio icon
$radio-md-icon-width: 16px !default;
diff --git a/packages/core/src/components/range/range.ios.scss b/packages/core/src/components/range/range.ios.scss
index 776a11b013..2b1ce206c2 100644
--- a/packages/core/src/components/range/range.ios.scss
+++ b/packages/core/src/components/range/range.ios.scss
@@ -136,7 +136,8 @@
// Generate iOS Range Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+@each $color-name, $color-value in $colors-ios {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
.range-ios-#{$color-name} {
.range-bar-active,
@@ -144,5 +145,4 @@
background: $color-base;
}
}
-
}
diff --git a/packages/core/src/components/range/range.ios.vars.scss b/packages/core/src/components/range/range.ios.vars.scss
index ccd1a6522e..7d88af5ed1 100644
--- a/packages/core/src/components/range/range.ios.vars.scss
+++ b/packages/core/src/components/range/range.ios.vars.scss
@@ -25,10 +25,10 @@ $range-ios-hit-height: $range-ios-slider-height !default;
$range-ios-bar-height: 1px !default;
/// @prop - Background of the range bar
-$range-ios-bar-background-color: #bdbdbd !default;
+$range-ios-bar-background-color: $background-ios-color-step-200 !default;
/// @prop - Background of the active range bar
-$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
+$range-ios-bar-active-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Width of the range knob
$range-ios-knob-width: 28px !default;
@@ -43,7 +43,7 @@ $range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px
$range-ios-knob-border-radius: 50% !default;
/// @prop - Background of the range knob
-$range-ios-knob-background-color: #fff !default;
+$range-ios-knob-background-color: $background-ios-color !default;
/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height !default;
diff --git a/packages/core/src/components/range/range.md.scss b/packages/core/src/components/range/range.md.scss
index 0fcc27dcb4..726fdbb65f 100644
--- a/packages/core/src/components/range/range.md.scss
+++ b/packages/core/src/components/range/range.md.scss
@@ -168,7 +168,7 @@
.range-pin,
.range-pin::before {
- color: color-contrast($colors-md, $range-md-pin-min-background-color);
+ color: ion-color($colors-md, primary, contrast, md);
background: $range-md-pin-min-background-color;
}
}
@@ -186,14 +186,14 @@
background-color: $range-md-bar-background-color;
transform: scale(.55);
}
-
}
// Generate Material Design Range Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+@each $color-name, $color-value in $colors-md {
+ $color-base: ion-color($colors-md, $color-name, base, md);
.range-md-#{$color-name} {
@include md-range-min();
@@ -205,5 +205,4 @@
background: $color-base;
}
}
-
}
diff --git a/packages/core/src/components/range/range.md.vars.scss b/packages/core/src/components/range/range.md.vars.scss
index 643741f3b2..d3c293fa29 100644
--- a/packages/core/src/components/range/range.md.vars.scss
+++ b/packages/core/src/components/range/range.md.vars.scss
@@ -25,10 +25,10 @@ $range-md-hit-height: $range-md-slider-height !default;
$range-md-bar-height: 2px !default;
/// @prop - Background of the range bar
-$range-md-bar-background-color: #bdbdbd !default;
+$range-md-bar-background-color: $background-md-color-step-300 !default;
/// @prop - Background of the active range bar
-$range-md-bar-active-background-color: color($colors-md, primary) !default;
+$range-md-bar-active-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Width of the range knob
$range-md-knob-width: 18px !default;
@@ -55,7 +55,7 @@ $range-md-tick-height: $range-md-tick-width !default;
$range-md-tick-border-radius: 50% !default;
/// @prop - Background of the range tick
-$range-md-tick-background-color: #000 !default;
+$range-md-tick-background-color: $background-md-color !default;
/// @prop - Background of the active range tick
$range-md-tick-active-background-color: $range-md-tick-background-color !default;
@@ -64,7 +64,7 @@ $range-md-tick-active-background-color: $range-md-tick-background-color !de
$range-md-pin-background-color: $range-md-bar-active-background-color !default;
/// @prop - Color of the range pin
-$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;
+$range-md-pin-color: ion-color($colors-md, $range-md-bar-active-background-color, contrast, md) !default;
/// @prop - Font size of the range pin
$range-md-pin-font-size: 12px !default;
diff --git a/packages/core/src/components/refresher/refresher.ios.scss b/packages/core/src/components/refresher/refresher.ios.scss
new file mode 100644
index 0000000000..cc49ec9af4
--- /dev/null
+++ b/packages/core/src/components/refresher/refresher.ios.scss
@@ -0,0 +1,27 @@
+@import "./refresher";
+@import "./refresher.ios.vars";
+
+// Refresher Content
+// --------------------------------------------------
+
+.refresher-ios .refresher-pulling-icon,
+.refresher-ios .refresher-refreshing-icon {
+ color: $refresher-ios-icon-color;
+}
+
+.refresher-ios .refresher-pulling-text,
+.refresher-ios .refresher-refreshing-text {
+ color: $refresher-ios-text-color;
+}
+
+.refresher-ios .refresher-refreshing .spinner-ios line,
+.refresher-ios .refresher-refreshing .spinner-ios-small line,
+.refresher-ios .refresher-refreshing .spinner-crescent circle {
+ stroke: $refresher-ios-icon-color;
+}
+
+.refresher-ios .refresher-refreshing .spinner-bubbles circle,
+.refresher-ios .refresher-refreshing .spinner-circles circle,
+.refresher-ios .refresher-refreshing .spinner-dots circle {
+ fill: $refresher-ios-icon-color;
+}
diff --git a/packages/core/src/components/refresher/refresher.ios.vars.scss b/packages/core/src/components/refresher/refresher.ios.vars.scss
new file mode 100644
index 0000000000..f328e941c2
--- /dev/null
+++ b/packages/core/src/components/refresher/refresher.ios.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.ios";
+
+/// @prop - Color of the refresher icon
+$refresher-ios-icon-color: $text-ios-color !default;
+
+/// @prop - Text color of the refresher content
+$refresher-ios-text-color: $text-ios-color !default;
diff --git a/packages/core/src/components/refresher/refresher.md.scss b/packages/core/src/components/refresher/refresher.md.scss
new file mode 100644
index 0000000000..eec6aaf3f5
--- /dev/null
+++ b/packages/core/src/components/refresher/refresher.md.scss
@@ -0,0 +1,27 @@
+@import "./refresher";
+@import "./refresher.md.vars";
+
+// Refresher Content
+// --------------------------------------------------
+
+.refresher-md .refresher-pulling-icon,
+.refresher-md .refresher-refreshing-icon {
+ color: $refresher-md-icon-color;
+}
+
+.refresher-md .refresher-pulling-text,
+.refresher-md .refresher-refreshing-text {
+ color: $refresher-md-text-color;
+}
+
+.refresher-md .refresher-refreshing .spinner-ios line,
+.refresher-md .refresher-refreshing .spinner-ios-small line,
+.refresher-md .refresher-refreshing .spinner-crescent circle {
+ stroke: $refresher-md-icon-color;
+}
+
+.refresher-md .refresher-refreshing .spinner-bubbles circle,
+.refresher-md .refresher-refreshing .spinner-circles circle,
+.refresher-md .refresher-refreshing .spinner-dots circle {
+ fill: $refresher-md-icon-color;
+}
diff --git a/packages/core/src/components/refresher/refresher.md.vars.scss b/packages/core/src/components/refresher/refresher.md.vars.scss
new file mode 100644
index 0000000000..7e1f4f08b5
--- /dev/null
+++ b/packages/core/src/components/refresher/refresher.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+/// @prop - Color of the refresher icon
+$refresher-md-icon-color: $text-md-color !default;
+
+/// @prop - Text color of the refresher content
+$refresher-md-text-color: $text-md-color !default;
diff --git a/packages/core/src/components/refresher/refresher.scss b/packages/core/src/components/refresher/refresher.scss
index d56cf92ae7..80db4c809f 100644
--- a/packages/core/src/components/refresher/refresher.scss
+++ b/packages/core/src/components/refresher/refresher.scss
@@ -1,26 +1,5 @@
@import "../../themes/ionic.globals";
-
-// Refresher
-// --------------------------------------------------
-
-/// @prop - Height of the refresher
-$refresher-height: 60px !default;
-
-/// @prop - Color of the refresher icon
-$refresher-icon-color: #000 !default;
-
-/// @prop - Font size of the refresher icon
-$refresher-icon-font-size: 30px !default;
-
-/// @prop - Text color of the refresher content
-$refresher-text-color: #000 !default;
-
-/// @prop - Font size of the refresher content
-$refresher-text-font-size: 16px !default;
-
-/// @prop - Border color of the refresher
-$refresher-border-color: #ddd !default;
-
+@import "./refresher.vars";
ion-refresher {
@include position(0, null, null, 0);
@@ -39,17 +18,6 @@ ion-refresher {
}
}
-.has-refresher > .scroll-content {
- // when the refresher is let go or has completed
- // this transition is what is used to put the
- // scroll content back into it's original location
- @include margin(-1px, null, null, null);
-
- border-top: 1px solid $refresher-border-color;
- transition: transform 320ms cubic-bezier(.36, .66, .04, 1);
-}
-
-
// Refresher Content
// --------------------------------------------------
@@ -75,7 +43,6 @@ ion-refresher-content {
@include transform-origin(center);
font-size: $refresher-icon-font-size;
- color: $refresher-icon-color;
transition: 200ms;
}
@@ -84,22 +51,8 @@ ion-refresher-content {
@include text-align(center);
font-size: $refresher-text-font-size;
- color: $refresher-text-color;
}
-.refresher-refreshing .spinner-ios line,
-.refresher-refreshing .spinner-ios-small line,
-.refresher-refreshing .spinner-crescent circle {
- stroke: $refresher-icon-color;
-}
-
-.refresher-refreshing .spinner-bubbles circle,
-.refresher-refreshing .spinner-circles circle,
-.refresher-refreshing .spinner-dots circle {
- fill: $refresher-icon-color;
-}
-
-
// Refresher Content States
// --------------------------------------------------
diff --git a/packages/core/src/components/refresher/refresher.tsx b/packages/core/src/components/refresher/refresher.tsx
index ed572c067e..f88d79f858 100644
--- a/packages/core/src/components/refresher/refresher.tsx
+++ b/packages/core/src/components/refresher/refresher.tsx
@@ -14,7 +14,13 @@ export const enum RefresherState {
@Component({
tag: 'ion-refresher',
- styleUrl: 'refresher.scss'
+ styleUrls: {
+ ios: 'refresher.ios.scss',
+ md: 'refresher.md.scss'
+ },
+ host: {
+ theme: 'refresher'
+ }
})
export class Refresher {
diff --git a/packages/core/src/components/refresher/refresher.vars.scss b/packages/core/src/components/refresher/refresher.vars.scss
new file mode 100644
index 0000000000..2f74eeb767
--- /dev/null
+++ b/packages/core/src/components/refresher/refresher.vars.scss
@@ -0,0 +1,11 @@
+// Refresher
+// --------------------------------------------------
+
+/// @prop - Height of the refresher
+$refresher-height: 60px !default;
+
+/// @prop - Font size of the refresher icon
+$refresher-icon-font-size: 30px !default;
+
+/// @prop - Font size of the refresher content
+$refresher-text-font-size: 16px !default;
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.ios.scss b/packages/core/src/components/ripple-effect/ripple-effect.ios.scss
new file mode 100644
index 0000000000..2ea7f845b5
--- /dev/null
+++ b/packages/core/src/components/ripple-effect/ripple-effect.ios.scss
@@ -0,0 +1,7 @@
+@import "./ripple-effect";
+@import "./ripple-effect.ios.vars";
+
+// iOS Ripple Effect
+.ripple-iod .ripple-effect {
+ background-color: $ripple-ios-background-color;
+}
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.ios.vars.scss b/packages/core/src/components/ripple-effect/ripple-effect.ios.vars.scss
new file mode 100644
index 0000000000..34da65d47c
--- /dev/null
+++ b/packages/core/src/components/ripple-effect/ripple-effect.ios.vars.scss
@@ -0,0 +1,6 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Ripple Effect
+
+/// @prop - Background color of the ripple
+$ripple-ios-background-color: $text-ios-color;
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.md.scss b/packages/core/src/components/ripple-effect/ripple-effect.md.scss
new file mode 100644
index 0000000000..448afd1a4d
--- /dev/null
+++ b/packages/core/src/components/ripple-effect/ripple-effect.md.scss
@@ -0,0 +1,7 @@
+@import "./ripple-effect";
+@import "./ripple-effect.md.vars";
+
+// Material Design Ripple Effect
+.ripple-md .ripple-effect {
+ background-color: $ripple-md-background-color;
+}
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.md.vars.scss b/packages/core/src/components/ripple-effect/ripple-effect.md.vars.scss
new file mode 100644
index 0000000000..19e96ebc93
--- /dev/null
+++ b/packages/core/src/components/ripple-effect/ripple-effect.md.vars.scss
@@ -0,0 +1,6 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Ripple Effect
+
+/// @prop - Background color of the ripple
+$ripple-md-background-color: $text-md-color;
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.scss b/packages/core/src/components/ripple-effect/ripple-effect.scss
index a007c68c80..3fb88a4f68 100644
--- a/packages/core/src/components/ripple-effect/ripple-effect.scss
+++ b/packages/core/src/components/ripple-effect/ripple-effect.scss
@@ -17,7 +17,6 @@ ion-ripple-effect {
@include border-radius(50%);
position: absolute;
- background: #000;
opacity: 0;
will-change: transform, opacity;
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.tsx b/packages/core/src/components/ripple-effect/ripple-effect.tsx
index 0a6c77ab91..afe8bb9565 100644
--- a/packages/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/packages/core/src/components/ripple-effect/ripple-effect.tsx
@@ -4,7 +4,13 @@ import { DomController } from '../../global/dom-controller';
@Component({
tag: 'ion-ripple-effect',
- styleUrl: 'ripple-effect.scss'
+ styleUrls: {
+ ios: 'ripple-effect.ios.scss',
+ md: 'ripple-effect.md.scss'
+ },
+ host: {
+ theme: 'ripple'
+ }
})
export class RippleEffect {
diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss
index cf2935eaa5..25f04ad40f 100644
--- a/packages/core/src/components/searchbar/searchbar.ios.scss
+++ b/packages/core/src/components/searchbar/searchbar.ios.scss
@@ -142,35 +142,39 @@
// Generate Default Search Bar Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- $fg-color: rgba($color-contrast, .5);
+@each $color-name, $color-value in $colors-ios {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+ $color-shade: ion-color($colors-ios, $color-name, shade, ios);
+ $color-tint: ion-color($colors-ios, $color-name, tint, ios);
.searchbar-ios-#{$color-name} .searchbar-ios-cancel {
color: $color-base;
}
.enable-hover .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover {
- color: color-shade($color-base);
+ color: $color-tint;
}
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-search-icon {
- @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color);
+ @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $color-contrast);
+ opacity: .5;
}
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
- @include placeholder($fg-color);
+ @include placeholder($color-contrast, $opacity: .5);
color: $color-contrast;
- background: rgba($color-contrast, .1);
+ background: $color-shade;
}
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {
- @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $fg-color);
+ @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $color-contrast);
+ opacity: .5;
}
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel {
- color: color-contrast($colors-ios, $color-base, ios);
+ color: $color-contrast;
}
-
}
// Searchbar animation
diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss
index 34dbe3f303..3bbf85e27d 100644
--- a/packages/core/src/components/searchbar/searchbar.ios.vars.scss
+++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss
@@ -22,7 +22,7 @@ $searchbar-ios-font-family: $font-family-ios-base !default;
$searchbar-ios-min-height: 44px !default;
/// @prop - Color of the searchbar input search icon
-$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, .5) !default;
+$searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default;
/// @prop - Svg for the searchbar input search icon
$searchbar-ios-input-search-icon-svg: "
" !default;
@@ -37,13 +37,13 @@ $searchbar-ios-input-height: 36px !default;
$searchbar-ios-input-border-radius: 10px !default;
/// @prop - Color of the searchbar input placeholder
-$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, .5) !default;
+$searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default;
/// @prop - Color of the searchbar input text
-$searchbar-ios-input-text-color: #000 !default;
+$searchbar-ios-input-text-color: $text-ios-color !default;
/// @prop - Background of the searchbar input
-$searchbar-ios-input-background-color: rgba(15, 22, 64, .1) !default;
+$searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default;
@@ -52,7 +52,7 @@ $searchbar-ios-input-transition: all 300ms ease !default;
$searchbar-ios-cancel-transition: all 300ms ease !default;
/// @prop - Color of the searchbar input clear icon
-$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
+$searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default;
/// @prop - Svg for the searchbar input clear icon
$searchbar-ios-input-clear-icon-svg: "
" !default;
diff --git a/packages/core/src/components/searchbar/searchbar.md.vars.scss b/packages/core/src/components/searchbar/searchbar.md.vars.scss
index 3537bdec70..5834f3152f 100644
--- a/packages/core/src/components/searchbar/searchbar.md.vars.scss
+++ b/packages/core/src/components/searchbar/searchbar.md.vars.scss
@@ -22,7 +22,7 @@ $searchbar-md-font-family: $font-family-md-base !default;
$searchbar-md-background: inherit !default;
/// @prop - Color of the searchbar input search icon
-$searchbar-md-input-search-icon-color: #5b5b5b !default;
+$searchbar-md-input-search-icon-color: $text-color-step-200 !default;
/// @prop - Svg for the searchbar input search icon
$searchbar-md-input-search-icon-svg: "
" !default;
@@ -40,19 +40,19 @@ $searchbar-md-input-line-height: 30px !default;
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Color of the searchbar input placeholder
-$searchbar-md-input-placeholder-color: #aeaeae !default;
+$searchbar-md-input-placeholder-color: $placeholder-text-md-color !default;
/// @prop - Color of the searchbar input text
-$searchbar-md-input-text-color: #141414 !default;
+$searchbar-md-input-text-color: $text-md-color-step-100 !default;
/// @prop - Background of the searchbar input
-$searchbar-md-input-background-color: #fff !default;
+$searchbar-md-input-background-color: $background-md-color !default;
/// @prop - Border radius of the searchbar input
$searchbar-md-input-border-radius: 2px !default;
/// @prop - Color of the searchbar input clear icon
-$searchbar-md-input-clear-icon-color: #5b5b5b !default;
+$searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default;
/// @prop - Svg for the searchbar input clear icon
$searchbar-md-input-clear-icon-svg: "
" !default;
diff --git a/packages/core/src/components/searchbar/test/toolbar/index.html b/packages/core/src/components/searchbar/test/toolbar/index.html
index c64ab5005d..61a53eb821 100644
--- a/packages/core/src/components/searchbar/test/toolbar/index.html
+++ b/packages/core/src/components/searchbar/test/toolbar/index.html
@@ -46,12 +46,23 @@
+`
+
Search - Success Toolbar
+
+
+
Search - Warning Toolbar
+
Search - Danger Toolbar
+
+
+
+
+
Search - Dark Toolbar
diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss
index 3e35c5aa07..72a5103cc4 100644
--- a/packages/core/src/components/segment/segment.ios.scss
+++ b/packages/core/src/components/segment/segment.ios.scss
@@ -49,17 +49,16 @@
&.segment-activated {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
- opacity: $segment-button-ios-opacity-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-activated) {
- background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-hover);
+ background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-activated) {
- background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-active);
+ background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
}
@@ -82,7 +81,7 @@
}
.segment-ios .segment-button-disabled {
- color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);
+ color: $segment-button-ios-background-color-disabled;
pointer-events: none;
}
@@ -117,7 +116,9 @@
// iOS Segment Button Mixin
// --------------------------------------------------
-@mixin ios-segment-button($color-name, $color-base, $color-contrast) {
+@mixin ios-segment-button($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.segment-ios-#{$color-name} {
@@ -125,12 +126,13 @@
border-color: $color-base;
color: $color-base;
+
&:hover:not(.segment-activated) {
- background-color: rgba($color-base, $segment-button-ios-opacity-hover);
+ background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&:active:not(.segment-activated) {
- background-color: rgba($color-base, $segment-button-ios-opacity-active);
+ background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&.segment-activated {
@@ -140,20 +142,19 @@
}
.segment-button-disabled {
- color: rgba($color-base, $segment-button-ios-opacity-disabled);
+ color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
}
-
}
-
}
// iOS Segment Color Generation
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+@each $color-name, $color-value in $colors-ios {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
- @include ios-segment-button($color-name, $color-base, $color-contrast);
+ @include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
color: $color-base;
diff --git a/packages/core/src/components/segment/segment.ios.vars.scss b/packages/core/src/components/segment/segment.ios.vars.scss
index 8b52be94ea..eee499c800 100644
--- a/packages/core/src/components/segment/segment.ios.vars.scss
+++ b/packages/core/src/components/segment/segment.ios.vars.scss
@@ -10,70 +10,76 @@ $segment-ios-font-family: $font-family-ios-base !default;
// ---------------------------------------------
/// @prop - Background of the segment button
-$segment-button-ios-background-color: transparent !default;
+$segment-button-ios-background-color: transparent !default;
/// @prop - Background of the activated segment button
-$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
+$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
+
+/// @prop - Background of the segment button when hovered
+$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
+
+/// @prop - Background of the segment button when active
+$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
+
+/// @prop - Background of the activated segment button when active
+$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
/// @prop - Text color of the segment button
-$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
+$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
/// @prop - Transition of the activated segment button
-$segment-button-ios-transition-activated: 100ms all linear !default;
+$segment-button-ios-transition-activated: 100ms all linear !default;
/// @prop - Transition of the segment button on hover
-$segment-button-ios-transition-hover: 100ms all linear !default;
+$segment-button-ios-transition-hover: 100ms all linear !default;
/// @prop - Transition of the segment button when pressed
-$segment-button-ios-transition-active: 100ms all linear !default;
-
-/// @prop - Opacity of the segment button on hover
-$segment-button-ios-opacity-hover: .1 !default;
-
-/// @prop - Opacity of the segment button when pressed
-$segment-button-ios-opacity-active: .16 !default;
-
-/// @prop - Opacity of the activated segment button
-$segment-button-ios-opacity-activated: 1 !default;
-
-/// @prop - Opacity of the disabled segment button
-$segment-button-ios-opacity-disabled: .3 !default;
+$segment-button-ios-transition-active: 100ms all linear !default;
/// @prop - Border width of the segment button
-$segment-button-ios-border-width: 1px !default;
+$segment-button-ios-border-width: 1px !default;
/// @prop - Height of the segment button
-$segment-button-ios-height: 32px !default;
+$segment-button-ios-height: 32px !default;
/// @prop - Line height of the segment button
-$segment-button-ios-line-height: 28px !default;
+$segment-button-ios-line-height: 28px !default;
/// @prop - Font size of the segment button
-$segment-button-ios-font-size: 13px !default;
+$segment-button-ios-font-size: 13px !default;
/// @prop - Border radius of the segment button
-$segment-button-ios-border-radius: 4px !default;
+$segment-button-ios-border-radius: 4px !default;
/// @prop - Size of an icon in the segment button
-$segment-button-ios-icon-size: 26px !default;
+$segment-button-ios-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
-$segment-button-ios-icon-line-height: 28px !default;
+$segment-button-ios-icon-line-height: 28px !default;
/// @prop - Max width of the segment button in a toolbar
-$segment-button-ios-toolbar-button-max-width: 100px !default;
+$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
-$segment-button-ios-toolbar-button-height: 26px !default;
+$segment-button-ios-toolbar-button-height: 26px !default;
/// @prop - Line height of the segment button in a toolbar
-$segment-button-ios-toolbar-line-height: 22px !default;
+$segment-button-ios-toolbar-line-height: 22px !default;
/// @prop - Font size of the segment button in a toolbar
-$segment-button-ios-toolbar-font-size: 12px !default;
+$segment-button-ios-toolbar-font-size: 12px !default;
/// @prop - Size of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-size: 22px !default;
+$segment-button-ios-toolbar-icon-size: 22px !default;
/// @prop - Line height of an icon in the segment button in a toolbar
-$segment-button-ios-toolbar-icon-line-height: 24px !default;
+$segment-button-ios-toolbar-icon-line-height: 24px !default;
+
+/// @prop - Opacity of the segment button on hover
+$segment-button-ios-opacity-hover: .1 !default;
+
+/// @prop - Opacity of the segment button when pressed
+$segment-button-ios-opacity-active: .16 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-ios-opacity-disabled: .3 !default;
diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss
index 08307ff602..86f7fd7866 100644
--- a/packages/core/src/components/segment/segment.md.scss
+++ b/packages/core/src/components/segment/segment.md.scss
@@ -25,7 +25,7 @@
line-height: $segment-button-md-line-height;
text-transform: uppercase;
- color: $segment-button-md-text-color-activated;
+ color: $segment-button-md-text-color-active;
background-color: transparent;
opacity: $segment-button-md-opacity;
transition: 100ms all linear;
@@ -66,7 +66,8 @@
// Material Design Segment Button Mixin
// --------------------------------------------------
-@mixin md-segment-button($color-name, $color-base, $color-contrast) {
+@mixin md-segment-button($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
.segment-md-#{$color-name} .segment-button {
color: $color-base;
@@ -85,6 +86,6 @@
// Material Design Segment Color Generation
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
- @include md-segment-button($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-md {
+ @include md-segment-button($color-name);
}
diff --git a/packages/core/src/components/segment/segment.md.vars.scss b/packages/core/src/components/segment/segment.md.vars.scss
index 6b1d1a2326..abb2d5e91f 100644
--- a/packages/core/src/components/segment/segment.md.vars.scss
+++ b/packages/core/src/components/segment/segment.md.vars.scss
@@ -7,10 +7,10 @@
$segment-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the activated segment button
-$segment-button-md-text-color-activated: $toolbar-md-active-color !default;
+$segment-button-md-text-color-active: $toolbar-md-color-active !default;
/// @prop - Border color of the activated segment button
-$segment-button-md-border-color-activated: $toolbar-md-active-color !default;
+$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;
diff --git a/packages/core/src/components/select/select.ios.scss b/packages/core/src/components/select/select.ios.scss
index e7501548ca..6721de8957 100644
--- a/packages/core/src/components/select/select.ios.scss
+++ b/packages/core/src/components/select/select.ios.scss
@@ -8,6 +8,7 @@
@include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
font-family: $select-ios-font-family;
+ color: $select-ios-text-color;
}
.select-ios .select-placeholder {
diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss
index 7629bfad9f..41462d8e84 100644
--- a/packages/core/src/components/select/select.ios.vars.scss
+++ b/packages/core/src/components/select/select.ios.vars.scss
@@ -6,22 +6,25 @@
// --------------------------------------------------
/// @prop - Padding top of the select
-$select-ios-padding-top: $item-ios-padding-top !default;
+$select-ios-padding-top: $item-ios-padding-top !default;
/// @prop - Padding end of the select
-$select-ios-padding-end: ($item-ios-padding-end / 2) !default;
+$select-ios-padding-end: ($item-ios-padding-end / 2) !default;
/// @prop - Padding bottom of the select
-$select-ios-padding-bottom: $item-ios-padding-bottom !default;
+$select-ios-padding-bottom: $item-ios-padding-bottom !default;
/// @prop - Padding start of the select
-$select-ios-padding-start: $item-ios-padding-start !default;
+$select-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font family of the select
-$select-ios-font-family: $font-family-ios-base !default;
+$select-ios-font-family: $font-family-ios-base !default;
/// @prop - Color of the select icon
-$select-ios-icon-color: #999 !default;
+$select-ios-icon-color: $text-ios-color-step-400 !default;
/// @prop - Color of the select placeholder
-$select-ios-placeholder-color: $select-ios-icon-color !default;
+$select-ios-placeholder-color: $select-ios-icon-color !default;
+
+/// @prop - Text Color of the selected item
+$select-ios-text-color: $text-ios-color !default;
diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss
index 4ec56d1a21..4a6fa7bc50 100644
--- a/packages/core/src/components/select/select.md.scss
+++ b/packages/core/src/components/select/select.md.scss
@@ -8,6 +8,7 @@
@include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
font-family: $select-md-font-family;
+ color: $select-md-text-color;
}
.select-md .select-placeholder {
@@ -60,7 +61,7 @@
}
.select-popover-md .item-radio-checked {
- background-color: #dcdcdc;
+ background-color: $background-md-color-step-200;
}
.select-popover-md .item-radio-checked ion-label {
diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss
index e6cc8367b1..46c6c46fad 100644
--- a/packages/core/src/components/select/select.md.vars.scss
+++ b/packages/core/src/components/select/select.md.vars.scss
@@ -21,7 +21,10 @@ $select-md-padding-start: $item-md-padding-start !default;
$select-md-font-family: $font-family-md-base !default;
/// @prop - Color of the select icon
-$select-md-icon-color: #999 !default;
+$select-md-icon-color: $text-md-color-step-300 !default;
/// @prop - Color of the select placeholder
$select-md-placeholder-color: $select-md-icon-color !default;
+
+/// @prop - Text Color of the selected item
+$select-md-text-color: $text-md-color !default;
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.ios.scss b/packages/core/src/components/skeleton-text/skeleton-text.ios.scss
new file mode 100644
index 0000000000..76ace01982
--- /dev/null
+++ b/packages/core/src/components/skeleton-text/skeleton-text.ios.scss
@@ -0,0 +1,11 @@
+@import "./skeleton-text";
+@import "./skeleton-text.ios.vars";
+
+
+// iOS Skeleton Text
+// --------------------------------------------------
+
+.skeleton-text-ios span {
+ background-color: $skeleton-text-ios-bar-background-color;
+ opacity: $skeleton-text-ios-bar-opacity;
+}
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.ios.vars.scss b/packages/core/src/components/skeleton-text/skeleton-text.ios.vars.scss
new file mode 100644
index 0000000000..419137d522
--- /dev/null
+++ b/packages/core/src/components/skeleton-text/skeleton-text.ios.vars.scss
@@ -0,0 +1,10 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Skeleton Text
+// --------------------------------------------------
+
+/// @prop - Background color of the skeleton text bar
+$skeleton-text-ios-bar-background-color: $text-ios-color !default;
+
+/// @prop - Opacity of the text bar for the skeleton text
+$skeleton-text-ios-bar-opacity: .1 !default;
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.md.scss b/packages/core/src/components/skeleton-text/skeleton-text.md.scss
new file mode 100644
index 0000000000..41708d3686
--- /dev/null
+++ b/packages/core/src/components/skeleton-text/skeleton-text.md.scss
@@ -0,0 +1,11 @@
+@import "./skeleton-text";
+@import "./skeleton-text.md.vars";
+
+
+// Material Design Skeleton Text
+// --------------------------------------------------
+
+.skeleton-text-md span {
+ background-color: $skeleton-text-md-bar-background-color;
+ opacity: $skeleton-text-md-bar-opacity;
+}
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.md.vars.scss b/packages/core/src/components/skeleton-text/skeleton-text.md.vars.scss
new file mode 100644
index 0000000000..3106d6e7ef
--- /dev/null
+++ b/packages/core/src/components/skeleton-text/skeleton-text.md.vars.scss
@@ -0,0 +1,10 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Skeleton Text
+// --------------------------------------------------
+
+/// @prop - Background color of the skeleton text bar
+$skeleton-text-md-bar-background-color: $text-md-color !default;
+
+/// @prop - Opacity of the text bar for the skeleton text
+$skeleton-text-md-bar-opacity: .1 !default;
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.scss b/packages/core/src/components/skeleton-text/skeleton-text.scss
index eda4801a54..4347721dc9 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.scss
+++ b/packages/core/src/components/skeleton-text/skeleton-text.scss
@@ -17,5 +17,4 @@ ion-skeleton-text span {
display: inline-block;
font-size: 8px;
- background-color: #ececec;
}
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.tsx b/packages/core/src/components/skeleton-text/skeleton-text.tsx
index 7eb55812d8..eea5acfca8 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/packages/core/src/components/skeleton-text/skeleton-text.tsx
@@ -3,12 +3,18 @@ import { Component, Prop } from '@stencil/core';
@Component({
tag: 'ion-skeleton-text',
- styleUrl: 'skeleton-text.scss'
+ styleUrls: {
+ ios: 'skeleton-text.ios.scss',
+ md: 'skeleton-text.md.scss'
+ },
+ host: {
+ theme: 'skeleton-text'
+ }
})
export class SkeletonText {
@Prop() width = '100%';
- render() {
+ render () {
return ;
}
}
diff --git a/packages/core/src/components/skeleton-text/test/basic/index.html b/packages/core/src/components/skeleton-text/test/basic/index.html
new file mode 100644
index 0000000000..55fca6934e
--- /dev/null
+++ b/packages/core/src/components/skeleton-text/test/basic/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Select - Basic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/src/components/slides/slides-import.scss b/packages/core/src/components/slides/slides-vendor.scss
similarity index 92%
rename from packages/core/src/components/slides/slides-import.scss
rename to packages/core/src/components/slides/slides-vendor.scss
index fa16cf1117..f099e7eae3 100644
--- a/packages/core/src/components/slides/slides-import.scss
+++ b/packages/core/src/components/slides/slides-vendor.scss
@@ -20,9 +20,11 @@
/* Fix of Webkit flickering */
z-index: 1;
}
+
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
+
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
@@ -30,6 +32,7 @@
-webkit-flex-direction: column;
flex-direction: column;
}
+
.swiper-wrapper {
position: relative;
width: 100%;
@@ -49,6 +52,7 @@
-moz-box-sizing: content-box;
box-sizing: content-box;
}
+
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
@@ -57,6 +61,7 @@
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
+
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
@@ -64,6 +69,7 @@
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
@@ -72,6 +78,7 @@
transition-timing-function: ease-out;
margin: 0 auto;
}
+
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
@@ -80,11 +87,13 @@
height: 100%;
position: relative;
}
+
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
+
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
@@ -96,6 +105,7 @@
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
+
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
@@ -105,15 +115,18 @@
opacity: 0;
z-index: -1000;
}
+
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
+
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
+
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
@@ -130,40 +143,48 @@
background-position: center;
background-repeat: no-repeat;
}
+
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
- opacity: 0.35;
+ opacity: .35;
cursor: auto;
pointer-events: none;
}
+
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
+
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
+
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
+
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
+
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
+
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
+
/* Pagination Styles */
.swiper-pagination {
position: absolute;
@@ -178,9 +199,11 @@
transform: translate3d(0, 0, 0);
z-index: 10;
}
+
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
+
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
@@ -189,15 +212,16 @@
left: 0;
width: 100%;
}
+
/* Bullets */
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
- background: #000;
- opacity: 0.2;
+ opacity: .2;
}
+
button.swiper-pagination-bullet {
border: none;
margin: 0;
@@ -208,22 +232,27 @@ button.swiper-pagination-bullet {
-webkit-appearance: none;
appearance: none;
}
+
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
+
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
+
.swiper-pagination-bullet-active {
opacity: 1;
- background: #007aff;
}
+
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
+
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
+
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
@@ -233,20 +262,22 @@ button.swiper-pagination-bullet {
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
+
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
+
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
+
/* Progress */
.swiper-pagination-progress {
- background: rgba(0, 0, 0, 0.25);
position: absolute;
}
+
.swiper-pagination-progress .swiper-pagination-progressbar {
- background: #007aff;
position: absolute;
left: 0;
top: 0;
@@ -262,6 +293,7 @@ button.swiper-pagination-bullet {
-o-transform-origin: left top;
transform-origin: left top;
}
+
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
@@ -269,27 +301,33 @@ button.swiper-pagination-bullet {
-o-transform-origin: right top;
transform-origin: right top;
}
+
.swiper-container-horizontal > .swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
+
.swiper-container-vertical > .swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
+
.swiper-pagination-progress.swiper-pagination-white {
- background: rgba(255, 255, 255, 0.5);
+ background: rgba(255, 255, 255, .5);
}
+
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff;
}
+
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000;
}
+
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
@@ -297,11 +335,12 @@ button.swiper-pagination-bullet {
-o-perspective: 1200px;
perspective: 1200px;
}
+
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
-.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-top, ¡
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
@@ -309,6 +348,7 @@ button.swiper-pagination-bullet {
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
+
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
@@ -321,65 +361,72 @@ button.swiper-pagination-bullet {
pointer-events: none;
z-index: 10;
}
+
.swiper-container-3d .swiper-slide-shadow-left {
- background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+ background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
- background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
- background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
- background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
- background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
+
.swiper-container-3d .swiper-slide-shadow-right {
- background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+ background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
- background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
- background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
- background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
- background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
+
.swiper-container-3d .swiper-slide-shadow-top {
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
- background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
- background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
- background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
- background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
+
.swiper-container-3d .swiper-slide-shadow-bottom {
- background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+ background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
- background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
- background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
- background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
- background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
+
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
+
/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
overflow: visible;
}
+
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
@@ -389,16 +436,19 @@ button.swiper-pagination-bullet {
backface-visibility: hidden;
z-index: 1;
}
+
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
+
.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
+
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
@@ -413,6 +463,7 @@ button.swiper-pagination-bullet {
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
+
/* Cube */
.swiper-container-cube .swiper-slide {
visibility: hidden;
@@ -423,12 +474,14 @@ button.swiper-pagination-bullet {
width: 100%;
height: 100%;
}
+
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
+
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
@@ -436,6 +489,7 @@ button.swiper-pagination-bullet {
pointer-events: auto;
visibility: visible;
}
+
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
@@ -443,11 +497,12 @@ button.swiper-pagination-bullet {
width: 100%;
height: 100%;
background: #000;
- opacity: 0.6;
+ opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
+
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
@@ -456,6 +511,7 @@ button.swiper-pagination-bullet {
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
+
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
@@ -463,13 +519,16 @@ button.swiper-pagination-bullet {
-o-transition-property: opacity;
transition-property: opacity;
}
+
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
+
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
+
.swiper-zoom-container {
width: 100%;
height: 100%;
@@ -490,6 +549,7 @@ button.swiper-pagination-bullet {
align-items: center;
text-align: center;
}
+
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
@@ -497,13 +557,14 @@ button.swiper-pagination-bullet {
max-height: 100%;
object-fit: contain;
}
+
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
- background: rgba(0, 0, 0, 0.1);
}
+
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
@@ -512,6 +573,7 @@ button.swiper-pagination-bullet {
height: 5px;
width: 98%;
}
+
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
@@ -520,18 +582,20 @@ button.swiper-pagination-bullet {
width: 5px;
height: 98%;
}
+
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
- background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
+
.swiper-scrollbar-cursor-drag {
cursor: move;
}
+
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
@@ -549,6 +613,7 @@ button.swiper-pagination-bullet {
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
+
.swiper-lazy-preloader:after {
display: block;
content: "";
@@ -560,14 +625,17 @@ button.swiper-pagination-bullet {
background-size: 100%;
background-repeat: no-repeat;
}
+
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
+
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
+
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
diff --git a/packages/core/src/components/slides/slides.ios.scss b/packages/core/src/components/slides/slides.ios.scss
new file mode 100644
index 0000000000..c3b8f7d9b0
--- /dev/null
+++ b/packages/core/src/components/slides/slides.ios.scss
@@ -0,0 +1,26 @@
+@import "./slides-vendor";
+@import "./slides.ios.vars";
+
+.slides-ios .swiper-pagination-bullet {
+ background-color: $slides-ios-bullet-background-color;
+}
+
+.slides-ios .swiper-pagination-bullet-active {
+ background-color: $slides-ios-bullet-background-color-active;
+}
+
+.slides-ios .swiper-pagination-progress {
+ background-color: $slides-ios-progress-background-color;
+}
+
+.slides-ios .swiper-pagination-progress .swiper-pagination-progressbar {
+ background-color: $slides-ios-progress-bar-background-color;
+}
+
+.slides-ios .swiper-scrollbar {
+ background-color: $slides-ios-scroll-bar-background-color;
+}
+
+.slides-ios .swiper-scrollbar-drag {
+ background-color: $slides-ios-scroll-bar-drag-background-color;
+}
diff --git a/packages/core/src/components/slides/slides.ios.vars.scss b/packages/core/src/components/slides/slides.ios.vars.scss
new file mode 100644
index 0000000000..c2445e4c70
--- /dev/null
+++ b/packages/core/src/components/slides/slides.ios.vars.scss
@@ -0,0 +1,19 @@
+@import "../../themes/ionic.globals.ios";
+
+/// @prop - Slides Bullet Background color
+$slides-ios-bullet-background-color: text-ios-color-step-200 !default;
+
+/// @prop - Slides Bullet Background color when Active
+$slides-ios-bullet-background-color-active: ion-color($colors-ios, primary, base, ios) !default;
+
+/// @prop - Slides Progress indicator Background color
+$slides-ios-progress-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
+
+/// @prop - Slides Progress indicator bar Background color
+$slides-ios-progress-bar-background-color: ion-color($colors-ios, primary, shade, ios) !default;
+
+/// @prop - Slides Scroll bar Background color
+$slides-ios-scroll-bar-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
+
+/// @prop - Slides Scroll bar drag handle Background color
+$slides-ios-scroll-bar-drag-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-medium) !default;
diff --git a/packages/core/src/components/slides/slides.md.scss b/packages/core/src/components/slides/slides.md.scss
new file mode 100644
index 0000000000..fb1703747e
--- /dev/null
+++ b/packages/core/src/components/slides/slides.md.scss
@@ -0,0 +1,26 @@
+@import "./slides-vendor";
+@import "./slides.md.vars";
+
+.slides-md .swiper-pagination-bullet {
+ background-color: $slides-md-bullet-background-color;
+}
+
+.slides-md .swiper-pagination-bullet-active {
+ background-color: $slides-md-bullet-background-color-active;
+}
+
+.slides-md .swiper-pagination-progress {
+ background-color: $slides-md-progress-background-color;
+}
+
+.slides-md .swiper-pagination-progress .swiper-pagination-progressbar {
+ background-color: $slides-md-progress-bar-background-color;
+}
+
+.slides-md .swiper-scrollbar {
+ background-color: $slides-md-scroll-bar-background-color;
+}
+
+.slides-md .swiper-scrollbar-drag {
+ background-color: $slides-md-scroll-bar-drag-background-color;
+}
diff --git a/packages/core/src/components/slides/slides.md.vars.scss b/packages/core/src/components/slides/slides.md.vars.scss
new file mode 100644
index 0000000000..91a0c9d2f3
--- /dev/null
+++ b/packages/core/src/components/slides/slides.md.vars.scss
@@ -0,0 +1,19 @@
+@import "../../themes/ionic.globals.md";
+
+/// @prop - Slides Bullet Background color
+$slides-md-bullet-background-color: $text-md-color-step-200 !default;
+
+/// @prop - Slides Bullet Background color when Active
+$slides-md-bullet-background-color-active: ion-color($colors-md, primary, base, md) !default;
+
+/// @prop - Slides Progress indicator Background color
+$slides-md-progress-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
+
+/// @prop - Slides Progress indicator bar Background color
+$slides-md-progress-bar-background-color: ion-color($colors-md, primary, shade, md) !default;
+
+/// @prop - Slides Scroll bar Background color
+$slides-md-scroll-bar-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
+
+/// @prop - Slides Scroll bar drag handle Background color
+$slides-md-scroll-bar-drag-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-medium) !default;
diff --git a/packages/core/src/components/slides/slides.scss b/packages/core/src/components/slides/slides.scss
index 5dec024517..0baa29555a 100644
--- a/packages/core/src/components/slides/slides.scss
+++ b/packages/core/src/components/slides/slides.scss
@@ -1,5 +1,5 @@
@import "./slides.vars";
-@import "./slides-import";
+@import "./slides-vendor";
// Slides
// --------------------------------------------------
diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx
index 315f9812b8..c7d90072d2 100644
--- a/packages/core/src/components/slides/slides.tsx
+++ b/packages/core/src/components/slides/slides.tsx
@@ -1,9 +1,14 @@
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { Swiper } from './vendor/swiper.js';
-import { debounce } from '../../utils/helpers';
@Component({
tag: 'ion-slides',
- styleUrl: 'slides.scss',
+ styleUrls: {
+ ios: 'slides.ios.scss',
+ md: 'slides.md.scss'
+ },
+ host: {
+ theme: 'slides'
+ },
assetsDir: 'vendor'
})
export class Slides {
@@ -263,19 +268,8 @@ export class Slides {
* child slides.
*/
@Method()
- update(debounce = 300) {
+ update() {
this.swiper.update();
- // if (this.init) {
- // window.clearTimeout(this.tmr);
- // this.tmr = window.setTimeout(() => {
- // this.swiper.update();
- //
- // // Don't allow pager to show with > 10 slides
- // if (this.length() > 10) {
- // this.options.paginationType = undefined;
- // }
- // }, debounce);
- // }
}
/**
@@ -409,5 +403,3 @@ export class Slides {
this.enableKeyboardControl(false);
}
}
-
-let slidesId = -1;
diff --git a/packages/core/src/components/slides/test/basic/index.html b/packages/core/src/components/slides/test/basic/index.html
index 50f825e54b..85dadb6e44 100644
--- a/packages/core/src/components/slides/test/basic/index.html
+++ b/packages/core/src/components/slides/test/basic/index.html
@@ -7,13 +7,18 @@
+
-
+
Slide 1
diff --git a/packages/core/src/components/spinner/spinner.ios.scss b/packages/core/src/components/spinner/spinner.ios.scss
index dd16506bdd..633dc080c7 100644
--- a/packages/core/src/components/spinner/spinner.ios.scss
+++ b/packages/core/src/components/spinner/spinner.ios.scss
@@ -29,7 +29,8 @@
// Generate iOS Spinner Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+@each $color-name, $color-value in $colors-ios {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
.spinner-ios-#{$color-name} {
@@ -44,7 +45,5 @@
&.spinner-dots circle {
fill: $color-base;
}
-
}
-
}
diff --git a/packages/core/src/components/spinner/spinner.ios.vars.scss b/packages/core/src/components/spinner/spinner.ios.vars.scss
index c15e5ffffd..b6c72cff64 100644
--- a/packages/core/src/components/spinner/spinner.ios.vars.scss
+++ b/packages/core/src/components/spinner/spinner.ios.vars.scss
@@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Color of the ios spinner
-$spinner-ios-ios-color: #69717d !default;
+$spinner-ios-ios-color: $text-ios-color-step-200 !default;
/// @prop - Color of the bubbles spinner
-$spinner-ios-bubbles-color: #000 !default;
+$spinner-ios-bubbles-color: $text-ios-color !default;
/// @prop - Color of the circles spinner
-$spinner-ios-circles-color: #69717d !default;
+$spinner-ios-circles-color: $text-ios-color-step-200 !default;
/// @prop - Color of the crescent spinner
-$spinner-ios-crescent-color: #000 !default;
+$spinner-ios-crescent-color: $text-ios-color !default;
/// @prop - Color of the dots spinner
-$spinner-ios-dots-color: #444 !default;
+$spinner-ios-dots-color: $text-ios-color-step-200 !default;
diff --git a/packages/core/src/components/spinner/spinner.md.scss b/packages/core/src/components/spinner/spinner.md.scss
index 396e2069be..7946844692 100644
--- a/packages/core/src/components/spinner/spinner.md.scss
+++ b/packages/core/src/components/spinner/spinner.md.scss
@@ -29,7 +29,8 @@
// Generate Material Design Spinner Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+@each $color-name, $color-value in $colors-md {
+ $color-base: ion-color($colors-md, $color-name, base, md);
.spinner-md-#{$color-name} {
@@ -44,7 +45,5 @@
&.spinner-dots circle {
fill: $color-base;
}
-
}
-
}
diff --git a/packages/core/src/components/spinner/spinner.md.vars.scss b/packages/core/src/components/spinner/spinner.md.vars.scss
index e16e8b298c..40162f1043 100644
--- a/packages/core/src/components/spinner/spinner.md.vars.scss
+++ b/packages/core/src/components/spinner/spinner.md.vars.scss
@@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Color of the ios spinner
-$spinner-md-ios-color: #69717d !default;
+$spinner-md-ios-color: $text-md-color-step-200 !default;
/// @prop - Color of the bubbles spinner
-$spinner-md-bubbles-color: #000 !default;
+$spinner-md-bubbles-color: $text-md-color !default;
/// @prop - Color of the circles spinner
-$spinner-md-circles-color: #69717d !default;
+$spinner-md-circles-color: $text-md-color-step-200 !default;
/// @prop - Color of the crescent spinner
-$spinner-md-crescent-color: #000 !default;
+$spinner-md-crescent-color: $text-md-color !default;
/// @prop - Color of the dots spinner
-$spinner-md-dots-color: #444 !default;
+$spinner-md-dots-color: $text-color-step-200 !default;
diff --git a/packages/core/src/components/split-pane/split-pane.ios.vars.scss b/packages/core/src/components/split-pane/split-pane.ios.vars.scss
index eadec310e3..67a968d9c5 100644
--- a/packages/core/src/components/split-pane/split-pane.ios.vars.scss
+++ b/packages/core/src/components/split-pane/split-pane.ios.vars.scss
@@ -10,4 +10,4 @@ $split-pane-ios-side-min-width: $split-pane-side-min-width !default;
$split-pane-ios-side-max-width: $split-pane-side-max-width !default;
/// @prop - Border style of the side pane
-$split-pane-ios-border: $hairlines-width solid $list-ios-border-color !default;
+$split-pane-ios-border: $hairlines-width solid $item-ios-border-color !default;
diff --git a/packages/core/src/components/split-pane/split-pane.md.vars.scss b/packages/core/src/components/split-pane/split-pane.md.vars.scss
index 17aad4d2ad..a600f620fa 100644
--- a/packages/core/src/components/split-pane/split-pane.md.vars.scss
+++ b/packages/core/src/components/split-pane/split-pane.md.vars.scss
@@ -10,4 +10,4 @@ $split-pane-md-side-min-width: $split-pane-side-min-width !default;
$split-pane-md-side-max-width: $split-pane-side-max-width !default;
/// @prop - Border style of the side pane
-$split-pane-md-border: 1px solid $list-md-border-color !default;
+$split-pane-md-border: 1px solid $item-md-border-color !default;
diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md
index 351710d8f5..9216fded9a 100644
--- a/packages/core/src/components/tabs/readme.md
+++ b/packages/core/src/components/tabs/readme.md
@@ -90,6 +90,15 @@ components to switch to `TabsRoot3`:
## Properties
+#### color
+
+string
+
+The color to use from your Sass `$colors` map.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+For more information, see [Theming your App](/docs/theming/theming-your-app).
+
+
#### name
string
@@ -142,6 +151,15 @@ Only affects `ios` mode. Defaults to `false`.
## Attributes
+#### color
+
+string
+
+The color to use from your Sass `$colors` map.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+For more information, see [Theming your App](/docs/theming/theming-your-app).
+
+
#### name
string
diff --git a/packages/core/src/components/tabs/tabs.ios.scss b/packages/core/src/components/tabs/tabs.ios.scss
index 3c0c8714a5..7675c1c47c 100644
--- a/packages/core/src/components/tabs/tabs.ios.scss
+++ b/packages/core/src/components/tabs/tabs.ios.scss
@@ -10,7 +10,7 @@
height: $tabs-ios-tab-height;
border-top: $tabs-ios-border;
- background: $tabs-ios-background;
+ background-color: $tabbar-ios-background-color;
contain: strict;
}
@@ -21,7 +21,7 @@
}
.tabbar-ios .tabbar-highlight {
- background: $tabs-ios-tab-color-active;
+ background: $tabbar-ios-text-color-active;
}
.tabbar-ios > ion-tab-button {
@@ -90,6 +90,7 @@
.tabbar-ios.layout-title-hide ion-icon {
@include margin(0);
}
+
// .tabs-ios[tabsLayout=icon-hide] ion-tab-button,
// .tabs-ios ion-tab-button.has-title-only {
// min-height: $tabs-ios-tab-min-height - 8;
@@ -104,41 +105,52 @@
// --------------------------------------------------
.tabbar-translucent-ios {
- background-color: rgba($tabs-ios-background, $tabbar-ios-translucent-opacity);
+ // TODO: @color-mod in the future we will want to replace this with the following color-mod
+ // background-color: color-mod($tabbar-ios-background-color, a($alpha-ios-highest));
+ background-color: $tabbar-ios-translucent-background-color;
-webkit-backdrop-filter: $tabbar-ios-translucent-filter;
backdrop-filter: $tabbar-ios-translucent-filter;
}
-
// iOS Tabbar Color Mixin
// --------------------------------------------------
-@mixin tabbar-ios($color-name, $color-base, $color-contrast) {
+@mixin tabbar-ios($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+ $color-shade: ion-color($colors-ios, $color-name, tint, ios);
+
+ $translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);
.tabbar-ios-#{$color-name} {
- border-color: darken($color-base, 10%);
- color: rgba($color-contrast, .7);
+ border-color: $background-ios-color-step-300;
+ color: $color-contrast;
background-color: $color-base;
- fill: rgba($color-contrast, .7);
+ fill: $color-contrast;
}
- .tabbar-ios-#{$color-name} .tab-selected {
+ .tabbar-ios-#{$color-name} ion-tab-button {
+ color: $color-contrast;
+ }
+
+ .tabbar-ios-#{$color-name} ion-tab-button:hover:not(.disable-hover), .tabbar-ios-#{$color-name} .tab-selected {
+ font-weight: bold;
+
color: $color-contrast;
fill: $color-contrast;
}
.tabbar-translucent-ios-#{$color-name} {
- background-color: rgba($color-base, $tabbar-ios-translucent-opacity);
+ background-color: $translucent-background-color;
}
-
}
// iOS Tabbar Color Generation
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- @include tabbar-ios($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-ios {
+ @include tabbar-ios($color-name);
}
diff --git a/packages/core/src/components/tabs/tabs.ios.vars.scss b/packages/core/src/components/tabs/tabs.ios.vars.scss
index 8b6e275d70..58266a240b 100644
--- a/packages/core/src/components/tabs/tabs.ios.vars.scss
+++ b/packages/core/src/components/tabs/tabs.ios.vars.scss
@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
-$tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default;
+$tabs-ios-border: $hairlines-width solid $tabbar-ios-border-color !default;
/// @prop - Padding top on the tab button
$tabs-ios-tab-padding-top: 0 !default;
@@ -25,16 +25,16 @@ $tabs-ios-tab-max-width: 240px !default;
$tabs-ios-tab-height: 50px !default;
/// @prop - Text color of the inactive tab button
-$tabs-ios-tab-text-color: $tabs-ios-tab-color-inactive !default;
+$tabs-ios-tab-text-color: $tabbar-ios-text-color !default;
/// @prop - Text color of the active tab button
-$tabs-ios-tab-text-color-active: $tabs-ios-tab-color-active !default;
+$tabs-ios-tab-text-color-active: $tabbar-ios-text-color-active !default;
/// @prop - Icon color of the inactive tab button
-$tabs-ios-tab-icon-color: $tabs-ios-tab-color-inactive !default;
+$tabs-ios-tab-icon-color: $tabbar-ios-text-color !default;
/// @prop - Icon color of the active tab button
-$tabs-ios-tab-icon-color-active: $tabs-ios-tab-color-active !default;
+$tabs-ios-tab-icon-color-active: $tabbar-ios-text-color-active !default;
/// @prop - Font size of the tab button text
$tabs-ios-tab-font-size: 10px !default;
@@ -43,8 +43,4 @@ $tabs-ios-tab-font-size: 10px !default;
$tabs-ios-tab-icon-size: 30px !default;
/// @prop - Filter of the translucent tabbar
-$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
-
-/// @prop - Opacity of the translucent tabbar
-$tabbar-ios-translucent-opacity: .8 !default;
-
+$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
diff --git a/packages/core/src/components/tabs/tabs.md.scss b/packages/core/src/components/tabs/tabs.md.scss
index f2edbbc653..28bf22da1d 100644
--- a/packages/core/src/components/tabs/tabs.md.scss
+++ b/packages/core/src/components/tabs/tabs.md.scss
@@ -4,14 +4,14 @@
.tabbar-md {
height: $tabs-md-tab-height;
- border-top: 1px solid $tabs-md-border-color;
- background: $tabs-md-background;
+ border-top: 1px solid $tabbar-md-border-color;
+ background: $tabbar-md-background-color;
contain: strict;
}
.tabbar-md .tabbar-highlight {
- background: $tabs-md-tab-color-active;
+ background: $tabbar-md-text-color-active;
}
// Material Design Tab Button
@@ -136,13 +136,15 @@
// Material Design Tabs Color Mixin
// --------------------------------------------------
-@mixin tabbar-md($color-name, $color-base, $color-contrast) {
+@mixin tabbar-md($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
+ $color-contrast: ion-color($colors-md, $color-name, contrast, md);
.tabbar-md-#{$color-name} {
- color: rgba($color-contrast, $tabs-md-tab-opacity);
+ color: $color-contrast;
background-color: $color-base;
- fill: rgba($color-contrast, $tabs-md-tab-opacity);
+ fill: $color-contrast;
}
.enable-hover .tabbar-md-#{$color-name} ion-tab-button:hover,
@@ -155,12 +157,11 @@
.tabbar-md-#{$color-name} .tabbar-highlight {
background: $color-contrast;
}
-
}
// Material Design Tabbar Color Generation
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
- @include tabbar-md($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-md {
+ @include tabbar-md($color-name);
}
diff --git a/packages/core/src/components/tabs/tabs.md.vars.scss b/packages/core/src/components/tabs/tabs.md.vars.scss
index 4ea29c6864..58e1d2a566 100644
--- a/packages/core/src/components/tabs/tabs.md.vars.scss
+++ b/packages/core/src/components/tabs/tabs.md.vars.scss
@@ -24,20 +24,17 @@ $tabs-md-tab-font-size: 12px !default;
/// @prop - Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default;
-/// @prop - Opacity of the inactive tab button
-$tabs-md-tab-opacity: .7 !default;
-
/// @prop - Text color of the inactive tab button
-$tabs-md-tab-text-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
+$tabs-md-tab-text-color: $tabbar-md-text-color !default;
/// @prop - Text color of the active tab button
-$tabs-md-tab-text-color-active: $tabs-md-tab-color-active !default;
+$tabs-md-tab-text-color-active: $tabbar-md-text-color-active !default;
/// @prop - Icon color of the inactive tab button
-$tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default;
+$tabs-md-tab-icon-color: $tabbar-md-text-color !default;
/// @prop - Icon color of the active tab button
-$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default;
+$tabs-md-tab-icon-color-active: $tabbar-md-text-color-active !default;
/// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active: 14px !default;
@@ -104,3 +101,6 @@ $tabs-md-tab-icon-transition: transform .3s ease-in-out !default
/// @prop - Size of the tab button icon
$tabs-md-tab-icon-size: 24px !default;
+
+/// @prop - Opacity of the inactive tab button
+$tabs-md-tab-opacity: .7 !default;
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index d7cc78b938..9e5fc3b3ca 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -20,6 +20,13 @@ export class Tabs {
@Prop({ context: 'config' }) config: Config;
+ /**
+ * The color to use from your Sass `$colors` map.
+ * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+ * For more information, see [Theming your App](/docs/theming/theming-your-app).
+ */
+ @Prop() color: string;
+
/**
* A unique name for the tabs
*/
@@ -214,6 +221,7 @@ export class Tabs {
dom.push(
-
+
diff --git a/packages/core/src/components/textarea/textarea.ios.scss b/packages/core/src/components/textarea/textarea.ios.scss
index da4d6f9e6e..6d1a286b37 100644
--- a/packages/core/src/components/textarea/textarea.ios.scss
+++ b/packages/core/src/components/textarea/textarea.ios.scss
@@ -5,6 +5,7 @@
// --------------------------------------------------
.native-textarea-ios {
+ @include placeholder($textarea-ios-placeholder-color);
@include margin($textarea-ios-margin-top, $textarea-ios-margin-end, $textarea-ios-margin-bottom, $textarea-ios-margin-start);
@include padding(0);
diff --git a/packages/core/src/components/textarea/textarea.ios.vars.scss b/packages/core/src/components/textarea/textarea.ios.vars.scss
index 9f2deff9b0..3ed51ac579 100644
--- a/packages/core/src/components/textarea/textarea.ios.vars.scss
+++ b/packages/core/src/components/textarea/textarea.ios.vars.scss
@@ -5,6 +5,15 @@
// iOS Textarea
// --------------------------------------------------
+/// @prop - Margin start of the textarea when it is after a label
+$textarea-ios-by-label-margin-start: $item-ios-padding-start !default;
+
+/// @prop - Font family of the textarea
+$textarea-ios-font-family: $font-family-ios-base !default;
+
+/// @prop - Font size of the textarea
+$textarea-ios-font-size: inherit !default;
+
/// @prop - Margin top of the textarea
$textarea-ios-margin-top: $item-ios-padding-top !default;
@@ -17,11 +26,5 @@ $textarea-ios-margin-bottom: $item-ios-padding-bottom !default;
/// @prop - Margin start of the textarea
$textarea-ios-margin-start: 0 !default;
-/// @prop - Font family of the textarea
-$textarea-ios-font-family: $font-family-ios-base !default;
-
-/// @prop - Font size of the textarea
-$textarea-ios-font-size: inherit !default;
-
-/// @prop - Margin start of the textarea when it is after a label
-$textarea-ios-by-label-margin-start: $item-ios-padding-start !default;
+/// @prop - Placeholder text color of the textarea
+$textarea-ios-placeholder-color: $placeholder-text-ios-color !default;
diff --git a/packages/core/src/components/textarea/textarea.md.scss b/packages/core/src/components/textarea/textarea.md.scss
index 2325eecac2..d2342a8de5 100644
--- a/packages/core/src/components/textarea/textarea.md.scss
+++ b/packages/core/src/components/textarea/textarea.md.scss
@@ -5,6 +5,7 @@
// --------------------------------------------------
.native-textarea-md {
+ @include placeholder($textarea-md-placeholder-color);
@include margin($textarea-md-margin-top, $textarea-md-margin-end, $textarea-md-margin-bottom, $textarea-md-margin-start);
@include padding(0);
diff --git a/packages/core/src/components/textarea/textarea.md.vars.scss b/packages/core/src/components/textarea/textarea.md.vars.scss
index ceba19df8c..a886ec4136 100644
--- a/packages/core/src/components/textarea/textarea.md.vars.scss
+++ b/packages/core/src/components/textarea/textarea.md.vars.scss
@@ -22,3 +22,6 @@ $textarea-md-margin-bottom: $item-md-padding-bottom !default;
/// @prop - Margin start of the textarea
$textarea-md-margin-start: ($item-md-padding-start / 2) !default;
+
+/// @prop - Placeholder text color of the textarea
+$textarea-md-placeholder-color: $placeholder-text-md-color !default;
diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss
index 099ed89427..189ad15a7d 100644
--- a/packages/core/src/components/textarea/textarea.scss
+++ b/packages/core/src/components/textarea/textarea.scss
@@ -27,7 +27,6 @@ ion-textarea {
// --------------------------------------------------
.native-textarea {
- @include placeholder($textarea-placeholder-color);
@include appearance(none);
@include border-radius(0);
diff --git a/packages/core/src/components/textarea/textarea.vars.scss b/packages/core/src/components/textarea/textarea.vars.scss
index bda35e9134..e21c162d17 100644
--- a/packages/core/src/components/textarea/textarea.vars.scss
+++ b/packages/core/src/components/textarea/textarea.vars.scss
@@ -1,6 +1 @@
@import "../../themes/ionic.globals";
-
-// Textarea
-// --------------------------------------------------
-
-$textarea-placeholder-color: #999 !default;
diff --git a/packages/core/src/components/title/title.ios.scss b/packages/core/src/components/title/title.ios.scss
index bada6f2f66..145ab94ee1 100644
--- a/packages/core/src/components/title/title.ios.scss
+++ b/packages/core/src/components/title/title.ios.scss
@@ -28,10 +28,10 @@
pointer-events: auto;
}
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+@each $color-name, $color-value in $colors-ios {
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.toolbar-#{$color-name} .toolbar-title-ios {
color: $color-contrast;
}
-
}
diff --git a/packages/core/src/components/title/title.ios.vars.scss b/packages/core/src/components/title/title.ios.vars.scss
index 736906be1e..ca661e4234 100644
--- a/packages/core/src/components/title/title.ios.vars.scss
+++ b/packages/core/src/components/title/title.ios.vars.scss
@@ -13,4 +13,4 @@ $toolbar-ios-title-font-weight: 600 !default;
$toolbar-ios-title-text-align: center !default;
/// @prop - Text color of the toolbar title
-$toolbar-ios-title-text-color: color-contrast($colors-ios, $toolbar-ios-background) !default;
+$toolbar-ios-title-text-color: $toolbar-ios-text-color !default;
diff --git a/packages/core/src/components/title/title.md.scss b/packages/core/src/components/title/title.md.scss
index a2594642ba..bcb030c450 100644
--- a/packages/core/src/components/title/title.md.scss
+++ b/packages/core/src/components/title/title.md.scss
@@ -12,10 +12,10 @@
color: $toolbar-md-title-text-color;
}
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+@each $color-name, $color-value in $colors-md {
+ $color-contrast: ion-color($colors-md, $color-name, contrast, md);
.toolbar-#{$color-name} .toolbar-title-md {
color: $color-contrast;
}
-
}
diff --git a/packages/core/src/components/title/title.md.vars.scss b/packages/core/src/components/title/title.md.vars.scss
index 0d26942bc4..9aacc073ba 100644
--- a/packages/core/src/components/title/title.md.vars.scss
+++ b/packages/core/src/components/title/title.md.vars.scss
@@ -7,4 +7,4 @@
$toolbar-md-title-font-size: 20px !default;
/// @prop - Text color of the toolbar title
-$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default;
+$toolbar-md-title-text-color: $toolbar-md-text-color !default;
diff --git a/packages/core/src/components/toast/toast.ios.scss b/packages/core/src/components/toast/toast.ios.scss
index d10ec7610f..2feeb6dff3 100644
--- a/packages/core/src/components/toast/toast.ios.scss
+++ b/packages/core/src/components/toast/toast.ios.scss
@@ -20,11 +20,11 @@
max-width: $toast-max-width;
- background: $toast-ios-background;
+ background: $toast-ios-background-color;
}
.toast-translucent-ios .toast-wrapper {
- background: rgba($toast-ios-background, $toast-ios-translucent-opacity);
+ background: $toast-ios-translucent-background-color;
backdrop-filter: $toast-ios-translucent-filter;
-webkit-backdrop-filter: $toast-ios-translucent-filter;
diff --git a/packages/core/src/components/toast/toast.ios.vars.scss b/packages/core/src/components/toast/toast.ios.vars.scss
index 2fac4136c8..1a75dbe95d 100644
--- a/packages/core/src/components/toast/toast.ios.vars.scss
+++ b/packages/core/src/components/toast/toast.ios.vars.scss
@@ -6,14 +6,17 @@
/// @prop - Font family of the toast
$toast-ios-font-family: $font-family-ios-base !default;
-/// @prop - Background of the toast wrapper
-$toast-ios-background: rgba(237, 237, 239, 1) !default;
+/// @prop - Background Color of the toast wrapper
+$toast-ios-background-color: $background-ios-color-step-100 !default;
+
+/// @prop - Background Color of the toast wrapper when translucent
+$toast-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Border radius of the toast wrapper
$toast-ios-border-radius: 14px !default;
/// @prop - Color of the toast title
-$toast-ios-title-color: rgba(71, 71, 71, 1) !default;
+$toast-ios-title-color: $text-ios-color-step-100 !default;
/// @prop - Font size of the toast title
$toast-ios-title-font-size: 14px !default;
@@ -31,10 +34,7 @@ $toast-ios-title-padding-bottom: $toast-ios-title-padding-top !
$toast-ios-title-padding-start: $toast-ios-title-padding-end !default;
/// @prop - Color of the toast button
-$toast-ios-button-color: rgba(71, 71, 71, 1) !default;
+$toast-ios-button-color: $text-ios-color-step-200 !default;
/// @prop - Filter of the translucent toast
$toast-ios-translucent-filter: saturate(180%) blur(20px) !default;
-
-/// @prop - Opacity of the translucent toast
-$toast-ios-translucent-opacity: .88 !default;
diff --git a/packages/core/src/components/toast/toast.md.vars.scss b/packages/core/src/components/toast/toast.md.vars.scss
index aed438b5da..dfa76bb657 100644
--- a/packages/core/src/components/toast/toast.md.vars.scss
+++ b/packages/core/src/components/toast/toast.md.vars.scss
@@ -7,10 +7,10 @@
$toast-md-font-family: $font-family-md-base !default;
/// @prop - Background of the toast wrapper
-$toast-md-background: #333 !default;
+$toast-md-background: $text-md-color-step-100 !default;
/// @prop - Color of the toast title
-$toast-md-title-color: #fff !default;
+$toast-md-title-color: $background-md-color !default;
/// @prop - Font size of the toast title
$toast-md-title-font-size: 15px !default;
diff --git a/packages/core/src/components/toggle/toggle.ios.scss b/packages/core/src/components/toggle/toggle.ios.scss
index 646e1378ec..3201cb7d16 100644
--- a/packages/core/src/components/toggle/toggle.ios.scss
+++ b/packages/core/src/components/toggle/toggle.ios.scss
@@ -151,18 +151,18 @@
// iOS Toggle Color Mixin
// --------------------------------------------------
-@mixin ios-toggle-theme($color-name, $color-base) {
+@mixin ios-toggle-theme($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
.toggle-ios-#{$color-name}.toggle-checked .toggle-icon {
background-color: $color-base;
}
-
}
// Generate iOS Toggle Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- @include ios-toggle-theme($color-name, $color-base);
+@each $color-name, $color-value in $colors-ios {
+ @include ios-toggle-theme($color-name);
}
diff --git a/packages/core/src/components/toggle/toggle.ios.vars.scss b/packages/core/src/components/toggle/toggle.ios.vars.scss
index 071e7e96fe..504f3d6398 100644
--- a/packages/core/src/components/toggle/toggle.ios.vars.scss
+++ b/packages/core/src/components/toggle/toggle.ios.vars.scss
@@ -18,13 +18,13 @@ $toggle-ios-border-width: 2px !default;
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
/// @prop - Background color of the unchecked toggle
-$toggle-ios-background-color-off: $list-ios-background-color !default;
+$toggle-ios-background-color-off: $item-ios-background-color !default;
/// @prop - Border color of the unchecked toggle
-$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
+$toggle-ios-border-color-off: $background-ios-color-step-100 !default;
/// @prop - Background color of the checked toggle
-$toggle-ios-background-color-on: color($colors-ios, primary) !default;
+$toggle-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Width of the toggle handle
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
diff --git a/packages/core/src/components/toggle/toggle.md.scss b/packages/core/src/components/toggle/toggle.md.scss
index 3ea6df6012..718bf229e9 100644
--- a/packages/core/src/components/toggle/toggle.md.scss
+++ b/packages/core/src/components/toggle/toggle.md.scss
@@ -118,22 +118,23 @@
// Material Design Color Mixin
// --------------------------------------------------
-@mixin toggle-theme-md($color-name, $color-base) {
+@mixin toggle-theme-md($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
+ $color-tint: ion-color($colors-md, $color-name, tint, md);
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
- background-color: lighten($color-base, 25%);
+ background-color: $color-tint;
}
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
background-color: $color-base;
}
-
}
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
- @include toggle-theme-md($color-name, $color-base);
+@each $color-name, $color-value in $colors-md {
+ @include toggle-theme-md($color-name);
}
diff --git a/packages/core/src/components/toggle/toggle.md.vars.scss b/packages/core/src/components/toggle/toggle.md.vars.scss
index 67f3aad494..d76aa84cdb 100644
--- a/packages/core/src/components/toggle/toggle.md.vars.scss
+++ b/packages/core/src/components/toggle/toggle.md.vars.scss
@@ -6,7 +6,7 @@
// --------------------------------------------------
/// @prop - Color of the active toggle
-$toggle-md-active-color: color($colors-md, primary) !default;
+$toggle-md-active-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Width of the toggle track
$toggle-md-track-width: 36px !default;
@@ -15,10 +15,10 @@ $toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
-$toggle-md-track-background-color-off: $list-md-border-color !default;
+$toggle-md-track-background-color-off: $item-md-border-color !default;
/// @prop - Background color of the checked toggle track
-$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
+$toggle-md-track-background-color-on: ion-color-alpha($colors-md, primary, $alpha-md-medium, md) !default;
/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px !default;
diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss
index 0bb2bc49d5..4ea4784911 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.scss
@@ -25,7 +25,7 @@
// --------------------------------------------------
.toolbar-background-ios {
- background: $toolbar-ios-background;
+ background: $toolbar-ios-background-color;
}
@@ -61,7 +61,9 @@
.header-translucent-ios .toolbar-background-ios,
.footer-translucent-ios .toolbar-background-ios,
.toolbar-translucent-ios .toolbar-background-ios {
- background: rgba($toolbar-ios-background, $toolbar-ios-translucent-opacity);
+ // TODO: @color-mod in the future we will want to replace this with the following color-mod
+ // background-color: color-mod($toolbar-ios-background-color, a($alpha-ios-highest));
+ background: $toolbar-ios-translucent-background-color;
}
.toolbar-translucent-ios .toolbar-background-ios {
@@ -80,7 +82,11 @@
min-width: 0;
}
-@mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) {
+@mixin ios-toolbar-theme($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+ $color-translucent: ion-color-alpha($colors-ios, $color-name, alpha-highest, ios);
+
.toolbar-ios-#{$color-name} {
.toolbar-background-ios {
@@ -92,10 +98,10 @@
color: $color-contrast;
}
- @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- @include ios-bar-button-default($color-name, $color-base, $color-contrast);
- @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
- @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
+ @each $color-name, $color-value in $colors-ios {
+ @include ios-bar-button-default($color-name);
+ @include ios-bar-button-outline($color-name);
+ @include ios-bar-button-solid($color-name);
}
}
@@ -105,9 +111,8 @@
.toolbar-translucent-ios-#{$color-name} {
.toolbar-background-ios {
- background: rgba($color-base, $toolbar-ios-translucent-opacity);
+ background: $color-translucent;
}
-
}
}
@@ -151,7 +156,10 @@
font-size: $toolbar-ios-button-font-size;
}
-@mixin ios-bar-button-default($color-name, $color-base, $color-contrast) {
+@mixin ios-bar-button-default($color-name, $color-base: null) {
+ @if ($color-base == null) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ }
.bar-button-#{$color-name}-ios,
.bar-button-clear-ios-#{$color-name},
@@ -191,7 +199,7 @@
background-color: transparent;
&.activated {
- color: color-contrast($colors-ios, $toolbar-ios-button-color);
+ color: $toolbar-ios-text-color;
background-color: $toolbar-ios-button-color;
}
}
@@ -200,20 +208,20 @@
opacity: .4;
}
-@mixin ios-bar-button-outline($color-name, $color-base, $color-contrast) {
+@mixin ios-bar-button-outline($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.bar-button-outline-ios-#{$color-name} {
- $fg-color: $color-base;
- border-color: $fg-color;
- color: $fg-color;
+ border-color: $color-base;
+ color: $color-base;
background-color: transparent;
&.activated {
color: $color-contrast;
- background-color: $fg-color;
+ background-color: $color-base;
}
}
-
}
@@ -221,22 +229,29 @@
// --------------------------------------------------
.bar-button-solid-ios {
- color: color-contrast($colors-ios, $toolbar-ios-button-color);
+ color: $toolbar-ios-button-background-color;
background-color: $toolbar-ios-button-color;
+ &:hover:not(.disable-hover) {
+ color: $toolbar-ios-button-background-color;
+ opacity: .4;
+ }
+
&.activated {
- color: color-contrast($colors-ios, $toolbar-ios-button-color);
- background-color: color-shade($toolbar-ios-button-color);
+ color: $toolbar-ios-button-background-color;
+ background-color: $toolbar-ios-button-background-color-activated;
opacity: .4;
}
}
.enable-hover .bar-button-solid-ios:hover {
- color: color-contrast($colors-ios, $toolbar-ios-button-color);
opacity: .4;
}
-@mixin ios-bar-button-solid($color-name, $color-base, $color-contrast) {
+@mixin ios-bar-button-solid($color-name) {
+ $color-base: ion-color($colors-ios, $color-name, base, ios);
+ $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+ $color-shade: ion-color($colors-ios, $color-name, tint, ios);
.bar-button-solid-ios-#{$color-name} {
color: $color-contrast;
@@ -244,10 +259,9 @@
&.activated {
color: $color-contrast;
- background-color: color-shade($color-base);
+ background-color: $color-shade;
}
}
-
}
@@ -341,14 +355,14 @@
// iOS Toolbar Color Generation
// --------------------------------------------------
-@include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));
-@include ios-bar-button-default(clear, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));
+@include ios-bar-button-default(default, $toolbar-ios-button-color);
+@include ios-bar-button-default(clear, $toolbar-ios-button-color);
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
- @include ios-toolbar-theme($color-name, $color-base, $color-contrast);
- @include ios-bar-button-default($color-name, $color-base, $color-contrast);
- @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
- @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-ios {
+ @include ios-toolbar-theme($color-name);
+ @include ios-bar-button-default($color-name);
+ @include ios-bar-button-outline($color-name);
+ @include ios-bar-button-solid($color-name);
}
diff --git a/packages/core/src/components/toolbar/toolbar.ios.vars.scss b/packages/core/src/components/toolbar/toolbar.ios.vars.scss
index 79c9b9bd26..e157539951 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -16,25 +16,31 @@ $toolbar-order-ios: (
);
/// @prop - Font family of the toolbar
-$toolbar-ios-font-family: $font-family-ios-base !default;
+$toolbar-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the toolbar button
-$toolbar-ios-button-font-size: 17px !default;
+$toolbar-ios-button-font-size: 17px !default;
/// @prop - Text color of the toolbar button
-$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default;
+$toolbar-ios-button-color: $toolbar-ios-text-color !default;
+
+/// @prop - Background color of the toolbar button
+$toolbar-ios-button-background-color: $toolbar-ios-background-color !default;
+
+/// @prop - Background color of the toolbar button when activated
+$toolbar-ios-button-background-color-activated: ion-color($colors-ios, primary, tint, ios);
/// @prop - Border radius of the toolbar button
-$toolbar-ios-button-border-radius: 4px !default;
+$toolbar-ios-button-border-radius: 4px !default;
/// @prop - Font weight of the strong toolbar button
-$toolbar-ios-button-strong-font-weight: 600 !default;
+$toolbar-ios-button-strong-font-weight: 600 !default;
/// @prop - Fill color of the toolbar button icon
-$toolbar-ios-button-icon-fill-color: currentColor !default;
+$toolbar-ios-button-icon-fill-color: currentColor !default;
/// @prop - Filter of the translucent toolbar
-$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default;
+$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Opacity of the translucent toolbar
-$toolbar-ios-translucent-opacity: .88 !default;
+$toolbar-ios-translucent-opacity: .88 !default;
diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss
index 7a6e4f3438..56aa3ece1a 100644
--- a/packages/core/src/components/toolbar/toolbar.md.scss
+++ b/packages/core/src/components/toolbar/toolbar.md.scss
@@ -18,7 +18,7 @@
.toolbar-background-md {
border-color: $toolbar-md-border-color;
- background: $toolbar-md-background;
+ background: $toolbar-md-background-color;
}
@@ -73,7 +73,10 @@
}
-@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
+@mixin md-toolbar-theme($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
+ $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+
.toolbar-md-#{$color-name} {
.toolbar-background-md {
@@ -99,10 +102,10 @@
border-color: $color-contrast;
}
- @each $color-name, $color-base, $color-contrast in get-colors($colors-md, md) {
- @include md-bar-button-default($color-name, $color-base, $color-contrast);
- @include md-bar-button-outline($color-name, $color-base, $color-contrast);
- @include md-bar-button-solid($color-name, $color-base, $color-contrast);
+ @each $color-name, $color-value in $colors-md {
+ @include md-bar-button-default($color-name);
+ @include md-bar-button-outline($color-name);
+ @include md-bar-button-solid($color-name);
}
}
}
@@ -160,7 +163,10 @@
overflow: hidden;
}
-@mixin md-bar-button-default($color-name, $color-base, $color-contrast) {
+@mixin md-bar-button-default($color-name, $color-base: null) {
+ @if($color-base == null) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
+ }
.bar-button-#{$color-name}-md,
.bar-button-clear-md-#{$color-name},
@@ -174,7 +180,6 @@
.enable-hover .bar-button-md-#{$color-name}:hover {
color: $color-base;
}
-
}
@@ -209,12 +214,12 @@
opacity: .4;
}
-@mixin md-bar-button-outline($color-name, $color-base, $color-contrast) {
+@mixin md-bar-button-outline($color-name) {
+ $color-shade: ion-color($colors-md, $color-name, tint, md);
.bar-button-outline-md-#{$color-name} {
- $fg-color: color-shade($color-base);
- border-color: $fg-color;
- color: $fg-color;
+ border-color: $color-shade;
+ color: $color-shade;
background-color: transparent;
&.activated {
@@ -222,10 +227,9 @@
}
.ripple-effect {
- background-color: $fg-color;
+ background-color: $color-shade;
}
}
-
}
@@ -233,22 +237,22 @@
// --------------------------------------------------
.bar-button-solid-md {
- color: color-contrast($colors-md, $toolbar-md-button-color, md);
+ color: $toolbar-md-button-background-color;
background-color: $toolbar-md-button-color;
&.activated {
- color: color-contrast($colors-md, $toolbar-md-button-color, md);
- background-color: color-shade($toolbar-md-button-color);
+ color: $toolbar-md-button-background-color;
+ background-color: $toolbar-md-button-background-color-activated;
}
}
.enable-hover .bar-button-solid-md:hover {
- color: color-contrast($colors-md, $toolbar-md-button-color, md);
+ color: $toolbar-md-button-background-color;
}
-
-
-@mixin md-bar-button-solid($color-name, $color-base, $color-contrast) {
+@mixin md-bar-button-solid($color-name) {
+ $color-base: ion-color($colors-md, $color-name, base, md);
+ $color-contrast: ion-color($colors-md, $color-name, contrast, md);
.bar-button-solid-md-#{$color-name} {
color: $color-contrast;
@@ -256,10 +260,9 @@
&.activated {
color: $color-contrast;
- background-color: color-shade($color-base);
+ background-color: ion-color($colors-md, $color-base, tint, md);
}
}
-
}
@@ -348,14 +351,14 @@
// Material Design Toolbar Color Generation
// --------------------------------------------------
-@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
-@include md-bar-button-default(clear, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
+@include md-bar-button-default(default, $toolbar-md-button-color);
+@include md-bar-button-default(clear, $toolbar-md-button-color);
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md, md) {
- @include md-toolbar-theme($color-name, $color-base, $color-contrast);
- @include md-bar-button-default($color-name, $color-base, $color-contrast);
- @include md-bar-button-outline($color-name, $color-base, $color-contrast);
- @include md-bar-button-solid($color-name, $color-base, $color-contrast);
+@each $color-name, $color-value in $colors-md {
+ @include md-toolbar-theme($color-name);
+ @include md-bar-button-default($color-name);
+ @include md-bar-button-outline($color-name);
+ @include md-bar-button-solid($color-name);
}
diff --git a/packages/core/src/components/toolbar/toolbar.md.vars.scss b/packages/core/src/components/toolbar/toolbar.md.vars.scss
index 1677da3d54..9274bdf141 100644
--- a/packages/core/src/components/toolbar/toolbar.md.vars.scss
+++ b/packages/core/src/components/toolbar/toolbar.md.vars.scss
@@ -16,19 +16,25 @@ $toolbar-order-md: (
);
/// @prop - Font family of the toolbar
-$toolbar-md-font-family: $font-family-md-base !default;
+$toolbar-md-font-family: $font-family-md-base !default;
/// @prop - Font size of the toolbar button
-$toolbar-md-button-font-size: 14px !default;
+$toolbar-md-button-font-size: 14px !default;
/// @prop - Text color of the toolbar button
-$toolbar-md-button-color: color-contrast($colors-md, $toolbar-md-background, md) !default;
+$toolbar-md-button-color: $toolbar-md-text-color !default;
+
+/// @prop - Background color of the toolbar button
+$toolbar-md-button-background-color: $toolbar-md-background-color !default;
+
+/// @prop - Background color of the toolbar button when activated
+$toolbar-md-button-background-color-activated: ion-color($colors-md, primary, tint, md);
/// @prop - Border radius of the toolbar button
-$toolbar-md-button-border-radius: 2px !default;
+$toolbar-md-button-border-radius: 2px !default;
/// @prop - Fill color of the toolbar button icon
-$toolbar-md-button-icon-fill-color: currentColor !default;
+$toolbar-md-button-icon-fill-color: currentColor !default;
/// @prop - Font weight of the strong toolbar button
-$toolbar-md-button-strong-font-weight: bold !default;
+$toolbar-md-button-strong-font-weight: bold !default;
diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css
index bbfeaba882..4b8553eb89 100644
--- a/packages/core/src/themes/css/default.css
+++ b/packages/core/src/themes/css/default.css
@@ -1,54 +1,119 @@
/** default theme **/
-
:root {
- --color-primary: #3880ff;
- --color-primary-tint: #5896ff;
- --color-primary-shade: #135ddf;
- --color-primary-contrast: #ffffff;
- --color-secondary: #0cd1e8;
- --color-secondary-tint: #5de6f6;
- --color-secondary-shade: #00bce0;
- --color-secondary-contrast: #ffffff;
- --color-tertiary: #7044ff;
- --color-tertiary-tint: #896bff;
- --color-tertiary-shade: #4d16d6;
- --color-tertiary-contrast: #ffffff;
- --color-success: #10dc60;
- --color-success-tint: #38ec7f;
- --color-success-shade: #00bc4a;
- --color-success-contrast: #ffffff;
- --color-warning: #ffce00;
- --color-warning-tint: #ffe05e;
- --color-warning-shade: #f5ad00;
- --color-warning-contrast: #ffffff;
- --color-danger: #f04141;
- --color-danger-tint: #ff6464;
- --color-danger-shade: #ca1717;
- --color-danger-contrast: #ffffff;
- --color-light: #f4f5f8;
- --color-light-tint: #ffffff;
- --color-light-shade: #e2e4e9;
- --color-light-contrast: #000000;
- --color-medium: #989aa2;
- --color-medium-tint: #c1c4cd;
- --color-medium-shade: #62646a;
- --color-medium-contrast: #000000;
- --color-dark: #222428;
- --color-dark-tint: #3f4248;
- --color-dark-shade: #000000;
- --color-dark-contrast: #ffffff;
- --text-color: #000000;
- --text-color-alt: #898b93;
- --background-color: #ffffff;
- --background-color-alt: #f4f5f8;
- --toolbar-background-color: #f4f5f8;
- --tabbar-background-color: #f4f5f8;
- --tabbar-text-color: #989aa2;
- --tabbar-text-color-active: #3880ff;
- --item-background-color: #ffffff;
- --item-background-color-alt: #c1c4cd;
- --border-color: #c1c4cd;
- --backdrop-color: #000000;
- --box-shadow-color: #000000;
-}
\ No newline at end of file
+ --ion-alpha-lowest: .06;
+ --ion-alpha-low: .1;
+ --ion-alpha-medium: .4;
+ --ion-alpha-high: .75;
+ --ion-alpha-highest: .9;
+ --ion-color-primary: #488aff;
+ --ion-color-primary-contrast: #fff;
+ --ion-color-primary-rgb: '72,138,255';
+ --ion-color-primary-shade: #3f79e0;
+ --ion-color-primary-tint: #427feb;
+ --ion-color-secondary: #32db64;
+ --ion-color-secondary-contrast: #fff;
+ --ion-color-secondary-rgb: '50,219,100';
+ --ion-color-secondary-shade: #2cc158;
+ --ion-color-secondary-tint: #2ec95c;
+ --ion-color-tertiary: #f4a942;
+ --ion-color-tertiary-contrast: #fff;
+ --ion-color-tertiary-rgb: '244,169,66';
+ --ion-color-tertiary-shade: #d6903d;
+ --ion-color-tertiary-tint: #ffa529;
+ --ion-color-success: #10dc60;
+ --ion-color-success-contrast: #fff;
+ --ion-color-success-rgb: '16,220,96';
+ --ion-color-success-shade: #10cb60;
+ --ion-color-success-tint: #23df6d;
+ --ion-color-warning: #ffce00;
+ --ion-color-warning-contrast: #000;
+ --ion-color-warning-rgb: '255,206,0';
+ --ion-color-warning-shade: #f1c100;
+ --ion-color-warning-tint: #ffd214;
+ --ion-color-danger: #f53d3d;
+ --ion-color-danger-contrast: #fff;
+ --ion-color-danger-rgb: '245,61,61';
+ --ion-color-danger-shade: #d83636;
+ --ion-color-danger-tint: #e13838;
+ --ion-color-light: #f4f4f4;
+ --ion-color-light-contrast: #000;
+ --ion-color-light-rgb: '244,244,244';
+ --ion-color-light-shade: #d7d7d7;
+ --ion-color-light-tint: #e0e0e0;
+ --ion-color-medium: #989aa2;
+ --ion-color-medium-contrast: #000;
+ --ion-color-medium-rgb: '152,154,162';
+ --ion-color-medium-shade: #8c8e95;
+ --ion-color-medium-tint: #86888f;
+ --ion-color-dark: #222;
+ --ion-color-dark-contrast: #fff;
+ --ion-color-dark-rgb: '34,34,34';
+ --ion-color-dark-shade: #343434;
+ --ion-color-dark-tint: #3d3d3d;
+ --ion-backdrop-color: #000;
+ --ion-background-color: #fff;
+ --ion-background-color-rgb: '255,255,255';
+ --ion-background-color-step-100: #f2f2f2;
+ --ion-background-color-step-200: #dcdcdc;
+ --ion-background-color-step-300: #bdbdbd;
+ --ion-background-color-step-400: #444;
+ --ion-border-color: #b2b2b2;
+ --ion-box-shadow-color: #000;
+ --ion-text-color: #000;
+ --ion-text-color-rgb: '0,0,0';
+ --ion-text-color-step-100: #222;
+ --ion-text-color-step-200: #666;
+ --ion-text-color-step-300: #999;
+ --ion-text-color-step-400: #c5c5c5;
+ --ion-tabbar-background-color: #f8f8f8;
+ --ion-tabbar-border-color: var(--ion-border-color);
+ --ion-tabbar-text-color: #8c8c8c;
+ --ion-tabbar-text-color-active: #488aff;
+ --ion-toolbar-background-color: #f8f8f8;
+ --ion-toolbar-border-color: var(--ion-border-color);
+ --ion-toolbar-color-active: #488aff;
+ --ion-toolbar-color-inactive: #8c8c8c;
+ --ion-toolbar-text-color: var(--ion-text-color);
+ --ion-item-background-color: var(--ion-background-color);
+ --ion-item-background-color-active: var(--ion-background-color);
+ --ion-item-border-color: #c8c7cc;
+ --ion-item-text-color: var(--ion-text-color);
+ --ion-placeholder-text-color: #999;
+
+ /* Material Design */
+ --ion-color-md-light: #e3e3e3;
+ --ion-color-md-light-contrast: #000;
+ --ion-color-md-light-rgb: '227,227,227';
+ --ion-color-md-light-shade: #d0d0d0;
+ --ion-color-md-light-tint: #f0f0f0;
+ --ion-border-md-color: #c1c4cd;
+ --ion-text-md-color-step-200: var(--ion-text-color-step-200);
+ --ion-tabbar-md-border-color: rgba(0, 0, 0, .07);
+ --ion-tabbar-md-text-color: var(--ion-text-md-color-step-200);
+ --ion-toolbar-md-border-color: var(--ion-border-md-color);
+ --ion-toolbar-md-text-color: #424242;
+ --ion-item-md-background-color-active: #f1f1f1;
+ --ion-item-md-border-color: #dedede;
+
+ /* iOS */
+ --ion-color-ios-primary: var(--ion-color-primary);
+ --ion-background-ios-color: var(--ion-background-color);
+ --ion-background-ios-color-step-100: #f7f7f7;
+ --ion-background-ios-color-step-200: #bdbdbd;
+ --ion-background-ios-color-step-300: #999;
+ --ion-background-ios-color-step-400: #222;
+ --ion-text-ios-color-step-100: #222;
+ --ion-text-ios-color-step-200: #666;
+ --ion-text-ios-color-step-300: #8f8f8f;
+ --ion-text-ios-color-step-400: #aeaeae;
+ --ion-border-ios-color: #c1c4cd;
+ --ion-tabbar-ios-translucent-background-color: rgba(248, 248, 248, 0.8);
+ --ion-tabbar-ios-border-color: rgba(0, 0, 0, .2);
+ --ion-tabbar-ios-text-color-active: var(--ion-color-ios-primary);
+ --ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, 0.8);
+ --ion-toolbar-ios-border-color: rgba(0, 0, 0, .2);
+ --ion-toolbar-ios-color-active: var(--ion-color-ios-primary);
+ --ion-item-ios-background-color: var(--ion-background-ios-color);
+ --ion-item-ios-background-color-active: #d9d9d9;
+}
diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css
index b5d52be93d..0bb41ea916 100644
--- a/packages/core/src/themes/css/oceanic.css
+++ b/packages/core/src/themes/css/oceanic.css
@@ -1,54 +1,83 @@
/** oceanic theme **/
-
:root {
- --color-primary: #549ee7;
- --color-primary-tint: #59aafc;
- --color-primary-shade: #498bce;
- --color-primary-contrast: #ffffff;
- --color-secondary: #5fb3b3;
- --color-secondary-tint: #6ececf;
- --color-secondary-shade: #34a29d;
- --color-secondary-contrast: #ffffff;
- --color-tertiary: #fac863;
- --color-tertiary-tint: #ffd36a;
- --color-tertiary-shade: #eab30f;
- --color-tertiary-contrast: #ffffff;
- --color-success: #90d089;
- --color-success-tint: #a1eb9a;
- --color-success-shade: #81bc7b;
- --color-success-contrast: #ffffff;
- --color-warning: #f99157;
- --color-warning-tint: #ff9e60;
- --color-warning-shade: #ec8a54;
- --color-warning-contrast: #ffffff;
- --color-danger: #ec5f67;
- --color-danger-tint: #ff707b;
- --color-danger-shade: #cb535b;
- --color-danger-contrast: #ffffff;
- --color-light: #d8dee9;
- --color-light-tint: #ecf2ff;
- --color-light-shade: #bcc1cd;
- --color-light-contrast: #1b2b34;
- --color-medium: #65737e;
- --color-medium-tint: #a7adba;
- --color-medium-shade: #4f5b66;
- --color-medium-contrast: #ffffff;
- --color-dark: #1b2b34;
- --color-dark-tint: #343d46;
- --color-dark-shade: #070b0d;
- --color-dark-contrast: #d8dee9;
- --text-color: #ffffff;
- --text-color-alt: #a7adba;
- --background-color: #1b2b34;
- --background-color-alt: #343d46;
- --toolbar-background-color: #343d46;
- --tabbar-background-color: #343d46;
- --tabbar-text-color: #a7adba;
- --tabbar-text-color-active: #549ee7;
- --item-background-color: #343d46;
- --item-background-color-alt: #65737e;
- --border-color: #1b2b34;
- --backdrop-color: #1b2b34;
- --box-shadow-color: #000000;
-}
\ No newline at end of file
+ --ion-alpha-lowest: .06;
+ --ion-alpha-low: .1;
+ --ion-alpha-medium: .4;
+ --ion-alpha-high: .75;
+ --ion-alpha-highest: .9;
+ --ion-color-primary: #549ee7;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-rgb: '84,158,231';
+ --ion-color-primary-shade: #498bce;
+ --ion-color-primary-tint: #59aafc;
+ --ion-color-secondary: #5fb3b3;
+ --ion-color-secondary-contrast: #fff;
+ --ion-color-secondary-rgb: '95,179,179';
+ --ion-color-secondary-shade: #34a29d;
+ --ion-color-secondary-tint: #6ececf;
+ --ion-color-tertiary: #fac863;
+ --ion-color-tertiary-contrast: #fff;
+ --ion-color-tertiary-rgb: '250,200,99';
+ --ion-color-tertiary-shade: #eab30f;
+ --ion-color-tertiary-tint: #ffd36a;
+ --ion-color-success: #90d089;
+ --ion-color-success-contrast: #ffffff;
+ --ion-color-success-rgb: '144,208,137';
+ --ion-color-success-shade: #81bc7b;
+ --ion-color-success-tint: #a1eb9a;
+ --ion-color-warning: #f99157;
+ --ion-color-warning-contrast: #ffffff;
+ --ion-color-warning-rgb: '249,145,87';
+ --ion-color-warning-shade: #ec8a54;
+ --ion-color-warning-tint: #ff9e60;
+ --ion-color-danger: #ec5f67;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-rgb: '236,95,103';
+ --ion-color-danger-shade: #cb535b;
+ --ion-color-danger-tint: #ff707b;
+ --ion-color-light: #d8dee9;
+ --ion-color-light-contrast: #1b2b34;
+ --ion-color-light-rgb: '216,222,233';
+ --ion-color-light-shade: #bcc1cd;
+ --ion-color-light-tint: #ecf2ff;
+ --ion-color-medium: #65737e;
+ --ion-color-medium-contrast: #ffffff;
+ --ion-color-medium-rgb: '101,115,126';
+ --ion-color-medium-shade: #4f5b66;
+ --ion-color-medium-tint: #a7adba;
+ --ion-color-dark: #1b2b34;
+ --ion-color-dark-contrast: #d8dee9;
+ --ion-color-dark-rgb: '27,43,52';
+ --ion-color-dark-shade: #070b0d;
+ --ion-color-dark-tint: #343d46;
+ --ion-backdrop-color: #1b2b34;
+ --ion-background-color: #1b2b34;
+ --ion-background-color-rgb: '27,43,52';
+ --ion-background-color-step-100: #293a43;
+ --ion-background-color-step-200: #465b6e;
+ --ion-background-color-step-300: #61879e;
+ --ion-background-color-step-400: #91adbf;
+ --ion-border-color: #1b2b34;
+ --ion-box-shadow-color: #000000;
+ --ion-text-color: #ffffff;
+ --ion-text-color-rgb: '255,255,255';
+ --ion-text-color-step-100: #c5c5c5;
+ --ion-text-color-step-200: #b0b0b0;
+ --ion-text-color-step-300: #aeaeae;
+ --ion-text-color-step-400: #222;
+ --ion-tabbar-background-color: #343d46;
+ --ion-tabbar-border-color: var(--ion-border-color);
+ --ion-tabbar-text-color: #a7adba;
+ --ion-tabbar-text-color-active: #549ee7;
+ --ion-toolbar-background-color: #343d46;
+ --ion-toolbar-border-color: var(--ion-border-color);
+ --ion-toolbar-color-active: var(--ion-color-primary);
+ --ion-toolbar-color-inactive: #a7adba;
+ --ion-toolbar-text-color: var(--ion-text-color);
+ --ion-item-background-color: #343d46;
+ --ion-item-background-color-active: #232b34;
+ --ion-item-border-color: var(--ion-border-color);
+ --ion-item-text-color: var(--ion-text-color);
+ --ion-placeholder-text-color: #999;
+}
diff --git a/packages/core/src/themes/ionic.functions.color.scss b/packages/core/src/themes/ionic.functions.color.scss
new file mode 100644
index 0000000000..be36e6ace3
--- /dev/null
+++ b/packages/core/src/themes/ionic.functions.color.scss
@@ -0,0 +1,219 @@
+@import "./ionic.functions.list";
+@import "./ionic.functions.string";
+
+$css-variable-prefix: "--ion-";
+$default-color-variation: base;
+$default-color-prefix: color-;
+$enable-css-variables: true;
+$css-variables: ();
+$modes: (ios, md);
+
+@mixin css-variables-to-root {
+ :root {
+ @each $name, $color in $css-variables {
+ #{$name}: $color;
+ }
+ }
+}
+
+@function get-mode($name) {
+ @each $mode in $modes {
+ @if (str-contains($name, "-#{$mode}-") or (str-index($name, "#{$mode}-") == 1)) {
+ @return $mode;
+ }
+ }
+
+ @return null;
+}
+
+// Parses a color into its name/variation pairs from the color map
+// @private
+@function color-to-name-variation($colors, $color, $variation: null) {
+ $results: ();
+ $found: false;
+ @each $color-name, $color-value in $colors {
+ @if (not $found and type-of($color-value) == map) {
+ @each $color-variation-name, $color-variation-value in $color-value {
+ @if ($color == $color-variation-value) {
+ $variation: if($variation == $color-variation-name, $default-color-variation, $variation);
+ @if ($variation) {
+ $results: map-merge($results, (variation: $variation));
+ }
+ $results: map-merge($results, (name: $color-name));
+ $found: true;
+ }
+ }
+ } @else if (not $found and $color == $color-value) {
+ $results: map-merge($results, (name: $color-name));
+ $found: true;
+ }
+ }
+
+ @return $results;
+}
+
+@function color-to-rgb-list($color) {
+ @return #{red($color)},#{green($color)},#{blue($color)};
+}
+
+// Parses a css variable string into its original name/variation pair
+// @private
+@function css-variable-to-name-variation($variable) {
+ // Determine the name of this color from the CSS Variable
+ $prefix: #{$css-variable-prefix}#{$default-color-prefix};
+ // Extract the last css variable
+ $index: str-index($variable, $prefix);
+ $end-index: str-index($variable, ")");
+ $value: str-slice($variable, $index, $end-index);
+
+ // Find the name of the variable
+ $end-index: str-index($value, ",");
+ $name: str-slice($value, str-length($prefix) + 1, $end-index - 1);
+
+ // Default variation (base)
+ $variation: $default-color-variation;
+
+ // Check for a mode (-md-or -ios-)
+ $mode: get-mode($name);
+
+ // Determine if this CSS variable is itself a variation (e.g. primary-contrast)
+ $extracted: str-split($name, "-");
+
+ // If this color already has a mode prefix, remove it
+ @if ($mode != null) {
+ $extracted: remove-nth($extracted, 1);
+ }
+
+ @if (length($extracted) > 0) {
+ $name: nth($extracted, 1);
+ }
+
+ @if (length($extracted) > 1) {
+ $variation: nth($extracted, 2);
+ }
+
+ @return (name: $name, variation: $variation, mode: $mode);
+}
+
+@function css-var($color, $name) {
+ @if ($enable-css-variables) {
+ $is-reference: str-contains($color, $css-variable-prefix);
+ $global-css-variable: #{$css-variable-prefix}#{$name};
+ $mode: get-mode($name);
+
+ @if ($mode != null) {
+ $mode-css-variable: $global-css-variable;
+ $mode: "-#{$mode}-";
+ $global-css-variable: str-replace($mode-css-variable, $mode, "-");
+
+ $css-variables: map-merge($css-variables, ($mode-css-variable: $color)) !global;
+ $color: #{if($is-reference, "#{$color}", "var(#{$global-css-variable}, #{$color})")};
+ $color: "var(#{$mode-css-variable}, #{$color})";
+ } @else {
+ $css-variables: map-merge($css-variables, ($global-css-variable: $color)) !global;
+ $color: "var(#{$global-css-variable}, #{$color})";
+ }
+ }
+
+ $color: if(type-of($color) != string, $color, unquote($color));
+ @return $color;
+}
+
+@function ion-color($colors, $name, $variation: null, $mode: null) {
+
+ // If CSS variables are off or someone passed a raw color, we will be passed color values
+ // we need to look up the map in order to provide variations
+ @if (type-of($name) == color) {
+ $results: color-to-name-variation($colors, $name, $variation);
+ @if (map-has-key($results, name)) {
+ $name: map-get($results, name);
+ @if (map-has-key($results, variation)) {
+ $variation: map-get($results, variation);
+ } @else {
+ @if ($variation) {
+ @warn "Color '#{$name}' does not exist in map. Unable to set to variation '#{$variation}'"
+ }
+ }
+ }
+ }
+
+ // Does the name contain the CSS Variable color prefix
+ // If so this is this is a reference to a CSS variable
+ @if ($enable-css-variables and str-contains($name, $css-variable-prefix)) {
+ // If there is no variation change, just return the css variable
+ @if ($variation == null) {
+ @return unquote($name);
+ } @else {
+ // Convert the CSS Variable into a name/variation pair
+ $results: css-variable-to-name-variation($name);
+ $name: map-get($results, name);
+ $current-variation: map-get($results, variation);
+ $current-mode: map-get($results, mode);
+ $variation: if($variation == $current-variation, $default-color-variation, $variation);
+ $mode: if($current-mode != null, $current-mode, $mode);
+ }
+ }
+
+ $color: map-get($colors, $name);
+ @if ($color) {
+ // If there is no variation use the default
+ $variation: if($variation == null, $default-color-variation, $variation);
+
+ // If the color contains variations pick the appropriate one
+ @if (type-of($color) == map) {
+ @if (not map-has-key($color, $variation)) {
+ @if (not map-has-key($color, $variation)) {
+ @error "Unknown Color: '#{$name}' with variation '#{$variation}'.";
+ }
+ }
+ $color: map-get($color, $variation);
+ } @else if $variation != $default-color-variation {
+ @error "Color '#{$name}' is not a map. Cannot contain variation '#{$variation}'.";
+ }
+
+ $name: "#{$default-color-prefix}#{if($mode, '#{$mode}-', '')}#{$name}";
+ @if $variation != $default-color-variation {
+ $name: "#{$name}-#{$variation}";
+ }
+
+ @return css-var($color, $name);
+ }
+
+ @error "Unknown Color: '#{$name}' with variation '#{$variation}'";
+}
+
+// Also can take the format
+// ion-color-alpha($color-value, $css-variable-name, $alpha) {
+@function ion-color-alpha($colors, $name, $alpha, $mode: null) {
+ @if (type-of($colors) == color) {
+ $value: color-to-rgb-list($colors);
+ $fallback: css-var($value, $name);
+ @return unquote("rgba(#{$value}, #{$alpha})");
+ } @else {
+ $value: ion-color($colors, $name, rgb, $mode);
+ @return unquote("rgba(#{$value}, #{$alpha})");
+ }
+}
+
+@function ion-extend-colors($parent, $children...) {
+ $result: map-merge($parent, ());
+
+ @each $child in $children {
+ @each $key, $value in $child {
+ @if type-of($value) == map {
+ $obj: ();
+ @if (map-has-key($result, $key)) {
+ $obj: map-get($result, $key);
+
+ @if (type-of($obj) == color) {
+ $obj: (base: $obj);
+ }
+ }
+ $result: map-merge($result, ($key: ion-extend-colors($obj, $value)));
+ } @else {
+ $result: map-merge($result, ($key: $value));
+ }
+ }
+ }
+ @return $result;
+}
diff --git a/packages/core/src/themes/ionic.functions.list.scss b/packages/core/src/themes/ionic.functions.list.scss
new file mode 100644
index 0000000000..8290d94907
--- /dev/null
+++ b/packages/core/src/themes/ionic.functions.list.scss
@@ -0,0 +1,22 @@
+@function remove-nth($list, $index) {
+ $result: null;
+
+ @if type-of($index) != number {
+ @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+ } @else if $index == 0 {
+ @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+ } @else if abs($index) > length($list) {
+ @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+ } @else {
+ $result: ();
+ $index: if($index < 0, length($list) + $index + 1, $index);
+
+ @for $i from 1 through length($list) {
+ @if $i != $index {
+ $result: append($result, nth($list, $i));
+ }
+ }
+ }
+
+ @return $result;
+}
diff --git a/packages/core/src/themes/ionic.functions.map.scss b/packages/core/src/themes/ionic.functions.map.scss
new file mode 100644
index 0000000000..ae9c849f71
--- /dev/null
+++ b/packages/core/src/themes/ionic.functions.map.scss
@@ -0,0 +1,13 @@
+// Fetch nested keys
+// @param {Map} $map - Map
+// @param {Arglist} $keys - Keys to fetch
+// @return {*}
+// --------------------------------------------------
+
+@function map-fetch($map, $keys...) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+
+ @return $map;
+}
diff --git a/packages/core/src/themes/ionic.functions.scss b/packages/core/src/themes/ionic.functions.scss
deleted file mode 100644
index 95bd56d129..0000000000
--- a/packages/core/src/themes/ionic.functions.scss
+++ /dev/null
@@ -1,338 +0,0 @@
-
-// Color Functions
-// --------------------------------------------------
-
-@function color-error($color-value, $color-name: null) {
- $error-msg: "
-
- The value `#{$color-value}` must be a color.
- If you are setting the value as a map make sure
- both the base and contrast are defined as colors.
-
- For example:
-
- $colors: (
- primary: #488aff,
- secondary: (base: #32db64, contrast: #000),
- );";
-
- // If there was a name passed it means the value doesn't exist
- // so error that the value isn't defined
- @if ($color-name) {
- $error-msg: "
-
- The map color `#{$color-name}` is not defined.
- Please make sure the color exists in your
- `$colors` map.
-
- For example:
-
- $colors: (
- #{$color-name}: #488aff
- );";
- }
-
- @error $error-msg;
-
- @return null;
-}
-
-@function color-brightness($color-value) {
- @if (type-of($color-value) != color) {
- @return color-error($color-value);
- }
-
- @return (red($color-value) * .299 + green($color-value) * .587 + blue($color-value) * .114) / 255 * 100%;
-}
-
-
-@function color-inverse($color-value, $dark: #000, $light: #fff) {
- @if (type-of($color-value) != color) {
- @return color-error($color-value);
- }
-
- $brightness: color-brightness($color-value);
- $red: red($color-value);
- $green: green($color-value);
-
- @if ($brightness > 79) {
- @return $dark;
- }
-
- @if ($green > 240) {
- @return $dark;
- }
-
- @if ($red > 220 and $green > 180) {
- @return $dark;
- }
-
- @return $light;
-}
-
-// Pass dark and light colors based on the mode
-// this is mostly used for toolbar buttons/titles
-//
-// @param {String} $color-value - color to get the inverse of
-// @param {Boolean} $custom-contrast-mode - the mode to use
-// in order to pass the custom colors
-//
-// @return {Color}
-// --------------------------------------------------
-@function mode-inverse($color-value, $custom-contrast-mode) {
- $dark: #000;
- $light: #fff;
-
- @if ($custom-contrast-mode == md) {
- $dark: #424242;
- $light: #fff;
- } @else if ($custom-contrast-mode == ios) {
- $dark: color($colors-ios, primary);
- $light: #fff;
- }
-
- @return color-inverse($color-value, $dark, $light);
-}
-
-
-@function color-shade($color-value, $amount:8%) {
- @if (type-of($color-value) != color) {
- @return color-error($color-value);
- }
-
- $lightness: lightness($color-value);
-
- $shade: #fff;
-
- @if ($lightness > 50) {
- $shade: #000;
- }
-
- @return mix($shade, $color-value, $amount);
-}
-
-// Copy Colors Map
-// --------------------------------------------------
-
-@function copy-colors($colors-map) {
- @return map-merge($colors-map, ());
-}
-
-
-// String Replace Function
-// --------------------------------------------------
-
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
-
- @if $index {
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
-
- @return $string;
-}
-
-
-// String Split Function
-// --------------------------------------------------
-
-@function str-split($string, $separator) {
- // empty array/list
- $split-arr: ();
- // first index of separator in string
- $index: str-index($string, $separator);
- // loop through string
- @while $index != null {
- // get the substring from the first character to the separator
- $item: str-slice($string, 1, $index - 1);
- // push item to array
- $split-arr: append($split-arr, $item);
- // remove item and separator from string
- $string: str-slice($string, $index + 1);
- // find new index of separator
- $index: str-index($string, $separator);
- }
- // add the remaining string to list (the last item)
- $split-arr: append($split-arr, $string);
-
- @return $split-arr;
-}
-
-
-// Str extract between start and end
-// --------------------------------------------------
-
-@function str-extract($string, $start, $end) {
- $start-index: str-index($string, $start);
-
- @if $start-index {
- $post: str-slice($string, $start-index + str-length($start));
- $end-index: str-index($post, $end);
-
- @if $end-index {
- @return str-slice($post, 1, $end-index - 1);
- }
- }
-
- @return null;
-}
-
-
-// URL Encode Function
-// --------------------------------------------------
-
-@function url-encode($val) {
- $spaces: str-replace($val, " ", "%20");
- $encoded: str-replace($spaces, "#", "%23");
- @return $encoded;
-}
-
-
-// Fetch nested keys
-// @param {Map} $map - Map
-// @param {Arglist} $keys - Keys to fetch
-// @return {*}
-// --------------------------------------------------
-
-@function map-fetch($map, $keys...) {
- @each $key in $keys {
- $map: map-get($map, $key);
- }
-
- @return $map;
-}
-
-
-// Fetch map color value
-// @param {Map} $map - Map
-// @param {String} $color-name - Color name to get
-// @param {String} $color-key - Color key (optional), default base
-// @return {Color}
-// --------------------------------------------------
-
-@function color($map, $color-name, $color-key:null) {
- // Get the value from $color-name in the map
- // this can be of type color or a map
- $color-value: map-get($map, $color-name);
-
- // If we were given a map we need to grab the value
- // of the key that is passed or the base key
- @if(type-of($color-value) == map) {
- @if($color-key) {
- $color-value: map-fetch($map, $color-name, $color-key);
- } @else {
- $color-value: map-fetch($map, $color-name, base);
- }
- }
-
- // If the value is a color then return the value
- // otherwise we need to error with the name
- @if (type-of($color-value) == color) {
- @return $color-value;
- }
- @return color-error($color-value, $color-name);
-}
-
-// Get the color map key based on the value
-// if it doesn't exist then return the value
-// --------------------------------------------------
-@function color-key($colors, $value) {
- @each $color-name, $color-value in $colors {
- $base-value: color($colors, $color-name);
- @if ($base-value == $value) {
- @return map-get($colors, $color-name);
- }
- }
-
- @return $value;
-}
-
-// Fetch map color contrast
-// @param {Map} $colors - colors map
-// @param {String} $value - color value or color name
-//
-// Example values
-// --------------------------------------------------
-// primary | #488aff | #444
-// map key | map value | hex color not in map
-// --------------------------------------------------
-//
-// @param {Boolean} $custom-contrast-mode - use custom
-// contrast function
-// @return {Color}
-// --------------------------------------------------
-@function color-contrast($colors, $value, $custom-contrast-mode: null) {
- $color-value: null;
-
- // If the value is a color (e.g. #fff)
- // we need to call color-key to see if
- // it exists in the color map or not
- @if (type-of($value) == color) {
- $color-value: color-key($colors, $value);
-
- } @else {
- // If the value is a string (e.g. primary)
- // we want to get the value from the map
- // where it is the key
- $color-value: map-get($colors, $value);
- }
-
- // If the value is a map then get the contrast
- // from the map (e.g. (base: #488aff, contrast: blue))
- @if (type-of($color-value) == map) {
- // If the map has the contrast key then use that
- // otherwise it is a map with just a base so get
- // the inverse of that base color
- @if map-has-key($color-value, contrast) {
- $color-value: map-get($color-value, contrast);
- } @else {
- $color-value: color-inverse(map-get($color-value, base));
- }
-
- } @elseif ($custom-contrast-mode) {
- // If a mode was passed we need to call
- // the custom inverse function to get the inverse
- // color based on the mode
- $color-value: mode-inverse($color-value, $custom-contrast-mode);
-
- } @else {
- // Otherwise we were passed a color and can use the
- // function to get the inverse of that color
- // (e.g. #f4f4f4)
- $color-value: color-inverse($color-value);
- }
-
- // If the final value being returned is not a color
- // we should error
- @if (type-of($color-value) != color) {
- @return color-error($color-value);
- }
-
- @return $color-value;
-}
-
-
-// Create a list using the colors map
-// @param {Map} $colors - colors map
-// @return {List} $color-name, $color-base, $color-contrast
-// ----------------------------------------------------------
-@function get-colors($colors, $custom-contrast-mode: null) {
- $colors-list: ();
-
- @each $color-name, $color-value in $colors {
- $color-base: null;
- $color-contrast: null;
-
- @if(type-of($color-value) == map) {
- $color-base: map-get($color-value, base);
- $color-contrast: map-get($color-value, contrast);
- } @else {
- $color-base: $color-value;
- $color-contrast: color-contrast($colors, $color-value, $custom-contrast-mode);
- }
-
- $colors-list: append($colors-list, ($color-name, $color-base, $color-contrast), comma);
- }
-
- @return $colors-list;
-}
diff --git a/packages/core/src/themes/ionic.functions.string.scss b/packages/core/src/themes/ionic.functions.string.scss
new file mode 100644
index 0000000000..db588ab65f
--- /dev/null
+++ b/packages/core/src/themes/ionic.functions.string.scss
@@ -0,0 +1,80 @@
+// String Replace Function
+// --------------------------------------------------
+
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+// String Split Function
+// --------------------------------------------------
+
+@function str-split($string, $separator) {
+ // empty array/list
+ $split-arr: ();
+ // first index of separator in string
+ $index: str-index($string, $separator);
+ // loop through string
+ @while $index != null {
+ // get the substring from the first character to the separator
+ $item: str-slice($string, 1, $index - 1);
+ // push item to array
+ $split-arr: append($split-arr, $item);
+ // remove item and separator from string
+ $string: str-slice($string, $index + 1);
+ // find new index of separator
+ $index: str-index($string, $separator);
+ }
+ // add the remaining string to list (the last item)
+ $split-arr: append($split-arr, $string);
+
+ @return $split-arr;
+}
+
+@function str-last-index($str, $search) {
+ $split: str-split($str, $search);
+ $len: length($split);
+
+ @if ($len > 1) {
+ $count: 0;
+ @for $i from 1 through ($len - 1) {
+ $item: nth($split, $i);
+ $count: $count + str-length($item);
+ }
+
+ @return $count + $len;
+ } @else {
+ @error "str-last-index was unable to find any instances of '#{$search}' inside '#{$str}'";
+ }
+}
+
+// Str extract between start and end
+// --------------------------------------------------
+
+@function str-extract($string, $start, $end) {
+ $start-index: str-index($string, $start);
+
+ @if $start-index {
+ $post: str-slice($string, $start-index + str-length($start));
+ $end-index: str-index($post, $end);
+
+ @if $end-index {
+ @return str-slice($post, 1, $end-index - 1);
+ }
+ }
+
+ @return null;
+}
+
+@function str-contains($string, $needle) {
+ @if (type-of($string) == string) {
+ @return str-index($string, $needle) != null;
+ }
+
+ @return false;
+}
diff --git a/packages/core/src/themes/ionic.functions.url.scss b/packages/core/src/themes/ionic.functions.url.scss
new file mode 100644
index 0000000000..bb359f12d9
--- /dev/null
+++ b/packages/core/src/themes/ionic.functions.url.scss
@@ -0,0 +1,10 @@
+@import "./ionic.functions.string";
+
+// URL Encode Function
+// --------------------------------------------------
+
+@function url-encode($val) {
+ $spaces: str-replace($val, " ", "%20");
+ $encoded: str-replace($spaces, "#", "%23");
+ @return $encoded;
+}
diff --git a/packages/core/src/themes/ionic.globals.scss b/packages/core/src/themes/ionic.globals.scss
index fbda7510d7..0091339fe5 100644
--- a/packages/core/src/themes/ionic.globals.scss
+++ b/packages/core/src/themes/ionic.globals.scss
@@ -2,15 +2,24 @@
// Ionic Version
@import "./version";
+// Global String Functions
+@import "./ionic.functions.string";
-// Global Functions
-@import "./ionic.functions";
+// Global List Functions
+@import "./ionic.functions.list";
+// Global Map Functions
+@import "./ionic.functions.map";
+
+// Global URL Functions
+@import "./ionic.functions.url";
+
+// Global Color Functions
+@import "./ionic.functions.color";
// Global Mixins
@import "./ionic.mixins";
-
// Global app direction
$app-direction: ltr !default;
diff --git a/packages/core/src/themes/ionic.mixins.scss b/packages/core/src/themes/ionic.mixins.scss
index 6e7e95e282..fdffb61acb 100644
--- a/packages/core/src/themes/ionic.mixins.scss
+++ b/packages/core/src/themes/ionic.mixins.scss
@@ -1,5 +1,3 @@
-@import "ionic.functions";
-
// Appearance
// --------------------------------------------------
@@ -13,19 +11,28 @@
// Input Placeholder
// --------------------------------------------------
-@mixin placeholder($color: #999, $text-indent: 0) {
+@mixin placeholder($color: #999, $text-indent: 0, $opacity: null) {
&::-moz-placeholder { // Firefox 19+
color: $color;
+ @if ($opacity) {
+ opacity: $opacity;
+ }
}
&:-ms-input-placeholder {
color: $color;
+ @if ($opacity) {
+ opacity: $opacity;
+ }
}
&::-webkit-input-placeholder {
// Safari placeholder margin issue
text-indent: $text-indent;
color: $color;
+ @if ($opacity) {
+ opacity: $opacity;
+ }
}
}
@@ -561,20 +568,20 @@
$safe-area-end-env: null;
@if ($start) {
- $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
- $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+ $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})");
+ $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})");
}
@if ($end) {
- $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
- $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+ $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})");
+ $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})");
}
@if ($top){
- $safe-area-top: calc(constant(safe-area-inset-top) + #{$top});
- $safe-area-top-env: calc(env(safe-area-inset-top) + #{$top});
+ $safe-area-top: unquote("calc(constant(safe-area-inset-top) + #{$top})");
+ $safe-area-top-env: unquote("calc(env(safe-area-inset-top) + #{$top})");
}
@if ($bottom){
- $safe-area-bottom: calc(constant(safe-area-inset-bottom) + #{$bottom});
- $safe-area-bottom-env: calc(env(safe-area-inset-bottom) + #{$bottom});
+ $safe-area-bottom: unquote("calc(constant(safe-area-inset-bottom) + #{$bottom})");
+ $safe-area-bottom-env: unquote("calc(env(safe-area-inset-bottom) + #{$bottom})");
}
@include padding($safe-area-top, $safe-area-end, $safe-area-bottom, $safe-area-start);
@@ -593,12 +600,12 @@
$safe-area-end-env: null;
@if ($end) {
- $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
- $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+ $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})");
+ $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})");
}
@if ($start) {
- $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
- $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+ $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})");
+ $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})");
}
@include padding-horizontal($safe-area-start, $safe-area-end);
@@ -616,12 +623,12 @@
$safe-area-start-env: null;
$safe-area-end-env: null;
@if ($start) {
- $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
- $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+ $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})");
+ $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})");
}
@if ($end) {
- $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
- $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+ $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})");
+ $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})");
}
@if $safe-area-start == $safe-area-end {
@@ -660,8 +667,8 @@
// @param {string} $value - additional value you want to modify, if none, pass 0px
// ----------------------------------------------------------
@mixin safe-area-sizing($prop, $safe-area-position, $value){
- #{$prop}: calc(#{$value} + constant(#{$safe-area-position}));
- #{$prop}: calc(#{$value} + env(#{$safe-area-position}));
+ #{$prop}: unquote("calc(#{$value} + constant(#{$safe-area-position}))");
+ #{$prop}: unquote("calc(#{$value} + env(#{$safe-area-position}))");
}
@@ -729,7 +736,7 @@
@include safe-area-padding(0px, null, null, null);
height: calc(#{$toolbar-height} + #{$statusbar-padding});
- @include safe-area-sizing(height, safe-area-inset-top, $toolbar-height)
+ @include safe-area-sizing(height, safe-area-inset-top, $toolbar-height);
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height)
diff --git a/packages/core/src/themes/ionic.theme.dark.ios.scss b/packages/core/src/themes/ionic.theme.dark.ios.scss
deleted file mode 100644
index 59913d204c..0000000000
--- a/packages/core/src/themes/ionic.theme.dark.ios.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "./ionic.theme.dark";
-
-// iOS Dark Theme
-// ----------------------------------
-
-$colors-ios: copy-colors($colors) !default;
-
-$link-ios-color: $link-color !default;
-$text-ios-color: $text-color !default;
-$background-ios-color: $background-color !default;
-$subdued-text-ios-color: $subdued-text-color !default;
-
-$font-family-ios-base: $font-family-base !default;
-$font-size-ios-base: $font-size-base !default;
-
-
-// iOS Outer content
-// --------------------------------------------------
-$content-ios-outer-background: $background-color !default;
-
-
-// iOS Toolbar
-// --------------------------------------------------
-
-$toolbar-ios-background: $toolbar-background !default;
-$toolbar-ios-border-color: rgba(255, 255, 255, .1) !default;
-$toolbar-ios-text-color: $toolbar-text-color !default;
-$toolbar-ios-active-color: $toolbar-active-color !default;
-$toolbar-ios-inactive-color: $toolbar-inactive-color !default;
-
-
-// iOS Tabs
-// --------------------------------------------------
-
-$tabs-ios-background: $tabs-background !default;
-$tabs-ios-border-color: rgba(255, 255, 255, .1) !default;
-$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive !default;
-$tabs-ios-tab-color-active: $tabs-tab-color-active !default;
-
-
-// iOS List
-// --------------------------------------------------
-
-$list-ios-text-color: $list-text-color !default;
-$list-ios-border-color: $list-border-color !default;
-$list-ios-background-color: $list-background-color !default;
-$list-ios-activated-background-color: #d9d9d9 !default;
-
-
-// iOS List header
-// --------------------------------------------------
-$list-ios-header-color: $text-color !default;
-$item-ios-divider-background: #151515 !default;
-$item-ios-divider-color: $text-color !default;
-
-
-// iOS Toggle
-// --------------------------------------------------
-
-$toggle-ios-handle-background-color: #f4f4f4 !default;
diff --git a/packages/core/src/themes/ionic.theme.dark.md.scss b/packages/core/src/themes/ionic.theme.dark.md.scss
deleted file mode 100644
index 56cfc54ff0..0000000000
--- a/packages/core/src/themes/ionic.theme.dark.md.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "./ionic.theme.dark";
-
-// Material Design Dark Theme
-// ----------------------------------
-
-$colors-md: copy-colors($colors) !default;
-
-
-$link-md-color: $link-color !default;
-$text-md-color: $text-color !default;
-$background-md-color: $background-color !default;
-$subdued-text-md-color: $subdued-text-color !default;
-
-$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
-$font-size-md-base: $font-size-base !default;
-
-
-// Material Design Toolbar
-// --------------------------------------------------
-
-$toolbar-md-background: $toolbar-background !default;
-$toolbar-md-border-color: $toolbar-border-color !default;
-$toolbar-md-text-color: #fff !default;
-$toolbar-md-active-color: $toolbar-active-color !default;
-$toolbar-md-inactive-color: $toolbar-inactive-color !default;
-
-
-// Material Design Tabs
-// --------------------------------------------------
-
-$tabs-md-background: $tabs-background !default;
-$tabs-md-border-color: rgba(255, 255, 255, .1) !default;
-$tabs-md-tab-color-inactive: $tabs-tab-color-inactive !default;
-$tabs-md-tab-color-active: $tabs-tab-color-active !default;
-
-
-// Material Design Card
-// --------------------------------------------------
-
-$card-md-title-text-color: #fff !default;
-$card-md-text-color: #ddd !default;
-
-
-// Material Design List
-// --------------------------------------------------
-
-$list-md-text-color: $list-text-color !default;
-$list-md-border-color: #dedede !default;
-$list-md-background-color: $list-background-color !default;
-$list-md-activated-background-color: #d9d9d9 !default;
-
-
-// Material Design Item
-// --------------------------------------------------
-
-$item-md-divider-background: #151515 !default;
-$item-md-divider-color: #f4f4f4 !default;
-
-
-// Material Design Toggle
-// ---------------------------------------------------
-$toggle-md-handle-background-color-off: #f4f4f4 !default;
-
-
-// Ripple Color
-// --------------------------------------------------
-
-@function ripple-background-color($button-color) {
- @return rgba(red($button-color), green($button-color), blue($button-color), .1);
-}
diff --git a/packages/core/src/themes/ionic.theme.dark.scss b/packages/core/src/themes/ionic.theme.dark.scss
deleted file mode 100644
index 82c063b027..0000000000
--- a/packages/core/src/themes/ionic.theme.dark.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "./ionic.globals";
-
-
-// Dark Theme
-// ----------------------------------
-
-$colors: (
-
- primary: #007aff,
- secondary: #32db64,
- warning: #ffeb3b,
- danger: #d91e18,
- light: #f4f4f4,
- dark: #222,
-
-) !default;
-
-
-$text-color: #fff !default;
-$link-color: color($colors, primary) !default;
-$background-color: #191919 !default;
-$subdued-text-color: #666 !default;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
-
-// TODO remove
-$font-size-base: 14px !default;
-
-$content-padding: 16px !default;
-$content-margin: 16px !default;
-
-$toolbar-background: #151515 !default;
-$toolbar-border-color: #222 !default;
-$toolbar-text-color: $text-color !default;
-$toolbar-active-color: $link-color !default;
-$toolbar-inactive-color: #8c8c8c !default;
-
-$tabs-background: #151515 !default;
-$tabs-border-color: #222 !default;
-$tabs-tab-color-inactive: #8c8c8c !default;
-$tabs-tab-color-active: $link-color !default;
-
-$list-text-color: $text-color !default;
-$list-background-color: #242424 !default;
-$list-border-color: #000 !default;
diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss
index 23ae30f0a9..4f9b98f201 100644
--- a/packages/core/src/themes/ionic.theme.default.ios.scss
+++ b/packages/core/src/themes/ionic.theme.default.ios.scss
@@ -2,47 +2,86 @@
// iOS Default Theme
// ----------------------------------
+$colors-ios: () !default;
+$ion-colors-ios: ();
+$colors-ios: ion-extend-colors($colors, $ion-colors-ios, $colors-ios);
-$colors-ios: copy-colors($colors) !default;
+// iOS General
+// --------------------------------------------------
+$content-ios-margin: $content-margin !default;
+$content-ios-padding: $content-padding !default;
+$font-family-ios-base: $font-family-base !default;
+$font-size-ios-base: $font-size-base !default;
-$link-ios-color: $link-color !default;
-$text-ios-color: $text-color !default;
-$background-ios-color: $background-color !default;
-$subdued-text-ios-color: $subdued-text-color !default;
+// Default iOS Alpha levels
+// --------------------------------------------------
+$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest);
+$alpha-ios-low: css-var($alpha-low, alpha-ios-low);
+$alpha-ios-medium: css-var($alpha-medium, alpha-ios-medium);
+$alpha-ios-high: css-var($alpha-high, alpha-ios-high);
+$alpha-ios-highest: css-var($alpha-highest, alpha-ios-highest);
-$font-family-ios-base: $font-family-base !default;
-$font-size-ios-base: $font-size-base !default;
+// Default Foreground and Background Colors values
+// Allows users to override an foreground / background colors
+// TODO: @color-mod: remove all this
+$background-ios-color-value: $background-color-value !default;
+$text-ios-color-value: $text-color-value !default;
-$content-ios-padding: $content-padding !default;
-$content-ios-margin: $content-margin !default;
+// Default iOS Foreground and Background Colors
+// --------------------------------------------------
+$background-ios-color: css-var($background-ios-color-value, background-ios-color) !default;
+$text-ios-color: css-var($text-ios-color-value, text-ios-color) !default;
+$placeholder-text-ios-color: css-var($placeholder-text-color, placeholder-text-ios-color) !default;
+// Generated Foreground and Background Colors for alpha
+// These variables are not used, but we call this here in order to add these colors
+// to the global list of css variables for a theme. This is only used to get a dump of all
+// css variables that the theme uses.
+// TODO: @color-mod: remove all of this
+// --------------------------------------------------
+$background-color-rgb: css-var(color-to-rgb-list($background-ios-color-value), background-ios-color-rgb) !default; //TODO: @color-mod: remove
+$text-color-rgb: css-var(color-to-rgb-list($text-ios-color-value), text-ios-color-rgb) !default; //TODO: @color-mod: remove
+
+// Default iOS Background & Text Color Steps
+// --------------------------------------------------
+$background-ios-color-step-100: css-var(#f7f7f7, background-ios-color-step-100) !default;
+$background-ios-color-step-200: css-var(#bdbdbd, background-ios-color-step-200) !default;
+$background-ios-color-step-300: css-var(#999, background-ios-color-step-300) !default;
+$background-ios-color-step-400: css-var(#222, background-ios-color-step-400) !default;
+$text-ios-color-step-100: css-var(#222, text-ios-color-step-100) !default;
+$text-ios-color-step-200: css-var(#666, text-ios-color-step-200) !default;
+$text-ios-color-step-300: css-var(#8f8f8f, text-ios-color-step-400) !default;
+$text-ios-color-step-400: css-var(#aeaeae, text-ios-color-step-300) !default;
+
+// iOS General Colors
+// --------------------------------------------------
+$backdrop-ios-color: css-var($backdrop-color, backdrop-ios-color) !default;
+$border-ios-color: css-var(#c1c4cd, border-ios-color) !default;
+$box-shadow-ios-color: css-var($box-shadow-color, box-shadow-ios-color) !default;
+
+// iOS Tabs & Tab bar
+// --------------------------------------------------
+$tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default;
+$tabbar-ios-translucent-background-color: css-var(rgba(248, 248, 248, .8), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
+$tabbar-ios-border-color: css-var(rgba(0, 0, 0, .2), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
+$tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default;
+$tabbar-ios-text-color-active: css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default;
// iOS Toolbar
// --------------------------------------------------
+$toolbar-ios-height: 44px !default;
+$toolbar-ios-padding: 4px !default;
+$toolbar-ios-background-color: css-var($toolbar-background-color, toolbar-ios-background-color) !default;
+$toolbar-ios-translucent-background-color: css-var(rgba(248, 248, 248, .8), toolbar-ios-background-color) !default; // TODO: @color-mod: remove
+$toolbar-ios-border-color: css-var(rgba(0, 0, 0, .2), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
+$toolbar-ios-color-active: css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default;
+$toolbar-ios-color-inactive: css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;
+$toolbar-ios-text-color: css-var($toolbar-text-color, toolbar-ios-text-color) !default;
-$toolbar-ios-height: 44px !default;
-$toolbar-ios-padding: 4px !default;
-$toolbar-ios-background: $toolbar-background !default;
-$toolbar-ios-border-color: rgba(0, 0, 0, .2) !default;
-$toolbar-ios-text-color: $toolbar-text-color !default;
-$toolbar-ios-active-color: $toolbar-active-color !default;
-$toolbar-ios-inactive-color: $toolbar-inactive-color !default;
-
-
-// iOS Tabs
+// iOS List & List Items
// --------------------------------------------------
-
-$tabs-ios-background: $tabs-background !default;
-$tabs-ios-border-color: rgba(0, 0, 0, .2) !default;
-$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive !default;
-$tabs-ios-tab-color-active: $tabs-tab-color-active !default;
-
-
-// iOS List
-// --------------------------------------------------
-
-$list-ios-text-color: $list-text-color !default;
-$list-ios-border-color: $list-border-color !default;
-$list-ios-background-color: $list-background-color !default;
-$list-ios-activated-background-color: #d9d9d9 !default;
+$item-ios-background-color: css-var($background-ios-color, item-ios-background-color) !default;
+$item-ios-background-color-active: css-var(#d9d9d9, item-ios-background-color-active) !default;
+$item-ios-border-color: css-var($item-border-color, item-ios-border-color) !default;
+$item-ios-text-color: css-var($item-text-color, item-ios-text-color) !default;
diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss
index f502d0097b..0765b0f2db 100644
--- a/packages/core/src/themes/ionic.theme.default.md.scss
+++ b/packages/core/src/themes/ionic.theme.default.md.scss
@@ -2,47 +2,93 @@
// Material Design Default Theme
// ----------------------------------
+$colors-md: () !default;
-$colors-md: copy-colors($colors) !default;
+$light-md: #e3e3e3;
+$ion-colors-md: (
+ light: (
+ base: $light-md,
+ contrast: #000,
+ rgb: color-to-rgb-list($light-md),
+ shade: #d0d0d0,
+ tint: #f0f0f0
+ )
+);
+$colors-md: ion-extend-colors($colors, $ion-colors-md, $colors-md);
+// Material Design General
+// --------------------------------------------------
+$content-md-margin: $content-margin !default;
+$content-md-padding: $content-padding !default;
+$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-md-base: $font-size-base !default;
-$link-md-color: $link-color !default;
-$text-md-color: $text-color !default;
-$background-md-color: $background-color !default;
-$subdued-text-md-color: $subdued-text-color !default;
+// Default Material Design Alpha levels
+// --------------------------------------------------
+$alpha-md-lowest: css-var($alpha-lowest, alpha-md-lowest);
+$alpha-md-low: css-var($alpha-low, alpha-md-low);
+$alpha-md-medium: css-var($alpha-medium, alpha-md-medium);
+$alpha-md-high: css-var($alpha-high, alpha-md-high);
+$alpha-md-highest: css-var($alpha-highest, alpha-md-highest);
-$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
-$font-size-md-base: $font-size-base !default;
+// Default Foreground and Background Colors values
+// Allows users to override an foreground / background colors
+// TODO: @color-mod: remove all this
+$background-md-color-value: $background-color-value !default;
+$text-md-color-value: $text-color-value !default;
-$content-md-padding: $content-padding !default;
-$content-md-margin: $content-margin !default;
+// Default Material Design Foreground and Background Colors
+// --------------------------------------------------
+$background-md-color: css-var($background-md-color-value, background-md-color) !default;
+$text-md-color: css-var($text-md-color-value, text-md-color) !default;
+$placeholder-text-md-color: css-var($placeholder-text-color, placeholder-text-md-color) !default;
+// Generated Foreground and Background Colors for alpha
+// These variables are not used, but we call this here in order to add these colors
+// to the global list of css variables for a theme. This is only used to get a dump of all
+// css variables that the theme uses.
+// TODO: @color-mod: remove all of this
+// --------------------------------------------------
+$background-color-rgb: css-var(color-to-rgb-list($background-md-color-value), background-md-color-rgb) !default;
+$text-color-rgb: css-var(color-to-rgb-list($text-md-color-value), text-md-color-rgb) !default;
+
+// Default Material Design Background & Text Color Steps
+// --------------------------------------------------
+$background-md-color-step-100: css-var($background-color-step-100, background-md-color-step-100) !default;
+$background-md-color-step-200: css-var($background-color-step-200, background-md-color-step-200) !default;
+$background-md-color-step-300: css-var($background-color-step-300, background-md-color-step-300) !default;
+$background-md-color-step-400: css-var($background-color-step-400, background-md-color-step-400) !default;
+$text-md-color-step-100: css-var($text-color-step-100, text-md-color-step-100) !default;
+$text-md-color-step-200: css-var($text-color-step-200, text-md-color-step-200) !default;
+$text-md-color-step-300: css-var($text-color-step-300, text-md-color-step-300) !default;
+$text-md-color-step-400: css-var($text-color-step-400, text-md-color-step-400) !default;
+
+// Material Design General Colors
+// --------------------------------------------------
+$backdrop-md-color: css-var($backdrop-color, backdrop-md-color) !default;
+$border-md-color: css-var(#c1c4cd, border-md-color) !default;
+$box-shadow-md-color: css-var($box-shadow-color, box-shadow-md-color) !default;
+
+// Material Design Tabs & Tab bar
+// --------------------------------------------------
+$tabbar-md-background-color: css-var($tabbar-background-color, tabbar-md-background-color) !default;
+$tabbar-md-border-color: css-var(rgba(0, 0, 0, .07), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-ios-lowest))
+$tabbar-md-text-color: css-var($text-md-color-step-200, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-ios-high))
+$tabbar-md-text-color-active: css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default;
// Material Design Toolbar
// --------------------------------------------------
+$toolbar-md-height: 56px !default;
+$toolbar-md-padding: 4px !default;
+$toolbar-md-background-color: css-var($toolbar-background-color, toolbar-md-background-color) !default;
+$toolbar-md-border-color: css-var($border-md-color, toolbar-md-border-color) !default;
+$toolbar-md-color-active: css-var($toolbar-color-active, toolbar-md-color-active) !default;
+$toolbar-md-color-inactive: css-var($toolbar-color-inactive, toolbar-md-color-inactive) !default;
+$toolbar-md-text-color: css-var(#424242, toolbar-md-text-color) !default;
-$toolbar-md-height: 56px !default;
-$toolbar-md-padding: 4px !default;
-$toolbar-md-background: $toolbar-background !default;
-$toolbar-md-border-color: $toolbar-border-color !default;
-$toolbar-md-text-color: #424242 !default;
-$toolbar-md-active-color: $toolbar-active-color !default;
-$toolbar-md-inactive-color: $toolbar-inactive-color !default;
-
-
-// Material Design Tabs
+// Material Design List & List Items
// --------------------------------------------------
-
-$tabs-md-background: $tabs-background !default;
-$tabs-md-border-color: rgba(0, 0, 0, .07) !default;
-$tabs-md-tab-color-inactive: #3c3c3c !default;
-$tabs-md-tab-color-active: $tabs-tab-color-active !default;
-
-
-// Material Design List
-// --------------------------------------------------
-
-$list-md-text-color: $list-text-color !default;
-$list-md-border-color: #dedede !default;
-$list-md-background-color: $list-background-color !default;
-$list-md-activated-background-color: #f1f1f1 !default;
+$item-md-background-color: css-var($item-background-color, item-md-background-color) !default;
+$item-md-background-color-active: css-var(#f1f1f1, item-md-background-color-active) !default;
+$item-md-border-color: css-var(#dedede, item-md-border-color) !default;
+$item-md-text-color: css-var($item-text-color, item-md-text-color) !default;
diff --git a/packages/core/src/themes/ionic.theme.default.scss b/packages/core/src/themes/ionic.theme.default.scss
index 83ef845e77..090a2b9424 100644
--- a/packages/core/src/themes/ionic.theme.default.scss
+++ b/packages/core/src/themes/ionic.theme.default.scss
@@ -1,45 +1,177 @@
@import "./ionic.globals";
-
// Default Theme
// ----------------------------------
-$colors: (
+// Private color variables, use colors() to override
+$primary: #488aff;
+$secondary: #32db64;
+$tertiary: #f4a942;
+$success: #10dc60;
+$warning: #ffce00;
+$danger: #f53d3d;
+$light: #f4f4f4;
+$medium: #989aa2;
+$dark: #222;
- primary: #488aff,
- secondary: #32db64,
- warning: #ffeb3b,
- danger: #f53d3d,
- light: #f4f4f4,
- dark: #222,
+// Allows users to override an individual color
+$colors: () !default;
-) !default;
+// Allows users to override all alpha levels
+$alpha-lowest: .06 !default;
+$alpha-low: .1 !default;
+$alpha-medium: .4 !default;
+$alpha-high: .75 !default;
+$alpha-highest: .9 !default;
+// Primary color map should provide
+// - base: main color to be used.
+// - rgb: a R,G,B list version of the base color. Used for alpha processing
+// - contrast: Color that will provide readable text against the base color
+// - shade: slightly darker version of the base color (mix with black)
+// - tint: slightly lighter version of the base color (mix with white)
+$ion-colors: (
+ primary: (
+ base: $primary,
+ contrast: #fff,
+ rgb: color-to-rgb-list($primary),
+ shade: #3f79e0,
+ tint: #427feb
+ ),
+ secondary: (
+ base: $secondary,
+ contrast: #fff,
+ rgb: color-to-rgb-list($secondary),
+ shade: #2cc158,
+ tint: #2ec95c
+ ),
+ tertiary: (
+ base: $tertiary,
+ contrast: #fff,
+ rgb: color-to-rgb-list($tertiary),
+ shade: #d6903d,
+ tint: #ffa529
+ ),
+ success: (
+ base: $success,
+ contrast: #fff,
+ rgb: color-to-rgb-list($success),
+ shade: #10cb60,
+ tint: #23df6d
+ ),
+ warning: (
+ base: $warning,
+ contrast: #000,
+ rgb: color-to-rgb-list($warning),
+ shade: #f1c100,
+ tint: #ffd214
+ ),
+ danger: (
+ base: $danger,
+ contrast: #fff,
+ rgb: color-to-rgb-list($danger),
+ shade: #d83636,
+ tint: #e13838
+ ),
+ light: (
+ base: $light,
+ contrast: #000,
+ rgb: color-to-rgb-list($light),
+ shade: #d7d7d7,
+ tint: #e0e0e0
+ ),
+ medium: (
+ base: $medium,
+ contrast: #000,
+ rgb: color-to-rgb-list($medium),
+ shade: #8c8e95,
+ tint: #86888f
+ ),
+ dark: (
+ base: $dark,
+ contrast: #fff,
+ rgb: color-to-rgb-list($dark),
+ shade: #343434,
+ tint: #3d3d3d
+ )
+);
+$colors: ion-extend-colors($ion-colors, $colors);
-$text-color: #000 !default;
-$link-color: color($colors, primary) !default;
-$background-color: #fff !default;
-$subdued-text-color: #666 !default;
+// Default Alpha levels
+// --------------------------------------------------
+$alpha-lowest: css-var(.1, alpha-lowest) !default;
+$alpha-low: css-var(.25, alpha-low) !default;
+$alpha-medium: css-var(.5, alpha-medium) !default;
+$alpha-high: css-var(.75, alpha-high) !default;
+$alpha-highest: css-var(.9, alpha-highest) !default;
-$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
+// Default General
+// --------------------------------------------------
+$content-margin: 16px !default;
+$content-padding: 16px !default;
+$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
+$font-size-base: 14px !default; // TODO: remove
-// TODO remove
-$font-size-base: 14px !default;
+// Default Foreground and Background Colors values
+// Allows users to override an foreground / background colors
+// TODO: @color-mod: remove all this
+$background-color-value: #fff !default;
+$text-color-value: #000 !default;
-$content-padding: 16px !default;
-$content-margin: 16px !default;
+// Default Foreground and Background Colors
+// --------------------------------------------------
+$background-color: css-var($background-color-value, background-color) !default;
+$text-color: css-var($text-color-value, text-color) !default;
+$placeholder-text-color: css-var(#999, placeholder-text-color) !default;
-$toolbar-background: #f8f8f8 !default;
-$toolbar-border-color: #b2b2b2 !default;
-$toolbar-text-color: $text-color !default;
-$toolbar-active-color: $link-color !default;
-$toolbar-inactive-color: #8c8c8c !default;
+// Generated Foreground and Background Colors for alpha
+// These variables are not used, but we call this here in order to add these colors
+// to the global list of css variables for a theme. This is only used to get a dump of all
+// css variables that the theme uses.
+// TODO: @color-mod: remove all of this
+// --------------------------------------------------
+$background-color-rgb: css-var(color-to-rgb-list($background-color-value), background-color-rgb) !default; // TODO: @color-mod: remove
+$text-color-rgb: css-var(color-to-rgb-list($text-color-value), text-color-rgb) !default; // TODO: @color-mod: remove
-$tabs-background: #f8f8f8 !default;
-$tabs-border-color: #b2b2b2 !default;
-$tabs-tab-color-inactive: #8c8c8c !default;
-$tabs-tab-color-active: $link-color !default;
+// Default Background & Text Color Steps
+// Color Steps are used to provide variations in text and background colors of elements.
+// Steps are generally meant to move "away from" their base color.
+// For example a $text-color of white would generally step towards black,
+// but a $text-color of black would step towards white.
+// --------------------------------------------------
+$background-color-step-100: css-var(#f2f2f2, background-color-step-100) !default;
+$background-color-step-200: css-var(#dcdcdc, background-color-step-200) !default;
+$background-color-step-300: css-var(#bdbdbd, background-color-step-300) !default;
+$background-color-step-400: css-var(#444, background-color-step-400) !default;
+$text-color-step-100: css-var(#222, text-color-step-100) !default;
+$text-color-step-200: css-var(#666, text-color-step-200) !default;
+$text-color-step-300: css-var(#999, text-color-step-300) !default;
+$text-color-step-400: css-var(#c5c5c5, text-color-step-400) !default;
-$list-text-color: $text-color !default;
-$list-background-color: $background-color !default;
-$list-border-color: #c8c7cc !default;
+// Default General Colors
+// --------------------------------------------------
+$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;
+
+// Default Tabs & Tab bar
+// --------------------------------------------------
+$tabbar-background-color: css-var(#f8f8f8, tabbar-background-color) !default;
+$tabbar-border-color: css-var($border-color, tabbar-border-color) !default;
+$tabbar-text-color-active: css-var(#488aff, tabbar-text-color-active) !default;
+$tabbar-text-color: css-var(#8c8c8c, tabbar-text-color) !default;
+
+// Default Toolbar
+// --------------------------------------------------
+$toolbar-background-color: css-var(#f8f8f8, toolbar-background-color) !default;
+$toolbar-border-color: css-var($border-color, toolbar-border-color) !default;
+$toolbar-color-active: css-var(#488aff, toolbar-color-active) !default;
+$toolbar-color-inactive: css-var(#8c8c8c, toolbar-color-inactive) !default;
+$toolbar-text-color: css-var($text-color, toolbar-text-color) !default;
+
+// Default List & List Items
+// --------------------------------------------------
+$item-background-color: css-var($background-color, item-background-color) !default;
+$item-background-color-active: css-var($background-color, item-background-color-active) !default;
+$item-border-color: css-var(#c8c7cc, item-border-color) !default;
+$item-text-color: css-var($text-color, item-text-color) !default;
diff --git a/packages/core/src/themes/test/css-variables/index.html b/packages/core/src/themes/test/css-variables/index.html
new file mode 100644
index 0000000000..6909e921da
--- /dev/null
+++ b/packages/core/src/themes/test/css-variables/index.html
@@ -0,0 +1,305 @@
+
+
+
+
+ CSS Variable - Basic
+
+
+
+
+
+
+
+
+
+ CSS Variable - Basic
+
+
+ Select a Theme:
+
+ Default
+ Oceanic
+
+
+
+
+
+
+
+
+ Default
+ Default.activated
+
+
+
+ Primary
+ Primary.activated
+
+
+
+ Primary Outline
+ Primary Outline.activated
+
+
+
+ Primary Clear
+ Primary Clear.activated
+
+
+
+ Secondary
+ Secondary.activated
+
+
+
+ Tertiary
+ Tertiary.activated
+
+
+
+ Warning
+ Warning.activated
+
+
+
+ Danger
+ Danger.activated
+
+
+
+ Light
+ Light.activated
+
+
+
+ Medium
+ Medium.activated
+
+
+
+ Dark
+ Dark.activated
+
+
+
+ Button Disabled
+ Secondary Disabled
+
+
+
+
+
+
+ Card Header
+
+
+
+ Keep close to Nature's heart... and break clear away, once in awhile,
+ and climb a mountain or spend a week in the woods. Wash your spirit clean.
+
+
+
+
+
+ ion-item in a card, icon left, button right
+ View
+
+
+
+ This is content, without any paragraph or header tags,
+ within an ion-card-content element.
+
+
+
+
+
+
+ Card Link Item 1 .activated
+
+
+
+
+ Card Link Item 2
+
+
+
+
+ Card Button Item 1 .activated
+
+
+
+
+ Card Button Item 2
+
+
+
+
+
+
+ Pokémon Yellow
+ Super Metroid
+ Mega Man X
+ The Legend of Zelda
+ Pac-Man
+ Super Mario World
+ Street Fighter II
+ Half Life
+ Portal
+ Final Fantasy VII
+ Star Fox
+ Tetris
+ Donkey Kong III
+ Goldeneye 007
+ Doom
+ Fallout
+ GTA
+ Halo
+
+
+
+
+
+
+ Fruits (Group w/ values)
+
+
+ Apple
+
+
+
+
+ Grape, checked, disabled
+
+
+
+
+ Cherry
+
+
+
+
+
+
+
+
+
+ Apple
+
+
+
+
+
+
+
+ Default
+
+
+ Default
+
+
+
+
+
+
+ Default
+
+
+
+ Primary
+
+
+
+ Secondary
+
+
+
+ Warning
+
+
+
+ Danger
+
+
+
+ Light
+
+
+
+ Dark
+
+
+
+ Unchecked by Default
+
+
+
+ Disabled
+
+
+
+