javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theming): update global css variable naming and default values (#16003)

Browse Source 
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
This commit is contained in:
Brandy Carney
2018-10-23 12:37:04 -04:00
committed by GitHub
parent 4318520695
commit b2021fd9c4
48 changed files with 1238 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
core/scripts/theme-builder/src/theme-variables.js
View File

@ -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'
}
];

271
core/scripts/theme-builder/src/theme-variables.ts
View File

@ -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'
}
];

2
core/src/components/alert/alert.ios.vars.scss
View File

@ -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;

4
core/src/components/buttons/buttons.ios.vars.scss
View File

@ -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;

8
core/src/components/buttons/buttons.md.scss
View File

@ -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};
}

6
core/src/components/buttons/buttons.md.vars.scss
View File

@ -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;

2
core/src/components/card/card.ios.scss
View File

@ -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);

2
core/src/components/card/card.ios.vars.scss
View File

@ -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;

2
core/src/components/card/card.md.scss
View File

@ -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);

2
core/src/components/card/card.md.vars.scss
View File

@ -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;

2
core/src/components/checkbox/checkbox.ios.scss
View File

@ -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;
}

2
core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -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;

2
core/src/components/checkbox/checkbox.md.vars.scss
View File

@ -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;

2
core/src/components/item-sliding/item-sliding.scss
View File

@ -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;

7
core/src/components/item/item.ios.scss
View File

@ -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 {

12
core/src/components/item/item.md.scss
View File

@ -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};

2
core/src/components/list/list.ios.scss
View File

@ -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 {

2
core/src/components/list/list.md.scss
View File

@ -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 {

2
core/src/components/list/list.scss
View File

@ -10,8 +10,6 @@ ion-list {
display: block;
background: $item-background-color;
contain: content;
list-style-type: none;
}

2
core/src/components/picker/picker.ios.vars.scss
View File

@ -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;

2
core/src/components/picker/picker.md.vars.scss
View File

@ -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;

4
core/src/components/segment/segment.md.vars.scss
View File

@ -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;

8
core/src/components/tabbar/tab-button.ios.vars.scss
View File

@ -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;

8
core/src/components/tabbar/tab-button.md.vars.scss
View File

@ -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;

9
core/src/components/tabbar/tabbar.ios.scss
View File

@ -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;
}

6
core/src/components/tabbar/tabbar.md.scss
View File

@ -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;

2
core/src/components/toggle/toggle.ios.vars.scss
View File

@ -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;

14
core/src/components/toolbar/toolbar.ios.scss
View File

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

6
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -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;

14
core/src/components/toolbar/toolbar.md.scss
View File

@ -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;
}

8
core/src/components/toolbar/toolbar.md.vars.scss
View File

@ -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;

14
core/src/css/typography.scss
View File

@ -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);

157
core/src/themes/css/default.css
View File

@ -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)));;
}

7
core/src/themes/ionic.functions.color.scss
View File

@ -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};
}

1
core/src/themes/ionic.globals.ios.scss
View File

@ -2,6 +2,5 @@
// Global Core
@import "./ionic.globals";
// Global iOS
@import "./ionic.theme.default.ios";

1
core/src/themes/ionic.globals.md.scss
View File

@ -2,6 +2,5 @@
// Core Globals
@import "./ionic.globals";
// Material Design Globals
@import "./ionic.theme.default.md";

102
core/src/themes/ionic.globals.scss
View File

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

40
core/src/themes/ionic.theme.default.ios.scss
View File

@ -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;
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
$border-ios-color: var(--ion-border-color, #dedede) !default;
$box-shadow-ios-color: $box-shadow-color !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;

34
core/src/themes/ionic.theme.default.md.scss
View File

@ -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;

130
core/src/themes/ionic.theme.default.scss
View File

@ -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;

9
core/src/themes/license.scss
View File

@ -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.
*/

75
core/src/themes/test/css-variables/css/default.css Normal file
View File

@ -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;
}

45
core/src/themes/css/oceanic.css → core/src/themes/test/css-variables/css/oceanic.css
View File

@ -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;
}

80
core/src/themes/test/css-variables/css/vibrant.css Normal file
View File

@ -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;
}

10
core/src/themes/test/css-variables/e2e.ts Normal file
View File

@ -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();
});

677
core/src/themes/test/css-variables/index.html
View File

@ -6,8 +6,10 @@
<title>CSS Variable - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/screenshot/testing.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
<style>
.wrapper {
display: flex;
@ -15,22 +17,29 @@
}
section {
display: flex;
flex: 1 1 auto;
padding: 16px;
flex-direction: column;
align-items: stretch;
}
section>* {
padding: 8px;
width: 25%;
padding: 0 8px;
}
.right-container {
display: flex;
position: absolute;
top: 4px;
right: 12px;
top: 0;
right: 16px;
height: 100%;
align-items: center;
}
ion-fab-button {
display: inline-block;
}
ion-segment {
margin-bottom: 8px;
}
.icon-section ion-icon {
font-size: 48px;
}
</style>
@ -38,86 +47,26 @@
<body>
<ion-app>
<ion-tabs>
<ion-tab label="Lists" icon="list">
<ion-header>
<ion-toolbar>
<ion-title>CSS Variable - Basic</ion-title>
<ion-title>Lists</ion-title>
<div class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select id="theme-picker">
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
</ion-select>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content padding>
<div class="wrapper">
<section>
<p>
<ion-button>Default</ion-button>
<ion-button class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button color="primary" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="primary" fill='outline'>Outline</ion-button>
<ion-button color="primary" fill='outline' class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="primary" fill='clear'>Clear</ion-button>
<ion-button color="primary" fill='clear' class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="secondary" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="tertiary" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="warning">Warning</ion-button>
<ion-button color="warning" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="danger">Danger</ion-button>
<ion-button color="danger" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="light">Light</ion-button>
<ion-button color="light" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="medium">Medium</ion-button>
<ion-button color="medium" class="activated">Activated</ion-button>
</p>
<p>
<ion-button color="dark">Dark</ion-button>
<ion-button color="dark" class="activated">Activated</ion-button>
</p>
<p>
<ion-button disabled>Disabled</ion-button>
<ion-button color="secondary" disabled>Disabled</ion-button>
</p>
</section>
<section style="max-width: 450px">
<ion-card>
<ion-card-header>
<ion-card-title>Card Header</ion-card-title>
@ -165,31 +114,51 @@
<section>
<ion-list>
<ion-item>Pokémon Yellow</ion-item>
<ion-item>Super Metroid</ion-item>
<ion-item>Mega Man X</ion-item>
<ion-item>The Legend of Zelda</ion-item>
<ion-item>Pac-Man</ion-item>
<ion-item>Super Mario World</ion-item>
<ion-item>Street Fighter II</ion-item>
<ion-item>Half Life</ion-item>
<ion-item>Portal</ion-item>
<ion-item>Final Fantasy VII</ion-item>
<ion-item>Star Fox</ion-item>
<ion-item>Tetris</ion-item>
<ion-item>Donkey Kong III</ion-item>
<ion-item>Goldeneye 007</ion-item>
<ion-item>Doom</ion-item>
<ion-item>Fallout</ion-item>
<ion-item>GTA</ion-item>
<ion-item>Halo</ion-item>
<ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
<ion-item><ion-label>Super Metroid</ion-label></ion-item>
<ion-item><ion-label>Mega Man X</ion-label></ion-item>
<ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
<ion-item><ion-label>Pac-Man</ion-label></ion-item>
<ion-item><ion-label>Super Mario World</ion-label></ion-item>
<ion-item><ion-label>Street Fighter II</ion-label></ion-item>
<ion-item-divider>Sliding Items</ion-item-divider>
<ion-item-sliding>
<ion-item><ion-label>Half Life</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item color="secondary"><ion-label>Final Fantasy VII</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Tetris</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</section>
<section>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Fruits (Group w/ values)</ion-label>
<ion-label>Fruits</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Apple</ion-label>
@ -207,90 +176,504 @@
</ion-item>
</ion-radio-group>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Veggies</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Celery</ion-label>
<ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Lettuce, checked, disabled</ion-label>
<ion-radio color="tertiary" slot="start" value="lettuce" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Onion</ion-label>
<ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-label>Apple</ion-label>
<ion-toggle slot="start" name="apple" checked></ion-toggle>
<ion-range color="success" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range color="warning" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range color="danger" value="20"></ion-range>
</ion-item>
</section>
<section>
<ion-item>
<ion-label>Default</ion-label>
<ion-checkbox slot="end" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Primary</ion-label>
<ion-checkbox slot="end" color="primary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Secondary</ion-label>
<ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Warning</ion-label>
<ion-checkbox slot="end" color="warning" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Danger</ion-label>
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Light</ion-label>
<ion-checkbox slot="end" color="light" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox slot="end" color="dark" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Unchecked by Default</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-checkbox slot="end" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-toggle slot="start"></ion-toggle>
<ion-label>Blueberry</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="success" slot="start" checked></ion-toggle>
<ion-label>Lettuce</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="danger" slot="start" checked></ion-toggle>
<ion-label>Apple</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="tertiary" slot="start" checked></ion-toggle>
<ion-label>Radish</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="dark" slot="start" checked></ion-toggle>
<ion-label>Blackberry</ion-label>
</ion-item>
</section>
</div>
</ion-content>
</ion-tab>
<ion-tab label="Colors" icon="brush">
<ion-header>
<ion-toolbar>
<ion-title>Colors</ion-title>
<div class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
</ion-select>
</div>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div class="wrapper">
<section>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button fill="outline" color="success">Success Outline</ion-button>
<ion-button fill="clear" color="warning">Warning Clear</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
<p>
<ion-button class="focused" color="primary">Primary</ion-button>
<ion-button class="focused" color="secondary">Secondary</ion-button>
<ion-button class="focused" color="tertiary">Tertiary</ion-button>
<ion-button class="focused" fill="outline" color="success">Success Outline</ion-button>
<ion-button class="focused" fill="clear" color="warning">Warning Clear</ion-button>
<ion-button class="focused" color="danger">Danger</ion-button>
<ion-button class="focused" color="light">Light</ion-button>
<ion-button class="focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button class="focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
<p>
<ion-button class="activated" color="primary">Primary</ion-button>
<ion-button class="activated" color="secondary">Secondary</ion-button>
<ion-button class="activated" color="tertiary">Tertiary</ion-button>
<ion-button class="activated" fill="outline" color="success">Success Outline</ion-button>
<ion-button class="activated" fill="clear" color="warning">Warning Clear</ion-button>
<ion-button class="activated" color="danger">Danger</ion-button>
<ion-button class="activated" color="light">Light</ion-button>
<ion-button class="activated" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button class="activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
</section>
<section>
<p>
<ion-button>Default</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
<ion-button shape="round">Round</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline" expand="full">Full Outline</ion-button>
<ion-button fill="clear" expand="block">Block Clear</ion-button>
</p>
<p>
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button mini>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color=secondary>
<ion-fab-button color="secondary">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button color=tertiary>
<ion-fab-button color="tertiary">
<ion-icon name="logo-googleplus"></ion-icon>
</ion-fab-button>
</section>
</p>
<section>
<p>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Default</ion-label>
</ion-chip>
</section>
</section>
<section>
<ion-item>
<ion-label>Default</ion-label>
<ion-checkbox checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-chip color="primary">
<ion-label>Primary</ion-label>
<ion-checkbox color="primary" checked></ion-checkbox>
</ion-item>
<ion-item>
</ion-chip>
<ion-chip color="secondary">
<ion-label>Secondary</ion-label>
<ion-checkbox color="secondary" checked></ion-checkbox>
</ion-item>
<ion-item>
</ion-chip>
<ion-chip color="tertiary">
<ion-label>Tertiary</ion-label>
</ion-chip>
<ion-chip color="success">
<ion-label>Success</ion-label>
</ion-chip>
<ion-chip color="warning">
<ion-label>Warning</ion-label>
<ion-checkbox color="warning" checked></ion-checkbox>
</ion-item>
<ion-item>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
<ion-checkbox color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
</ion-chip>
<ion-chip color="light">
<ion-label>Light</ion-label>
<ion-checkbox color="light" checked></ion-checkbox>
</ion-item>
<ion-item>
</ion-chip>
<ion-chip color="medium">
<ion-label>Medium</ion-label>
</ion-chip>
<ion-chip color="dark">
<ion-label>Dark</ion-label>
<ion-checkbox color="dark" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Unchecked by Default</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-checkbox disabled></ion-checkbox>
</ion-item>
</ion-chip>
</p>
<p>
<ion-badge></ion-badge>
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="tertiary">33</ion-badge>
<ion-badge color="success">44</ion-badge>
<ion-badge color="warning">55</ion-badge>
<ion-badge color="danger">66</ion-badge>
<ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge>
</p>
<p class="icon-section">
<ion-icon name="logo-ionic" color="primary"></ion-icon>
<ion-icon name="logo-angular"></ion-icon>
<ion-icon name="heart" color="danger"></ion-icon>
<ion-icon name="logo-ionitron" color="primary"></ion-icon>
<ion-icon name="happy" color="warning"></ion-icon>
<ion-icon name="people"></ion-icon>
<ion-icon name="person" color="tertiary"></ion-icon>
<ion-icon name="contact"></ion-icon>
<ion-icon name="apps"></ion-icon>
<ion-icon name="lock"></ion-icon>
<ion-icon name="key" color="success"></ion-icon>
<ion-icon name="unlock"></ion-icon>
<ion-icon name="map" color="secondary"></ion-icon>
<ion-icon name="navigate"></ion-icon>
<ion-icon name="pin"></ion-icon>
<ion-icon name="locate"></ion-icon>
<ion-icon name="mic"></ion-icon>
<ion-icon name="musical-notes" color="warning"></ion-icon>
<ion-icon name="volume-high"></ion-icon>
<ion-icon name="microphone" color="tertiary"></ion-icon>
<ion-icon name="cafe" color="success"></ion-icon>
<ion-icon name="calculator"></ion-icon>
<ion-icon name="bus"></ion-icon>
<ion-icon name="wine" color="danger"></ion-icon>
</p>
</section>
<section>
<p>
<ion-searchbar></ion-searchbar>
<ion-searchbar color="primary"></ion-searchbar>
<ion-searchbar color="tertiary"></ion-searchbar>
<ion-searchbar color="warning"></ion-searchbar>
<ion-searchbar color="light"></ion-searchbar>
<ion-searchbar color="dark"></ion-searchbar>
</p>
<p>
<ion-segment>
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
<ion-segment color="primary">
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
<ion-segment color="secondary">
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
<ion-segment color="success">
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
<ion-segment color="light">
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
<ion-segment color="medium">
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
</p>
</section>
<section>
<p>
<ion-toolbar>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment>
<ion-segment-button>All</ion-segment-button>
<ion-segment-button checked>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tertiary</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Warning</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment>
<ion-segment-button>All</ion-segment-button>
<ion-segment-button checked>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Medium</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-button color="danger">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
</p>
</section>
</div>
</ion-content>
</ion-tab>
<ion-tab label="Other" icon="more">
<ion-header>
<ion-toolbar>
<ion-title>Other</ion-title>
<div class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>
<ion-select-option value="oceanic">Oceanic</ion-select-option>
<ion-select-option value="vibrant">Vibrant</ion-select-option>
</ion-select>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="wrapper">
</div>
</ion-content>
</ion-tab>
<ion-tabbar></ion-tabbar>
</ion-tabs>
</ion-app>
<script>
const cssCache = new Map(),
select = document.querySelector('#theme-picker');
const cssCache = new Map();
const selects = document.querySelectorAll('.theme-picker');
select.addEventListener("ionChange", (event) => {
for (let i = 0; i < selects.length; i++) {
selects[i].addEventListener('ionChange', (ev) => {
const theme = event.detail && event.detail.value;
toggleTheme(theme);
});
})
}
function toggleTheme(theme) {
const styleTarget = document.documentElement.style;
@ -300,7 +683,7 @@
if (cssCache.has(theme)) {
styleTarget.cssText = cssCache.get(theme);
} else {
fetch(`/src/themes/css/${theme}.css`)
fetch(`/src/themes/test/css-variables/css/${theme}.css`)
.then(result => result.text())
.then(css => {
cssCache.set(theme, css.replace(/(:root ?{)|}|\/\*\*.*\*\*\/|\s/g, '').trim());
@ -308,6 +691,10 @@
});
}
}
for (let i = 0; i < selects.length; i++) {
selects[i].value = theme;
}
}
</script>
</body>

4
core/src/themes/test/steps/index.html
View File

@ -6,8 +6,9 @@
<title>CSS Variable - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/screenshot/testing.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
<style>
.block {
@ -16,7 +17,6 @@
width: 150px;
}
.background-step-50 {
background-color: var(--ion-background-color-step-50);
}

1
core/src/themes/version.scss
View File

@ -1 +0,0 @@
$ionic-version: "E2E-201703081537";