From f41bb39ce34dcff75b65e040fb4fb9015dc93105 Mon Sep 17 00:00:00 2001 From: Ross Gerbasi Date: Mon, 5 Feb 2018 10:55:50 -0600 Subject: [PATCH] feat(components): add support for css variables (#13895) * wip * wip * wip * wip * CSS variable cleanup added css variable example * reverted example * wip * name fixes for tabbar and item * wip - alpha support * wip - all the things * wip * wip * PR cleanup * cleanup to ion-color * switched to double quotes * PR cleanup Added TODO for color-mod comments * reverted ios variable for transition. * style cleanup added -ion prefix to all css variables updated default.css to mirror SASS values cleanup/update to oceanic css * removed 'dark' theme files cleanup from scss-lint report --- .../action-sheet/action-sheet.ios.scss | 6 +- .../action-sheet/action-sheet.ios.vars.scss | 25 +- .../action-sheet/action-sheet.md.scss | 1 + .../action-sheet/action-sheet.md.vars.scss | 11 +- .../action-sheet/test/basic/index.html | 1 + .../core/src/components/alert/alert.ios.scss | 5 +- .../src/components/alert/alert.ios.vars.scss | 37 +- .../core/src/components/alert/alert.md.scss | 1 + .../src/components/alert/alert.md.vars.scss | 29 +- packages/core/src/components/alert/alert.scss | 1 - .../core/src/components/alert/alert.vars.scss | 3 - packages/core/src/components/app/app.ios.scss | 2 +- .../core/src/components/app/app.ios.vars.scss | 3 + packages/core/src/components/app/app.md.scss | 2 +- .../core/src/components/app/app.md.vars.scss | 3 + .../src/components/backdrop/backdrop.ios.scss | 6 + .../backdrop/backdrop.ios.vars.scss | 1 + .../src/components/backdrop/backdrop.md.scss | 6 + .../components/backdrop/backdrop.md.vars.scss | 1 + .../src/components/backdrop/backdrop.scss | 1 - .../core/src/components/backdrop/backdrop.tsx | 15 +- .../components/backdrop/backdrop.vars.scss | 6 - .../core/src/components/backdrop/readme.md | 20 ++ .../core/src/components/badge/badge.ios.scss | 8 +- .../src/components/badge/badge.ios.vars.scss | 4 +- .../core/src/components/badge/badge.md.scss | 9 +- .../src/components/badge/badge.md.vars.scss | 4 +- .../src/components/button/button.ios.scss | 39 +- .../components/button/button.ios.vars.scss | 15 +- .../core/src/components/button/button.md.scss | 30 +- .../src/components/button/button.md.vars.scss | 23 +- .../card-content/card-content.ios.scss | 9 +- .../card-content/card-content.md.scss | 9 +- .../card-header/card-header.ios.scss | 2 +- .../card-header/card-header.ios.vars.scss | 15 +- .../card-subtitle/card-subtitle.ios.scss | 9 +- .../card-subtitle/card-subtitle.ios.vars.scss | 2 +- .../card-subtitle/card-subtitle.md.scss | 9 +- .../card-subtitle/card-subtitle.md.vars.scss | 2 +- .../components/card-title/card-title.ios.scss | 9 +- .../card-title/card-title.ios.vars.scss | 2 +- .../components/card-title/card-title.md.scss | 9 +- .../card-title/card-title.md.vars.scss | 2 +- .../core/src/components/card/card.ios.scss | 15 +- .../src/components/card/card.ios.vars.scss | 4 +- .../core/src/components/card/card.md.scss | 13 +- .../src/components/card/card.md.vars.scss | 4 +- .../src/components/checkbox/checkbox.ios.scss | 13 +- .../checkbox/checkbox.ios.vars.scss | 11 +- .../src/components/checkbox/checkbox.md.scss | 13 +- .../components/checkbox/checkbox.md.vars.scss | 13 +- .../chip-button/chip-button.ios.scss | 4 +- .../chip-button/chip-button.ios.vars.scss | 8 +- .../chip-button/chip-button.md.scss | 5 +- .../chip-button/chip-button.md.vars.scss | 8 +- .../core/src/components/chip/chip.ios.scss | 5 +- .../src/components/chip/chip.ios.vars.scss | 8 +- .../core/src/components/chip/chip.md.scss | 5 +- .../src/components/chip/chip.md.vars.scss | 8 +- .../src/components/content/content.ios.scss | 2 +- .../components/content/content.ios.vars.scss | 2 +- .../src/components/content/content.md.scss | 2 +- .../core/src/components/content/content.scss | 5 - .../datetime/datetime.ios.vars.scss | 12 +- .../components/datetime/datetime.md.vars.scss | 2 +- .../components/fab-button/fab-button.ios.scss | 18 +- .../fab-button/fab-button.ios.vars.scss | 33 +- .../components/fab-button/fab-button.md.scss | 12 +- .../fab-button/fab-button.md.vars.scss | 12 +- .../fab-button/fab-button.vars.scss | 3 - .../core/src/components/icon/icon.ios.scss | 4 +- .../core/src/components/icon/icon.md.scss | 4 +- .../infinite-scroll/infinite-scroll.ios.scss | 17 + .../infinite-scroll.ios.vars.scss | 10 + .../infinite-scroll/infinite-scroll.md.scss | 15 + .../infinite-scroll.md.vars.scss | 10 + .../infinite-scroll/infinite-scroll.scss | 13 - .../infinite-scroll/infinite-scroll.tsx | 8 +- .../infinite-scroll/infinite-scroll.vars.scss | 6 - .../core/src/components/input/input.ios.scss | 1 + .../src/components/input/input.ios.vars.scss | 11 +- .../core/src/components/input/input.md.scss | 1 + .../src/components/input/input.md.vars.scss | 11 +- packages/core/src/components/input/input.scss | 1 - .../core/src/components/input/input.vars.scss | 12 - .../item-divider/item-divider.ios.scss | 8 +- .../item-divider/item-divider.ios.vars.scss | 4 +- .../item-divider/item-divider.md.scss | 8 +- .../item-divider/item-divider.md.vars.scss | 6 +- .../item-sliding/item-sliding.ios.scss | 8 +- .../item-sliding/item-sliding.ios.vars.scss | 8 +- .../item-sliding/item-sliding.md.scss | 8 +- .../item-sliding/item-sliding.md.vars.scss | 8 +- .../core/src/components/item/item.ios.scss | 25 +- .../src/components/item/item.ios.vars.scss | 4 +- .../core/src/components/item/item.md.scss | 25 +- .../src/components/item/item.md.vars.scss | 4 +- .../core/src/components/label/label.ios.scss | 5 +- .../core/src/components/label/label.md.scss | 5 +- .../src/components/label/label.md.vars.scss | 4 +- .../list-header/list-header.ios.scss | 5 +- .../list-header/list-header.ios.vars.scss | 4 +- .../list-header/list-header.md.scss | 5 +- .../list-header/list-header.md.vars.scss | 4 +- .../core/src/components/list/list.ios.scss | 10 +- .../core/src/components/list/list.md.scss | 6 +- .../src/components/loading/loading.ios.scss | 8 +- .../components/loading/loading.ios.vars.scss | 43 +-- .../src/components/loading/loading.md.scss | 4 + .../components/loading/loading.md.vars.scss | 9 +- .../core/src/components/loading/loading.scss | 1 - .../core/src/components/loading/loading.tsx | 10 +- .../src/components/loading/loading.vars.scss | 6 - .../core/src/components/modal/modal.ios.scss | 4 + .../src/components/modal/modal.ios.vars.scss | 3 + .../core/src/components/modal/modal.md.scss | 4 + .../src/components/modal/modal.md.vars.scss | 3 + packages/core/src/components/modal/modal.scss | 1 - packages/core/src/components/modal/modal.tsx | 5 +- .../core/src/components/modal/modal.vars.scss | 3 - .../core/src/components/note/note.ios.scss | 4 +- .../src/components/note/note.ios.vars.scss | 2 +- .../core/src/components/note/note.md.scss | 4 +- .../src/components/note/note.md.vars.scss | 2 +- .../src/components/picker/picker.ios.scss | 8 +- .../components/picker/picker.ios.vars.scss | 64 ++-- .../core/src/components/picker/picker.md.scss | 8 +- .../src/components/picker/picker.md.vars.scss | 54 +-- .../src/components/popover/popover.ios.scss | 10 +- .../components/popover/popover.ios.vars.scss | 27 +- .../src/components/popover/popover.md.scss | 4 + .../components/popover/popover.md.vars.scss | 3 + .../core/src/components/popover/popover.scss | 1 - .../core/src/components/popover/popover.tsx | 7 +- .../src/components/popover/popover.vars.scss | 6 - .../core/src/components/radio/radio.ios.scss | 12 +- .../src/components/radio/radio.ios.vars.scss | 5 +- .../core/src/components/radio/radio.md.scss | 12 +- .../src/components/radio/radio.md.vars.scss | 7 +- .../core/src/components/range/range.ios.scss | 4 +- .../src/components/range/range.ios.vars.scss | 6 +- .../core/src/components/range/range.md.scss | 7 +- .../src/components/range/range.md.vars.scss | 8 +- .../components/refresher/refresher.ios.scss | 27 ++ .../refresher/refresher.ios.vars.scss | 7 + .../components/refresher/refresher.md.scss | 27 ++ .../refresher/refresher.md.vars.scss | 7 + .../src/components/refresher/refresher.scss | 49 +-- .../src/components/refresher/refresher.tsx | 8 +- .../components/refresher/refresher.vars.scss | 11 + .../ripple-effect/ripple-effect.ios.scss | 7 + .../ripple-effect/ripple-effect.ios.vars.scss | 6 + .../ripple-effect/ripple-effect.md.scss | 7 + .../ripple-effect/ripple-effect.md.vars.scss | 6 + .../ripple-effect/ripple-effect.scss | 1 - .../ripple-effect/ripple-effect.tsx | 8 +- .../components/searchbar/searchbar.ios.scss | 22 +- .../searchbar/searchbar.ios.vars.scss | 10 +- .../searchbar/searchbar.md.vars.scss | 10 +- .../searchbar/test/toolbar/index.html | 11 + .../src/components/segment/segment.ios.scss | 25 +- .../components/segment/segment.ios.vars.scss | 68 ++-- .../src/components/segment/segment.md.scss | 9 +- .../components/segment/segment.md.vars.scss | 4 +- .../src/components/select/select.ios.scss | 1 + .../components/select/select.ios.vars.scss | 17 +- .../core/src/components/select/select.md.scss | 3 +- .../src/components/select/select.md.vars.scss | 5 +- .../skeleton-text/skeleton-text.ios.scss | 11 + .../skeleton-text/skeleton-text.ios.vars.scss | 10 + .../skeleton-text/skeleton-text.md.scss | 11 + .../skeleton-text/skeleton-text.md.vars.scss | 10 + .../skeleton-text/skeleton-text.scss | 1 - .../skeleton-text/skeleton-text.tsx | 10 +- .../skeleton-text/test/basic/index.html | 19 + ...{slides-import.scss => slides-vendor.scss} | 130 +++++-- .../src/components/slides/slides.ios.scss | 26 ++ .../components/slides/slides.ios.vars.scss | 19 + .../core/src/components/slides/slides.md.scss | 26 ++ .../src/components/slides/slides.md.vars.scss | 19 + .../core/src/components/slides/slides.scss | 2 +- .../core/src/components/slides/slides.tsx | 24 +- .../components/slides/test/basic/index.html | 7 +- .../src/components/spinner/spinner.ios.scss | 5 +- .../components/spinner/spinner.ios.vars.scss | 10 +- .../src/components/spinner/spinner.md.scss | 5 +- .../components/spinner/spinner.md.vars.scss | 10 +- .../split-pane/split-pane.ios.vars.scss | 2 +- .../split-pane/split-pane.md.vars.scss | 2 +- packages/core/src/components/tabs/readme.md | 18 + .../core/src/components/tabs/tabs.ios.scss | 38 +- .../src/components/tabs/tabs.ios.vars.scss | 16 +- .../core/src/components/tabs/tabs.md.scss | 19 +- .../src/components/tabs/tabs.md.vars.scss | 14 +- packages/core/src/components/tabs/tabs.tsx | 8 + .../components/tabs/test/scroll/index.html | 2 +- .../src/components/textarea/textarea.ios.scss | 1 + .../textarea/textarea.ios.vars.scss | 19 +- .../src/components/textarea/textarea.md.scss | 1 + .../components/textarea/textarea.md.vars.scss | 3 + .../src/components/textarea/textarea.scss | 1 - .../components/textarea/textarea.vars.scss | 5 - .../core/src/components/title/title.ios.scss | 4 +- .../src/components/title/title.ios.vars.scss | 2 +- .../core/src/components/title/title.md.scss | 4 +- .../src/components/title/title.md.vars.scss | 2 +- .../core/src/components/toast/toast.ios.scss | 4 +- .../src/components/toast/toast.ios.vars.scss | 14 +- .../src/components/toast/toast.md.vars.scss | 4 +- .../src/components/toggle/toggle.ios.scss | 8 +- .../components/toggle/toggle.ios.vars.scss | 6 +- .../core/src/components/toggle/toggle.md.scss | 11 +- .../src/components/toggle/toggle.md.vars.scss | 6 +- .../src/components/toolbar/toolbar.ios.scss | 76 ++-- .../components/toolbar/toolbar.ios.vars.scss | 22 +- .../src/components/toolbar/toolbar.md.scss | 63 ++-- .../components/toolbar/toolbar.md.vars.scss | 18 +- packages/core/src/themes/css/default.css | 167 ++++++--- packages/core/src/themes/css/oceanic.css | 131 ++++--- .../src/themes/ionic.functions.color.scss | 219 ++++++++++++ .../core/src/themes/ionic.functions.list.scss | 22 ++ .../core/src/themes/ionic.functions.map.scss | 13 + packages/core/src/themes/ionic.functions.scss | 338 ------------------ .../src/themes/ionic.functions.string.scss | 80 +++++ .../core/src/themes/ionic.functions.url.scss | 10 + packages/core/src/themes/ionic.globals.scss | 15 +- packages/core/src/themes/ionic.mixins.scss | 51 +-- .../core/src/themes/ionic.theme.dark.ios.scss | 60 ---- .../core/src/themes/ionic.theme.dark.md.scss | 70 ---- .../core/src/themes/ionic.theme.dark.scss | 45 --- .../src/themes/ionic.theme.default.ios.scss | 105 ++++-- .../src/themes/ionic.theme.default.md.scss | 112 ++++-- .../core/src/themes/ionic.theme.default.scss | 192 ++++++++-- .../src/themes/test/css-variables/index.html | 305 ++++++++++++++++ 234 files changed, 2699 insertions(+), 1634 deletions(-) create mode 100644 packages/core/src/components/backdrop/backdrop.ios.scss create mode 100644 packages/core/src/components/backdrop/backdrop.ios.vars.scss create mode 100644 packages/core/src/components/backdrop/backdrop.md.scss create mode 100644 packages/core/src/components/backdrop/backdrop.md.vars.scss create mode 100644 packages/core/src/components/infinite-scroll/infinite-scroll.ios.scss create mode 100644 packages/core/src/components/infinite-scroll/infinite-scroll.ios.vars.scss create mode 100644 packages/core/src/components/infinite-scroll/infinite-scroll.md.scss create mode 100644 packages/core/src/components/infinite-scroll/infinite-scroll.md.vars.scss create mode 100644 packages/core/src/components/refresher/refresher.ios.scss create mode 100644 packages/core/src/components/refresher/refresher.ios.vars.scss create mode 100644 packages/core/src/components/refresher/refresher.md.scss create mode 100644 packages/core/src/components/refresher/refresher.md.vars.scss create mode 100644 packages/core/src/components/refresher/refresher.vars.scss create mode 100644 packages/core/src/components/ripple-effect/ripple-effect.ios.scss create mode 100644 packages/core/src/components/ripple-effect/ripple-effect.ios.vars.scss create mode 100644 packages/core/src/components/ripple-effect/ripple-effect.md.scss create mode 100644 packages/core/src/components/ripple-effect/ripple-effect.md.vars.scss create mode 100644 packages/core/src/components/skeleton-text/skeleton-text.ios.scss create mode 100644 packages/core/src/components/skeleton-text/skeleton-text.ios.vars.scss create mode 100644 packages/core/src/components/skeleton-text/skeleton-text.md.scss create mode 100644 packages/core/src/components/skeleton-text/skeleton-text.md.vars.scss create mode 100644 packages/core/src/components/skeleton-text/test/basic/index.html rename packages/core/src/components/slides/{slides-import.scss => slides-vendor.scss} (92%) create mode 100644 packages/core/src/components/slides/slides.ios.scss create mode 100644 packages/core/src/components/slides/slides.ios.vars.scss create mode 100644 packages/core/src/components/slides/slides.md.scss create mode 100644 packages/core/src/components/slides/slides.md.vars.scss create mode 100644 packages/core/src/themes/ionic.functions.color.scss create mode 100644 packages/core/src/themes/ionic.functions.list.scss create mode 100644 packages/core/src/themes/ionic.functions.map.scss delete mode 100644 packages/core/src/themes/ionic.functions.scss create mode 100644 packages/core/src/themes/ionic.functions.string.scss create mode 100644 packages/core/src/themes/ionic.functions.url.scss delete mode 100644 packages/core/src/themes/ionic.theme.dark.ios.scss delete mode 100644 packages/core/src/themes/ionic.theme.dark.md.scss delete mode 100644 packages/core/src/themes/ionic.theme.dark.scss create mode 100644 packages/core/src/themes/test/css-variables/index.html diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss index ed50a1d5eb..2914db8b63 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -31,7 +31,7 @@ @include border-radius($action-sheet-ios-border-radius); @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null); - background: $action-sheet-ios-background; + background: $action-sheet-ios-background-color; } .action-sheet-ios .action-sheet-group:first-child { @@ -47,7 +47,7 @@ // ----------------------------------------- .action-sheet-translucent-ios .action-sheet-group { - background: rgba($action-sheet-ios-background, $action-sheet-ios-translucent-opacity); + background: $action-sheet-ios-translucent-background-color; backdrop-filter: $action-sheet-ios-translucent-filter; -webkit-backdrop-filter: $action-sheet-ios-translucent-filter; @@ -117,7 +117,7 @@ .action-sheet-ios .action-sheet-selected { font-weight: bold; - background: #fff; + background: $action-sheet-ios-button-background-selected; } .action-sheet-ios .action-sheet-destructive { diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss index 22f86dc275..e93ce5e890 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -28,7 +28,10 @@ $action-sheet-ios-group-margin-top: 10px !default; $action-sheet-ios-group-margin-bottom: 10px !default; /// @prop - Background color of the action sheet -$action-sheet-ios-background: #f9f9f9 !default; +$action-sheet-ios-background-color: $background-ios-color-step-100 !default; + +/// @prop - Background color of the action sheet when translucent +$action-sheet-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default; /// @prop - Border radius of the action sheet $action-sheet-ios-border-radius: 13px !default; @@ -46,7 +49,7 @@ $action-sheet-ios-title-padding-bottom: $action-sheet-ios-title- $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: #8f8f8f !default; +$action-sheet-ios-title-color: $text-ios-color-step-300 !default; /// @prop - Font size of the action sheet title $action-sheet-ios-title-font-size: 13px !default; @@ -61,7 +64,7 @@ $action-sheet-ios-title-border-width: $hairlines-width !defaul $action-sheet-ios-title-border-style: solid !default; /// @prop - Border color of the action sheet title -$action-sheet-ios-title-border-color: rgba(0, 0, 0, .1) !default; +$action-sheet-ios-title-border-color: $background-ios-color-step-100 !default; /// @prop - Font size of the action sheet sub title $action-sheet-ios-sub-title-font-size: 12px !default; @@ -85,7 +88,7 @@ $action-sheet-ios-button-min-height: 56px !default; $action-sheet-ios-button-padding: 18px !default; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: #007aff !default; +$action-sheet-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Font size of the action sheet button icon $action-sheet-ios-button-icon-font-size: 1.4em !default; @@ -109,25 +112,25 @@ $action-sheet-ios-button-border-width: $hairlines-width !defaul $action-sheet-ios-button-border-style: solid !default; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: rgba(0, 0, 0, .1) !default; +$action-sheet-ios-button-border-color: $background-ios-color-step-100 !default; /// @prop - Background color of the action sheet button $action-sheet-ios-button-background: transparent !default; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: rgba(115, 115, 115, .1) !default; +$action-sheet-ios-button-background-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default; + +/// @prop - Background color of the selected action sheet button +$action-sheet-ios-button-background-selected: $background-ios-color !default; /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: #f53d3d !default; +$action-sheet-ios-button-destructive-text-color: ion-color($colors-ios, danger, base, ios) !default; /// @prop - Background color of the action sheet cancel button -$action-sheet-ios-button-cancel-background: #fff !default; +$action-sheet-ios-button-cancel-background: $background-ios-color !default; /// @prop - Font weight of the action sheet cancel button $action-sheet-ios-button-cancel-font-weight: 600 !default; /// @prop - Filter of the translucent action-sheet $action-sheet-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent action-sheet -$action-sheet-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index 08d24f4181..4aad294252 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -77,4 +77,5 @@ .action-sheet-md .action-sheet-selected { font-weight: bold; + background-color: $action-sheet-md-button-background-selected; } diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss index 9d6e3a72d1..0af7b413ba 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -10,7 +10,7 @@ $action-sheet-md-font-family: $font-family-md-base !de $action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet -$action-sheet-md-background: #fafafa !default; +$action-sheet-md-background: $background-md-color-step-100 !default; /// @prop - Padding top of the action sheet $action-sheet-md-padding-top: 8px !default; @@ -19,7 +19,7 @@ $action-sheet-md-padding-top: 8px !default; $action-sheet-md-padding-bottom: 8px !default; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: #757575 !default; +$action-sheet-md-title-color: $text-md-color-step-200 !default; /// @prop - Font size of the action sheet title $action-sheet-md-title-font-size: 16px !default; @@ -55,7 +55,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-tit $action-sheet-md-button-min-height: 48px !default; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: #222 !default; +$action-sheet-md-button-text-color: $text-md-color-step-100 !default; /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: 16px !default; @@ -76,7 +76,10 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button- $action-sheet-md-button-background: transparent !default; /// @prop - Background color of the action sheet activated button -$action-sheet-md-button-background-activated: #f1f1f1 !default; +$action-sheet-md-button-background-activated: $background-md-color-step-100 !default; + +/// @prop - Background color of the selected action sheet button +$action-sheet-md-button-background-selected: null !default; /// @prop - Font size of the icon in the action sheet button $action-sheet-md-icon-font-size: 24px !default; diff --git a/packages/core/src/components/action-sheet/test/basic/index.html b/packages/core/src/components/action-sheet/test/basic/index.html index 5fb2fb566e..1be92f52a6 100644 --- a/packages/core/src/components/action-sheet/test/basic/index.html +++ b/packages/core/src/components/action-sheet/test/basic/index.html @@ -64,6 +64,7 @@ }, { text: 'Favorite', icon: 'heart', + role: 'selected', handler: () => { console.log('Favorite clicked'); } diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss index 5b1b504606..30fea57ae5 100644 --- a/packages/core/src/components/alert/alert.ios.scss +++ b/packages/core/src/components/alert/alert.ios.scss @@ -15,7 +15,7 @@ max-width: $alert-ios-max-width; - background-color: $alert-ios-background; + background-color: $alert-ios-background-color; box-shadow: $alert-ios-box-shadow; } @@ -25,7 +25,7 @@ // ----------------------------------------- .alert-translucent-ios .alert-wrapper { - background: rgba($alert-ios-background, $alert-ios-translucent-opacity); + background: $alert-ios-translucent-background-color; backdrop-filter: $alert-ios-translucent-filter; -webkit-backdrop-filter: $alert-ios-translucent-filter; @@ -80,6 +80,7 @@ // -------------------------------------------------- .alert-ios .alert-input { + @include placeholder($alert-ios-input-placeholder-color); @include appearance(none); @include border-radius($alert-ios-input-border-radius); diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index 4a3ce0e579..18b9ffe229 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -15,7 +15,10 @@ $alert-ios-max-width: 270px !default; $alert-ios-border-radius: 13px !default; /// @prop - Background color of the alert -$alert-ios-background: #f8f8f8 !default; +$alert-ios-background-color: $background-ios-color-step-100 !default; + +/// @prop - Background color of the alert when translucent +$alert-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default; /// @prop - Box shadow of the alert $alert-ios-box-shadow: none !default; @@ -48,7 +51,7 @@ $alert-ios-title-font-weight: 600 !default; $alert-ios-sub-title-font-size: 14px !default; /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: #666 !default; +$alert-ios-sub-title-text-color: $text-ios-color-step-200 !default; /// @prop - Padding top of the alert message $alert-ios-message-padding-top: 0 !default; @@ -101,8 +104,11 @@ $alert-ios-input-padding-bottom: $alert-ios-input-padding-top !de /// @prop - Padding start on the alert input $alert-ios-input-padding-start: $alert-ios-input-padding-end !default; +/// @prop - Placeholder Color for input +$alert-ios-input-placeholder-color: $placeholder-text-ios-color !default; + /// @prop - Border color of the alert input -$alert-ios-input-border-color: #ccc !default; +$alert-ios-input-border-color: $background-ios-color-step-200 !default; /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; @@ -111,7 +117,7 @@ $alert-ios-input-border: $hairlines-width solid $alert-io $alert-ios-input-border-radius: 4px !default; /// @prop - Background color of the alert input -$alert-ios-input-background-color: #fff !default; +$alert-ios-input-background-color: $background-ios-color !default; /// @prop - Flex wrap of the alert button group $alert-ios-button-group-flex-wrap: wrap !default; @@ -132,13 +138,13 @@ $alert-ios-button-min-height: 44px !default; $alert-ios-button-font-size: 17px !default; /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: color($colors-ios, primary) !default; +$alert-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Background color of the alert button $alert-ios-button-background-color: transparent !default; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba(115, 115, 115, .1) !default; +$alert-ios-button-background-color-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default; /// @prop - Border width of the alert button $alert-ios-button-border-width: $hairlines-width !default; @@ -147,7 +153,7 @@ $alert-ios-button-border-width: $hairlines-width !default; $alert-ios-button-border-style: solid !default; /// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba(0, 0, 0, .1) !default; +$alert-ios-button-border-color: $background-ios-color-step-100 !default; /// @prop - Border radius of the alert button $alert-ios-button-border-radius: 0 !default; @@ -171,7 +177,7 @@ $alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-t $alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: initial !default; +$alert-ios-radio-label-text-color: $text-ios-color !default; /// @prop - Text color of the label for the checked radio alert $alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; @@ -216,10 +222,10 @@ $alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-paddin $alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: initial !default; +$alert-ios-checkbox-label-text-color: $text-ios-color !default; /// @prop - Text color of the label for the checked checkbox in the alert -$alert-ios-checkbox-label-text-color-checked: initial !default; +$alert-ios-checkbox-label-text-color-checked: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Margin top of the checkbox in the alert $alert-ios-checkbox-margin-top: 10px !default; @@ -246,16 +252,16 @@ $alert-ios-checkbox-border-style: solid !default; $alert-ios-checkbox-border-radius: 50% !default; /// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $list-ios-border-color !default; +$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default; +$alert-ios-checkbox-border-color-on: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $list-ios-background-color !default; +$alert-ios-checkbox-background-color-off: $item-ios-background-color !default; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default; +$alert-ios-checkbox-background-color-on: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Top of the icon in the checkbox alert $alert-ios-checkbox-icon-top: 4px !default; @@ -284,8 +290,5 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; /// @prop - Filter of the translucent alert $alert-ios-translucent-filter: saturate(180%) blur(20px) !default; -/// @prop - Opacity of the translucent alert -$alert-ios-translucent-opacity: .88 !default; - /// @prop - Minimum height of the tappable inputs in the checkbox alert $alert-ios-tappable-min-height: $item-min-height !default; diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss index 11b38a2668..91aa3460a7 100644 --- a/packages/core/src/components/alert/alert.md.scss +++ b/packages/core/src/components/alert/alert.md.scss @@ -61,6 +61,7 @@ // -------------------------------------------------- .alert-md .alert-input { + @include placeholder($alert-md-input-placeholder-color); @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color; diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss index f004133626..b7b11d86bb 100644 --- a/packages/core/src/components/alert/alert.md.vars.scss +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -15,7 +15,7 @@ $alert-md-max-width: 280px !default; $alert-md-border-radius: 2px !default; /// @prop - Background color of the alert -$alert-md-background-color: #fafafa !default; +$alert-md-background-color: $background-md-color-step-100 !default; /// @prop - Box shadow color of the alert $alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; @@ -60,7 +60,7 @@ $alert-md-message-padding-start: 24px !default; $alert-md-message-font-size: 15px !default; /// @prop - Text color of the alert message -$alert-md-message-text-color: rgba(0, 0, 0, .5) !default; +$alert-md-message-text-color: $text-md-color-step-300 !default; /// @prop - Padding top of the alert empty message $alert-md-message-empty-padding-top: 0 !default; @@ -84,10 +84,10 @@ $alert-md-input-border-width: 1px !default; $alert-md-input-border-style: solid !default; /// @prop - Border color of the alert input -$alert-md-input-border-color: #dedede !default; +$alert-md-input-border-color: $border-md-color !default; /// @prop - Text color of the alert input -$alert-md-input-text-color: #000 !default; +$alert-md-input-text-color: $text-md-color !default; /// @prop - Border width of the alert input when focused $alert-md-input-border-width-focused: 2px !default; @@ -96,7 +96,7 @@ $alert-md-input-border-width-focused: 2px !default; $alert-md-input-border-style-focused: $alert-md-input-border-style !default; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: color($colors-md, primary) !default; +$alert-md-input-border-color-focused: ion-color($colors-md, primary, base, md) !default; /// @prop - Margin top of the alert input $alert-md-input-margin-top: 5px !default; @@ -110,6 +110,9 @@ $alert-md-input-margin-bottom: 5px !default; /// @prop - Margin start of the alert input $alert-md-input-margin-start: 0 !default; +/// @prop - Placeholder Color for input +$alert-md-input-placeholder-color: $placeholder-text-md-color !default; + /// @prop - Flex wrap of the alert button group $alert-md-button-group-flex-wrap: wrap-reverse !default; @@ -156,13 +159,13 @@ $alert-md-button-margin-start: 0 !default; $alert-md-button-font-weight: 500 !default; /// @prop - Text color of the alert button -$alert-md-button-text-color: color($colors-md, primary) !default; +$alert-md-button-text-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Background color of the alert button $alert-md-button-background-color: transparent !default; /// @prop - Background color of the alert activated button -$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default; +$alert-md-button-background-color-activated: $background-color-step-200 !default; /// @prop - Border radius of the alert button $alert-md-button-border-radius: 2px !default; @@ -192,7 +195,7 @@ $alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: initial !default; +$alert-md-radio-label-text-color: $text-md-color !default; /// @prop - Text color of the label for the checked radio alert $alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default; @@ -219,7 +222,7 @@ $alert-md-radio-border-style: solid !default; $alert-md-radio-border-radius: 50% !default; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default; +$alert-md-radio-border-color-off: $text-md-color-step-300 !default; /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color !default; @@ -261,10 +264,10 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-t $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: initial !default; +$alert-md-checkbox-label-text-color: $text-md-color !default; /// @prop - Text color of the label for the checked checkbox in the alert -$alert-md-checkbox-label-text-color-checked: initial !default; +$alert-md-checkbox-label-text-color-checked: ion-color($colors-md, primary, base, md) !default; /// @prop - Top of the checkbox in the alert $alert-md-checkbox-top: 0 !default; @@ -288,7 +291,7 @@ $alert-md-checkbox-border-style: solid !default; $alert-md-checkbox-border-radius: 2px !default; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default; +$alert-md-checkbox-border-color-off: $border-md-color !default; /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; @@ -312,7 +315,7 @@ $alert-md-checkbox-icon-border-width: 2px !default; $alert-md-checkbox-icon-border-style: solid !default; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default; +$alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-checkbox-border-color-on, contrast, md) !default; /// @prop - Transform of the icon in the checkbox alert $alert-md-checkbox-icon-transform: rotate(45deg) !default; diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss index aac6032c54..4124a88882 100644 --- a/packages/core/src/components/alert/alert.scss +++ b/packages/core/src/components/alert/alert.scss @@ -61,7 +61,6 @@ ion-alert input { } .alert-input { - @include placeholder($alert-input-placeholder-color); @include padding(10px, 0); border: 0; diff --git a/packages/core/src/components/alert/alert.vars.scss b/packages/core/src/components/alert/alert.vars.scss index 208d779b4b..b043e5c7cd 100644 --- a/packages/core/src/components/alert/alert.vars.scss +++ b/packages/core/src/components/alert/alert.vars.scss @@ -14,6 +14,3 @@ $alert-button-line-height: 20px !default; /// @prop - Font size of the alert button $alert-button-font-size: 14px !default; - -/// @prop - Color of the alert input placeholder -$alert-input-placeholder-color: #999 !default; diff --git a/packages/core/src/components/app/app.ios.scss b/packages/core/src/components/app/app.ios.scss index 1f9b0de9e7..ddbd1448b2 100644 --- a/packages/core/src/components/app/app.ios.scss +++ b/packages/core/src/components/app/app.ios.scss @@ -24,7 +24,7 @@ } a { - color: $link-ios-color; + color: $app-ios-link-color; } @import "../icon/icon.ios"; diff --git a/packages/core/src/components/app/app.ios.vars.scss b/packages/core/src/components/app/app.ios.vars.scss index 36af720534..0097466ec5 100644 --- a/packages/core/src/components/app/app.ios.vars.scss +++ b/packages/core/src/components/app/app.ios.vars.scss @@ -5,5 +5,8 @@ // iOS App // -------------------------------------------------- +/// @prop - Color for links for the app +$app-ios-link-color: ion-color($colors-ios, primary, base, ios) !default; + /// @prop - Statusbar padding for the app $app-ios-statusbar-padding: 20px !default; diff --git a/packages/core/src/components/app/app.md.scss b/packages/core/src/components/app/app.md.scss index f05af076cf..e5dafa3252 100644 --- a/packages/core/src/components/app/app.md.scss +++ b/packages/core/src/components/app/app.md.scss @@ -23,7 +23,7 @@ } a { - color: $link-md-color; + color: $app-md-link-color; } @import "../icon/icon.md"; diff --git a/packages/core/src/components/app/app.md.vars.scss b/packages/core/src/components/app/app.md.vars.scss index 6089d06453..8cd780bbd1 100644 --- a/packages/core/src/components/app/app.md.vars.scss +++ b/packages/core/src/components/app/app.md.vars.scss @@ -6,5 +6,8 @@ // Material Design App // -------------------------------------------------- +/// @prop - Color for links for the app +$app-md-link-color: ion-color($colors-md, primary, base, md) !default; + /// @prop - Statusbar padding for the app $app-md-statusbar-padding: 20px !default; diff --git a/packages/core/src/components/backdrop/backdrop.ios.scss b/packages/core/src/components/backdrop/backdrop.ios.scss new file mode 100644 index 0000000000..5b0e3349f4 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.ios.scss @@ -0,0 +1,6 @@ +@import "./backdrop"; +@import "./backdrop.ios.vars"; + +.backdrop-ios { + background-color: $backdrop-ios-color; +} diff --git a/packages/core/src/components/backdrop/backdrop.ios.vars.scss b/packages/core/src/components/backdrop/backdrop.ios.vars.scss new file mode 100644 index 0000000000..c9a4083192 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.ios.vars.scss @@ -0,0 +1 @@ +@import "../../themes/ionic.globals.ios"; diff --git a/packages/core/src/components/backdrop/backdrop.md.scss b/packages/core/src/components/backdrop/backdrop.md.scss new file mode 100644 index 0000000000..abc5104e72 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.md.scss @@ -0,0 +1,6 @@ +@import "./backdrop"; +@import "./backdrop.md.vars"; + +.backdrop-md { + background-color: $backdrop-md-color; +} diff --git a/packages/core/src/components/backdrop/backdrop.md.vars.scss b/packages/core/src/components/backdrop/backdrop.md.vars.scss new file mode 100644 index 0000000000..74f1acdc02 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.md.vars.scss @@ -0,0 +1 @@ +@import "../../themes/ionic.globals.md"; diff --git a/packages/core/src/components/backdrop/backdrop.scss b/packages/core/src/components/backdrop/backdrop.scss index a240f215b0..7d88292566 100644 --- a/packages/core/src/components/backdrop/backdrop.scss +++ b/packages/core/src/components/backdrop/backdrop.scss @@ -13,7 +13,6 @@ ion-backdrop { width: 100%; height: 100%; - background-color: $backdrop-color; opacity: .01; transform: translateZ(0); diff --git a/packages/core/src/components/backdrop/backdrop.tsx b/packages/core/src/components/backdrop/backdrop.tsx index 2360c9f098..dbbe5d8b61 100644 --- a/packages/core/src/components/backdrop/backdrop.tsx +++ b/packages/core/src/components/backdrop/backdrop.tsx @@ -1,9 +1,20 @@ -import { Component } from '@stencil/core'; +import { Component, Prop } from '@stencil/core'; @Component({ tag: 'ion-backdrop', - styleUrl: 'backdrop.scss' + styleUrls: { + ios: 'backdrop.ios.scss', + md: 'backdrop.md.scss' + }, + host: { + theme: 'backdrop' + } }) export class Backdrop { + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode: 'ios' | 'md'; } diff --git a/packages/core/src/components/backdrop/backdrop.vars.scss b/packages/core/src/components/backdrop/backdrop.vars.scss index 809165e27f..e21c162d17 100644 --- a/packages/core/src/components/backdrop/backdrop.vars.scss +++ b/packages/core/src/components/backdrop/backdrop.vars.scss @@ -1,7 +1 @@ @import "../../themes/ionic.globals"; - -// Backdrop -// -------------------------------------------------- - -/// @prop - Color of the backdrop -$backdrop-color: #000 !default; diff --git a/packages/core/src/components/backdrop/readme.md b/packages/core/src/components/backdrop/readme.md index bfdb0d777d..eeb5f59ee4 100644 --- a/packages/core/src/components/backdrop/readme.md +++ b/packages/core/src/components/backdrop/readme.md @@ -10,6 +10,26 @@ Backdrops are full screen components that overlay other components. They are use +## Properties + +#### mode + +any + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + +## Attributes + +#### mode + +any + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + ---------------------------------------------- diff --git a/packages/core/src/components/badge/badge.ios.scss b/packages/core/src/components/badge/badge.ios.scss index 7251333256..dba4582d81 100644 --- a/packages/core/src/components/badge/badge.ios.scss +++ b/packages/core/src/components/badge/badge.ios.scss @@ -17,11 +17,13 @@ // Generate iOS Badge Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { +@each $color-name, $color-value in $colors-ios { + $base-color: ion-color($colors-ios, $color-name, base, ios); + $contrast-color: ion-color($colors-ios, $color-name, contrast, ios); .badge-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; + color: $base-color; + background-color: $contrast-color; } } diff --git a/packages/core/src/components/badge/badge.ios.vars.scss b/packages/core/src/components/badge/badge.ios.vars.scss index 9d466436e3..769d4ae40f 100644 --- a/packages/core/src/components/badge/badge.ios.vars.scss +++ b/packages/core/src/components/badge/badge.ios.vars.scss @@ -10,7 +10,7 @@ $badge-ios-border-radius: 10px !default; $badge-ios-font-family: $font-family-ios-base !default; /// @prop - Background color of the badge -$badge-ios-background-color: color($colors-ios, primary) !default; +$badge-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Text color of the badge -$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default; +$badge-ios-text-color: ion-color($colors-ios, $badge-ios-background-color, contrast, ios) !default; diff --git a/packages/core/src/components/badge/badge.md.scss b/packages/core/src/components/badge/badge.md.scss index c1bf337376..0a74e4b3b3 100644 --- a/packages/core/src/components/badge/badge.md.scss +++ b/packages/core/src/components/badge/badge.md.scss @@ -17,12 +17,13 @@ // Generate Material Design Badge Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { +@each $color-name, $color-value in $colors-md { + $base-color: ion-color($colors-md, $color-name, base, md); + $contrast-color: ion-color($colors-md, $color-name, contrast, md); .badge-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; + color: $base-color; + background-color: $contrast-color; } - } diff --git a/packages/core/src/components/badge/badge.md.vars.scss b/packages/core/src/components/badge/badge.md.vars.scss index 6f1fea6732..7ecc3e1b48 100644 --- a/packages/core/src/components/badge/badge.md.vars.scss +++ b/packages/core/src/components/badge/badge.md.vars.scss @@ -10,7 +10,7 @@ $badge-md-border-radius: 4px !default; $badge-md-font-family: $font-family-md-base !default; /// @prop - Background color of the badge -$badge-md-background-color: color($colors-md, primary) !default; +$badge-md-background-color: ion-color($colors-md, primary, base, ios) !default; /// @prop - Text color of the badge -$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default; +$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, ios) !default; diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss index 4ba5404abe..047832e75c 100644 --- a/packages/core/src/components/button/button.ios.scss +++ b/packages/core/src/components/button/button.ios.scss @@ -37,11 +37,11 @@ // iOS Default Button Color Mixin // -------------------------------------------------- -@mixin ios-button-default($color-name, $color-base, $color-contrast) { - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $bg-color-focused: color-shade($color-base, 12%); - $fg-color: $color-contrast; +@mixin ios-button-default($color-name) { + $bg-color: ion-color($colors-ios, $color-name, base, ios); + $bg-color-activated: ion-color($colors-ios, $color-name, tint, ios); + $bg-color-focused: ion-color($colors-ios, $color-name, shade, ios); + $fg-color: ion-color($colors-ios, $color-name, contrast, ios); .button-ios-#{$color-name} { color: $fg-color; @@ -119,15 +119,18 @@ } .button-outline-ios.activated.focused { - border-color: color-shade($button-ios-background-color, 12%); - background-color: color-shade($button-ios-background-color, 12%); + border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios); + background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios); } // iOS Outline Button Color Mixin // -------------------------------------------------- -@mixin ios-button-outline($color-name, $color-base, $color-contrast) { - $bg-color-focused: rgba($color-base, .12); +@mixin ios-button-outline($color-name) { + $color-base: ion-color($colors-ios, $color-name, base, ios); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); + $color-tint: ion-color($colors-ios, $color-name, shade, ios); + $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios); .button-outline-ios-#{$color-name} { border-color: $color-base; @@ -145,8 +148,8 @@ } .button-outline-ios-#{$color-name}.activated.focused { - border-color: color-shade($color-base, 12%); - background-color: color-shade($color-base, 12%); + border-color: $color-tint; + background-color: $color-tint; } } @@ -178,9 +181,9 @@ // iOS Clear Button Color Mixin // -------------------------------------------------- -@mixin ios-button-clear($color-name, $color-base, $color-contrast) { - $fg-color: $color-base; - $bg-color-focused: rgba($color-base, .12); +@mixin ios-button-clear($color-name) { + $fg-color: ion-color($colors-ios, $color-name, base, ios); + $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios); .button-clear-ios-#{$color-name} { border-color: $button-ios-clear-border-color; @@ -215,10 +218,10 @@ // Generate iOS Button Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - @include ios-button-default($color-name, $color-base, $color-contrast); - @include ios-button-outline($color-name, $color-base, $color-contrast); - @include ios-button-clear($color-name, $color-base, $color-contrast); +@each $color-name, $color-value in $colors-ios { + @include ios-button-default($color-name); + @include ios-button-outline($color-name); + @include ios-button-clear($color-name); } diff --git a/packages/core/src/components/button/button.ios.vars.scss b/packages/core/src/components/button/button.ios.vars.scss index 3fc98079cb..7a25c13591 100644 --- a/packages/core/src/components/button/button.ios.vars.scss +++ b/packages/core/src/components/button/button.ios.vars.scss @@ -40,13 +40,13 @@ $button-ios-border-radius: 4px !default; $button-ios-font-size: 16px !default; /// @prop - Background color of the button -$button-ios-background-color: color($colors-ios, primary) !default; +$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Text color of the button -$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default; +$button-ios-text-color: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default; /// @prop - Background color of the activated button -$button-ios-background-color-activated: color-shade($button-ios-background-color) !default; +$button-ios-background-color-activated: ion-color($colors-ios, $button-ios-background-color, tint, ios) !default; /// @prop - Opacity of the activated button $button-ios-opacity-activated: 1 !default; @@ -55,7 +55,7 @@ $button-ios-opacity-activated: 1 !default; $button-ios-opacity-hover: .8 !default; /// @prop - Background color of the focused button -$button-ios-background-color-focused: color-shade($button-ios-background-color, 12%) !default; +$button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default; // iOS Large Button @@ -124,7 +124,7 @@ $button-ios-outline-text-color: $button-ios-background-color $button-ios-outline-background-color: transparent !default; /// @prop - Text color of the activated outline button -$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default; +$button-ios-outline-text-color-activated: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default; /// @prop - Background color of the activated outline button $button-ios-outline-background-color-activated: $button-ios-background-color !default; @@ -133,8 +133,7 @@ $button-ios-outline-background-color-activated: $button-ios-background-color $button-ios-outline-opacity-activated: 1 !default; /// @prop - Background color of the focused outline button -$button-ios-outline-background-color-focused: rgba($button-ios-background-color, .12) !default; - +$button-ios-outline-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default; // iOS Clear Button // -------------------------------------------------- @@ -158,7 +157,7 @@ $button-ios-clear-text-color-hover: $button-ios-background-color $button-ios-clear-opacity-hover: .6 !default; /// @prop - Background color of the focused clear button -$button-ios-clear-background-color-focused: rgba($button-ios-background-color, .12) !default; +$button-ios-clear-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default; // iOS Round Button diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss index 87f8839e4c..8bdada729d 100644 --- a/packages/core/src/components/button/button.md.scss +++ b/packages/core/src/components/button/button.md.scss @@ -50,11 +50,11 @@ // Material Design Default Button Color Mixin // -------------------------------------------------- -@mixin md-button-default($color-name, $color-base, $color-contrast) { - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $bg-color-focused: color-shade($bg-color, 12%); - $fg-color: $color-contrast; +@mixin md-button-default($color-name) { + $bg-color: ion-color($colors-md, $color-name, base, md); + $bg-color-activated: ion-color($colors-md, $color-name, tint, md); + $bg-color-focused: ion-color($colors-md, $color-name, shade, md); + $fg-color: ion-color($colors-md, $color-name, contrast, md); .button-md-#{$color-name} { color: $fg-color; @@ -151,9 +151,9 @@ // Material Design Outline Button Color Mixin // -------------------------------------------------- -@mixin md-button-outline($color-name, $color-base, $color-contrast) { - $fg-color: color-shade($color-base, 5%); - $bg-color-focused: rgba($color-base, .12); +@mixin md-button-outline($color-name) { + $fg-color: ion-color($colors-md, $color-name, tint, md); + $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md); .button-outline-md-#{$color-name} { border-color: $fg-color; @@ -211,9 +211,9 @@ // Material Design Clear Button Color Mixin // -------------------------------------------------- -@mixin md-button-clear($color-name, $color-base, $color-contrast) { - $fg-color: $color-base; - $bg-color-focused: rgba($color-base, .12); +@mixin md-button-clear($color-name) { + $fg-color: ion-color($colors-md, $color-name, base, md); + $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md); .button-clear-md-#{$color-name} { border-color: $button-md-clear-border-color; @@ -253,10 +253,10 @@ // Generate Material Design Button Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - @include md-button-default($color-name, $color-base, $color-contrast); - @include md-button-outline($color-name, $color-base, $color-contrast); - @include md-button-clear($color-name, $color-base, $color-contrast); +@each $color-name, $color-value in $colors-md { + @include md-button-default($color-name); + @include md-button-outline($color-name); + @include md-button-clear($color-name); } diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss index d66584f089..c7d5a77d04 100644 --- a/packages/core/src/components/button/button.md.vars.scss +++ b/packages/core/src/components/button/button.md.vars.scss @@ -46,10 +46,10 @@ $button-md-font-weight: 500 !default; $button-md-text-transform: uppercase !default; /// @prop - Background color of the button -$button-md-background-color: color($colors-md, primary) !default; +$button-md-background-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Text color of the button -$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default; +$button-md-text-color: ion-color($colors-md, $button-md-background-color, contrast, md) !default; /// @prop - Box shadow of the button $button-md-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; @@ -64,7 +64,7 @@ $button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; $button-md-background-color-hover: $button-md-background-color !default; /// @prop - Background color of the activated button -$button-md-background-color-activated: color-shade($button-md-background-color) !default; +$button-md-background-color-activated: ion-color($colors-md, $button-md-background-color, tint, md) !default; /// @prop - Opacity of the activated button $button-md-opacity-activated: 1 !default; @@ -73,10 +73,10 @@ $button-md-opacity-activated: 1 !default; $button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default; /// @prop - Background color of the ripple on the button -$button-md-ripple-background-color: #555 !default; +$button-md-ripple-background-color: $text-md-color-step-200 !default; /// @prop - Background color of the focused button -$button-md-background-color-focused: color-shade($button-md-background-color, 12%) !default; +$button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default; // Material Design Large Button @@ -145,7 +145,7 @@ $button-md-outline-background-color: transparent !default; $button-md-outline-box-shadow: none !default; /// @prop - Background color of the outline button on hover -$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default; +$button-md-outline-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; /// @prop - Background color of the activated outline button $button-md-outline-background-color-activated: transparent !default; @@ -160,8 +160,7 @@ $button-md-outline-opacity-activated: 1 !default; $button-md-outline-ripple-background-color: $button-md-background-color !default; /// @prop - Background color of the focused outline button -$button-md-outline-background-color-focused: rgba($button-md-background-color, .12) !default; - +$button-md-outline-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default; // Material Design Clear Button // -------------------------------------------------- @@ -182,19 +181,19 @@ $button-md-clear-box-shadow: none !default; $button-md-clear-opacity: 1 !default; /// @prop - Background color of the activated clear button -$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default; +$button-md-clear-background-color-activated: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; /// @prop - Box shadow of the activated clear button $button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; /// @prop - Background color of the clear button on hover -$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default; +$button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; /// @prop - Background color of the ripple on the clear button -$button-md-clear-ripple-background-color: #999 !default; +$button-md-clear-ripple-background-color: $text-md-color-step-300 !default; /// @props - Background color of the focused clear button -$button-md-clear-background-color-focused: rgba($button-md-background-color, .12) !default; +$button-md-clear-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default; // Material Design Round Button diff --git a/packages/core/src/components/card-content/card-content.ios.scss b/packages/core/src/components/card-content/card-content.ios.scss index dda6de45d8..febb235956 100644 --- a/packages/core/src/components/card-content/card-content.ios.scss +++ b/packages/core/src/components/card-content/card-content.ios.scss @@ -15,14 +15,18 @@ // Generate iOS Card Content 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .card-ios-#{$color-name} { .card-content-ios { color: $color-contrast; } - @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); + .card-content-ios-#{$color-name} { color: $color-base; } @@ -32,5 +36,4 @@ .card-content-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-content/card-content.md.scss b/packages/core/src/components/card-content/card-content.md.scss index ba3a2bd9c6..a29a2c9baa 100644 --- a/packages/core/src/components/card-content/card-content.md.scss +++ b/packages/core/src/components/card-content/card-content.md.scss @@ -15,7 +15,9 @@ // Generate Material Design Card Content 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .card-md-#{$color-name} { @@ -23,7 +25,9 @@ color: $color-contrast; } - @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); + .card-content-md-#{$color-name} { color: $color-base; } @@ -33,5 +37,4 @@ .card-content-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-header/card-header.ios.scss b/packages/core/src/components/card-header/card-header.ios.scss index 33decbf736..2661ba8ca6 100644 --- a/packages/core/src/components/card-header/card-header.ios.scss +++ b/packages/core/src/components/card-header/card-header.ios.scss @@ -9,7 +9,7 @@ } .card-header-translucent-ios { - background-color: rgba($card-ios-header-translucent-background, $card-ios-header-translucent-opacity); + background-color: $card-ios-header-translucent-background-color; -webkit-backdrop-filter: $card-ios-header-translucent-filter; backdrop-filter: $card-ios-header-translucent-filter; diff --git a/packages/core/src/components/card-header/card-header.ios.vars.scss b/packages/core/src/components/card-header/card-header.ios.vars.scss index 33cf50c54b..ba1167af96 100644 --- a/packages/core/src/components/card-header/card-header.ios.vars.scss +++ b/packages/core/src/components/card-header/card-header.ios.vars.scss @@ -4,22 +4,19 @@ // -------------------------------------------------- /// @prop - Padding top of the card header -$card-ios-header-padding-top: 20px !default; +$card-ios-header-padding-top: 20px !default; /// @prop - Padding end of the card header -$card-ios-header-padding-end: $card-ios-header-padding-top !default; +$card-ios-header-padding-end: $card-ios-header-padding-top !default; /// @prop - Padding bottom of the card header -$card-ios-header-padding-bottom: 16px !default; +$card-ios-header-padding-bottom: 16px !default; /// @prop - Padding start of the card header -$card-ios-header-padding-start: $card-ios-header-padding-end !default; +$card-ios-header-padding-start: $card-ios-header-padding-end !default; /// @prop - Filter of the translucent card header -$card-ios-header-translucent-background: #fff !default; +$card-ios-header-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default; /// @prop - Filter of the translucent card header -$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; - -/// @prop - Opacity of the translucent cardheader -$card-ios-header-translucent-opacity: .88 !default; +$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss index 6e8399bf48..a72f7027fb 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -18,7 +18,9 @@ // Generate iOS Card subtitle 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .card-ios-#{$color-name} { @@ -26,7 +28,9 @@ color: $color-contrast; } - @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); + .card-subtitle-ios-#{$color-name} { color: $color-base; } @@ -36,5 +40,4 @@ .card-subtitle-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 97f7ddab47..68d5de1f45 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -28,4 +28,4 @@ $card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default $card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: rgba(0, 0, 0, .4) !default; +$card-ios-subtitle-color: $text-ios-color-step-200 !default; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.scss index 377e0e7aa1..d28ac9791e 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.md.scss @@ -15,7 +15,9 @@ // Generate Material Design Card subtitle 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .card-md-#{$color-name} { @@ -23,7 +25,9 @@ color: $color-contrast; } - @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); + .card-subtitle-md-#{$color-name} { color: $color-base; } @@ -33,5 +37,4 @@ .card-subtitle-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 294d0e070a..7050c991ac 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -19,4 +19,4 @@ $card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; $card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; /// @prop - Color of the card subtitle -$card-md-subtitle-color: #222 !default; +$card-md-subtitle-color: $text-md-color-step-100 !default; diff --git a/packages/core/src/components/card-title/card-title.ios.scss b/packages/core/src/components/card-title/card-title.ios.scss index fb9309c7e6..4a92e8874f 100644 --- a/packages/core/src/components/card-title/card-title.ios.scss +++ b/packages/core/src/components/card-title/card-title.ios.scss @@ -21,7 +21,9 @@ // Generate iOS Card Title 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .card-ios-#{$color-name} { @@ -29,7 +31,9 @@ color: $color-contrast; } - @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); + .card-title-ios-#{$color-name} { color: $color-base; } @@ -39,5 +43,4 @@ .card-title-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-title/card-title.ios.vars.scss b/packages/core/src/components/card-title/card-title.ios.vars.scss index 024a1610ae..efb5c869cc 100644 --- a/packages/core/src/components/card-title/card-title.ios.vars.scss +++ b/packages/core/src/components/card-title/card-title.ios.vars.scss @@ -34,4 +34,4 @@ $card-ios-title-margin-bottom: $card-ios-title-margin-top !default; $card-ios-title-margin-start: $card-ios-title-margin-top !default; /// @prop - Color of the card title -$card-ios-title-text-color: #000 !default; +$card-ios-title-text-color: $text-ios-color !default; diff --git a/packages/core/src/components/card-title/card-title.md.scss b/packages/core/src/components/card-title/card-title.md.scss index 8a3109bf91..c552e51789 100644 --- a/packages/core/src/components/card-title/card-title.md.scss +++ b/packages/core/src/components/card-title/card-title.md.scss @@ -20,7 +20,9 @@ // Generate Material Design Card Title 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .card-md-#{$color-name} { @@ -28,7 +30,9 @@ color: $color-contrast; } - @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); + .card-title-md-#{$color-name} { color: $color-base; } @@ -38,5 +42,4 @@ .card-title-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/card-title/card-title.md.vars.scss b/packages/core/src/components/card-title/card-title.md.vars.scss index 7a487224e8..0dc11d90f2 100644 --- a/packages/core/src/components/card-title/card-title.md.vars.scss +++ b/packages/core/src/components/card-title/card-title.md.vars.scss @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top !default; $card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title -$card-md-title-text-color: #222 !default; +$card-md-title-text-color: $text-md-color-step-100 !default; diff --git a/packages/core/src/components/card/card.ios.scss b/packages/core/src/components/card/card.ios.scss index 87e37e8b01..7497bf4826 100755 --- a/packages/core/src/components/card/card.ios.scss +++ b/packages/core/src/components/card/card.ios.scss @@ -11,10 +11,9 @@ width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); font-family: $card-ios-font-family; - font-size: $card-ios-font-size; - - background: $card-ios-background-color; + color: $card-ios-text-color; + background-color: $card-ios-background-color; box-shadow: $card-ios-box-shadow; transform: translateZ(0); @@ -73,11 +72,12 @@ // @include margin(0, null, null, null); // } - // Generate iOS Card 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .card-ios .text-ios-#{$color-name} { color: $color-base; @@ -91,11 +91,12 @@ color: $color-contrast; } - @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); + .text-ios-#{$color-name} { color: $color-base; } } } - } diff --git a/packages/core/src/components/card/card.ios.vars.scss b/packages/core/src/components/card/card.ios.vars.scss index 863f2a6672..63b042eab5 100755 --- a/packages/core/src/components/card/card.ios.vars.scss +++ b/packages/core/src/components/card/card.ios.vars.scss @@ -16,7 +16,7 @@ $card-ios-margin-bottom: 30px !default; $card-ios-margin-start: 20px !default; /// @prop - Background color of the card -$card-ios-background-color: $list-ios-background-color !default; +$card-ios-background-color: $item-ios-background-color !default; /// @prop - Box shadow color of the card $card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default; @@ -34,4 +34,4 @@ $card-ios-font-family: $font-family-ios-base !default; $card-ios-font-size: 14px !default; /// @prop - Color of the card text -$card-ios-text-color: #666 !default; +$card-ios-text-color: $text-ios-color-step-200 !default; diff --git a/packages/core/src/components/card/card.md.scss b/packages/core/src/components/card/card.md.scss index 935265dc25..d51f925c87 100755 --- a/packages/core/src/components/card/card.md.scss +++ b/packages/core/src/components/card/card.md.scss @@ -11,10 +11,9 @@ width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); font-family: $card-md-font-family; - font-size: $card-md-font-size; - - background: $card-md-background-color; + color: $card-md-text-color; + background-color: $card-md-background-color; box-shadow: $card-md-box-shadow; } @@ -80,7 +79,9 @@ // Generate Material Design Card 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .card-md .text-md-#{$color-name} { color: $color-base; @@ -100,7 +101,9 @@ color: $color-contrast; } - @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); + .text-md-#{$color-name} { color: $color-base; } diff --git a/packages/core/src/components/card/card.md.vars.scss b/packages/core/src/components/card/card.md.vars.scss index d466556549..b790670c80 100755 --- a/packages/core/src/components/card/card.md.vars.scss +++ b/packages/core/src/components/card/card.md.vars.scss @@ -16,7 +16,7 @@ $card-md-margin-bottom: 10px !default; $card-md-margin-start: 10px !default; /// @prop - Background color of the card -$card-md-background-color: $list-md-background-color !default; +$card-md-background-color: $item-md-background-color !default; /// @prop - Box shadow of the card $card-md-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; @@ -34,4 +34,4 @@ $card-md-font-family: $font-family-md-base !default; $card-md-line-height: 1.5 !default; /// @prop - Color of the card text -$card-md-text-color: #222 !default; +$card-md-text-color: $text-md-color-step-100 !default; diff --git a/packages/core/src/components/checkbox/checkbox.ios.scss b/packages/core/src/components/checkbox/checkbox.ios.scss index b148da67cd..20dc3025ea 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.scss @@ -76,11 +76,11 @@ width: 36px; height: 36px; - background: #86a8df; + background: $checkbox-ios-background-color-focused; content: ""; - opacity: .3; + opacity: .2; } @@ -102,7 +102,9 @@ // iOS Checkbox Color Mixin // -------------------------------------------------- -@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) { +@mixin checkbox-theme-ios($color-name) { + $color-base: ion-color($colors-ios, $color-name, base, ios); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .checkbox-ios-#{$color-name} .checkbox-checked { border-color: $color-base; @@ -112,13 +114,12 @@ .checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner { border-color: $color-contrast; } - } // Generate iOS Checkbox Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - @include checkbox-theme-ios($color-name, $color-base, $color-contrast); +@each $color-name, $color-value in $colors-ios { + @include checkbox-theme-ios($color-name); } diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss index de8be69742..b00dcdba3f 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.vars.scss @@ -6,16 +6,19 @@ // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $list-ios-background-color !default; +$checkbox-ios-background-color-off: $item-ios-background-color !default; /// @prop - Background color of the checkbox when on -$checkbox-ios-background-color-on: color($colors-ios, primary) !default; +$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default; + +/// @prop - Background color of focus indicator for checkbox when focused +$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default; /// @prop - Size of the checkbox icon $checkbox-ios-icon-size: 21px !default; /// @prop - Border color of the checkbox icon when off -$checkbox-ios-icon-border-color-off: $list-ios-border-color !default; +$checkbox-ios-icon-border-color-off: $item-ios-border-color !default; /// @prop - Border color of the checkbox icon when on $checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default; @@ -36,7 +39,7 @@ $checkbox-ios-icon-checkmark-width: 1px !default; $checkbox-ios-icon-checkmark-style: solid !default; /// @prop - Color of the checkbox icon checkmark -$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default; +$checkbox-ios-icon-checkmark-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default; /// @prop - Opacity of the disabled checkbox $checkbox-ios-disabled-opacity: .3 !default; diff --git a/packages/core/src/components/checkbox/checkbox.md.scss b/packages/core/src/components/checkbox/checkbox.md.scss index 2e89d73d3a..443fd9f6f8 100644 --- a/packages/core/src/components/checkbox/checkbox.md.scss +++ b/packages/core/src/components/checkbox/checkbox.md.scss @@ -80,11 +80,11 @@ width: 36px; height: 36px; - background: #86a8df; + background: $checkbox-md-background-color-focused; content: ""; - opacity: .3; + opacity: .2; } @@ -110,7 +110,9 @@ // Material Design Checkbox Color Mixin // -------------------------------------------------- -@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) { +@mixin checkbox-theme-md($color-name) { + $color-base: ion-color($colors-md, $color-name, base, md); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .checkbox-md-#{$color-name} .checkbox-checked { border-color: $color-base; @@ -120,13 +122,12 @@ .checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner { border-color: $color-contrast; } - } // Generate Material Design Checkbox Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - @include checkbox-theme-md($color-name, $color-base, $color-contrast); +@each $color-name, $color-value in $colors-md { + @include checkbox-theme-md($color-name); } diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss index 408a4cd4df..480e0665c4 100644 --- a/packages/core/src/components/checkbox/checkbox.md.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.md.vars.scss @@ -9,10 +9,13 @@ $checkbox-md-disabled-opacity: .3 !default; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $list-md-background-color !default; +$checkbox-md-icon-background-color-off: $item-md-background-color !default; + +/// @prop - Background color of focus indicator for checkbox when focused +$checkbox-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default; /// @prop - Background color of the checkbox icon when on -$checkbox-md-icon-background-color-on: color($colors-md, primary) !default; +$checkbox-md-icon-background-color-on: ion-color($colors-md, primary, base, md) !default; /// @prop - Size of the checkbox icon $checkbox-md-icon-size: 16px !default; @@ -24,7 +27,7 @@ $checkbox-md-icon-checkmark-width: 2px !default; $checkbox-md-icon-checkmark-style: solid !default; /// @prop - Color of the checkbox icon checkmark -$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default; +$checkbox-md-icon-checkmark-color: ion-color($colors-md, $checkbox-md-icon-background-color-on, contrast, md) !default; /// @prop - Border width of the checkbox icon $checkbox-md-icon-border-width: 2px !default; @@ -36,10 +39,10 @@ $checkbox-md-icon-border-style: solid !default; $checkbox-md-icon-border-radius: 2px !default; /// @prop - Border color of the checkbox icon when off -$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default; +$checkbox-md-icon-border-color-off: $border-md-color !default; /// @prop - Border color of the checkbox icon when on -$checkbox-md-icon-border-color-on: color($colors-md, primary) !default; +$checkbox-md-icon-border-color-on: ion-color($colors-md, primary, base, md) !default; /// @prop - Transition duration of the checkbox $checkbox-md-transition-duration: 280ms !default; diff --git a/packages/core/src/components/chip-button/chip-button.ios.scss b/packages/core/src/components/chip-button/chip-button.ios.scss index d310a84b1a..2b76051b7a 100644 --- a/packages/core/src/components/chip-button/chip-button.ios.scss +++ b/packages/core/src/components/chip-button/chip-button.ios.scss @@ -29,7 +29,9 @@ // Generate iOS Chip Button 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .chip-button-ios-#{$color-name} { color: $color-contrast; diff --git a/packages/core/src/components/chip-button/chip-button.ios.vars.scss b/packages/core/src/components/chip-button/chip-button.ios.vars.scss index 7a60940cb7..bb575bea5a 100644 --- a/packages/core/src/components/chip-button/chip-button.ios.vars.scss +++ b/packages/core/src/components/chip-button/chip-button.ios.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Background color of the chip button -$chip-button-ios-background-color: color($colors-ios, primary) !default; +$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Fill color of the icon in the chip button -$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default; +$chip-button-ios-icon-fill-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default; /// @prop - Background color of the clear chip button $chip-button-ios-clear-background-color: transparent !default; /// @prop - Text color of the clear chip button -$chip-button-ios-clear-text-color: color($colors-ios, primary) !default; +$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Fill color of the icon in the clear chip button -$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default; +$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default; diff --git a/packages/core/src/components/chip-button/chip-button.md.scss b/packages/core/src/components/chip-button/chip-button.md.scss index 10cac697f4..113b4053e8 100644 --- a/packages/core/src/components/chip-button/chip-button.md.scss +++ b/packages/core/src/components/chip-button/chip-button.md.scss @@ -29,7 +29,9 @@ // Generate Material Design Chip Button 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .chip-button-md-#{$color-name} { color: $color-contrast; @@ -47,5 +49,4 @@ .chip-button-clear-md-#{$color-name} .icon { fill: $color-base; } - } diff --git a/packages/core/src/components/chip-button/chip-button.md.vars.scss b/packages/core/src/components/chip-button/chip-button.md.vars.scss index 288f98c5a4..f5f7275dbb 100644 --- a/packages/core/src/components/chip-button/chip-button.md.vars.scss +++ b/packages/core/src/components/chip-button/chip-button.md.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Background color of the chip button -$chip-button-md-background-color: color($colors-md, primary) !default; +$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Fill color of the icon in the chip button -$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default; +$chip-button-md-icon-fill-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default; /// @prop - Background color of the clear chip button $chip-button-md-clear-background-color: transparent !default; /// @prop - Text color of the clear chip button -$chip-button-md-clear-text-color: color($colors-md, primary) !default; +$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Fill color of the icon in the clear chip button -$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default; +$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default; diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss index 13fba1895f..77e95b984c 100644 --- a/packages/core/src/components/chip/chip.ios.scss +++ b/packages/core/src/components/chip/chip.ios.scss @@ -37,7 +37,9 @@ // Generate iOS Chip 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); .chip-ios-#{$color-name} { color: $color-contrast; @@ -48,5 +50,4 @@ color: $color-contrast; background-color: $color-base; } - } diff --git a/packages/core/src/components/chip/chip.ios.vars.scss b/packages/core/src/components/chip/chip.ios.vars.scss index 388c1afba6..2295c19680 100644 --- a/packages/core/src/components/chip/chip.ios.vars.scss +++ b/packages/core/src/components/chip/chip.ios.vars.scss @@ -28,10 +28,10 @@ $chip-ios-font-family: $font-family-ios-base !default; $chip-ios-font-size: 13px !default; /// @prop - Text color of the chip -$chip-ios-text-color: rgba(0, 0, 0, .87) !default; +$chip-ios-text-color: $text-ios-color-step-100 !default; /// @prop - Background color of the chip -$chip-ios-background-color: rgba(0, 0, 0, .12) !default; +$chip-ios-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default; /// @prop - Margin top of the label in the chip $chip-ios-label-margin-top: 0 !default; @@ -46,10 +46,10 @@ $chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; $chip-ios-label-margin-start: $chip-ios-label-margin-end !default; /// @prop - Background color of the icon in the chip -$chip-ios-icon-background-color: color($colors-ios, primary) !default; +$chip-ios-icon-background-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Fill color of the icon in the chip -$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default; +$chip-ios-icon-fill-color: ion-color($colors-ios, $chip-ios-icon-background-color, contrast, ios) !default; /// @prop - Width of the avatar in the chip $chip-ios-avatar-width: 32px !default; diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss index ef3c659a81..5bf6ea8725 100644 --- a/packages/core/src/components/chip/chip.md.scss +++ b/packages/core/src/components/chip/chip.md.scss @@ -37,7 +37,9 @@ // Generate Material Design Chip 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); .chip-md-#{$color-name} { color: $color-contrast; @@ -48,5 +50,4 @@ color: $color-contrast; background-color: $color-base; } - } diff --git a/packages/core/src/components/chip/chip.md.vars.scss b/packages/core/src/components/chip/chip.md.vars.scss index 07199b00ed..43c95cb08e 100644 --- a/packages/core/src/components/chip/chip.md.vars.scss +++ b/packages/core/src/components/chip/chip.md.vars.scss @@ -28,10 +28,10 @@ $chip-md-font-family: $font-family-md-base !default; $chip-md-font-size: 13px !default; /// @prop - Text color of the chip -$chip-md-text-color: rgba(0, 0, 0, .87) !default; +$chip-md-text-color: $text-md-color-step-100 !default; /// @prop - Background color of the chip -$chip-md-background-color: rgba(0, 0, 0, .12) !default; +$chip-md-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default; /// @prop - Margin top of the label in the chip $chip-md-label-margin-top: 0 !default; @@ -46,10 +46,10 @@ $chip-md-label-margin-bottom: $chip-md-label-margin-top !default; $chip-md-label-margin-start: $chip-md-label-margin-end !default; /// @prop - Background color of the icon in the chip -$chip-md-icon-background-color: color($colors-md, primary) !default; +$chip-md-icon-background-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Fill color of the icon in the chip -$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default; +$chip-md-icon-fill-color: ion-color($colors-md, $chip-md-icon-background-color, contrast, md) !default; /// @prop - Width of the avatar in the chip $chip-md-avatar-width: 32px !default; diff --git a/packages/core/src/components/content/content.ios.scss b/packages/core/src/components/content/content.ios.scss index 72235739be..4e9a7a7320 100644 --- a/packages/core/src/components/content/content.ios.scss +++ b/packages/core/src/components/content/content.ios.scss @@ -18,7 +18,7 @@ .content-ios hr { height: $hairlines-width; - background-color: rgba(0, 0, 0, .12); + background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-low); } diff --git a/packages/core/src/components/content/content.ios.vars.scss b/packages/core/src/components/content/content.ios.vars.scss index 38e29c2a94..dd256438ee 100644 --- a/packages/core/src/components/content/content.ios.vars.scss +++ b/packages/core/src/components/content/content.ios.vars.scss @@ -7,7 +7,7 @@ $content-ios-font-family: $font-family-ios-base !default; /// @prop - Background color of the outer content -$content-ios-outer-background: #efeff4 !default; +$content-ios-outer-background: $background-ios-color-step-100 !default; /// @prop - Background color of the content when making transition $content-ios-transition-background: #000 !default; diff --git a/packages/core/src/components/content/content.md.scss b/packages/core/src/components/content/content.md.scss index 1b9b208fef..65b1f9263b 100644 --- a/packages/core/src/components/content/content.md.scss +++ b/packages/core/src/components/content/content.md.scss @@ -12,7 +12,7 @@ } .content-md hr { - background-color: rgba(0, 0, 0, .08); + background-color: $background-color-step-100; } diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss index cdb63f024a..acd0dbfd54 100644 --- a/packages/core/src/components/content/content.scss +++ b/packages/core/src/components/content/content.scss @@ -45,11 +45,6 @@ ion-content.js-scroll ion-scroll { will-change: initial; } -ion-content.has-refresher ion-scroll { - background-color: inherit; -} - - // Content Padding // -------------------------------------------------- diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss index 3de0449451..8a8b0b2e0e 100644 --- a/packages/core/src/components/datetime/datetime.ios.vars.scss +++ b/packages/core/src/components/datetime/datetime.ios.vars.scss @@ -6,19 +6,19 @@ // -------------------------------------------------- /// @prop - Padding top of the datetime -$datetime-ios-padding-top: $item-ios-padding-top !default; +$datetime-ios-padding-top: $item-ios-padding-top !default; /// @prop - Padding end of the datetime -$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default; +$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default; /// @prop - Padding bottom of the datetime -$datetime-ios-padding-bottom: $item-ios-padding-bottom !default; +$datetime-ios-padding-bottom: $item-ios-padding-bottom !default; /// @prop - Padding start of the datetime -$datetime-ios-padding-start: $item-ios-padding-start !default; +$datetime-ios-padding-start: $item-ios-padding-start !default; /// @prop - Font family of the datetime -$datetime-ios-font-family: $font-family-ios-base !default; +$datetime-ios-font-family: $font-family-ios-base !default; /// @prop - Color of the datetime placeholder -$datetime-ios-placeholder-color: #999 !default; +$datetime-ios-placeholder-color: $text-ios-color-step-300 !default; diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss index 1e1a5c4421..7b4f39022f 100644 --- a/packages/core/src/components/datetime/datetime.md.vars.scss +++ b/packages/core/src/components/datetime/datetime.md.vars.scss @@ -21,4 +21,4 @@ $datetime-md-padding-start: $item-md-padding-start !default; $datetime-md-font-family: $font-family-md-base !default; /// @prop - Color of the datetime placeholder -$datetime-md-placeholder-color: #999 !default; +$datetime-md-placeholder-color: $placeholder-text-md-color !default; diff --git a/packages/core/src/components/fab-button/fab-button.ios.scss b/packages/core/src/components/fab-button/fab-button.ios.scss index f63d57726e..585ae5100e 100755 --- a/packages/core/src/components/fab-button/fab-button.ios.scss +++ b/packages/core/src/components/fab-button/fab-button.ios.scss @@ -40,25 +40,24 @@ // -------------------------------------------------- .fab-translucent-ios { - background-color: rgba($fab-ios-background-color, $fab-ios-translucent-opacity); + background-color: $fab-ios-translucent-background-color; -webkit-backdrop-filter: $fab-ios-translucent-filter; backdrop-filter: $fab-ios-translucent-filter; } .fab-translucent-ios-in-list { - background-color: rgba($fab-ios-list-button-background-color, $fab-ios-translucent-opacity); + background-color: $fab-ios-list-button-translucent-background-color; } // Generate iOS FAB colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $fg-color: $color-contrast; +@each $color-name, $color-value in $colors-ios { + $bg-color: ion-color($colors-ios, $color-name, base, ios); + $bg-color-activated: ion-color($colors-ios, $color-name, tint, ios); + $fg-color: ion-color($colors-ios, $color-name, contrast, ios); .fab-button-ios-#{$color-name} { color: $fg-color; @@ -74,11 +73,12 @@ } .fab-translucent-ios-#{$color-name} { - background-color: rgba($bg-color, $fab-ios-translucent-opacity); + background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-highest); + opacity: .8; } .fab-translucent-ios-#{$color-name}.activated { - background-color: rgba($bg-color-activated, $fab-ios-translucent-opacity); + opacity: 1; } } diff --git a/packages/core/src/components/fab-button/fab-button.ios.vars.scss b/packages/core/src/components/fab-button/fab-button.ios.vars.scss index 1ae85d0b64..5db7ebbcd9 100755 --- a/packages/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/packages/core/src/components/fab-button/fab-button.ios.vars.scss @@ -4,40 +4,43 @@ // -------------------------------------------------- /// @prop - Background color of the button -$fab-ios-background-color: color($colors-ios, primary) !default; +$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; + +/// @prop - Background color of the button in translucent mode +$fab-ios-translucent-background-color: ion-color-alpha($colors-ios, primary, $alpha-ios-highest, ios) !default; /// @prop - Text color of the button -$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default; +$fab-ios-text-color: ion-color($colors-ios, $fab-ios-background-color, contrast, ios) !default; /// @prop - Color of the button icon -$fab-ios-icon-fill-color: $fab-ios-text-color !default; +$fab-ios-icon-fill-color: $fab-ios-text-color !default; /// @prop - Background color of the activated button -$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default; +$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default; /// @prop - Background color of the button in a list -$fab-ios-list-button-background-color: $fab-list-button-background-color !default; +$fab-ios-list-button-background-color: ion-color($colors-ios, tertiary, base, ios) !default; + +/// @prop - Background color of the button in a list +$fab-ios-list-button-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default; /// @prop - Text color of the button in a list -$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default; +$fab-ios-list-button-text-color: ion-color($colors-ios, $fab-ios-list-button-background-color, contrast, ios) !default; /// @prop - Color of the button icon in a list -$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default; +$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default; /// @prop - Background color of the activated button in a list -$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default; +$fab-ios-list-button-background-color-activated: ion-color($colors-ios, $fab-ios-list-button-background-color, tint, ios) !default; /// @prop - Transition duration of the transform and opacity of the button in a list -$fab-ios-list-button-transition-duration: 200ms !default; +$fab-ios-list-button-transition-duration: 200ms !default; /// @prop - Speed curve of the transition of the transform and opacity of the button in a list -$fab-ios-list-button-transition-timing-function: ease !default; +$fab-ios-list-button-transition-timing-function: ease !default; /// @prop - Transition delay of the transform and opacity of the button in a list -$fab-ios-list-button-transition-delay: 10ms !default; +$fab-ios-list-button-transition-delay: 10ms !default; /// @prop - Filter of the translucent fab -$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent fab -$fab-ios-translucent-opacity: .88 !default; +$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/packages/core/src/components/fab-button/fab-button.md.scss b/packages/core/src/components/fab-button/fab-button.md.scss index 6b928745d0..9a853b8a46 100755 --- a/packages/core/src/components/fab-button/fab-button.md.scss +++ b/packages/core/src/components/fab-button/fab-button.md.scss @@ -51,19 +51,19 @@ // Material Design FAB Ripple // -------------------------------------------------- -.fab-button-md .ripple-effect { - background-color: color-contrast($colors-md, $fab-md-background-color); +.fab-button-md .button-effect { + background-color: ion-color($colors-md, $fab-md-background-color, contrast, md); } // Generate MD FAB colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { +@each $color-name, $color-value in $colors-md { - $bg-color: $color-base; - $bg-color-activated: color-shade($bg-color); - $fg-color: $color-contrast; + $bg-color: ion-color($colors-md, $color-name, base, md); + $bg-color-activated: ion-color($colors-md, $bg-color, tint, md); + $fg-color: ion-color($colors-md, $color-name, contrast, md); .fab-button-md-#{$color-name} { color: $fg-color; diff --git a/packages/core/src/components/fab-button/fab-button.md.vars.scss b/packages/core/src/components/fab-button/fab-button.md.vars.scss index 4dfd4dda54..79252eaeae 100755 --- a/packages/core/src/components/fab-button/fab-button.md.vars.scss +++ b/packages/core/src/components/fab-button/fab-button.md.vars.scss @@ -10,28 +10,28 @@ $fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14) $fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default; /// @prop - Background color of the button -$fab-md-background-color: color($colors-md, primary) !default; +$fab-md-background-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Text color of the button -$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default; +$fab-md-text-color: ion-color($colors-md, $fab-md-background-color, contrast, md) !default; /// @prop - Color of the button icon $fab-md-icon-fill-color: $fab-md-text-color !default; /// @prop - Background color of the activated button -$fab-md-background-color-activated: color-shade($fab-md-background-color) !default; +$fab-md-background-color-activated: ion-color($colors-md, $fab-md-background-color, tint, md) !default; /// @prop - Background color of the button in a list -$fab-md-list-button-background-color: $fab-list-button-background-color !default; +$fab-md-list-button-background-color: ion-color($colors-md, tertiary, base, md) !default; /// @prop - Text color of the button in a list -$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default; +$fab-md-list-button-text-color: ion-color($colors-md, $fab-md-list-button-background-color, contrast, md) !default; /// @prop - Color of the button icon in a list $fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default; /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default; +$fab-md-list-button-background-color-activated: ion-color($colors-md, $fab-md-list-button-background-color, tint, md) !default; /// @prop - Transition duration of the transform and opacity of the button in a list $fab-md-list-button-transition-duration: 200ms !default; diff --git a/packages/core/src/components/fab-button/fab-button.vars.scss b/packages/core/src/components/fab-button/fab-button.vars.scss index 33caa1ffbb..7f8286dd91 100755 --- a/packages/core/src/components/fab-button/fab-button.vars.scss +++ b/packages/core/src/components/fab-button/fab-button.vars.scss @@ -8,6 +8,3 @@ $fab-size: 56px !default; /// @prop - Width and height of the mini FAB button $fab-mini-size: 40px !default; - -/// @prop - Background color of the button in a list -$fab-list-button-background-color: #f4f4f4 !default; diff --git a/packages/core/src/components/icon/icon.ios.scss b/packages/core/src/components/icon/icon.ios.scss index eab3ad2ce3..ae495fe92f 100644 --- a/packages/core/src/components/icon/icon.ios.scss +++ b/packages/core/src/components/icon/icon.ios.scss @@ -7,10 +7,10 @@ // Generate iOS Icon 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); .icon-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/icon/icon.md.scss b/packages/core/src/components/icon/icon.md.scss index 38c08d15b6..fdf2cfdd75 100644 --- a/packages/core/src/components/icon/icon.md.scss +++ b/packages/core/src/components/icon/icon.md.scss @@ -7,10 +7,10 @@ // Generate Material Design Icon 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); .icon-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.ios.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.ios.scss new file mode 100644 index 0000000000..601d7996d6 --- /dev/null +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.ios.scss @@ -0,0 +1,17 @@ +@import "./infinite-scroll.ios.vars"; + +.infinite-scroll-ios .infinite-loading-text { + color: $infinite-scroll-ios-loading-text-color; +} + +.infinite-scroll-ios .infinite-loading-spinner .spinner-ios line, +.infinite-scroll-ios .infinite-loading-spinner .spinner-ios-small line, +.infinite-scroll-ios .infinite-loading-spinner .spinner-crescent circle { + stroke: $infinite-scroll-ios-loading-color; +} + +.infinite-scroll-ios .infinite-loading-spinner .spinner-bubbles circle, +.infinite-scroll-ios .infinite-loading-spinner .spinner-circles circle, +.infinite-scroll-ios .infinite-loading-spinner .spinner-dots circle { + fill: $infinite-scroll-ios-loading-color; +} diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.ios.vars.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.ios.vars.scss new file mode 100644 index 0000000000..aec5fc2c4d --- /dev/null +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.ios.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals.ios"; + +// Material Design Infinite Scroll +// -------------------------------------------------- + +/// @prop - Color of the infinite scroll loading indicator +$infinite-scroll-ios-loading-color: $text-ios-color-step-200 !default; + +/// @prop - Color of the infinite scroll loading indicator text +$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.md.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.md.scss new file mode 100644 index 0000000000..e15d69d256 --- /dev/null +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.md.scss @@ -0,0 +1,15 @@ +@import "./infinite-scroll.md.vars"; + +.infinite-scroll-md .infinite-loading-text { + color: $infinite-scroll-md-loading-text-color; +} + +.infinite-scroll-md .infinite-loading-spinner .spinner-crescent circle { + stroke: $infinite-scroll-md-loading-color; +} + +.infinite-scroll-md .infinite-loading-spinner .spinner-bubbles circle, +.infinite-scroll-md .infinite-loading-spinner .spinner-circles circle, +.infinite-scroll-md .infinite-loading-spinner .spinner-dots circle { + fill: $infinite-scroll-md-loading-color; +} diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.md.vars.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.md.vars.scss new file mode 100644 index 0000000000..8a06bd1a99 --- /dev/null +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.md.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Infinite Scroll +// -------------------------------------------------- + +/// @prop - Color of the infinite scroll loading indicator +$infinite-scroll-md-loading-color: $text-md-color-step-200 !default; + +/// @prop - Color of the infinite scroll loading indicator text +$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.scss index 6412ffab26..ed5918472a 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.scss +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.scss @@ -39,21 +39,8 @@ ion-infinite-scroll-content { .infinite-loading-text { @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start); - - color: $infinite-scroll-loading-text-color; } -.infinite-loading-spinner .spinner-ios line, -.infinite-loading-spinner .spinner-ios-small line, -.infinite-loading-spinner .spinner-crescent circle { - stroke: $infinite-scroll-loading-color; -} - -.infinite-loading-spinner .spinner-bubbles circle, -.infinite-loading-spinner .spinner-circles circle, -.infinite-loading-spinner .spinner-dots circle { - fill: $infinite-scroll-loading-color; -} // Infinite Scroll Content States diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index 1e7df61a98..6afbf50b3f 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -9,7 +9,13 @@ const enum Position { @Component({ tag: 'ion-infinite-scroll', - styleUrl: 'infinite-scroll.scss' + styleUrls: { + ios: 'infinite-scroll.ios.scss', + md: 'infinite-scroll.md.scss' + }, + host: { + theme: 'infinite-scroll' + } }) export class InfiniteScroll { diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss index 9e11dababb..8fdd8d5775 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss @@ -18,12 +18,6 @@ $infinite-scroll-loading-margin-bottom: 32px !default; /// @prop - Margin start of the infinite scroll loading icon $infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; -/// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-loading-color: #666 !default; - -/// @prop - Text color of the infinite scroll loading indicator -$infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default; - /// @prop - Margin top of the infinite scroll loading text $infinite-scroll-loading-text-margin-top: 4px !default; diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss index 5220ded5f5..2e86c70147 100644 --- a/packages/core/src/components/input/input.ios.scss +++ b/packages/core/src/components/input/input.ios.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- .native-input-ios { + @include placeholder($input-ios-placeholder-color); @include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start); @include padding(0); diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss index e3bd289d6e..edce485b40 100644 --- a/packages/core/src/components/input/input.ios.vars.scss +++ b/packages/core/src/components/input/input.ios.vars.scss @@ -54,7 +54,7 @@ $input-ios-inset-margin-start: 0 !default; $input-ios-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; +$input-ios-input-clear-icon-color: $text-ios-color-step-200 !default; /// @prop - Icon used to clear the input $input-ios-input-clear-icon-svg: "" !default; @@ -65,6 +65,9 @@ $input-ios-input-clear-icon-size: 18px !default; /// @prop - Padding end of the input with clear input $input-ios-input-clear-padding-end: ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default; +/// @prop - Placeholder Text color of the input +$input-ios-placeholder-color: $placeholder-text-ios-color !default; + /// @prop - Show the focus highlight when the input has focus $input-ios-show-focus-highlight: false !default; @@ -75,10 +78,10 @@ $input-ios-show-valid-highlight: $input-ios-show-focus-highlight !defau $input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; /// @prop - Color of the input highlight -$input-ios-highlight-color: color($colors-ios, primary) !default; +$input-ios-highlight-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Color of the input highlight when valid -$input-ios-highlight-color-valid: $input-highlight-color-valid !default; +$input-ios-highlight-color-valid: ion-color($colors-ios, success, base, ios) !default; /// @prop - Color of the input highlight when invalid -$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default; +$input-ios-highlight-color-invalid: ion-color($colors-ios, danger, base, ios) !default; diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss index 278086703a..13fc24ab42 100644 --- a/packages/core/src/components/input/input.md.scss +++ b/packages/core/src/components/input/input.md.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- .native-input-md { + @include placeholder($input-md-placeholder-color); @include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start); @include padding(0); diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss index 47841d417e..920839706b 100644 --- a/packages/core/src/components/input/input.md.vars.scss +++ b/packages/core/src/components/input/input.md.vars.scss @@ -27,7 +27,7 @@ $input-md-margin-start: ($item-md-padding-start / 2) !default; $input-md-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-md-input-clear-icon-color: #5b5b5b !default; +$input-md-input-clear-icon-color: $text-md-color-step-200 !default; /// @prop - Icon used to clear the input $input-md-input-clear-icon-svg: "" !default; @@ -35,6 +35,9 @@ $input-md-input-clear-icon-svg: "" !default; diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss index 720010131c..83cca9cd8b 100644 --- a/packages/core/src/components/item/item.md.scss +++ b/packages/core/src/components/item/item.md.scss @@ -14,14 +14,14 @@ font-weight: normal; text-transform: none; - color: $list-md-text-color; - background-color: $list-md-background-color; + color: $item-md-text-color; + background-color: $item-md-background-color; box-shadow: none; transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); } .item-md.activated { - background-color: $list-md-activated-background-color; + background-color: $item-md-background-color-active; } .item-md[no-lines] { @@ -67,7 +67,7 @@ .item-md.item-block .item-inner { @include padding-horizontal(null, ($item-md-padding-end / 2)); - border-bottom: 1px solid $list-md-border-color; + border-bottom: 1px solid $item-md-border-color; } @@ -169,8 +169,19 @@ // Generate Material Design Item and Item Divider Colors // -------------------------------------------------- -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - .item-md-#{$color-name} { +@each $color-name, $color-value in $colors-md { + $color-base: ion-color($colors-md, $color-name, base, md); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); + $color-tint: ion-color($colors-md, $color-name, tint, md); + + // If there is text with a color it should use this color + // and override whatever item sets it to + .item-md .text-md-#{$color-name} { + color: $color-base; + } + + .item-md-#{$color-name}, + .item-divider-md-#{$color-name} { color: $color-contrast; background-color: $color-base; @@ -179,7 +190,7 @@ } &.activated { - background-color: color-shade($color-base); + background-color: $color-tint; } } } diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss index aaa597ea2c..75b5c3c561 100644 --- a/packages/core/src/components/item/item.md.vars.scss +++ b/packages/core/src/components/item/item.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: #666 !default; +$item-md-paragraph-text-color: $text-color-step-200 !default; /// @prop - Font family of the item $item-md-font-family: $font-family-md-base !default; @@ -28,7 +28,7 @@ $item-md-thumbnail-height: $item-md-thumbnail-width !default; $item-md-detail-push-show: false !default; /// @prop - Color of the detail arrow icon -$item-md-detail-push-color: $list-md-border-color !default; +$item-md-detail-push-color: $item-md-text-color !default; /// @prop - Icon for the detail arrow $item-md-detail-push-svg: "" !default; diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss index 6a8999bf47..f1ed43ba3d 100644 --- a/packages/core/src/components/label/label.ios.scss +++ b/packages/core/src/components/label/label.ios.scss @@ -8,6 +8,7 @@ @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start); font-family: $label-ios-font-family; + color: $label-ios-text-color; } @@ -52,7 +53,8 @@ // Generate iOS Label 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); .label-ios-#{$color-name}, .item-input .label-ios-#{$color-name}, @@ -60,5 +62,4 @@ .item-datetime .label-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss index b4386f4256..c584dd5191 100644 --- a/packages/core/src/components/label/label.md.scss +++ b/packages/core/src/components/label/label.md.scss @@ -8,6 +8,7 @@ @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); font-family: $label-md-font-family; + color: $label-md-text-color; } [text-wrap] .label-md { @@ -59,7 +60,8 @@ // Generate Material Design Label 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); .label-md-#{$color-name}, .item-input .label-md-#{$color-name}, @@ -67,5 +69,4 @@ .item-datetime .label-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/label/label.md.vars.scss b/packages/core/src/components/label/label.md.vars.scss index 1f342d3f97..a147901b62 100644 --- a/packages/core/src/components/label/label.md.vars.scss +++ b/packages/core/src/components/label/label.md.vars.scss @@ -9,10 +9,10 @@ $label-md-font-family: $font-family-md-base !default; /// @prop - Text color of the label by an input, select, or datetime -$label-md-text-color: #999 !default; +$label-md-text-color: $text-md-color-step-300 !default; /// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: color($colors-md, primary) !default; +$label-md-text-color-focused: ion-color($colors-md, primary, base, md) !default; /// @prop - Margin top of the label $label-md-margin-top: $item-md-padding-top !default; diff --git a/packages/core/src/components/list-header/list-header.ios.scss b/packages/core/src/components/list-header/list-header.ios.scss index 0dbfaf2856..df693db172 100644 --- a/packages/core/src/components/list-header/list-header.ios.scss +++ b/packages/core/src/components/list-header/list-header.ios.scss @@ -22,7 +22,10 @@ // Generate iOS List Header 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); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); + .list-header-ios-#{$color-name} { color: $color-contrast; background-color: $color-base; diff --git a/packages/core/src/components/list-header/list-header.ios.vars.scss b/packages/core/src/components/list-header/list-header.ios.vars.scss index 3dd8fb3717..1465d021a2 100644 --- a/packages/core/src/components/list-header/list-header.ios.vars.scss +++ b/packages/core/src/components/list-header/list-header.ios.vars.scss @@ -9,7 +9,7 @@ $list-ios-header-padding-start: $item-ios-padding-start !default; /// @prop - Border bottom of the header in a list -$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; +$list-ios-header-border-bottom: $hairlines-width solid $item-ios-border-color !default; /// @prop - Font size of the header in a list $list-ios-header-font-size: 12px !default; @@ -24,7 +24,7 @@ $list-ios-header-letter-spacing: 1px !default; $list-ios-header-text-transform: uppercase !default; /// @prop - Text color of the header in a list -$list-ios-header-color: #333 !default; +$list-ios-header-color: $text-ios-color-step-100 !default; /// @prop - Background color of the header in a list $list-ios-header-background-color: transparent !default; diff --git a/packages/core/src/components/list-header/list-header.md.scss b/packages/core/src/components/list-header/list-header.md.scss index 74aced900c..a80da9fb52 100644 --- a/packages/core/src/components/list-header/list-header.md.scss +++ b/packages/core/src/components/list-header/list-header.md.scss @@ -19,7 +19,10 @@ // Generate Material Design List Header 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); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); + .list-header-md-#{$color-name} { color: $color-contrast; background-color: $color-base; diff --git a/packages/core/src/components/list-header/list-header.md.vars.scss b/packages/core/src/components/list-header/list-header.md.vars.scss index 626cf0c36a..ff3fa2e4e6 100644 --- a/packages/core/src/components/list-header/list-header.md.vars.scss +++ b/packages/core/src/components/list-header/list-header.md.vars.scss @@ -15,10 +15,10 @@ $list-md-header-padding-start: $item-md-padding-start !default; $list-md-header-min-height: 45px !default; /// @prop - Border top of the header in a list -$list-md-header-border-top: 1px solid $list-md-border-color !default; +$list-md-header-border-top: 1px solid $item-md-border-color !default; /// @prop - Font size of the header in a list $list-md-header-font-size: 14px !default; /// @prop - Text color of the header in a list -$list-md-header-color: #757575 !default; +$list-md-header-color: $text-md-color-step-200 !default; diff --git a/packages/core/src/components/list/list.ios.scss b/packages/core/src/components/list/list.ios.scss index cca4aa95c1..1d45d05808 100644 --- a/packages/core/src/components/list/list.ios.scss +++ b/packages/core/src/components/list/list.ios.scss @@ -9,12 +9,12 @@ } .list-ios > .item-block:first-child { - border-top: $hairlines-width solid $list-ios-border-color; + border-top: $hairlines-width solid $item-ios-border-color; } .list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block { - border-bottom: $hairlines-width solid $list-ios-border-color; + border-bottom: $hairlines-width solid $item-ios-border-color; } .list-ios > .item-block:last-child .item-inner, @@ -23,7 +23,7 @@ } .list-ios .item-block .item-inner { - border-bottom: $hairlines-width solid $list-ios-border-color; + border-bottom: $hairlines-width solid $item-ios-border-color; } // If the item has the no-lines attribute remove the bottom border from: @@ -49,11 +49,11 @@ } .list-ios[inset] ion-list-header { - background-color: $list-ios-background-color; + background-color: $item-ios-background-color; } .list-ios[inset] .item { - border-bottom: 1px solid $list-ios-border-color; + border-bottom: 1px solid $item-ios-border-color; } .list-ios[inset] .item-inner { diff --git a/packages/core/src/components/list/list.md.scss b/packages/core/src/components/list/list.md.scss index a439f2be81..2b4d114c30 100644 --- a/packages/core/src/components/list/list.md.scss +++ b/packages/core/src/components/list/list.md.scss @@ -9,7 +9,7 @@ } .list-md .item-block .item-inner { - border-bottom: 1px solid $list-md-border-color; + border-bottom: 1px solid $item-md-border-color; } .list-md > .item-block:last-child, @@ -66,7 +66,7 @@ } .list-md[inset] ion-list-header { - background-color: $list-md-background-color; + background-color: $item-md-background-color; } @@ -83,5 +83,5 @@ // -------------------------------------------------- .list-md .item-input:last-child { - border-bottom: 1px solid $list-md-border-color; + border-bottom: 1px solid $item-md-border-color; } diff --git a/packages/core/src/components/loading/loading.ios.scss b/packages/core/src/components/loading/loading.ios.scss index e666ed0139..b9e345ffe0 100644 --- a/packages/core/src/components/loading/loading.ios.scss +++ b/packages/core/src/components/loading/loading.ios.scss @@ -1,6 +1,10 @@ @import "./loading"; @import "./loading.ios.vars"; +.loading-backdrop-ios { + background-color: $loading-backdrop-ios-color; +} + // iOS Loading Indicator // -------------------------------------------------- @@ -13,7 +17,7 @@ max-height: $loading-ios-max-height; color: $loading-ios-text-color; - background: $loading-ios-background; + background-color: $loading-ios-background-color; } @@ -21,7 +25,7 @@ // ----------------------------------------- .loading-translucent-ios .loading-wrapper { - background: rgba($loading-ios-background, $loading-ios-translucent-opacity); + background-color: $loading-ios-translucent-background-color; backdrop-filter: $loading-ios-translucent-filter; -webkit-backdrop-filter: $loading-ios-translucent-filter; diff --git a/packages/core/src/components/loading/loading.ios.vars.scss b/packages/core/src/components/loading/loading.ios.vars.scss index dda6a6a83e..cc9e237e60 100644 --- a/packages/core/src/components/loading/loading.ios.vars.scss +++ b/packages/core/src/components/loading/loading.ios.vars.scss @@ -3,56 +3,59 @@ // iOS Loading Indicator // -------------------------------------------------- +/// @prop - Color of backdrop +$loading-backdrop-ios-color: $backdrop-ios-color !default; + /// @prop - Padding top of the loading wrapper -$loading-ios-padding-top: 24px !default; +$loading-ios-padding-top: 24px !default; /// @prop - Padding end of the loading wrapper -$loading-ios-padding-end: 34px !default; +$loading-ios-padding-end: 34px !default; /// @prop - Padding bottom of the loading wrapper -$loading-ios-padding-bottom: $loading-ios-padding-top !default; +$loading-ios-padding-bottom: $loading-ios-padding-top !default; /// @prop - Padding start of the loading wrapper -$loading-ios-padding-start: $loading-ios-padding-end !default; +$loading-ios-padding-start: $loading-ios-padding-end !default; /// @prop - Max width of the loading wrapper -$loading-ios-max-width: 270px !default; +$loading-ios-max-width: 270px !default; /// @prop - Maximum height of the loading wrapper -$loading-ios-max-height: 90% !default; +$loading-ios-max-height: 90% !default; /// @prop - Border radius of the loading wrapper -$loading-ios-border-radius: 8px !default; +$loading-ios-border-radius: 8px !default; /// @prop - Text color of the loading wrapper -$loading-ios-text-color: #000 !default; +$loading-ios-text-color: $text-ios-color !default; /// @prop - Background of the loading wrapper -$loading-ios-background: #f8f8f8 !default; +$loading-ios-background-color: $background-ios-color-step-100 !default; + +/// @prop - Background of the loading wrapper +$loading-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default; /// @prop - Font weight of the loading content -$loading-ios-content-font-weight: bold !default; +$loading-ios-content-font-weight: bold !default; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: #69717d !default; +$loading-ios-spinner-color: $text-ios-color-step-200 !default; /// @prop - Color of the ios loading spinner -$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default; +$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default; /// @prop - Color of the bubbles loading spinner -$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default; +$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default; /// @prop - Color of the circles loading spinner -$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default; +$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default; /// @prop - Color of the crescent loading spinner -$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default; +$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default; /// @prop - Color of the dots loading spinner -$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; +$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; /// @prop - Filter of the translucent loading -$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent loading -$loading-ios-translucent-opacity: .88 !default; +$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/packages/core/src/components/loading/loading.md.scss b/packages/core/src/components/loading/loading.md.scss index 23451b4296..07a85ca0bb 100644 --- a/packages/core/src/components/loading/loading.md.scss +++ b/packages/core/src/components/loading/loading.md.scss @@ -1,6 +1,10 @@ @import "./loading"; @import "./loading.md.vars"; +.loading-backdrop-ios { + background-color: $loading-backdrop-md-color; +} + // Material Design Loading Indicator // -------------------------------------------------- diff --git a/packages/core/src/components/loading/loading.md.vars.scss b/packages/core/src/components/loading/loading.md.vars.scss index 089f89af82..c83cc50239 100644 --- a/packages/core/src/components/loading/loading.md.vars.scss +++ b/packages/core/src/components/loading/loading.md.vars.scss @@ -3,6 +3,9 @@ // Material Design Loading Indicator // -------------------------------------------------- +/// @prop - Color of backdrop +$loading-backdrop-md-color: $backdrop-md-color !default; + /// @prop - Padding top of the loading wrapper $loading-md-padding-top: 24px !default; @@ -25,10 +28,10 @@ $loading-md-max-height: 90% !default; $loading-md-border-radius: 2px !default; /// @prop - Text color of the loading wrapper -$loading-md-text-color: rgba(0, 0, 0, .5) !default; +$loading-md-text-color: $text-color-step-100 !default; /// @prop - Background of the loading wrapper -$loading-md-background: #fafafa !default; +$loading-md-background: $background-color-step-100 !default; /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; @@ -37,7 +40,7 @@ $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; $loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; /// @prop - Color of the loading spinner -$loading-md-spinner-color: color($colors-md, primary) !default; +$loading-md-spinner-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Color of the ios loading spinner $loading-md-spinner-ios-color: $loading-md-spinner-color !default; diff --git a/packages/core/src/components/loading/loading.scss b/packages/core/src/components/loading/loading.scss index 62687f357e..d780d9f21a 100644 --- a/packages/core/src/components/loading/loading.scss +++ b/packages/core/src/components/loading/loading.scss @@ -41,7 +41,6 @@ ion-loading-controller { width: 100%; height: 100%; - background-color: $loading-backdrop-color; opacity: .01; transform: translateZ(0); } diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 39b4dc8a52..1b74bbcb8b 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -234,6 +234,14 @@ export class Loading { } render() { + const themedClasses = createThemedClasses(this.mode, this.color, 'loading-backdrop'); + + if (this.cssClass) { + this.cssClass.split(' ').forEach(cssClass => { + if (cssClass.trim() !== '') this.el.classList.add(cssClass); + }); + } + const loadingInner: any[] = []; if (this.spinner !== 'hide') { @@ -257,7 +265,7 @@ export class Loading { attachTo='parent' autoBlockAll class={{ - 'loading-backdrop': true, + ...themedClasses, 'hide-backdrop': !this.showBackdrop }} >, diff --git a/packages/core/src/components/loading/loading.vars.scss b/packages/core/src/components/loading/loading.vars.scss index fd12d32ad1..e21c162d17 100644 --- a/packages/core/src/components/loading/loading.vars.scss +++ b/packages/core/src/components/loading/loading.vars.scss @@ -1,7 +1 @@ @import "../../themes/ionic.globals"; - -// Loading -// -------------------------------------------------- - -/// @prop - Color of the loading backdrop -$loading-backdrop-color: #000 !default; diff --git a/packages/core/src/components/modal/modal.ios.scss b/packages/core/src/components/modal/modal.ios.scss index 3222fec1c1..fc61b3901e 100644 --- a/packages/core/src/components/modal/modal.ios.scss +++ b/packages/core/src/components/modal/modal.ios.scss @@ -1,6 +1,10 @@ @import "./modal"; @import "./modal.ios.vars"; +.modal-backdrop-ios { + background-color: $modal-backdrop-ios-color; +} + // iOS Modals // -------------------------------------------------- diff --git a/packages/core/src/components/modal/modal.ios.vars.scss b/packages/core/src/components/modal/modal.ios.vars.scss index b6dcd56489..80566f10f1 100644 --- a/packages/core/src/components/modal/modal.ios.vars.scss +++ b/packages/core/src/components/modal/modal.ios.vars.scss @@ -3,6 +3,9 @@ // iOS Modals // -------------------------------------------------- +/// @prop - Color of backdrop +$modal-backdrop-ios-color: $backdrop-ios-color !default; + /// @prop - Background color for the modal $modal-ios-background-color: $background-ios-color !default; diff --git a/packages/core/src/components/modal/modal.md.scss b/packages/core/src/components/modal/modal.md.scss index e041129c3b..0230c203d2 100644 --- a/packages/core/src/components/modal/modal.md.scss +++ b/packages/core/src/components/modal/modal.md.scss @@ -1,6 +1,10 @@ @import "./modal"; @import "./modal.md.vars"; +.modal-backdrop-md { + background-color: $modal-backdrop-md-color; +} + // Material Design Modals // -------------------------------------------------- diff --git a/packages/core/src/components/modal/modal.md.vars.scss b/packages/core/src/components/modal/modal.md.vars.scss index 4791342a96..c5152dfd9e 100644 --- a/packages/core/src/components/modal/modal.md.vars.scss +++ b/packages/core/src/components/modal/modal.md.vars.scss @@ -3,6 +3,9 @@ // Material Design Modals // -------------------------------------------------- +/// @prop - Color of backdrop +$modal-backdrop-md-color: $backdrop-md-color !default; + /// @prop - Background color for the modal $modal-md-background-color: $background-md-color !default; diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss index ca6d30b2b5..657099a15c 100644 --- a/packages/core/src/components/modal/modal.scss +++ b/packages/core/src/components/modal/modal.scss @@ -31,7 +31,6 @@ ion-modal-controller { width: 100%; height: 100%; - background-color: $modal-backdrop-color; opacity: .01; transform: translateZ(0); diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 2a5587da38..d0fb95f3fb 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -208,12 +208,13 @@ export class Modal { } render() { - const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper'); + const backdropClasses = createThemedClasses(this.mode, this.color, 'modal-backdrop'), + dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper'); return [
, diff --git a/packages/core/src/components/modal/modal.vars.scss b/packages/core/src/components/modal/modal.vars.scss index 38b32223ac..0798d6d15f 100644 --- a/packages/core/src/components/modal/modal.vars.scss +++ b/packages/core/src/components/modal/modal.vars.scss @@ -20,6 +20,3 @@ $modal-inset-height-small: 500px !default; /// @prop - Height of the large modal inset $modal-inset-height-large: 600px !default; - -/// @prop - Color of the modal backdrop -$modal-backdrop-color: #000 !default; diff --git a/packages/core/src/components/note/note.ios.scss b/packages/core/src/components/note/note.ios.scss index 87d71ffc7a..f0d18f62e2 100644 --- a/packages/core/src/components/note/note.ios.scss +++ b/packages/core/src/components/note/note.ios.scss @@ -13,10 +13,10 @@ // Generate iOS Note 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); .note-ios-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/note/note.ios.vars.scss b/packages/core/src/components/note/note.ios.vars.scss index e45695ef90..cc5c22e8bd 100644 --- a/packages/core/src/components/note/note.ios.vars.scss +++ b/packages/core/src/components/note/note.ios.vars.scss @@ -7,4 +7,4 @@ $note-ios-font-family: $font-family-ios-base !default; /// @prop - Text color of the note -$note-ios-color: darken($list-ios-border-color, 10%) !default; +$note-ios-color: $text-ios-color-step-400 !default; diff --git a/packages/core/src/components/note/note.md.scss b/packages/core/src/components/note/note.md.scss index 1061b45e96..5a1432faf7 100644 --- a/packages/core/src/components/note/note.md.scss +++ b/packages/core/src/components/note/note.md.scss @@ -13,10 +13,10 @@ // Generate Material Design Note 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); .note-md-#{$color-name} { color: $color-base; } - } diff --git a/packages/core/src/components/note/note.md.vars.scss b/packages/core/src/components/note/note.md.vars.scss index 4537ce4576..57ed95b0dc 100644 --- a/packages/core/src/components/note/note.md.vars.scss +++ b/packages/core/src/components/note/note.md.vars.scss @@ -7,4 +7,4 @@ $note-md-font-family: $font-family-md-base !default; /// @prop - Text color of the note -$note-md-color: darken($list-md-border-color, 10%) !default; +$note-md-color: $text-md-color-step-400 !default; diff --git a/packages/core/src/components/picker/picker.ios.scss b/packages/core/src/components/picker/picker.ios.scss index 709ff2a719..4b1f8eea68 100644 --- a/packages/core/src/components/picker/picker.ios.scss +++ b/packages/core/src/components/picker/picker.ios.scss @@ -118,8 +118,8 @@ border-bottom: 1px solid $picker-ios-border-color; background: linear-gradient(to bottom, - rgba($picker-ios-background-color, 1) 20%, - rgba($picker-ios-background-color, .7) 100%); + $picker-ios-top-background-color 20%, + $picker-ios-bottom-background-color 100%); } .picker-ios .picker-below-highlight { @@ -137,6 +137,6 @@ border-top: 1px solid $picker-ios-border-color; background: linear-gradient(to top, - rgba($picker-ios-background-color, 1) 30%, - rgba($picker-ios-background-color, .7) 100%); + $picker-ios-top-background-color 30%, + $picker-ios-bottom-background-color 100%); } diff --git a/packages/core/src/components/picker/picker.ios.vars.scss b/packages/core/src/components/picker/picker.ios.vars.scss index 13df274593..486a391ef5 100644 --- a/packages/core/src/components/picker/picker.ios.vars.scss +++ b/packages/core/src/components/picker/picker.ios.vars.scss @@ -4,85 +4,91 @@ // -------------------------------------------------- /// @prop - Font family of the picker -$picker-ios-font-family: $font-family-ios-base !default; +$picker-ios-font-family: $font-family-ios-base !default; /// @prop - Height of the picker wrapper -$picker-ios-height: 260px !default; +$picker-ios-height: 260px !default; /// @prop - Border color of the picker wrapper -$picker-ios-border-color: $list-ios-border-color !default; +$picker-ios-border-color: $item-ios-border-color !default; -/// @prop - Background of the picker wrapper -$picker-ios-background-color: $list-ios-background-color !default; +/// @prop - Background Color of the picker wrapper +$picker-ios-background-color: $background-ios-color !default; + +/// @prop - Top Background Color of the picker wrapper gradient +$picker-ios-top-background-color: $picker-ios-background-color !default; + +/// @prop - Bottom Background Color of the picker wrapper gradient +$picker-ios-bottom-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default; /// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px !default; +$picker-ios-toolbar-height: 44px !default; /// @prop - Background color of the picker toolbar -$picker-ios-toolbar-background-color: $picker-ios-background-color !default; +$picker-ios-toolbar-background-color: $picker-ios-top-background-color !default; /// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height !default; +$picker-ios-button-height: $picker-ios-toolbar-height !default; /// @prop - Text color of the picker button -$picker-ios-button-text-color: color($colors-ios, primary) !default; +$picker-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Background of the picker button -$picker-ios-button-background-color: transparent !default; +$picker-ios-button-background-color: transparent !default; /// @prop - Font size of the picker button -$picker-ios-button-font-size: 16px !default; +$picker-ios-button-font-size: 16px !default; /// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0 !default; +$picker-ios-button-padding-top: 0 !default; /// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em !default; +$picker-ios-button-padding-end: 1em !default; /// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; +$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; /// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; +$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; /// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600 !default; +$picker-ios-button-strong-font-weight: 600 !default; /// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0 !default; +$picker-ios-column-padding-top: 0 !default; /// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px !default; +$picker-ios-column-padding-end: 4px !default; /// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; +$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; /// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; +$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; /// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px !default; +$picker-ios-column-perspective: 1000px !default; /// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0 !default; +$picker-ios-option-padding-top: 0 !default; /// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; /// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; /// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; +$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; /// @prop - Text color of the picker option -$picker-ios-option-text-color: $list-ios-text-color !default; +$picker-ios-option-text-color: $item-ios-text-color !default; /// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px !default; +$picker-ios-option-font-size: 20px !default; /// @prop - Height of the picker option -$picker-ios-option-height: 42px !default; +$picker-ios-option-height: 42px !default; /// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default; +$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default; diff --git a/packages/core/src/components/picker/picker.md.scss b/packages/core/src/components/picker/picker.md.scss index 142c0ad285..f92d6b450f 100644 --- a/packages/core/src/components/picker/picker.md.scss +++ b/packages/core/src/components/picker/picker.md.scss @@ -107,8 +107,8 @@ border-bottom: 1px solid $picker-md-border-color; background: linear-gradient(to bottom, - rgba($picker-md-background-color, 1) 20%, - rgba($picker-md-background-color, .7) 100%); + $picker-md-top-background-color 20%, + $picker-md-bottom-background-color 100%); } .picker-md .picker-below-highlight { @@ -124,6 +124,6 @@ border-top: 1px solid $picker-md-border-color; background: linear-gradient(to top, - rgba($picker-md-background-color, 1) 30%, - rgba($picker-md-background-color, .7) 100%); + $picker-md-top-background-color 30%, + $picker-md-bottom-background-color 100%); } diff --git a/packages/core/src/components/picker/picker.md.vars.scss b/packages/core/src/components/picker/picker.md.vars.scss index 230db0e057..cf0ad8e3d7 100644 --- a/packages/core/src/components/picker/picker.md.vars.scss +++ b/packages/core/src/components/picker/picker.md.vars.scss @@ -4,70 +4,76 @@ // -------------------------------------------------- /// @prop - Font family of the picker -$picker-md-font-family: $font-family-md-base !default; +$picker-md-font-family: $font-family-md-base !default; /// @prop - Height of the picker wrapper -$picker-md-height: 260px !default; +$picker-md-height: 260px !default; /// @prop - Border color of the picker wrapper -$picker-md-border-color: $list-md-border-color !default; +$picker-md-border-color: $item-md-border-color !default; -/// @prop - Background of the picker wrapper -$picker-md-background-color: $list-md-background-color !default; +/// @prop - Background Color of the picker wrapper +$picker-md-background-color: $background-md-color !default; + +/// @prop - Top Background Color of the picker wrapper gradient +$picker-md-top-background-color: $picker-md-background-color !default; + +/// @prop - Bottom Background Color of the picker wrapper gradient +$picker-md-bottom-background-color: ion-color-alpha($background-md-color-value, background-md-color, $alpha-md-high) !default; /// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px !default; +$picker-md-toolbar-height: 44px !default; /// @prop - Background of the picker toolbar -$picker-md-toolbar-background-color: $picker-md-background-color !default; +$picker-md-toolbar-background-color: $picker-md-top-background-color !default; /// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height !default; +$picker-md-button-height: $picker-md-toolbar-height !default; /// @prop - Text color of the picker button -$picker-md-button-text-color: color($colors-md, primary) !default; +$picker-md-button-text-color: ion-color($colors-md, primary, base, md) !default; /// @prop - Background of the picker button -$picker-md-button-background-color: transparent !default; +$picker-md-button-background-color: transparent !default; /// @prop - Font size of the picker button -$picker-md-button-font-size: 14px !default; +$picker-md-button-font-size: 14px !default; /// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0 !default; +$picker-md-column-padding-top: 0 !default; /// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px !default; +$picker-md-column-padding-end: 8px !default; /// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; +$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; /// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end !default; +$picker-md-column-padding-start: $picker-md-column-padding-end !default; /// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0 !default; +$picker-md-option-padding-top: 0 !default; /// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top !default; +$picker-md-option-padding-end: $picker-md-option-padding-top !default; /// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; +$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; /// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end !default; +$picker-md-option-padding-start: $picker-md-option-padding-end !default; /// @prop - Text color of the picker option -$picker-md-option-text-color: $list-md-text-color !default; +$picker-md-option-text-color: $item-md-text-color !default; /// @prop - Font size of the picker option -$picker-md-option-font-size: 22px !default; +$picker-md-option-font-size: 22px !default; /// @prop - Height of the picker option -$picker-md-option-height: 42px !default; +$picker-md-option-height: 42px !default; /// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default; +$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default; /// @prop - Text color of the selected picker option -$picker-md-option-selected-color: color($colors-md, primary) !default; +$picker-md-option-selected-color: ion-color($colors-md, primary, base, md) !default; diff --git a/packages/core/src/components/popover/popover.ios.scss b/packages/core/src/components/popover/popover.ios.scss index 237383112e..3acf0b6f1a 100644 --- a/packages/core/src/components/popover/popover.ios.scss +++ b/packages/core/src/components/popover/popover.ios.scss @@ -1,6 +1,10 @@ @import "./popover"; @import "./popover.ios.vars"; +.popover-backdrop-ios { + background-color: $popover-backdrop-ios-color; +} + // iOS Popover // -------------------------------------------------- @@ -13,7 +17,7 @@ max-height: $popover-ios-max-height; color: $popover-ios-text-color; - background: $popover-ios-background; + background-color: $popover-ios-background-color; } @@ -41,7 +45,7 @@ width: 14px; height: 14px; - background-color: $popover-ios-arrow-background; + background-color: $popover-ios-arrow-background-color; content: ""; transform: rotate(45deg); } @@ -60,7 +64,7 @@ .popover-translucent-ios .popover-content, .popover-translucent-ios .popover-arrow::after { - background: rgba($popover-ios-background, $popover-ios-translucent-opacity); + background: $popover-ios-translucent-background-color; -webkit-backdrop-filter: $popover-ios-translucent-filter; backdrop-filter: $popover-ios-translucent-filter; diff --git a/packages/core/src/components/popover/popover.ios.vars.scss b/packages/core/src/components/popover/popover.ios.vars.scss index b87ef85fc4..a505397af3 100644 --- a/packages/core/src/components/popover/popover.ios.vars.scss +++ b/packages/core/src/components/popover/popover.ios.vars.scss @@ -1,34 +1,37 @@ @import "../../themes/ionic.globals.ios"; +/// @prop - Color of backdrop +$popover-backdrop-ios-color: $backdrop-ios-color !default; + // iOS Popover // -------------------------------------------------- /// @prop - Width of the popover content -$popover-ios-width: 200px !default; +$popover-ios-width: 200px !default; /// @prop - Min width of the popover content -$popover-ios-min-width: 0 !default; +$popover-ios-min-width: 0 !default; /// @prop - Minimum height of the popover content -$popover-ios-min-height: 0 !default; +$popover-ios-min-height: 0 !default; /// @prop - Maximum height of the popover content -$popover-ios-max-height: 90% !default; +$popover-ios-max-height: 90% !default; /// @prop - Border radius of the popover content -$popover-ios-border-radius: 10px !default; +$popover-ios-border-radius: 10px !default; /// @prop - Text color of the popover content -$popover-ios-text-color: $text-ios-color !default; +$popover-ios-text-color: $text-ios-color !default; /// @prop - Background of the popover content -$popover-ios-background: $background-ios-color !default; +$popover-ios-background-color: $background-ios-color !default; + +/// @prop - Background of the popover content +$popover-ios-translucent-background-color: $background-ios-color !default; /// @prop - Background of the popover arrow -$popover-ios-arrow-background: $popover-ios-background !default; +$popover-ios-arrow-background-color: $popover-ios-background-color !default; /// @prop - Filter of the translucent popover -$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent popover -$popover-ios-translucent-opacity: .88 !default; +$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/packages/core/src/components/popover/popover.md.scss b/packages/core/src/components/popover/popover.md.scss index 5c3623d15d..e2681579d0 100644 --- a/packages/core/src/components/popover/popover.md.scss +++ b/packages/core/src/components/popover/popover.md.scss @@ -1,6 +1,10 @@ @import "./popover"; @import "./popover.md.vars"; +.popover-backdrop-md { + background-color: $popover-backdrop-md-color; +} + // Material Design Popover // -------------------------------------------------- diff --git a/packages/core/src/components/popover/popover.md.vars.scss b/packages/core/src/components/popover/popover.md.vars.scss index 44318754c6..5258b881e5 100644 --- a/packages/core/src/components/popover/popover.md.vars.scss +++ b/packages/core/src/components/popover/popover.md.vars.scss @@ -1,5 +1,8 @@ @import "../../themes/ionic.globals.md"; +/// @prop - Color of backdrop +$popover-backdrop-md-color: $backdrop-md-color !default; + // Material Design Popover // -------------------------------------------------- diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss index 2c7ab44a37..971ab70605 100644 --- a/packages/core/src/components/popover/popover.scss +++ b/packages/core/src/components/popover/popover.scss @@ -61,7 +61,6 @@ ion-popover-controller { width: 100%; height: 100%; - background-color: $popover-backdrop-color; opacity: .01; transform: translateZ(0); } diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index f3bda6d96b..0bdbf37812 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -216,12 +216,15 @@ export class Popover { } render() { - const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper'); + const backdropClasses = createThemedClasses(this.mode, this.color, 'popover-backdrop'), + wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper'); return [ ,
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 + + +
+
+ + + + + +