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