From b2021fd9c4e5778c939d72e539bc2c3872b54217 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Oct 2018 12:37:04 -0400 Subject: [PATCH] fix(theming): update global css variable naming and default values (#16003) Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used. - removes some of the non mode-specific global Sass variables - updates the md and ios values so that the default is the css variable with different fallbacks - removes non-color related css variables from the global file - fixes item so it uses the background color that is set by the global file # Breaking Changes ## Removed Global CSS Variables The following global CSS variables have been removed for the reasons listed. | Variable Name | Reason | | ----------------------------------| ------------------------------------------------| | `--ion-toolbar-color-inactive` | Unused | | `--ion-ripple-background-color` | Unused / Ripple color is based on component | | `--ion-header-size` | Removed in favor of using CSS for h1-h6 | | `--ion-header-step` | Removed in favor of using CSS for h1-h6 | ## Renamed Global CSS Variables The following global CSS variables have been renamed for the reasons listed. | Old Variable Name | New Variable Name | Reason | | -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------| | `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color | | `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables | | `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color | | `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables | | `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property | | `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property | | `--ion-item-background-color` | `--ion-item-background` | Applies to the background property | | `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables | | `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color | | `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables | Fixes #15989 Fixes #15559 --- .../theme-builder/src/theme-variables.js | 45 +- .../theme-builder/src/theme-variables.ts | 271 ++++-- core/src/components/alert/alert.ios.vars.scss | 2 +- .../components/buttons/buttons.ios.vars.scss | 4 +- core/src/components/buttons/buttons.md.scss | 8 +- .../components/buttons/buttons.md.vars.scss | 6 +- core/src/components/card/card.ios.scss | 2 +- core/src/components/card/card.ios.vars.scss | 2 +- core/src/components/card/card.md.scss | 2 +- core/src/components/card/card.md.vars.scss | 2 +- .../src/components/checkbox/checkbox.ios.scss | 2 +- .../checkbox/checkbox.ios.vars.scss | 2 +- .../components/checkbox/checkbox.md.vars.scss | 2 +- .../components/item-sliding/item-sliding.scss | 2 - core/src/components/item/item.ios.scss | 7 +- core/src/components/item/item.md.scss | 12 +- core/src/components/list/list.ios.scss | 2 + core/src/components/list/list.md.scss | 2 + core/src/components/list/list.scss | 2 - .../components/picker/picker.ios.vars.scss | 2 +- .../src/components/picker/picker.md.vars.scss | 2 +- .../components/segment/segment.md.vars.scss | 4 +- .../tabbar/tab-button.ios.vars.scss | 8 +- .../components/tabbar/tab-button.md.vars.scss | 8 +- core/src/components/tabbar/tabbar.ios.scss | 9 +- core/src/components/tabbar/tabbar.md.scss | 6 +- .../components/toggle/toggle.ios.vars.scss | 2 +- core/src/components/toolbar/toolbar.ios.scss | 14 +- .../components/toolbar/toolbar.ios.vars.scss | 6 +- core/src/components/toolbar/toolbar.md.scss | 14 +- .../components/toolbar/toolbar.md.vars.scss | 8 +- core/src/css/typography.scss | 14 +- core/src/themes/css/default.css | 157 ---- core/src/themes/ionic.functions.color.scss | 7 +- core/src/themes/ionic.globals.ios.scss | 1 - core/src/themes/ionic.globals.md.scss | 1 - core/src/themes/ionic.globals.scss | 102 +-- core/src/themes/ionic.theme.default.ios.scss | 44 +- core/src/themes/ionic.theme.default.md.scss | 34 +- core/src/themes/ionic.theme.default.scss | 130 ++- core/src/themes/license.scss | 9 - .../themes/test/css-variables/css/default.css | 75 ++ .../{ => test/css-variables}/css/oceanic.css | 45 +- .../themes/test/css-variables/css/vibrant.css | 80 ++ core/src/themes/test/css-variables/e2e.ts | 10 + core/src/themes/test/css-variables/index.html | 851 +++++++++++++----- core/src/themes/test/steps/index.html | 4 +- core/src/themes/version.scss | 1 - 48 files changed, 1238 insertions(+), 787 deletions(-) delete mode 100644 core/src/themes/css/default.css delete mode 100644 core/src/themes/license.scss create mode 100644 core/src/themes/test/css-variables/css/default.css rename core/src/themes/{ => test/css-variables}/css/oceanic.css (84%) create mode 100644 core/src/themes/test/css-variables/css/vibrant.css create mode 100644 core/src/themes/test/css-variables/e2e.ts delete mode 100644 core/src/themes/version.scss diff --git a/core/scripts/theme-builder/src/theme-variables.js b/core/scripts/theme-builder/src/theme-variables.js index e170f22d4f..e68011a088 100644 --- a/core/scripts/theme-builder/src/theme-variables.js +++ b/core/scripts/theme-builder/src/theme-variables.js @@ -1,24 +1,4 @@ export const THEME_VARIABLES = [ - { - property: '--ion-alpha-lowest', - type: 'percent' - }, - { - property: '--ion-alpha-low', - type: 'percent' - }, - { - property: '--ion-alpha-medium', - type: 'percent' - }, - { - property: '--ion-alpha-high', - type: 'percent' - }, - { - property: '--ion-alpha-highest', - type: 'percent' - }, { property: '--ion-color-primary' }, @@ -266,45 +246,42 @@ export const THEME_VARIABLES = [ property: '--ion-text-color-step-400' }, { - property: '--ion-tabbar-background-color' + property: '--ion-tab-bar-background' }, { - property: '--ion-tabbar-border-color' + property: '--ion-tab-bar-border-color' }, { - property: '--ion-tabbar-text-color' + property: '--ion-tab-bar-color' }, { - property: '--ion-tabbar-text-color-active' + property: '--ion-tab-bar-color-activated' }, { - property: '--ion-toolbar-background-color' + property: '--ion-toolbar-background' }, { property: '--ion-toolbar-border-color' }, { - property: '--ion-toolbar-color-active' + property: '--ion-toolbar-color-activated' }, { - property: '--ion-toolbar-color-inactive' + property: '--ion-toolbar-color' }, { - property: '--ion-toolbar-text-color' + property: '--ion-item-background' }, { - property: '--ion-item-background-color' - }, - { - property: '--ion-item-background-color-active' + property: '--ion-item-background-activated' }, { property: '--ion-item-border-color' }, { - property: '--ion-item-text-color' + property: '--ion-item-color' }, { - property: '--ion-placeholder-text-color' + property: '--ion-placeholder-color' } ]; diff --git a/core/scripts/theme-builder/src/theme-variables.ts b/core/scripts/theme-builder/src/theme-variables.ts index cbcc4db63a..25b8334d49 100644 --- a/core/scripts/theme-builder/src/theme-variables.ts +++ b/core/scripts/theme-builder/src/theme-variables.ts @@ -15,13 +15,17 @@ export enum ComputedType { export const THEME_VARIABLES: ThemeVariable[] = [ { property: '--ion-color-primary', - quickPick: {text: 'p'} + quickPick: { + text: 'p' + } }, { property: '--ion-color-primary-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-primary'} + params: { + property: '--ion-color-primary' + } } }, { @@ -31,7 +35,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-primary-contrast-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-primary-contrast'} + params: { + property: '--ion-color-primary-contrast' + } } }, { @@ -42,7 +48,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-secondary', - quickPick: {text: 's'} + quickPick: { + text: 's' + } }, { property: '--ion-color-secondary-contrast' @@ -51,7 +59,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-secondary-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-secondary'} + params: { + property: '--ion-color-secondary' + } } }, { @@ -62,7 +72,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-tertiary', - quickPick: {text: 't'} + quickPick: { + text: 't' + } }, { property: '--ion-color-tertiary-contrast' @@ -71,7 +83,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-tertiary-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-tertiary'} + params: { + property: '--ion-color-tertiary' + } } }, { @@ -82,7 +96,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-success', - quickPick: {text: 'ss'} + quickPick: { + text: 'ss' + } }, { property: '--ion-color-success-contrast' @@ -91,7 +107,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-success-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-success'} + params: { + property: '--ion-color-success' + } } }, { @@ -102,7 +120,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-warning', - quickPick: {text: 'w'} + quickPick: { + text: 'w' + } }, { property: '--ion-color-warning-contrast' @@ -111,7 +131,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-warning-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-warning'} + params: { + property: '--ion-color-warning' + } } }, { @@ -122,7 +144,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-danger', - quickPick: {text: 'd'} + quickPick: { + text: 'd' + } }, { property: '--ion-color-danger-contrast' @@ -131,7 +155,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-danger-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-danger'} + params: { + property: '--ion-color-danger' + } } }, { @@ -142,7 +168,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-light', - quickPick: {text: 'l'} + quickPick: { + text: 'l' + } }, { property: '--ion-color-light-contrast' @@ -151,7 +179,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-light-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-light'} + params: { + property: '--ion-color-light' + } } }, { @@ -162,7 +192,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-medium', - quickPick: {text: 'm'} + quickPick: { + text: 'm' + } }, { property: '--ion-color-medium-contrast' @@ -171,7 +203,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-medium-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-medium'} + params: { + property: '--ion-color-medium' + } } }, { @@ -182,7 +216,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ }, { property: '--ion-color-dark', - quickPick: {text: 'd'} + quickPick: { + text: 'd' + } }, { property: '--ion-color-dark-contrast' @@ -191,7 +227,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-color-dark-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-color-dark'} + params: { + property: '--ion-color-dark' + } } }, { @@ -219,147 +257,189 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-background-color-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-background-color'} + params: { + property: '--ion-background-color' + } } }, { property: '--ion-background-color-step-50', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .050, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .050, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-100', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .100, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .100, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-150', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .150, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .150, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-200', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .200, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .200, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-250', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .250, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .250, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-300', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .300, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .300, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-350', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .350, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .350, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-400', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .400, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .400, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-450', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .450, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .450, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-500', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .500, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .500, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-550', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .550, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .550, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-600', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .600, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .600, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-650', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .650, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .650, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-700', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .700, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .700, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-750', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .750, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .750, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-800', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .800, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .800, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-850', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .850, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .850, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-900', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .900, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .900, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-950', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: .950, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: .950, from: '--ion-text-color' + } } }, { property: '--ion-background-color-step-1000', computed: { type: ComputedType.step, - params: {property: '--ion-background-color', amount: 1, from: '--ion-text-color'} + params: { + property: '--ion-background-color', amount: 1, from: '--ion-text-color' + } } }, { @@ -378,172 +458,214 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-text-color-rgb', computed: { type: ComputedType.rgblist, - params: {property: '--ion-text-color'} + params: { + property: '--ion-text-color' + } } }, { property: '--ion-text-color-step-50', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .050, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .050, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-100', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .100, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .100, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-150', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .150, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .150, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-200', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .200, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .200, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-250', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .250, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .250, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-300', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .300, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .300, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-350', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .350, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .350, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-400', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .400, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .400, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-450', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .450, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .450, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-500', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .500, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .500, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-550', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .550, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .550, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-600', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .600, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .600, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-650', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .650, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .650, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-700', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .700, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .700, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-750', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .750, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .750, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-800', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .800, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .800, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-850', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .850, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .850, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-900', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .900, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .900, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-950', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: .950, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: .950, from: '--ion-background-color' + } } }, { property: '--ion-text-color-step-1000', computed: { type: ComputedType.step, - params: {property: '--ion-text-color', amount: 1, from: '--ion-background-color'} + params: { + property: '--ion-text-color', amount: 1, from: '--ion-background-color' + } } }, { - property: '--ion-tabbar-background-color', + property: '--ion-tab-bar-background', quickPick: { text: 'tab-bg' } }, { - property: '--ion-tabbar-background-color-focused' + property: '--ion-tab-bar-background-focused' }, { - property: '--ion-tabbar-border-color' + property: '--ion-tab-bar-border-color' }, { - property: '--ion-tabbar-text-color', + property: '--ion-tab-bar-color', quickPick: { text: 'tab-txt' } }, { - property: '--ion-tabbar-text-color-active' + property: '--ion-tab-bar-color-activated' }, { - property: '--ion-toolbar-background-color', + property: '--ion-toolbar-background', quickPick: { text: 'tb-bg' } @@ -552,36 +674,33 @@ export const THEME_VARIABLES: ThemeVariable[] = [ property: '--ion-toolbar-border-color' }, { - property: '--ion-toolbar-color-active' + property: '--ion-toolbar-color-activated' }, { - property: '--ion-toolbar-color-inactive' - }, - { - property: '--ion-toolbar-text-color', + property: '--ion-toolbar-color', quickPick: { text: 'tb-txt' } }, { - property: '--ion-item-background-color', + property: '--ion-item-background', quickPick: { text: 'i-bg' } }, { - property: '--ion-item-background-color-active' + property: '--ion-item-background-activated' }, { property: '--ion-item-border-color' }, { - property: '--ion-item-text-color', + property: '--ion-item-color', quickPick: { text: 'i-txt' } }, { - property: '--ion-placeholder-text-color' + property: '--ion-placeholder-color' } ]; diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 0234fcd776..b569a09dc2 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -266,7 +266,7 @@ $alert-ios-checkbox-border-color-off: $item-ios-border-color ! $alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-background-color !default; +$alert-ios-checkbox-background-color-off: $item-ios-background !default; /// @prop - Background color of the checkbox in the alert when on $alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; diff --git a/core/src/components/buttons/buttons.ios.vars.scss b/core/src/components/buttons/buttons.ios.vars.scss index da03cf20fb..7d46cb7ba8 100644 --- a/core/src/components/buttons/buttons.ios.vars.scss +++ b/core/src/components/buttons/buttons.ios.vars.scss @@ -22,10 +22,10 @@ $toolbar-ios-button-font-size: 17px !default; $toolbar-ios-button-color: ion-color(primary, base) !default; /// @prop - Background color of the toolbar button -$toolbar-ios-button-background-color: $toolbar-ios-background-color !default; +$toolbar-ios-button-background-color: $toolbar-ios-background !default; /// @prop - Background color of the toolbar button when activated -$toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default; +$toolbar-ios-button-background-color-activated: $toolbar-ios-color-activated !default; /// @prop - Border radius of the toolbar button $toolbar-ios-button-border-radius: 4px !default; diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index 66274efd36..89968bdef6 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -34,10 +34,10 @@ // -------------------------------------------------- ::slotted(*) .button-solid { - --color: #{$toolbar-md-background-color}; - --color-activated: #{$toolbar-md-background-color}; - --background: #{$toolbar-md-text-color}; - --background-activated: #{$toolbar-md-text-color}; + --color: #{$toolbar-md-background}; + --color-activated: #{$toolbar-md-background}; + --background: #{$toolbar-md-color}; + --background-activated: #{$toolbar-md-color}; } diff --git a/core/src/components/buttons/buttons.md.vars.scss b/core/src/components/buttons/buttons.md.vars.scss index e517e2a825..88d56d9722 100644 --- a/core/src/components/buttons/buttons.md.vars.scss +++ b/core/src/components/buttons/buttons.md.vars.scss @@ -19,13 +19,13 @@ $toolbar-order-md: ( $toolbar-md-button-font-size: 14px !default; /// @prop - Text color of the toolbar button -$toolbar-md-button-color: $toolbar-md-text-color !default; +$toolbar-md-button-color: $toolbar-md-color !default; /// @prop - Background color of the toolbar button -$toolbar-md-button-background-color: $toolbar-md-background-color !default; +$toolbar-md-button-background-color: $toolbar-md-background !default; /// @prop - Background color of the toolbar button when activated -$toolbar-md-button-background-color-activated: $toolbar-md-color-active !default; +$toolbar-md-button-background-color-activated: $toolbar-md-color-activated !default; /// @prop - Border radius of the toolbar button $toolbar-md-button-border-radius: 2px !default; diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index d2665a2ccd..f4bec1e7fd 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- :host { - --background: var(--ion-item-background-color, transparent); + --background: var(--ion-item-background, transparent); --color: #{$card-ios-text-color}; @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index ce1e143e2e..9cedf2e425 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/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: $item-background-color !default; +$card-ios-background-color: $item-ios-background !default; /// @prop - Box shadow color of the card $card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss index d6742ef201..a910f6f625 100755 --- a/core/src/components/card/card.md.scss +++ b/core/src/components/card/card.md.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- :host { - --background: var(--ion-item-background-color, transparent); + --background: var(--ion-item-background, transparent); --color: #{$card-md-text-color}; @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index 987d0ffea0..e0aa931cc3 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/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: $item-background-color !default; +$card-md-background-color: $item-md-background !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; diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss index d026bee506..f1bb7bee49 100644 --- a/core/src/components/checkbox/checkbox.ios.scss +++ b/core/src/components/checkbox/checkbox.ios.scss @@ -40,7 +40,7 @@ // iOS Checkbox: Disabled // ----------------------------------------- -// TODO: .item-ios.item-checkbox-disabled ion-labe +// TODO: .item-ios.item-checkbox-disabled ion-label :host(.checkbox-disabled) { opacity: $checkbox-ios-disabled-opacity; } diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index 828108870b..6636b7448d 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $item-background-color !default; +$checkbox-ios-background-color-off: $item-ios-background !default; /// @prop - Background color of the checkbox when on $checkbox-ios-background-color-on: ion-color(primary, base) !default; diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index d450cc6865..39bbf89863 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -8,7 +8,7 @@ $checkbox-md-disabled-opacity: .3 !default; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $item-background-color !default; +$checkbox-md-icon-background-color-off: $item-md-background !default; /// @prop - Background color of focus indicator for checkbox when focused $checkbox-md-background-color-focused: ion-color(primary, tint) !default; diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 3505515e69..ef076e345f 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -23,8 +23,6 @@ ion-item-sliding .item { transition: transform 500ms cubic-bezier(.36, .66, .04, 1); - background: $item-background-color; - opacity: 1; z-index: $z-index-item-options + 1; pointer-events: none; diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index ee6a543d3f..5f9c9c3abe 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -9,10 +9,10 @@ --padding-start: #{$item-ios-padding-start}; --inner-padding-end: #{$item-ios-padding-end / 2}; --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px}; - --background: var(--ion-item-background-color, transparent); - --background-activated: #{$item-ios-background-color-active}; + --background: #{$item-ios-background}; + --background-activated: #{$item-ios-background-activated}; --border-color: #{$item-ios-border-bottom-color}; - --color: #{$item-ios-text-color}; + --color: #{$item-ios-color}; --highlight-height: 0; --highlight-color-focused: #{$item-ios-input-highlight-color}; --highlight-color-valid: #{$item-ios-input-highlight-color-valid}; @@ -154,7 +154,6 @@ } - // TODO // .item-ios.item-label-stacked .label-ios + .input + .cloned-input, // .item-ios.item-label-floating .label-ios + .input + .cloned-input { diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 4e2ea01f45..0091ff784e 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -6,15 +6,15 @@ // -------------------------------------------------- :host { - --background: var(--ion-item-background-color, transparent); - --background-activated: #{$item-md-background-color-active}; + --background: var(--ion-item-background, transparent); + --background-activated: #{$item-md-background-activated}; --border-color: #{$item-md-border-bottom-color}; - --color: #{$item-md-text-color}; + --color: #{$item-md-color}; --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); --padding-start: #{$item-md-padding-start}; - --background: var(--ion-item-background-color, transparent); - --background-activated: #{$item-md-background-color-active}; - --color: #{$item-md-text-color}; + --background: #{$item-md-background}; + --background-activated: #{$item-md-background-activated}; + --color: #{$item-md-color}; --border-color: #{$item-md-border-bottom-color}; --inner-padding-end: #{$item-md-padding-end / 2}; --inner-border-width: #{0 0 $item-md-border-bottom-width 0}; diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss index 6f2fb8582d..261dbc2d9b 100644 --- a/core/src/components/list/list.ios.scss +++ b/core/src/components/list/list.ios.scss @@ -6,6 +6,8 @@ .list-ios { @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); + + background: $item-ios-background; } .list-ios:not(.list-inset):not(.list-ios-lines-none) .item:last-child { diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index d2fc727fbd..4a4b80aaf2 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -6,6 +6,8 @@ .list-md { @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start); + + background: $item-md-background; } .list-md > .input:last-child::after { diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss index 566c62f36e..267b9023a2 100644 --- a/core/src/components/list/list.scss +++ b/core/src/components/list/list.scss @@ -10,8 +10,6 @@ ion-list { display: block; - background: $item-background-color; - contain: content; list-style-type: none; } diff --git a/core/src/components/picker/picker.ios.vars.scss b/core/src/components/picker/picker.ios.vars.scss index 1ae31f4163..3ed4039f07 100644 --- a/core/src/components/picker/picker.ios.vars.scss +++ b/core/src/components/picker/picker.ios.vars.scss @@ -82,7 +82,7 @@ $picker-ios-option-padding-bottom: $picker-ios-option-padding-top $picker-ios-option-padding-start: $picker-ios-option-padding-end !default; /// @prop - Text color of the picker option -$picker-ios-option-text-color: $item-ios-text-color !default; +$picker-ios-option-text-color: $item-ios-color !default; /// @prop - Font size of the picker option $picker-ios-option-font-size: 20px !default; diff --git a/core/src/components/picker/picker.md.vars.scss b/core/src/components/picker/picker.md.vars.scss index 8a5eee2e46..8b7290656b 100644 --- a/core/src/components/picker/picker.md.vars.scss +++ b/core/src/components/picker/picker.md.vars.scss @@ -64,7 +64,7 @@ $picker-md-option-padding-bottom: $picker-md-option-padding-to $picker-md-option-padding-start: $picker-md-option-padding-end !default; /// @prop - Text color of the picker option -$picker-md-option-text-color: $item-md-text-color !default; +$picker-md-option-text-color: $item-md-color !default; /// @prop - Font size of the picker option $picker-md-option-font-size: 22px !default; diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss index cbee904b09..6681fa41e0 100644 --- a/core/src/components/segment/segment.md.vars.scss +++ b/core/src/components/segment/segment.md.vars.scss @@ -11,7 +11,7 @@ $segment-md-opacity-disabled: .3 !default; // -------------------------------------------------- /// @prop - Text color of the segment button -$segment-button-md-text-color: $toolbar-md-color-active !default; +$segment-button-md-text-color: $toolbar-md-color-activated !default; /// @prop - Width of the bottom border on the segment button $segment-button-md-border-bottom-width: 2px !default; @@ -23,7 +23,7 @@ $segment-button-md-border-bottom-color: rgba(#000, .10) !default; $segment-button-md-opacity: .7 !default; /// @prop - Border color of the activated segment button -$segment-button-md-border-color-activated: $toolbar-md-color-active !default; +$segment-button-md-border-color-activated: $toolbar-md-color-activated !default; /// @prop - Opacity of the activated segment button $segment-button-md-opacity-activated: 1 !default; diff --git a/core/src/components/tabbar/tab-button.ios.vars.scss b/core/src/components/tabbar/tab-button.ios.vars.scss index c0c12f44a3..b1c113f38b 100644 --- a/core/src/components/tabbar/tab-button.ios.vars.scss +++ b/core/src/components/tabbar/tab-button.ios.vars.scss @@ -19,16 +19,16 @@ $tab-button-ios-padding-start: $tab-button-ios-padding-end !default; $tab-button-ios-max-width: 240px !default; /// @prop - Text color of the inactive tab button -$tab-button-ios-text-color: $tabbar-ios-text-color !default; +$tab-button-ios-text-color: $tabbar-ios-color !default; /// @prop - Text color of the active tab button -$tab-button-ios-text-color-active: $tabbar-ios-text-color-active !default; +$tab-button-ios-text-color-active: $tabbar-ios-color-activated !default; /// @prop - Icon color of the inactive tab button -$tab-button-ios-icon-color: $tabbar-ios-text-color !default; +$tab-button-ios-icon-color: $tabbar-ios-color !default; /// @prop - Icon color of the active tab button -$tab-button-ios-icon-color-active: $tabbar-ios-text-color-active !default; +$tab-button-ios-icon-color-active: $tabbar-ios-color-activated !default; /// @prop - Font size of the tab button text $tab-button-ios-font-size: 10px !default; diff --git a/core/src/components/tabbar/tab-button.md.vars.scss b/core/src/components/tabbar/tab-button.md.vars.scss index d1c7da9711..84edda0380 100644 --- a/core/src/components/tabbar/tab-button.md.vars.scss +++ b/core/src/components/tabbar/tab-button.md.vars.scss @@ -22,16 +22,16 @@ $tab-button-md-font-size: 12px !default; $tab-button-md-font-weight: normal !default; /// @prop - Text color of the inactive tab button -$tab-button-md-text-color: $tabbar-md-text-color !default; +$tab-button-md-text-color: $tabbar-md-color !default; /// @prop - Text color of the active tab button -$tab-button-md-text-color-active: $tabbar-md-text-color-active !default; +$tab-button-md-text-color-active: $tabbar-md-color-activated !default; /// @prop - Icon color of the inactive tab button -$tab-button-md-icon-color: $tabbar-md-text-color !default; +$tab-button-md-icon-color: $tabbar-md-color !default; /// @prop - Icon color of the active tab button -$tab-button-md-icon-color-active: $tabbar-md-text-color-active !default; +$tab-button-md-icon-color-active: $tabbar-md-color-activated !default; /// @prop - Font size of the active tab button text $tab-button-md-font-size-active: 14px !default; diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss index 43437189fc..da5ef10c60 100644 --- a/core/src/components/tabbar/tabbar.ios.scss +++ b/core/src/components/tabbar/tabbar.ios.scss @@ -7,11 +7,10 @@ :host { // default color / background - --background: #{$tabbar-ios-background-color}; - --background-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248); + --background: #{$tabbar-ios-background}; --color: #{$tab-button-ios-text-color}; - --color-selected: #{$tabbar-ios-text-color-active}; - --background-focused: #{$tabbar-ios-background-color-focused}; + --color-selected: #{$tabbar-ios-color-activated}; + --background-focused: #{$tabbar-ios-background-focused}; justify-content: center; @@ -33,7 +32,7 @@ // -------------------------------------------------- :host(.tabbar-translucent) { - background-color: #{current-color(base, $tabbar-ios-translucent-background-color-alpha)}; + background-color: #{current-color(base, .8)}; backdrop-filter: $tabbar-ios-translucent-filter; } diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss index b077807d9c..b5399c8c08 100644 --- a/core/src/components/tabbar/tabbar.md.scss +++ b/core/src/components/tabbar/tabbar.md.scss @@ -5,9 +5,9 @@ :host { // default color / background --color: #{$tab-button-md-text-color}; - --color-selected: #{$tabbar-md-text-color-active}; - --background: #{$tabbar-md-background-color}; - --background-focused: #{$tabbar-md-background-color-focused}; + --color-selected: #{$tabbar-md-color-activated}; + --background: #{$tabbar-md-background}; + --background-focused: #{$tabbar-md-background-focused}; --icon-transform-selected: #{$tab-button-md-icon-transform-active}; height: $tabbar-md-height; diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index 25b619217d..d567f6c404 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -17,7 +17,7 @@ $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: $item-background-color !default; +$toggle-ios-background-color-off: $item-ios-background !default; /// @prop - Border color of the unchecked toggle $toggle-ios-border-color-off: $background-color-step-50 !default; diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index 6f399aec1f..e6fbf2a718 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -5,14 +5,14 @@ // -------------------------------------------------- :host { - --background: #{$toolbar-ios-background-color}; - --color: #{$toolbar-ios-text-color}; + --background: #{$toolbar-ios-background}; + --color: #{$toolbar-ios-color}; --border-color: #{$toolbar-ios-border-color}; - --padding-top: #{$toolbar-ios-padding}; - --padding-bottom: #{$toolbar-ios-padding}; - --padding-start: #{$toolbar-ios-padding}; - --padding-end: #{$toolbar-ios-padding}; - --min-height: #{$toolbar-ios-height}; + --padding-top: 4px; + --padding-bottom: 4px; + --padding-start: 4px; + --padding-end: 4px; + --min-height: 44px; } // iOS Toolbar Content diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index 29ee00254d..f4f9ddd64d 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -22,10 +22,10 @@ $toolbar-ios-button-font-size: 17px !default; $toolbar-ios-button-color: ion-color(primary, base) !default; /// @prop - Background color of the toolbar button -$toolbar-ios-button-background-color: $toolbar-ios-background-color !default; +$toolbar-ios-button-background-color: $toolbar-ios-background !default; /// @prop - Background color of the toolbar button when activated -$toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default; +$toolbar-ios-button-background-color-activated: $toolbar-ios-color-activated !default; /// @prop - Font weight of the strong toolbar button $toolbar-ios-button-strong-font-weight: 600 !default; @@ -47,4 +47,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: $toolbar-ios-text-color !default; +$toolbar-ios-title-text-color: $toolbar-ios-color !default; diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index fef8be0d4c..276386a4be 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -5,14 +5,14 @@ // -------------------------------------------------- :host { - --background: #{$toolbar-md-background-color}; - --color: #{$toolbar-md-text-color}; + --background: #{$toolbar-md-background}; + --color: #{$toolbar-md-color}; --border-color: #{$toolbar-md-border-color}; - --padding-top: #{$toolbar-md-padding}; - --padding-bottom: #{$toolbar-md-padding}; - --padding-start: #{$toolbar-md-padding}; - --padding-end: #{$toolbar-md-padding}; - --min-height: #{$toolbar-md-height}; + --padding-top: 4px; + --padding-bottom: 4px; + --padding-start: 4px; + --padding-end: 4px; + --min-height: 56px; } diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index 8c017b9166..be725ef3b4 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -19,13 +19,13 @@ $toolbar-order-md: ( $toolbar-md-button-font-size: 14px !default; /// @prop - Text color of the toolbar button -$toolbar-md-button-color: $toolbar-md-text-color !default; +$toolbar-md-button-color: $toolbar-md-color !default; /// @prop - Background color of the toolbar button -$toolbar-md-button-background-color: $toolbar-md-background-color !default; +$toolbar-md-button-background-color: $toolbar-md-background !default; /// @prop - Background color of the toolbar button when activated -$toolbar-md-button-background-color-activated: $toolbar-md-color-active !default; +$toolbar-md-button-background-color-activated: $toolbar-md-color-activated !default; /// @prop - Fill color of the toolbar button icon $toolbar-md-button-icon-fill-color: currentColor !default; @@ -41,4 +41,4 @@ $toolbar-md-button-strong-font-weight: bold !default; $toolbar-md-title-font-size: 20px !default; /// @prop - Text color of the toolbar title -$toolbar-md-title-text-color: $toolbar-md-text-color !default; +$toolbar-md-title-text-color: $toolbar-md-color !default; diff --git a/core/src/css/typography.scss b/core/src/css/typography.scss index 2fdd764e70..138fffe5eb 100644 --- a/core/src/css/typography.scss +++ b/core/src/css/typography.scss @@ -10,25 +10,23 @@ $headings-font-weight: 500 !default; /// @prop - Line height of all headings $headings-line-height: 1.2 !default; -$h-step: var(--ion-header-step, 2px) !default; - /// @prop - Font size of heading level 1 -$h1-font-size: var(--ion-header-size, 26px) !default; +$h1-font-size: 26px !default; /// @prop - Font size of heading level 2 -$h2-font-size: calc(#{$h1-font-size} - #{$h-step}) !default; +$h2-font-size: 24px !default; /// @prop - Font size of heading level 3 -$h3-font-size: calc(#{$h1-font-size} - #{$h-step} * 2) !default; +$h3-font-size: 22px !default; /// @prop - Font size of heading level 4 -$h4-font-size: calc(#{$h1-font-size} - #{$h-step} * 3) !default; +$h4-font-size: 20px !default; /// @prop - Font size of heading level 5 -$h5-font-size: calc(#{$h1-font-size} - #{$h-step} * 4) !default; +$h5-font-size: 18px !default; /// @prop - Font size of heading level 6 -$h6-font-size: calc(#{$h1-font-size} - #{$h-step} * 5) !default; +$h6-font-size: 16px !default; html { font-family: var(--ion-font-family); diff --git a/core/src/themes/css/default.css b/core/src/themes/css/default.css deleted file mode 100644 index 9f14594e2b..0000000000 --- a/core/src/themes/css/default.css +++ /dev/null @@ -1,157 +0,0 @@ -/** default theme **/ - -:root { - --ion-color-primary: #488aff; - --ion-color-primary-rgb: 72,138,255; - --ion-color-primary-contrast: #fff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3f79e0; - --ion-color-primary-tint: #5a96ff; - --ion-color-secondary: #32db64; - --ion-color-secondary-rgb: 50,219,100; - --ion-color-secondary-contrast: #fff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #2cc158; - --ion-color-secondary-tint: #47df74; - --ion-color-tertiary: #f4a942; - --ion-color-tertiary-rgb: 244,169,66; - --ion-color-tertiary-contrast: #fff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #d7953a; - --ion-color-tertiary-tint: #f5b255; - --ion-color-success: #10dc60; - --ion-color-success-rgb: 16,220,96; - --ion-color-success-contrast: #fff; - --ion-color-success-contrast-rgb: 255,255,255; - --ion-color-success-shade: #0ec254; - --ion-color-success-tint: #28e070; - --ion-color-warning: #ffce00; - --ion-color-warning-rgb: 255,206,0; - --ion-color-warning-contrast: #000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0b500; - --ion-color-warning-tint: #ffd31a; - --ion-color-danger: #f53d3d; - --ion-color-danger-rgb: 245,61,61; - --ion-color-danger-contrast: #fff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #d83636; - --ion-color-danger-tint: #f65050; - --ion-color-light: #f4f4f4; - --ion-color-light-rgb: 244,244,244; - --ion-color-light-contrast: #000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d7d7d7; - --ion-color-light-tint: #f5f5f5; - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - --ion-color-dark: #222; - --ion-color-dark-rgb: 34,34,34; - --ion-color-dark-contrast: #fff; - --ion-color-dark-contrast-rgb: 255,255,255; - --ion-color-dark-shade: #1e1e1e; - --ion-color-dark-tint: #383838; - - --ion-backdrop-color: #000; - --ion-overlay-background-color: #fafafa; - --ion-ripple-background-color: #000; - - --ion-background-color: #fff; - --ion-background-color-rgb: 255, 255, 255; - --ion-background-color-step-50: #f2f2f2; - --ion-background-color-step-100: #e6e6e6; - --ion-background-color-step-150: #d9d9d9; - --ion-background-color-step-200: #ccc; - --ion-background-color-step-250: #bfbfbf; - --ion-background-color-step-300: #b3b3b3; - --ion-background-color-step-350: #a6a6a6; - --ion-background-color-step-400: #999; - --ion-background-color-step-450: #8c8c8c; - --ion-background-color-step-500: #808080; - --ion-background-color-step-550: #737373; - --ion-background-color-step-600: #666; - --ion-background-color-step-650: #595959; - --ion-background-color-step-700: #4d4d4d; - --ion-background-color-step-750: #404040; - --ion-background-color-step-800: #333; - --ion-background-color-step-850: #262626; - --ion-background-color-step-900: #191919; - --ion-background-color-step-950: #0d0d0d; - --ion-background-color-step-1000: #000; - - --ion-border-color: #b2b2b2; - --ion-box-shadow-color: #000; - - --ion-text-color: #000; - --ion-text-color-rgb: 0,0,0; - --ion-text-color-step-50: #0d0d0d; - --ion-text-color-step-100: #1a1a1a; - --ion-text-color-step-150: #262626; - --ion-text-color-step-200: #333; - --ion-text-color-step-250: #404040; - --ion-text-color-step-300: #4d4d4d; - --ion-text-color-step-350: #595959; - --ion-text-color-step-400: #666; - --ion-text-color-step-450: #737373; - --ion-text-color-step-500: #808080; - --ion-text-color-step-550: #8c8c8c; - --ion-text-color-step-600: #999; - --ion-text-color-step-650: #a6a6a6; - --ion-text-color-step-700: #b3b3b3; - --ion-text-color-step-750: #bfbfbf; - --ion-text-color-step-800: #ccc; - --ion-text-color-step-850: #d9d9d9; - --ion-text-color-step-900: #e6e6e6; - --ion-text-color-step-950: #f2f2f2; - --ion-text-color-step-1000: #fff; - - --ion-tabbar-background-color: #f8f8f8; - --ion-tabbar-background-color-focused: #dadada; - --ion-tabbar-border-color: #b2b2b2; - --ion-tabbar-text-color: #8c8c8c; - --ion-tabbar-text-color-active: #488aff; - --ion-toolbar-background-color: #f8f8f8; - --ion-toolbar-border-color: #b2b2b2; - --ion-toolbar-color-active: #488aff; - --ion-toolbar-color-inactive: #8c8c8c; - --ion-toolbar-text-color: #000; - --ion-item-background-color: #fff; - --ion-item-background-color-active: #fff; - --ion-item-border-color: #c8c7cc; - --ion-item-text-color: #000; - --ion-placeholder-text-color: #999; -} - -/** iOS overrides **/ -.ios { - --ion-border-ios-color: #dedede; - --ion-overlay-ios-background-color: #f9f9f9; - --ion-tabbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8))); - --ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2))); - --ion-tabbar-ios-text-color-active: var(--ion-color-ios-primary, var(--ion-color-primary, #488aff)); - --ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, .8))); - --ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, .2))); - --ion-item-ios-background-color: var(--ion-background-color, var(--ion-background-color, #fff)); - --ion-item-ios-background-color-active: #d9d9d9; -} - -/** MD overrides **/ -.md { - --ion-alpha-md-focused: .1; - --ion-alpha-md-border-low: .07; - --ion-alpha-md-border-medium: .13; - --ion-alpha-md-lowest: .1; - --ion-border-md-color: #c1c4cd; - --ion-overlay-md-background-color: #fafafa; - --ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, .07))); - --ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666)); - --ion-toolbar-md-border-color: var(--ion-border-md-color, var(--ion-border-color, #c1c4cd)); - --ion-toolbar-md-color-active: #4a4a4a; - --ion-toolbar-md-text-color: #424242; - --ion-item-md-background-color-active: #f1f1f1; - --ion-item-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-medium, var(--ion-alpha-border-medium, 0.13)));; -} diff --git a/core/src/themes/ionic.functions.color.scss b/core/src/themes/ionic.functions.color.scss index 5a609ffa55..1d78bbe131 100644 --- a/core/src/themes/ionic.functions.color.scss +++ b/core/src/themes/ionic.functions.color.scss @@ -1,8 +1,3 @@ -$css-variable-prefix: "--ion-" !default; -$default-color-variation: base !default; -$default-color-prefix: color- !default; - - // Gets the active color's css variable from a variation. Alpha is optional. // -------------------------------------------------------------------------------------------- // Example usage: @@ -29,7 +24,7 @@ $default-color-prefix: color- !default; $value: map-get($values, $variation); $variable: --ion-color-#{$name}-#{$variation}; - @if ($variation == $default-color-variation) { + @if ($variation == base) { $variable: --ion-color-#{$name}; } diff --git a/core/src/themes/ionic.globals.ios.scss b/core/src/themes/ionic.globals.ios.scss index bc6fe1ef88..d9aca20c4f 100644 --- a/core/src/themes/ionic.globals.ios.scss +++ b/core/src/themes/ionic.globals.ios.scss @@ -2,6 +2,5 @@ // Global Core @import "./ionic.globals"; - // Global iOS @import "./ionic.theme.default.ios"; diff --git a/core/src/themes/ionic.globals.md.scss b/core/src/themes/ionic.globals.md.scss index 1ab3ecfd47..6c0d558d01 100644 --- a/core/src/themes/ionic.globals.md.scss +++ b/core/src/themes/ionic.globals.md.scss @@ -2,6 +2,5 @@ // Core Globals @import "./ionic.globals"; - // Material Design Globals @import "./ionic.theme.default.md"; diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index 0a19837dcf..cb75597e45 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -1,7 +1,4 @@ -// Ionic Version -@import "./version"; - // Global Utility Functions @import "./ionic.functions.string"; @@ -14,14 +11,17 @@ // Default Theme @import "./ionic.theme.default"; + +// Default General +// -------------------------------------------------- +$font-family-base: var(--ion-font-family, inherit) !default; + // Global app direction $app-direction: ltr !default; - // Global font path $font-path: "/dist/fonts" !default; - // Hairlines width $hairlines-width: .55px !default; @@ -36,98 +36,6 @@ $screen-breakpoints: ( ) !default; -// Default Colors -// ---------------------------------- - -// Private color variables -$primary: #3880ff; -$secondary: #0cd1e8; -$tertiary: #7044ff; -$success: #10dc60; -$warning: #ffce00; -$danger: #f04141; -$light: #f4f5f8; -$medium: #989aa2; -$dark: #222428; - -// Color map should provide -// - base: main color to be used. -// - contrast: Color that will provide readable text against the base color -// - shade: 12% darker version of the base color (mix with black) -// - tint: 10% lighter version of the base color (mix with white) -$colors: ( - primary: ( - base: $primary, - contrast: #fff, - shade: get-color-shade($primary), - tint: get-color-tint($primary) - ), - secondary: ( - base: $secondary, - contrast: #fff, - shade: get-color-shade($secondary), - tint: get-color-tint($secondary) - ), - tertiary: ( - base: $tertiary, - contrast: #fff, - shade: get-color-shade($tertiary), - tint: get-color-tint($tertiary) - ), - success: ( - base: $success, - contrast: #fff, - shade: get-color-shade($success), - tint: get-color-tint($success) - ), - warning: ( - base: $warning, - contrast: #fff, - shade: get-color-shade($warning), - tint: get-color-tint($warning) - ), - danger: ( - base: $danger, - contrast: #fff, - shade: get-color-shade($danger), - tint: get-color-tint($danger) - ), - light: ( - base: $light, - contrast: #000, - shade: get-color-shade($light), - tint: get-color-tint($light) - ), - medium: ( - base: $medium, - contrast: #fff, - shade: get-color-shade($medium), - tint: get-color-tint($medium) - ), - dark: ( - base: $dark, - contrast: #fff, - shade: get-color-shade($dark), - tint: get-color-tint($dark) - ) -) !default; - -// Default General Colors -// -------------------------------------------------- -$overlay-background-color: var(--ion-overlay-background-color, #fafafa) !default; -$ripple-background-color: var(--ion-ripple-background-color, #000) !default; - - -// Default General -// -------------------------------------------------- - -$content-margin: var(--ion-content-margin, 16px) !default; -$content-padding: var(--ion-content-padding, 16px) !default; -$font-family-base: var(--ion-font-family, inherit) !default; -$font-size-base: var(--ion-font-size-base, 14px) !default; // TODO: remove - - - // Z-Index // -------------------------------------------------- // Grouped by elements which would be siblings diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index 9fadfd604f..79976ad788 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -1,34 +1,34 @@ +// Ionic iOS Theme +// ------------------------------------------------------------------------------------------- +// This file contains the theme variables shared +// between modes. This should only include variables +// used to theme the application colors for iOS. // iOS General Colors // -------------------------------------------------- -$backdrop-ios-color: $backdrop-color !default; -$border-ios-color: var(--ion-border-color, #dedede) !default; -$box-shadow-ios-color: $box-shadow-color !default; -$overlay-ios-background-color: var(--ion-overlay-background-color, #f9f9f9) !default; +$backdrop-ios-color: var(--ion-backdrop-color, #000) !default; +$border-ios-color: var(--ion-border-color, #dedede) !default; +$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default; +$overlay-ios-background-color: var(--ion-overlay-background-color, #f9f9f9) !default; // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-translucent-background-color-alpha: .8 !default; -$tabbar-ios-background-color: $tabbar-background-color !default; -$tabbar-ios-background-color-focused: $tabbar-background-color-focused !default; -$tabbar-ios-translucent-background-color: rgba(var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248), $tabbar-ios-translucent-background-color-alpha) !default; -$tabbar-ios-border-color: rgba(var(--ion-tabbar-border-color-rgb, 0, 0, 0), .2) !default; -$tabbar-ios-text-color: $tabbar-text-color !default; -$tabbar-ios-text-color-active: ion-color(primary, base) !default; // TODO fallback $tabbar-text-color-active +$tabbar-ios-background: var(--ion-tab-bar-background, #f8f8f8) !default; +$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#f8f8f8)) !default; +$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .2))) !default; +$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-550) !default; +$tabbar-ios-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default; // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-height: 44px !default; -$toolbar-ios-padding: 4px !default; -$toolbar-ios-background-color: $toolbar-background-color !default; -$toolbar-ios-translucent-background-color: rgba(var(--ion-toolbar-translucent-background-color-rgb, 248, 248, 248), .8) !default; -$toolbar-ios-border-color: rgba(var(--ion-toolbar-border-color-rgb, 0, 0, 0), .2) !default; -$toolbar-ios-color-active: ion-color(primary, base) !default; // TODO fallback $toolbar-color-active -$toolbar-ios-color-inactive: $toolbar-color-inactive !default; -$toolbar-ios-text-color: $toolbar-text-color !default; +$toolbar-ios-background: var(--ion-toolbar-background, #f8f8f8) !default; +$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, rgba(0, 0, 0, .2))) !default; +$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default; +$toolbar-ios-color-activated: var(--ion-toolbar-color-activated, ion-color(primary, base)) !default; // iOS List & List Items // -------------------------------------------------- -$item-ios-background-color-active: var(--ion-item-background-color-active, #d9d9d9) !default; -$item-ios-border-color: $item-border-color !default; -$item-ios-text-color: $item-text-color !default; +$item-ios-background: var(--ion-item-background, $background-color) !default; +$item-ios-background-activated: var(--ion-item-background-activated, #d9d9d9) !default; +$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, #c8c7cc)) !default; +$item-ios-color: var(--ion-item-color, $text-color) !default; diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index c085e74b77..4da1bb2b87 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -1,33 +1,35 @@ // Material Design Default Theme -// ---------------------------------- +// -------------------------------------------------- +// This file should only contain variables that are +// used to theme the application colors for Material +// Design. // Material Design General Colors // -------------------------------------------------- -$backdrop-md-color: $backdrop-color !default; +$backdrop-md-color: var(--ion-backdrop-color, #000) !default; $border-md-color: var(--ion-border-color, #c1c4cd) !default; +$box-shadow-md-color: var(--ion-box-shadow-color, #000) !default; $overlay-md-background-color: var(--ion-overlay-background-color, #fafafa) !default; // Material Design Tabs & Tab bar // -------------------------------------------------- -$tabbar-md-background-color: $tabbar-background-color !default; -$tabbar-md-background-color-focused: $tabbar-background-color-focused !default; -$tabbar-md-border-color: rgba(var(--ion-tabbar-border-color-rgb, 0, 0, 0), .07) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest)) -$tabbar-md-text-color: var(--ion-tabbar-text-color, $text-color-step-400) !default; -$tabbar-md-text-color-active: $tabbar-text-color-active !default; +$tabbar-md-background: var(--ion-tab-bar-background, #f8f8f8) !default; +$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#f8f8f8)) !default; +$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .07))) !default; +$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-400) !default; +$tabbar-md-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default; // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-height: 56px !default; -$toolbar-md-padding: 4px !default; -$toolbar-md-background-color: $toolbar-background-color !default; +$toolbar-md-background: var(--ion-toolbar-background, #f8f8f8) !default; $toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color) !default; -$toolbar-md-color-active: var(--ion-toolbar-color-active, #4a4a4a) !default; -$toolbar-md-color-inactive: $toolbar-color-inactive !default; -$toolbar-md-text-color: var(--ion-toolbar-text-color, #424242) !default; +$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default; +$toolbar-md-color-activated: var(--ion-toolbar-color-activated, #4a4a4a) !default; // Material Design List & List Items // -------------------------------------------------- -$item-md-background-color-active: var(--ion-item-background-color-active, #f1f1f1) !default; -$item-md-border-color: rgba(var(--ion-item-border-color-rgb, 0, 0, 0), .13) !default; -$item-md-text-color: $item-text-color !default; +$item-md-background: var(--ion-item-background, $background-color) !default; +$item-md-background-activated: var(--ion-item-background-activated, #f1f1f1) !default; +$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, rgba(0, 0, 0, .13))) !default; +$item-md-color: var(--ion-item-color, $text-color) !default; diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 800c795692..30e81d2f40 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -1,24 +1,105 @@ -// Default Foreground and Background Colors values -// Allows users to override an foreground / background colors -// TODO: @color-mod: remove all this +// Ionic Theme +// ------------------------------------------------------------------------------------------- +// This file contains the theme variables shared +// between modes. This should only include variables +// used to theme the application colors. + +// Default Ionic Colors +// ------------------------------------------------------------------------------------------- +// Color map should provide +// - base: main color to be used. +// - contrast: Color that will provide readable text against the base color +// - shade: 12% darker version of the base color (mix with black) +// - tint: 10% lighter version of the base color (mix with white) + +$primary: #3880ff !default; +$secondary: #0cd1e8 !default; +$tertiary: #7044ff !default; +$success: #10dc60 !default; +$warning: #ffce00 !default; +$danger: #f04141 !default; +$light: #f4f5f8 !default; +$medium: #989aa2 !default; +$dark: #222428 !default; + +$colors: ( + primary: ( + base: $primary, + contrast: #fff, + shade: get-color-shade($primary), + tint: get-color-tint($primary) + ), + secondary: ( + base: $secondary, + contrast: #fff, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary) + ), + tertiary: ( + base: $tertiary, + contrast: #fff, + shade: get-color-shade($tertiary), + tint: get-color-tint($tertiary) + ), + success: ( + base: $success, + contrast: #fff, + shade: get-color-shade($success), + tint: get-color-tint($success) + ), + warning: ( + base: $warning, + contrast: #fff, + shade: get-color-shade($warning), + tint: get-color-tint($warning) + ), + danger: ( + base: $danger, + contrast: #fff, + shade: get-color-shade($danger), + tint: get-color-tint($danger) + ), + light: ( + base: $light, + contrast: #000, + shade: get-color-shade($light), + tint: get-color-tint($light) + ), + medium: ( + base: $medium, + contrast: #fff, + shade: get-color-shade($medium), + tint: get-color-tint($medium) + ), + dark: ( + base: $dark, + contrast: #fff, + shade: get-color-shade($dark), + tint: get-color-tint($dark) + ) +) !default; + +// Default Foreground and Background Colors +// ------------------------------------------------------------------------------------------- +// Used internally to calculate the default steps +// TODO: @color-mod will remove all of this + $background-color-value: #fff !default; $background-color-rgb: 255, 255, 255 !default; $text-color-value: #000 !default; $text-color-rgb: 0, 0, 0 !default; -// Default Foreground and Background Colors -// -------------------------------------------------- $background-color: var(--ion-background-color, $background-color-value) !default; $text-color: var(--ion-text-color, $text-color-value) !default; -$placeholder-text-color: var(--ion-placeholder-text-color, #999) !default; -// Default Background & Text Color Steps +// Default Foreground and Background Step Colors +// ------------------------------------------------------------------------------------------- // Color Steps are used to provide variations in text and background colors of elements. -// Steps move towards there "opposite" color. -// For example $text-color-step-XXX will be $text-color stepping towards $background-color, +// Steps move towards their contrasting color. +// For example, $text-color-step-XXX will be $text-color stepping towards $background-color, // but a $background-color-step-XXX will be $background-color stepping towards $text-color. -// -------------------------------------------------- + $background-color-step-50: var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default; $background-color-step-100: var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default; $background-color-step-150: var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default; @@ -60,31 +141,8 @@ $text-color-step-900: var(--ion-text-color-step-900, mix($backgrou $text-color-step-950: var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) !default; $text-color-step-1000: var(--ion-text-color-step-1000, mix($background-color-value, $text-color-value, 100%)) !default; + // Default General Colors // -------------------------------------------------- -$backdrop-color: var(--ion-backdrop-color, #000) !default; -$border-color: var(--ion-border-color, #b2b2b2) !default; -$box-shadow-color: var(--ion-box-shadow-color, #000) !default; - -// Default Tabs & Tab bar -// -------------------------------------------------- -$tabbar-background-color: var(--ion-tabbar-background-color, #f8f8f8) !default; -$tabbar-background-color-focused: var(--ion-tabbar-background-color-focused, get-color-shade(#f8f8f8)) !default; -$tabbar-border-color: var(--ion-tabbar-border-color, $border-color) !default; -$tabbar-text-color-active: var(--ion-tabbar-text-color-active, #488aff) !default; -$tabbar-text-color: var(--ion-tabbar-text-color, #8c8c8c) !default; - -// Default Toolbar -// -------------------------------------------------- -$toolbar-background-color: var(--ion-toolbar-background-color, #f8f8f8) !default; -$toolbar-border-color: var(--ion-toolbar-border-color, $border-color) !default; -$toolbar-color-active: var(--ion-toolbar-color-active, #4a4a4a) !default; -$toolbar-color-inactive: var(--ion-toolbar-color-inactive, #8c8c8c) !default; -$toolbar-text-color: var(--ion-toolbar-text-color, $text-color) !default; - -// Default List & List Items -// -------------------------------------------------- -$item-background-color: var(--ion-item-background-color, $background-color) !default; -$item-background-color-active: var(--ion-item-background-color-active, $background-color) !default; -$item-border-color: var(--ion-item-border-color, #c8c7cc) !default; -$item-text-color: var(--ion-item-text-color, $text-color) !default; +$overlay-background-color: var(--ion-overlay-background-color, #fafafa) !default; +$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600) !default; diff --git a/core/src/themes/license.scss b/core/src/themes/license.scss deleted file mode 100644 index ba7bf0a366..0000000000 --- a/core/src/themes/license.scss +++ /dev/null @@ -1,9 +0,0 @@ -/*! - * Ionic Framework - * A powerful framework for building mobile and progressive web apps. - * http://ionicframework.com/ - * - * v#{$ionic-version}, #{$ionic-theme} Theme - * - * Licensed under the MIT license. Please see LICENSE for more information. - */ \ No newline at end of file diff --git a/core/src/themes/test/css-variables/css/default.css b/core/src/themes/test/css-variables/css/default.css new file mode 100644 index 0000000000..046e1be737 --- /dev/null +++ b/core/src/themes/test/css-variables/css/default.css @@ -0,0 +1,75 @@ +/** + * Default + * ----------------------------------------------------- + * The default theme uses a white background with + * varying shades of black as contrast and the Ionic + * primary color as an accent. + * + * Looking to create a custom theme? Check out the generator! + * https://beta.ionicframework.com/docs/theming/color-generator +**/ + +:root { + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56,128,255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + --ion-color-secondary: #0cd1e8; + --ion-color-secondary-rgb: 12,209,232; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255,255,255; + --ion-color-secondary-shade: #0bb8cc; + --ion-color-secondary-tint: #24d6ea; + + --ion-color-tertiary: #7044ff; + --ion-color-tertiary-rgb: 112,68,255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255,255,255; + --ion-color-tertiary-shade: #633ce0; + --ion-color-tertiary-tint: #7e57ff; + + --ion-color-success: #10dc60; + --ion-color-success-rgb: 16,220,96; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255,255,255; + --ion-color-success-shade: #0ec254; + --ion-color-success-tint: #28e070; + + --ion-color-warning: #ffce00; + --ion-color-warning-rgb: 255,206,0; + --ion-color-warning-contrast: #ffffff; + --ion-color-warning-contrast-rgb: 255,255,255; + --ion-color-warning-shade: #e0b500; + --ion-color-warning-tint: #ffd31a; + + --ion-color-danger: #f04141; + --ion-color-danger-rgb: 245,61,61; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255,255,255; + --ion-color-danger-shade: #d33939; + --ion-color-danger-tint: #f25454; + + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34,34,34; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255,255,255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152,154,162; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244,244,244; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} diff --git a/core/src/themes/css/oceanic.css b/core/src/themes/test/css-variables/css/oceanic.css similarity index 84% rename from core/src/themes/css/oceanic.css rename to core/src/themes/test/css-variables/css/oceanic.css index 5a9e4c119b..fdf66a66ba 100644 --- a/core/src/themes/css/oceanic.css +++ b/core/src/themes/test/css-variables/css/oceanic.css @@ -1,4 +1,13 @@ -/** oceanic theme **/ +/** + * Oceanic + * ----------------------------------------------------- + * The Oceanic theme uses dark backgrounds with hues + * of gray and blue and changes the Ionic colors to + * less vibrant shades. + * + * Looking to create a custom theme? Check out the generator! + * https://beta.ionicframework.com/docs/theming/color-generator +**/ :root { --ion-color-primary: #549ee7; @@ -7,48 +16,56 @@ --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-contrast-rgb: 255,255,255; --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-contrast-rgb: 255,255,255; --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: #fff; --ion-color-success-contrast-rgb: 255,255,255; --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: #fff; --ion-color-warning-contrast-rgb: 255,255,255; --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: #fff; --ion-color-danger-contrast-rgb: 255,255,255; --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-contrast-rgb: 27,43,52; --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: #fff; --ion-color-medium-contrast-rgb: 255,255,255; --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-contrast-rgb: 216,222,233; @@ -108,19 +125,15 @@ --ion-text-color-step-950: #26363e; --ion-text-color-step-1000: #1b2b34; - --ion-tabbar-background-color: #343d46; - --ion-tabbar-background-color-focused: #293039; - --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; + --ion-tab-bar-background: #343d46; + --ion-tab-bar-background-focused: #293039; + --ion-tab-bar-color: #a7adba; + --ion-tab-bar-color-activated: #549ee7; + + --ion-toolbar-background: #343d46; + --ion-toolbar-color: #a7adba; + --ion-toolbar-color-activated: var(--ion-color-primary); + + --ion-item-background: #343d46; + --ion-item-background-activated: #232b34; } diff --git a/core/src/themes/test/css-variables/css/vibrant.css b/core/src/themes/test/css-variables/css/vibrant.css new file mode 100644 index 0000000000..9a6daaefb1 --- /dev/null +++ b/core/src/themes/test/css-variables/css/vibrant.css @@ -0,0 +1,80 @@ +/** + * Vibrant + * ----------------------------------------------------- + * The vibrant theme uses a white background with + * varying shades of black as contrast and the Ionic + * colors are all changed to more vibrant shades. + * + * Looking to create a custom theme? Check out the generator! + * https://beta.ionicframework.com/docs/theming/color-generator +**/ + +:root { + --ion-color-primary: #ff7f50; + --ion-color-primary-rgb: 255,127,80; + --ion-color-primary-contrast: #000000; + --ion-color-primary-contrast-rgb: 0,0,0; + --ion-color-primary-shade: #e07046; + --ion-color-primary-tint: #ff8c62; + + --ion-color-secondary: #17deee; + --ion-color-secondary-rgb: 23,222,238; + --ion-color-secondary-contrast: #000000; + --ion-color-secondary-contrast-rgb: 0,0,0; + --ion-color-secondary-shade: #14c3d1; + --ion-color-secondary-tint: #2ee1f0; + + --ion-color-tertiary: #ff4162; + --ion-color-tertiary-rgb: 255,65,98; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255,255,255; + --ion-color-tertiary-shade: #e03956; + --ion-color-tertiary-tint: #ff5472; + + --ion-color-success: #39ff14; + --ion-color-success-rgb: 57,255,20; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0,0,0; + --ion-color-success-shade: #32e012; + --ion-color-success-tint: #4dff2c; + + --ion-color-warning: #ffce00; + --ion-color-warning-rgb: 255,206,0; + --ion-color-warning-contrast: #ffffff; + --ion-color-warning-contrast-rgb: 255,255,255; + --ion-color-warning-shade: #e0b500; + --ion-color-warning-tint: #ffd31a; + + --ion-color-danger: #f04141; + --ion-color-danger-rgb: 245,61,61; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255,255,255; + --ion-color-danger-shade: #d33939; + --ion-color-danger-tint: #f25454; + + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34,34,34; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255,255,255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152,154,162; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244,244,244; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; + + /* Item Backgrounds */ + --ion-background-color: #778899; + --ion-item-background: #fff; + --ion-item-border-color: #5bff76; +} \ No newline at end of file diff --git a/core/src/themes/test/css-variables/e2e.ts b/core/src/themes/test/css-variables/e2e.ts new file mode 100644 index 0000000000..51bba00dae --- /dev/null +++ b/core/src/themes/test/css-variables/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +it('themes: css-variables', async () => { + const page = await newE2EPage({ + url: '/src/themes/test/css-variables?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index c305682fcc..4158982c4f 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -6,8 +6,10 @@ CSS Variable - Basic + - + + @@ -38,259 +47,633 @@ + + + + + Lists - - - CSS Variable - Basic +
+ Select a Theme: + + Default + Oceanic + Vibrant + +
+ + -
- Select a Theme: - - Default - Oceanic - -
- - + +
+
+ + + Card Header + - -
-
-

- Default - Activated -

+ + 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 + -

- Primary - Activated -

+ + This is content, without any paragraph or header tags, within an ion-card-content element. + + -

- Outline - Activated -

+ + + + Card Link Item 1 .activated + -

- Clear - Activated -

+ + + Card Link Item 2 + -

- Secondary - Activated -

+ + + Card Button Item 1 .activated + -

- Tertiary - Activated -

+ + + Card Button Item 2 + + +
-

- Warning - Activated -

+
+ + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Pac-Man + Super Mario World + Street Fighter II + Sliding Items + + Half Life + + More + + + + Final Fantasy VII + + More + + + + Tetris + + More + + + + Donkey Kong III + + More + + + + Goldeneye 007 + + More + + + +
-

- Danger - Activated -

+
+ + + Fruits + + + Apple + + -

- Light - Activated -

+ + Grape, checked, disabled + + -

- Medium - Activated -

+ + Cherry + + + -

- Dark - Activated -

+ + + Veggies + + + Celery + + -

- Disabled - Disabled -

-
+ + Lettuce, checked, disabled + + -
- - - Card Header - + + Onion + + + - - 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 - +
+ + Default + + + + Primary + + + + Secondary + + + + Warning + + + + Danger + + + + Light + + + + Dark + + + + Unchecked by Default + + + + Disabled + + - - - Card Button Item 2 - - -
+ + + Blueberry + -
- - 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 - -
+ + + Lettuce + -
- - - Fruits (Group w/ values) - - - Apple - - + + + Apple + - - Grape, checked, disabled - - + + + Radish + - - Cherry - - - + + + Blackberry + +
+
+ + - - - + + + + Colors +
+ Select a Theme: + + Default + Oceanic + Vibrant + +
+ + - - Apple - - + +
+
+

+ Primary + Secondary + Tertiary + Success Outline + Warning Clear + Danger + Light + Medium Outline + Dark Clear +

+ +

+ Primary + Secondary + Tertiary + Success Outline + Warning Clear + Danger + Light + Medium Outline + Dark Clear +

+ +

+ Primary + Secondary + Tertiary + Success Outline + Warning Clear + Danger + Light + Medium Outline + Dark Clear +

+
+ +
+

+ Default + + + + + Map + Round + Outline + Clear + Full Outline + Block Clear +

+ +

+ + + + + + + + + + + + +

+ +

+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +

+ +

+ + 11 + 22 + 33 + 44 + 55 + 66 + 77 + 88 + 99 +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +
+

+ + + + + + +

+

+ + All + Favorites + + + + All + Favorites + + + + All + Favorites + + + + All + Favorites + + + + All + Favorites + + + + All + Favorites + + +

+
+ +
+

+ + Default + + + + + + + + + + + + + + Toolbar + + + + + + + + + + + + + + + All + Favorites + + + + + + + + + + + + + + + + + + + + + + + + Tertiary + + + + + + + + + + + + + + Success + + + + + + + + + + + + + + Warning + + + + + + + + + + + + + + + + + + + + + + + + All + Favorites + + + + + + + + + + + + + + + Medium + + + + + + + + + + + + + + Dark + +

+
+
+ + + + + + + Other +
+ Select a Theme: + + Default + Oceanic + Vibrant + +
+ + + +
+ +
+ + + + + -
- - - - - - - - - - - - -
-
- - Default - - - Default - -
-
-
- - Default - - - - Primary - - - - Secondary - - - - Warning - - - - Danger - - - - Light - - - - Dark - - - - Unchecked by Default - - - - Disabled - - -
-
- diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html index c57bbf94dc..54ae0a2c6a 100644 --- a/core/src/themes/test/steps/index.html +++ b/core/src/themes/test/steps/index.html @@ -6,8 +6,9 @@ CSS Variable - Basic + - +