javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theming): rename alpha variables and add more (#14066)

Browse Source
This commit is contained in:
Ross Gerbasi
2018-02-22 10:49:34 -06:00
committed by Brandy Carney
parent 9a516437e1
commit c6bfb32cf0
14 changed files with 185 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'}
}
},
{

6
packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

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

4
packages/core/src/components/alert/alert.ios.vars.scss
View File

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

4
packages/core/src/components/button/button.ios.scss
View File

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

6
packages/core/src/components/button/button.ios.vars.scss
View File

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

4
packages/core/src/components/button/button.md.scss
View File

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

12
packages/core/src/components/button/button.md.vars.scss
View File

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

6
packages/core/src/components/segment-button/segment-button.ios.scss
View File

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

6
packages/core/src/components/segment-button/segment-button.ios.vars.scss
View File

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

41
packages/core/src/themes/css/default.css
View File

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

15
packages/core/src/themes/css/oceanic.css
View File

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

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

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

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

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

22
packages/core/src/themes/ionic.theme.default.scss
View File

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