mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
fix(theming): update global css variable naming and default values (#16003)
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used. - removes some of the non mode-specific global Sass variables - updates the md and ios values so that the default is the css variable with different fallbacks - removes non-color related css variables from the global file - fixes item so it uses the background color that is set by the global file # Breaking Changes ## Removed Global CSS Variables The following global CSS variables have been removed for the reasons listed. | Variable Name | Reason | | ----------------------------------| ------------------------------------------------| | `--ion-toolbar-color-inactive` | Unused | | `--ion-ripple-background-color` | Unused / Ripple color is based on component | | `--ion-header-size` | Removed in favor of using CSS for h1-h6 | | `--ion-header-step` | Removed in favor of using CSS for h1-h6 | ## Renamed Global CSS Variables The following global CSS variables have been renamed for the reasons listed. | Old Variable Name | New Variable Name | Reason | | -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------| | `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color | | `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables | | `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color | | `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables | | `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property | | `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property | | `--ion-item-background-color` | `--ion-item-background` | Applies to the background property | | `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables | | `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color | | `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables | Fixes #15989 Fixes #15559
This commit is contained in:
Brandy Carney
@ -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-inactive'
|
||||
property: '--ion-toolbar-color-activated'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user