From c6bfb32cf02beea076a9027a043bb0d1180e52c4 Mon Sep 17 00:00:00 2001 From: Ross Gerbasi Date: Thu, 22 Feb 2018 10:49:34 -0600 Subject: [PATCH] fix(theming): rename alpha variables and add more (#14066) --- .../theme-builder/src/theme-variables.ts | 116 +++++++++++------- .../action-sheet/action-sheet.ios.vars.scss | 6 +- .../src/components/alert/alert.ios.vars.scss | 4 +- .../src/components/button/button.ios.scss | 4 +- .../components/button/button.ios.vars.scss | 6 +- .../core/src/components/button/button.md.scss | 4 +- .../src/components/button/button.md.vars.scss | 12 +- .../segment-button/segment-button.ios.scss | 6 +- .../segment-button.ios.vars.scss | 6 +- packages/core/src/themes/css/default.css | 41 ++++++- packages/core/src/themes/css/oceanic.css | 15 ++- .../src/themes/ionic.theme.default.ios.scss | 28 +++-- .../src/themes/ionic.theme.default.md.scss | 25 ++-- .../core/src/themes/ionic.theme.default.scss | 22 ++-- 14 files changed, 185 insertions(+), 110 deletions(-) diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts index 7a5e4c11aa..6bd5ec909d 100644 --- a/packages/core/scripts/theme-builder/src/theme-variables.ts +++ b/packages/core/scripts/theme-builder/src/theme-variables.ts @@ -1,9 +1,10 @@ import { Color } from './components/Color'; + export interface ThemeVariable { property: string; - quickPick?: {text: string}; + quickPick?: { text: string }; value?: Color | number | string; - computed?: {type: ComputedType, params: any}; + computed?: { type: ComputedType, params: any }; } export enum ComputedType { @@ -13,19 +14,40 @@ export enum ComputedType { export const THEME_VARIABLES: ThemeVariable[] = [ { - property: '--ion-alpha-lowest' + property: '--ion-alpha-md-activated' }, { - property: '--ion-alpha-low' + property: '--ion-alpha-md-border-low' }, { - property: '--ion-alpha-medium' + property: '--ion-alpha-md-border-medium' }, { - property: '--ion-alpha-high' + property: '--ion-alpha-md-border-high' }, { - property: '--ion-alpha-highest' + property: '--ion-alpha-md-disabled' + }, + { + property: '--ion-alpha-md-focused' + }, + { + property: '--ion-alpha-md-hover' + }, + { + property: '--ion-alpha-md-lowest' + }, + { + property: '--ion-alpha-md-low' + }, + { + property: '--ion-alpha-md-medium' + }, + { + property: '--ion-alpha-md-high' + }, + { + property: '--ion-alpha-md-highest' }, { property: '--ion-color-primary', @@ -230,140 +252,140 @@ export const THEME_VARIABLES: ThemeVariable[] = [ 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'} } }, { @@ -389,140 +411,140 @@ export const THEME_VARIABLES: ThemeVariable[] = [ 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'} } }, { diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss index 3d2f1f5645..0666b3a9b1 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -64,7 +64,7 @@ $action-sheet-ios-title-border-width: $hairlines-width !defaul $action-sheet-ios-title-border-style: solid !default; /// @prop - Border color of the action sheet title -$action-sheet-ios-title-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default; +$action-sheet-ios-title-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default; /// @prop - Font size of the action sheet sub title $action-sheet-ios-sub-title-font-size: 12px !default; @@ -112,13 +112,13 @@ $action-sheet-ios-button-border-width: $hairlines-width !defaul $action-sheet-ios-button-border-style: solid !default; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default; +$action-sheet-ios-button-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default; /// @prop - Background color of the action sheet button $action-sheet-ios-button-background: transparent !default; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default; +$action-sheet-ios-button-background-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-activated) !default; /// @prop - Background color of the selected action sheet button $action-sheet-ios-button-background-selected: $background-ios-color !default; diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index 8e8e4665f8..209ce0ded2 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -147,7 +147,7 @@ $alert-ios-button-text-color: ion-color($colors-ios, primary, $alert-ios-button-background-color: transparent !default; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default; +$alert-ios-button-background-color-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-activated) !default; /// @prop - Border width of the alert button $alert-ios-button-border-width: $hairlines-width !default; @@ -156,7 +156,7 @@ $alert-ios-button-border-width: $hairlines-width !default; $alert-ios-button-border-style: solid !default; /// @prop - Border color of the alert button -$alert-ios-button-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default; +$alert-ios-button-border-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default; /// @prop - Border radius of the alert button $alert-ios-button-border-radius: 0 !default; diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss index 8a18c5fb7b..c3785b007d 100644 --- a/packages/core/src/components/button/button.ios.scss +++ b/packages/core/src/components/button/button.ios.scss @@ -137,7 +137,7 @@ button[disabled], $color-base: ion-color($colors-ios, $color-name, base, ios); $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); $color-tint: ion-color($colors-ios, $color-name, shade, ios); - $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios); + $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios); .button-outline-ios-#{$color-name} { border-color: $color-base; @@ -190,7 +190,7 @@ button[disabled], @mixin ios-button-clear($color-name) { $fg-color: ion-color($colors-ios, $color-name, base, ios); - $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios); + $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios); .button-clear-ios-#{$color-name} { border-color: $button-ios-clear-border-color; diff --git a/packages/core/src/components/button/button.ios.vars.scss b/packages/core/src/components/button/button.ios.vars.scss index 3d51e02c60..6615e77a69 100644 --- a/packages/core/src/components/button/button.ios.vars.scss +++ b/packages/core/src/components/button/button.ios.vars.scss @@ -58,7 +58,7 @@ $button-ios-opacity-hover: .8 !default; $button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default; /// @prop - Opacity of the button when disabled -$button-ios-opacity-disabled: $alpha-ios-medium !default; +$button-ios-opacity-disabled: $alpha-ios-disabled !default; // iOS Large Button @@ -136,7 +136,7 @@ $button-ios-outline-background-color-activated: $button-ios-background-color $button-ios-outline-opacity-activated: 1 !default; /// @prop - Background color of the focused outline button -$button-ios-outline-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default; +$button-ios-outline-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-focused, ios) !default; // iOS Clear Button // -------------------------------------------------- @@ -160,7 +160,7 @@ $button-ios-clear-text-color-hover: $button-ios-background-color $button-ios-clear-opacity-hover: .6 !default; /// @prop - Background color of the focused clear button -$button-ios-clear-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default; +$button-ios-clear-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-focused, ios) !default; // iOS Round Button diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss index fe5afc1d07..b0cc29b1ea 100644 --- a/packages/core/src/components/button/button.md.scss +++ b/packages/core/src/components/button/button.md.scss @@ -158,7 +158,7 @@ button[disabled], @mixin md-button-outline($color-name) { $fg-color: ion-color($colors-md, $color-name, tint, md); - $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md); + $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-focused, md); .button-outline-md-#{$color-name} { border-color: $fg-color; @@ -218,7 +218,7 @@ button[disabled], @mixin md-button-clear($color-name) { $fg-color: ion-color($colors-md, $color-name, base, md); - $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md); + $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-focused, md); .button-clear-md-#{$color-name} { border-color: $button-md-clear-border-color; diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss index 5a750e7f84..26dfc605d1 100644 --- a/packages/core/src/components/button/button.md.vars.scss +++ b/packages/core/src/components/button/button.md.vars.scss @@ -79,7 +79,7 @@ $button-md-ripple-background-color: $text-md-color-step-400 !default; $button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default; /// @prop - Opacity of the button when disabled -$button-md-opacity-disabled: $alpha-md-medium !default; +$button-md-opacity-disabled: $alpha-md-disabled !default; // Material Design Large Button @@ -148,7 +148,7 @@ $button-md-outline-background-color: transparent !default; $button-md-outline-box-shadow: none !default; /// @prop - Background color of the outline button on hover -$button-md-outline-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; +$button-md-outline-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-hover) !default; /// @prop - Background color of the activated outline button $button-md-outline-background-color-activated: transparent !default; @@ -163,7 +163,7 @@ $button-md-outline-opacity-activated: 1 !default; $button-md-outline-ripple-background-color: $button-md-background-color !default; /// @prop - Background color of the focused outline button -$button-md-outline-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default; +$button-md-outline-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-focused, md) !default; // Material Design Clear Button // -------------------------------------------------- @@ -184,19 +184,19 @@ $button-md-clear-box-shadow: none !default; $button-md-clear-opacity: 1 !default; /// @prop - Background color of the activated clear button -$button-md-clear-background-color-activated: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; +$button-md-clear-background-color-activated: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-activated) !default; /// @prop - Box shadow of the activated clear button $button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; /// @prop - Background color of the clear button on hover -$button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; +$button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-hover) !default; /// @prop - Background color of the ripple on the clear button $button-md-clear-ripple-background-color: $text-md-color-step-600 !default; /// @props - Background color of the focused clear button -$button-md-clear-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default; +$button-md-clear-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-focused, md) !default; // Material Design Round Button diff --git a/packages/core/src/components/segment-button/segment-button.ios.scss b/packages/core/src/components/segment-button/segment-button.ios.scss index 23387d2322..5d6afa0390 100644 --- a/packages/core/src/components/segment-button/segment-button.ios.scss +++ b/packages/core/src/components/segment-button/segment-button.ios.scss @@ -117,11 +117,11 @@ ion-segment-button { color: $color-base; &:hover:not(.segment-activated) { - background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest); + background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-hover); } &:active:not(.segment-activated) { - background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest); + background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-activated); } &.segment-activated { @@ -131,7 +131,7 @@ ion-segment-button { } .segment-button-disabled { - color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium); + color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-disabled); } } } diff --git a/packages/core/src/components/segment-button/segment-button.ios.vars.scss b/packages/core/src/components/segment-button/segment-button.ios.vars.scss index e40a51efe3..4f9e6486ff 100644 --- a/packages/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/packages/core/src/components/segment-button/segment-button.ios.vars.scss @@ -10,13 +10,13 @@ $segment-button-ios-background-color: transparent !default; $segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Background of the segment button when hovered -$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default; +$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-hover) !default; /// @prop - Background of the segment button when active -$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default; +$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-activated) !default; /// @prop - Background of the activated segment button when active -$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default; +$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-disabled) !default; /// @prop - Text color of the segment button $segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default; diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css index da32e7cd22..a0e94a77fa 100644 --- a/packages/core/src/themes/css/default.css +++ b/packages/core/src/themes/css/default.css @@ -1,11 +1,18 @@ /** default theme **/ :root { - --ion-alpha-lowest: 0.06; - --ion-alpha-low: 0.1; - --ion-alpha-medium: 0.4; - --ion-alpha-high: 0.75; - --ion-alpha-highest: 0.9; + --ion-alpha-activated: .1; + --ion-alpha-border-low: .1; + --ion-alpha-border-medium: .2; + --ion-alpha-border-high: .3; + --ion-alpha-disabled: .5; + --ion-alpha-focused: .25; + --ion-alpha-hover: .1; + --ion-alpha-lowest: .1; + --ion-alpha-low: .25; + --ion-alpha-medium: .5; + --ion-alpha-high: .8; + --ion-alpha-highest: .9; --ion-color-primary: #488aff; --ion-color-primary-rgb: 72,138,255; --ion-color-primary-contrast: #ffffff; @@ -113,4 +120,28 @@ --ion-item-border-color: #c8c7cc; --ion-item-text-color: #000000; --ion-placeholder-text-color: #999999; + + /** iOS overrides **/ + --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, 0.8))); + --ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.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, 0.8))); + --ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2))); + --ion-item-ios-background-color: var(--ion-background-ios-color, var(--ion-background-color, #fff)); + --ion-item-ios-background-color-active: #d9d9d9; + + /** MD overrides **/ + --ion-alpha-md-focused: 0.1; + --ion-alpha-md-border-low: 0.07; + --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, 0.07))); + --ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666666)); + --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: #dedede; } diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css index 181edbb210..92d6a3d800 100644 --- a/packages/core/src/themes/css/oceanic.css +++ b/packages/core/src/themes/css/oceanic.css @@ -1,10 +1,17 @@ /** oceanic theme **/ :root { - --ion-alpha-lowest: .06; - --ion-alpha-low: .1; - --ion-alpha-medium: .4; - --ion-alpha-high: .75; + --ion-alpha-activated: .1; + --ion-alpha-border-low: .1; + --ion-alpha-border-medium: .2; + --ion-alpha-border-high: .3; + --ion-alpha-disabled: .5; + --ion-alpha-focused: .25; + --ion-alpha-hover: .1; + --ion-alpha-lowest: .1; + --ion-alpha-low: .25; + --ion-alpha-medium: .5; + --ion-alpha-high: .8; --ion-alpha-highest: .9; --ion-color-primary: #549ee7; --ion-color-primary-contrast: #ffffff; diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss index 0c9ee6e253..85e8539e72 100644 --- a/packages/core/src/themes/ionic.theme.default.ios.scss +++ b/packages/core/src/themes/ionic.theme.default.ios.scss @@ -15,11 +15,18 @@ $font-size-ios-base: $font-size-base !default; // Default iOS Alpha levels // -------------------------------------------------- -$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest); -$alpha-ios-low: css-var($alpha-low, alpha-ios-low); -$alpha-ios-medium: css-var($alpha-medium, alpha-ios-medium); -$alpha-ios-high: css-var($alpha-high, alpha-ios-high); -$alpha-ios-highest: css-var($alpha-highest, alpha-ios-highest); +$alpha-ios-activated: css-var($alpha-activated, alpha-ios-activated) !default; +$alpha-ios-border-low: css-var($alpha-border-low, alpha-ios-border-low) !default; +$alpha-ios-border-medium: css-var($alpha-border-medium, alpha-ios-border-medium) !default; +$alpha-ios-border-high: css-var($alpha-border-high, alpha-ios-border-high) !default; +$alpha-ios-disabled: css-var($alpha-disabled, alpha-ios-disabled) !default; +$alpha-ios-focused: css-var($alpha-focused, alpha-ios-focused) !default; +$alpha-ios-hover: css-var($alpha-hover, alpha-ios-hover) !default; +$alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest) !default +$alpha-ios-low: css-var($alpha-low, alpha-ios-low) !default; +$alpha-ios-medium: css-var($alpha-medium, alpha-ios-medium) !default; +$alpha-ios-high: css-var($alpha-high, alpha-ios-high) !default; +$alpha-ios-highest: css-var($alpha-highest, alpha-ios-highest) !default; // Default Foreground and Background Colors values // Allows users to override an foreground / background colors @@ -85,11 +92,10 @@ $text-ios-color-step-900: css-var(mix($background-ios-color- $text-ios-color-step-950: css-var(mix($background-ios-color-value, $text-ios-color-value, 95%), text-ios-color-step-950) !default; $text-ios-color-step-1000: css-var(mix($background-ios-color-value, $text-ios-color-value, 100%), text-ios-color-step-1000) !default; - // iOS General Colors // -------------------------------------------------- $backdrop-ios-color: css-var($backdrop-color, backdrop-ios-color) !default; -$border-ios-color: css-var(#c1c4cd, border-ios-color) !default; +$border-ios-color: css-var(#dedede, border-ios-color) !default; $box-shadow-ios-color: css-var($box-shadow-color, box-shadow-ios-color) !default; $overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-background-color) !default; @@ -97,8 +103,8 @@ $overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-backg // -------------------------------------------------- $tabbar-ios-background-color: css-var($tabbar-background-color, tabbar-ios-background-color) !default; $tabbar-ios-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default; -$tabbar-ios-translucent-background-color: css-var(rgba(248, 248, 248, .8), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove -$tabbar-ios-border-color: css-var(rgba(0, 0, 0, .2), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) +$tabbar-ios-translucent-background-color: css-var(unquote("rgba(248,248,248, #{$alpha-ios-high})"), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove +$tabbar-ios-border-color: css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) $tabbar-ios-text-color: css-var($tabbar-text-color, tabbar-ios-text-color) !default; $tabbar-ios-text-color-active: css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default; @@ -107,8 +113,8 @@ $tabbar-ios-text-color-active: css-var(ion-color($colors-ios, pri $toolbar-ios-height: 44px !default; $toolbar-ios-padding: 4px !default; $toolbar-ios-background-color: css-var($toolbar-background-color, toolbar-ios-background-color) !default; -$toolbar-ios-translucent-background-color: css-var(rgba(248, 248, 248, .8), toolbar-ios-background-color) !default; // TODO: @color-mod: remove -$toolbar-ios-border-color: css-var(rgba(0, 0, 0, .2), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) +$toolbar-ios-translucent-background-color: css-var(unquote("rgba(248, 248, 248, #{$alpha-ios-high})"), toolbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove +$toolbar-ios-border-color: css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low)) $toolbar-ios-color-active: css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default; $toolbar-ios-color-inactive: css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default; $toolbar-ios-text-color: css-var($toolbar-text-color, toolbar-ios-text-color) !default; diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss index 4b520c8e15..070800f15e 100644 --- a/packages/core/src/themes/ionic.theme.default.md.scss +++ b/packages/core/src/themes/ionic.theme.default.md.scss @@ -15,11 +15,18 @@ $font-size-md-base: $font-size-base !default; // Default Material Design Alpha levels // -------------------------------------------------- -$alpha-md-lowest: css-var($alpha-lowest, alpha-md-lowest); -$alpha-md-low: css-var($alpha-low, alpha-md-low); -$alpha-md-medium: css-var($alpha-medium, alpha-md-medium); -$alpha-md-high: css-var($alpha-high, alpha-md-high); -$alpha-md-highest: css-var($alpha-highest, alpha-md-highest); +$alpha-md-activated: css-var($alpha-activated, alpha-md-activated) !default; +$alpha-md-border-low: css-var(.07, alpha-md-border-low) !default; +$alpha-md-border-medium: css-var($alpha-border-medium, alpha-md-border-medium) !default; +$alpha-md-border-high: css-var($alpha-border-high, alpha-md-border-high) !default; +$alpha-md-disabled: css-var($alpha-disabled, alpha-md-disabled) !default; +$alpha-md-focused: css-var(.1, alpha-md-focused) !default; +$alpha-md-hover: css-var($alpha-hover, alpha-md-hover) !default; +$alpha-md-lowest: css-var($alpha-lowest, alpha-md-lowest) !default +$alpha-md-low: css-var($alpha-low, alpha-md-low) !default; +$alpha-md-medium: css-var($alpha-medium, alpha-md-medium) !default; +$alpha-md-high: css-var($alpha-high, alpha-md-high) !default; +$alpha-md-highest: css-var($alpha-highest, alpha-md-highest) !default; // Default Foreground and Background Colors values // Allows users to override an foreground / background colors @@ -95,9 +102,9 @@ $overlay-md-background-color: css-var(#fafafa, overlay-md-background-c // Material Design Tabs & Tab bar // -------------------------------------------------- $tabbar-md-background-color: css-var($tabbar-background-color, tabbar-md-background-color) !default; -$tabbar-md-background-color-focused: css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default; -$tabbar-md-border-color: css-var(rgba(0, 0, 0, .07), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest)) -$tabbar-md-text-color: css-var($text-md-color-step-400, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-high)) +$tabbar-md-background-color-focused: css-var($tabbar-background-color-focused, tabbar-md-background-color-focused) !default; +$tabbar-md-border-color: css-var(unquote("rgba(0, 0, 0, #{$alpha-md-border-low})"), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest)) +$tabbar-md-text-color: css-var($text-md-color-step-400, tabbar-md-text-color) !default; $tabbar-md-text-color-active: css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default; // Material Design Toolbar @@ -116,3 +123,5 @@ $item-md-background-color: css-var($item-background-color, item-md- $item-md-background-color-active: css-var(#f1f1f1, item-md-background-color-active) !default; $item-md-border-color: css-var(#dedede, item-md-border-color) !default; $item-md-text-color: css-var($item-text-color, item-md-text-color) !default; + +@include css-variables-to-root($ion-colors-md); diff --git a/packages/core/src/themes/ionic.theme.default.scss b/packages/core/src/themes/ionic.theme.default.scss index 3190a2cc74..2008224f8e 100644 --- a/packages/core/src/themes/ionic.theme.default.scss +++ b/packages/core/src/themes/ionic.theme.default.scss @@ -17,13 +17,6 @@ $dark: #222; // Allows users to override an individual color $colors: () !default; -// Allows users to override all alpha levels -$alpha-lowest: .06 !default; -$alpha-low: .1 !default; -$alpha-medium: .4 !default; -$alpha-high: .75 !default; -$alpha-highest: .9 !default; - // Primary color map should provide // - base: main color to be used. // - rgb: a R,G,B list version of the base color. Used for alpha processing @@ -99,10 +92,17 @@ $colors: ion-extend-colors($ion-colors, $colors); // Default Alpha levels // -------------------------------------------------- +$alpha-activated: css-var(.1, alpha-activated) !default; +$alpha-border-low: css-var(.1, alpha-border-low) !default; +$alpha-border-medium: css-var(.2, alpha-border-medium) !default; +$alpha-border-high: css-var(.3, alpha-border-high) !default; +$alpha-disabled: css-var(.5, alpha-disabled) !default; +$alpha-focused: css-var(.25, alpha-focused) !default; +$alpha-hover: css-var(.1, alpha-hover) !default; $alpha-lowest: css-var(.1, alpha-lowest) !default; $alpha-low: css-var(.25, alpha-low) !default; $alpha-medium: css-var(.5, alpha-medium) !default; -$alpha-high: css-var(.75, alpha-high) !default; +$alpha-high: css-var(.8, alpha-high) !default; $alpha-highest: css-var(.9, alpha-highest) !default; // Default General @@ -135,9 +135,9 @@ $text-color-rgb: css-var(color-to-rgb-list($text-color-va // Default Background & Text Color Steps // Color Steps are used to provide variations in text and background colors of elements. -// Steps are generally meant to move "away from" their base color. -// For example a $text-color of white would generally step towards black, -// but a $text-color of black would step towards white. +// Steps move towards there "opposite" 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: css-var(mix($text-color-value, $background-color-value, 5%), background-color-step-50) !default; $background-color-step-100: css-var(mix($text-color-value, $background-color-value, 10%), background-color-step-100) !default;