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

refactor(theming): alpha color refactor and theme cleanup (#14161)

Browse Source 
* Cleanup for iOS mode used in material variables
Refactor to alpha variables for colors in the color map
updated theme builder with new alpha variables
updated theme builder with duplicate default CSS modes

* moved alpha transform into css-var
removed ion-color-alpha
fixes for disabled css-variable mode
added defaults for user configurable variables

* revert to spinner related code
This commit is contained in:
Ross Gerbasi
2018-03-15 10:53:48 -05:00
committed by Brandy Carney
parent e729610dc8
commit 147a6090e4
38 changed files with 228 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/scripts/theme-builder/src/components/theme-selector/theme-selector.css
View File

@@ -108,11 +108,20 @@ section {
font-size: 11px;
}
.checkbox {
padding: 8px 8px 0 0;
.checkbox, .radio-group {
align-items: center;
font-size: 10px;
color: #333333;
width: 100px;
width: 300px;
}
.radio-group {
display: flex;
justify-content: space-between;
}
.checkbox {
padding: 8px 8px 0 0;
width: 150px;
}
.settings {

72
core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
View File

@@ -5,13 +5,18 @@ import { COLOR_URL, getThemeUrl, STORED_THEME_KEY } from '..
const PLACEHOLDER_COLOR = '#ff00ff';
enum DefaultCSSDuplicateMode {
inherit = 'inherit',
ignore = 'ignore',
bake = 'bake'
}
@Component({
tag: 'theme-selector',
styleUrl: 'theme-selector.css'
})
export class ThemeSelector {
@Element() el: HTMLThemeSelectorElement;
@State() generateContrast: boolean = false;
@State() generateSteps: boolean = true;
@@ -29,6 +34,7 @@ export class ThemeSelector {
private currentHoveredProperty: string;
private cssHolder: HTMLStyleElement;
private proxyElement: HTMLElement;
private defaultCSSDuplicateMode: DefaultCSSDuplicateMode = DefaultCSSDuplicateMode.bake;
changeColor (property: string, value: Color | string) {
this.themeVariables = this.themeVariables.map(themeVariable => {
@@ -56,18 +62,32 @@ export class ThemeSelector {
await this.loadThemeCss();
}
generateCss () {
async generateCss () {
console.log('ThemeSelector generateCss', this.themeName);
const c: string[] = [];
const defaultThemeURL = getThemeUrl('default'),
defaultCSS: string = this.themeName === 'default' ? '' : await fetch(defaultThemeURL).then(r => r.text()),
c: string[] = [];
c.push(`/** ${this.themeName} theme **/`);
c.push(`\n`);
c.push(':root {');
this.themeVariables.forEach(themeVariable => {
const variableValue = themeVariable.value,
value = variableValue instanceof Color ? variableValue.hex : variableValue;
c.push(` ${themeVariable.property}: ${value};`);
value = variableValue instanceof Color ? variableValue.hex : variableValue,
match = defaultCSS.match(`(${themeVariable.property}): ?(.*);`);
let matchValue: string | number = match && match[2];
if (matchValue && !matchValue.match(/,|#/)) matchValue = parseFloat(matchValue);
if (this.defaultCSSDuplicateMode === DefaultCSSDuplicateMode.bake || matchValue !== value) {
c.push(` ${themeVariable.property}: ${value};`);
} else {
if (this.defaultCSSDuplicateMode === DefaultCSSDuplicateMode.inherit) {
c.push(` ${themeVariable.property}: inherit;`);
}
}
this.el.style.setProperty(themeVariable.property, value.toString());
});
@@ -126,6 +146,12 @@ export class ThemeSelector {
await this.loadThemeCss();
}
async onDefaultCSSDuplicateChange (mode: DefaultCSSDuplicateMode) {
this.defaultCSSDuplicateMode = mode;
await this.generateCss();
}
@Listen('colorChange')
onColorChange (ev) {
console.log('ThemeSelector colorChange');
@@ -239,7 +265,7 @@ export class ThemeSelector {
return <variable-selector
class={{'is-primary': !!computedReferences.length, used: this.propertiesUsed.indexOf(d.property) >= 0}}
property={d.property} value={d.value}
usedWith={Array.from(new Set(computedReferences))}></variable-selector>;
usedWith={Array.from(new Set(computedReferences))}/>;
})
}
</section>,
@@ -269,7 +295,7 @@ export class ThemeSelector {
</section>;
return [
<div id="css-proxy" ref={el => this.proxyElement = el}></div>,
<div id="css-proxy" ref={el => this.proxyElement = el}/>,
<div>
<div class="top-bar">
<select onChange={this.onChangeUrl.bind(this)}>
@@ -283,27 +309,49 @@ export class ThemeSelector {
<div class="row">
<div class="checkbox">
<input type="checkbox" id="generateContrast" checked={this.generateContrast}
onChange={this.toggleCheck.bind(this, 'generateContrast')}></input>
onChange={this.toggleCheck.bind(this, 'generateContrast')}/>
<label>Auto Contrast</label>
</div>
<div class="checkbox">
<input type="checkbox" id="generateVariations" checked={this.generateVariations}
onChange={this.toggleCheck.bind(this, 'generateVariations')}></input>
onChange={this.toggleCheck.bind(this, 'generateVariations')}/>
<label>Auto Shade/Tint</label>
</div>
</div>
<div class="row">
<div class="checkbox">
<input type="checkbox" id="generateSteps" checked={this.generateSteps}
onChange={this.toggleCheck.bind(this, 'generateSteps')}></input>
onChange={this.toggleCheck.bind(this, 'generateSteps')}/>
<label>Auto Steps</label>
</div>
<div class="checkbox">
<input type="checkbox" id="showSteps" checked={this.showSteps}
onChange={this.toggleCheck.bind(this, 'showSteps')}></input>
onChange={this.toggleCheck.bind(this, 'showSteps')}/>
<label>Show Steps</label>
</div>
</div>
<div class="row">
<div class="radio-group">
<label>Default Duplication Mode: </label>
<div class="radio">
<input name="radio-default-css-duplicate" type="radio"
onChange={this.onDefaultCSSDuplicateChange.bind(this, DefaultCSSDuplicateMode.inherit)}/>
<label>inherit</label>
</div>
<div class="radio">
<input name="radio-default-css-duplicate" type="radio"
onChange={this.onDefaultCSSDuplicateChange.bind(this, DefaultCSSDuplicateMode.ignore)}/>
<label>ignore</label>
</div>
<div class="radio">
<input name="radio-default-css-duplicate" type="radio" checked
onChange={this.onDefaultCSSDuplicateChange.bind(this, DefaultCSSDuplicateMode.bake)}/>
<label>bake</label>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -383,4 +431,4 @@ export class ThemeSelector {
contrast && (contrast.value = color.contrast());
}
}
};
}

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

@@ -14,48 +14,45 @@ export enum ComputedType {
export const THEME_VARIABLES: ThemeVariable[] = [
{
property: '--ion-alpha-md-activated'
property: '--ion-alpha-activated'
},
{
property: '--ion-alpha-md-border-low'
property: '--ion-alpha-border-low'
},
{
property: '--ion-alpha-md-border-medium'
property: '--ion-alpha-border-medium'
},
{
property: '--ion-alpha-md-border-high'
property: '--ion-alpha-border-high'
},
{
property: '--ion-alpha-md-disabled'
property: '--ion-alpha-disabled'
},
{
property: '--ion-alpha-md-focused'
property: '--ion-alpha-focused'
},
{
property: '--ion-alpha-md-hover'
property: '--ion-alpha-hover'
},
{
property: '--ion-alpha-md-lowest'
property: '--ion-alpha-lowest'
},
{
property: '--ion-alpha-md-low'
property: '--ion-alpha-low'
},
{
property: '--ion-alpha-md-medium'
property: '--ion-alpha-medium'
},
{
property: '--ion-alpha-md-high'
property: '--ion-alpha-high'
},
{
property: '--ion-alpha-md-highest'
property: '--ion-alpha-highest'
},
{
property: '--ion-color-primary',
quickPick: {text: 'p'}
},
{
property: '--ion-color-primary-contrast'
},
{
property: '--ion-color-primary-rgb',
computed: {
@@ -63,6 +60,16 @@ export const THEME_VARIABLES: ThemeVariable[] = [
params: {property: '--ion-color-primary'}
}
},
{
property: '--ion-color-primary-contrast'
},
{
property: '--ion-color-primary-contrast-rgb',
computed: {
type: ComputedType.rgblist,
params: {property: '--ion-color-primary-contrast'}
}
},
{
property: '--ion-color-primary-shade'
},
@@ -551,7 +558,7 @@ export const THEME_VARIABLES: ThemeVariable[] = [
property: '--ion-tabbar-background-color'
},
{
property: '--tabbar-background-color-focused'
property: '--ion-tabbar-background-color-focused'
},
{
property: '--ion-tabbar-border-color'

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

@@ -31,7 +31,7 @@ $action-sheet-ios-group-margin-bottom: 10px !default;
$action-sheet-ios-background-color: $overlay-ios-background-color !default;
/// @prop - Background color of the action sheet when translucent
$action-sheet-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$action-sheet-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Border radius of the action sheet
$action-sheet-ios-border-radius: 13px !default;
@@ -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-border-medium) !default;
$action-sheet-ios-title-border-color: css-var($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-border-medium) !default;
$action-sheet-ios-button-border-color: css-var($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-activated) !default;
$action-sheet-ios-button-background-activated: css-var($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;

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

@@ -21,7 +21,7 @@ $alert-ios-border-radius: 13px !default;
$alert-ios-background-color: $overlay-ios-background-color !default;
/// @prop - Background color of the alert when translucent
$alert-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
$alert-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
/// @prop - Box shadow of the alert
$alert-ios-box-shadow: none !default;
@@ -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-activated) !default;
$alert-ios-button-background-color-activated: css-var($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-border-medium) !default;
$alert-ios-button-border-color: css-var($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
core/src/components/app/app.md.scss
View File

@@ -29,13 +29,13 @@ a {
color: $app-md-link-color;
}
// iOS Content Padding
// Material Design Content Padding
// --------------------------------------------------
@include app-padding("md", $content-md-padding);
// iOS Content Margin
// Material Design Content Margin
// --------------------------------------------------
@include app-margin("md", $content-md-margin);

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

@@ -10,7 +10,7 @@ $badge-md-border-radius: 4px !default;
$badge-md-font-family: $font-family-md-base !default;
/// @prop - Background color of the badge
$badge-md-background-color: ion-color($colors-md, primary, base, ios) !default;
$badge-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the badge
$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, ios) !default;
$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, md) !default;

4
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-focused, ios);
$bg-color-focused: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-focused);
.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-focused, ios);
$bg-color-focused: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-focused);
.button-clear-ios-#{$color-name} {
border-color: $button-ios-clear-border-color;

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

@@ -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-focused, ios) !default;
$button-ios-outline-background-color-focused: ion-color($colors-ios, primary, base, ios, $alpha-ios-focused) !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-focused, ios) !default;
$button-ios-clear-background-color-focused: ion-color($colors-ios, primary, base, ios, $alpha-ios-focused) !default;
// iOS Round Button

4
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-focused, md);
$bg-color-focused: ion-color($colors-md, $color-name, base, md, $alpha-md-focused);
.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-focused, md);
$bg-color-focused: ion-color($colors-md, $color-name, base, md, $alpha-md-focused);
.button-clear-md-#{$color-name} {
border-color: $button-md-clear-border-color;

10
core/src/components/button/button.md.vars.scss
View File

@@ -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-hover) !default;
$button-md-outline-background-color-hover: css-var($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-focused, md) !default;
$button-md-outline-background-color-focused: ion-color($colors-md, primary, base, md, $alpha-md-focused) !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-activated) !default;
$button-md-clear-background-color-activated: css-var($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-hover) !default;
$button-md-clear-background-color-hover: css-var($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-focused, md) !default;
$button-md-clear-background-color-focused: ion-color($colors-md, primary, base, md, $alpha-md-focused) !default;
// Material Design Round Button

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

@@ -16,7 +16,7 @@ $card-ios-header-padding-bottom: 16px !default;
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
/// @prop - Filter of the translucent card header
$card-ios-header-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
$card-ios-header-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
/// @prop - Filter of the translucent card header
$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default;

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

@@ -31,7 +31,7 @@ $chip-ios-font-size: 13px !default;
$chip-ios-text-color: $text-ios-color-step-150 !default;
/// @prop - Background color of the chip
$chip-ios-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
$chip-ios-background-color: css-var($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Margin top of the label in the chip
$chip-ios-label-margin-top: 0 !default;

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

@@ -31,7 +31,7 @@ $chip-md-font-size: 13px !default;
$chip-md-text-color: $text-md-color-step-150 !default;
/// @prop - Background color of the chip
$chip-md-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
$chip-md-background-color: css-var($text-md-color-value, text-md-color, $alpha-md-low) !default;
/// @prop - Margin top of the label in the chip
$chip-md-label-margin-top: 0 !default;

2
core/src/components/fab-button/fab-button.ios.scss
View File

@@ -73,7 +73,7 @@
}
.fab-translucent-ios-#{$color-name} {
background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-highest);
background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-highest);
opacity: .8;
}

4
core/src/components/fab-button/fab-button.ios.vars.scss
View File

@@ -7,7 +7,7 @@
$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the button in translucent mode
$fab-ios-translucent-background-color: ion-color-alpha($colors-ios, primary, $alpha-ios-highest, ios) !default;
$fab-ios-translucent-background-color: ion-color($colors-ios, primary, base, ios, $alpha-ios-highest) !default;
/// @prop - Text color of the button
$fab-ios-text-color: ion-color($colors-ios, $fab-ios-background-color, contrast, ios) !default;
@@ -22,7 +22,7 @@ $fab-ios-background-color-activated: ion-color($colors-ios, $
$fab-ios-list-button-background-color: ion-color($colors-ios, light, base, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$fab-ios-list-button-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: ion-color($colors-ios, $fab-ios-list-button-background-color, contrast, ios) !default;

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

@@ -37,7 +37,7 @@ $loading-ios-text-color: $text-ios-color !default;
$loading-ios-background-color: $background-ios-color-step-50 !default;
/// @prop - Background of the loading wrapper
$loading-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$loading-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Font weight of the loading content
$loading-ios-content-font-weight: bold !default;

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

@@ -19,7 +19,7 @@ $picker-ios-background-color: $background-ios-color !default
$picker-ios-top-background-color: $picker-ios-background-color !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-ios-bottom-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$picker-ios-bottom-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Height of the picker toolbar
$picker-ios-toolbar-height: 44px !default;

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

@@ -19,7 +19,7 @@ $picker-md-background-color: $background-md-color !defaul
$picker-md-top-background-color: $picker-md-background-color !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-md-bottom-background-color: ion-color-alpha($background-md-color-value, background-md-color, $alpha-md-high) !default;
$picker-md-bottom-background-color: css-var($background-md-color-value, background-md-color, $alpha-md-high) !default;
/// @prop - Height of the picker toolbar
$picker-md-toolbar-height: 44px !default;

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

@@ -28,7 +28,7 @@ $popover-ios-text-color: $text-ios-color !default;
$popover-ios-background-color: $background-ios-color !default;
/// @prop - Background of the popover content
$popover-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$popover-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Background of the popover arrow
$popover-ios-arrow-background-color: $popover-ios-background-color !default;

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

@@ -18,5 +18,5 @@
.scroll-ios hr {
height: $hairlines-width;
background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-low);
background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-low);
}

5
core/src/components/searchbar/searchbar.ios.scss
View File

@@ -156,11 +156,10 @@
// Generate Default Search Bar Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, shade, ios);
$color-contrast-alpha: ion-color($colors-ios, $color-name, contrast, ios, $alpha-ios-lowest);
$color-tint: ion-color($colors-ios, $color-name, tint, ios);
.searchbar-ios-#{$color-name} .searchbar-cancel-button-ios {
@@ -179,7 +178,7 @@
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
@include placeholder($color-contrast, $opacity: .5);
color: $color-contrast;
background: $color-shade;
background: $color-contrast-alpha;
}
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {

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

@@ -49,7 +49,7 @@ $searchbar-ios-input-placeholder-color: $text-ios-color-step-400 !defa
$searchbar-ios-input-text-color: $text-ios-color !default;
/// @prop - Background of the searchbar input
$searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
$searchbar-ios-input-background-color: css-var($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default;
/// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default;

6
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-hover);
background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-hover);
}
&:active:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-activated);
background-color: ion-color($colors-ios, $color-name, base, ios, $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-disabled);
color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-disabled);
}
}
}

6
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-hover) !default;
$segment-button-ios-background-color-hover: ion-color($colors-ios, primary, base, ios, $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-activated) !default;
$segment-button-ios-background-color-active: ion-color($colors-ios, primary, base, ios, $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-disabled) !default;
$segment-button-ios-background-color-disabled: ion-color($colors-ios, primary, base, ios, $alpha-ios-disabled) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;

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

@@ -7,13 +7,13 @@ $slides-ios-bullet-background-color: $text-ios-color-step-400 !defa
$slides-ios-bullet-background-color-active: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Slides Progress indicator Background color
$slides-ios-progress-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
$slides-ios-progress-background-color: css-var($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Slides Progress indicator bar Background color
$slides-ios-progress-bar-background-color: ion-color($colors-ios, primary, shade, ios) !default;
/// @prop - Slides Scroll bar Background color
$slides-ios-scroll-bar-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
$slides-ios-scroll-bar-background-color: css-var($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Slides Scroll bar drag handle Background color
$slides-ios-scroll-bar-drag-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-medium) !default;
$slides-ios-scroll-bar-drag-background-color: css-var($text-ios-color-value, text-ios-color, $alpha-ios-medium) !default;

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

@@ -7,13 +7,13 @@ $slides-md-bullet-background-color: $text-md-color-step-400 !defau
$slides-md-bullet-background-color-active: ion-color($colors-md, primary, base, md) !default;
/// @prop - Slides Progress indicator Background color
$slides-md-progress-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
$slides-md-progress-background-color: css-var($text-md-color-value, text-md-color, $alpha-md-low) !default;
/// @prop - Slides Progress indicator bar Background color
$slides-md-progress-bar-background-color: ion-color($colors-md, primary, shade, md) !default;
/// @prop - Slides Scroll bar Background color
$slides-md-scroll-bar-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
$slides-md-scroll-bar-background-color: css-var($text-md-color-value, text-md-color, $alpha-md-low) !default;
/// @prop - Slides Scroll bar drag handle Background color
$slides-md-scroll-bar-drag-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-medium) !default;
$slides-md-scroll-bar-drag-background-color: css-var($text-md-color-value, text-md-color, $alpha-md-medium) !default;

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

@@ -44,7 +44,7 @@
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, shade, ios);
$translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);
$translucent-background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-high);
.tabbar-ios-#{$color-name} {
border-color: $background-ios-color-step-400;

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

@@ -26,7 +26,7 @@
@mixin tabbar-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-shade: ion-color($colors-md, $color-name, shade, ios);
$color-shade: ion-color($colors-md, $color-name, shade, md);
.tabbar-md-#{$color-name} {
color: $color-contrast;

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

@@ -10,7 +10,7 @@ $toast-ios-font-family: $font-family-ios-base !default
$toast-ios-background-color: $background-ios-color-step-50 !default;
/// @prop - Background Color of the toast wrapper when translucent
$toast-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
$toast-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Border radius of the toast wrapper
$toast-ios-border-radius: 14px !default;

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

@@ -18,7 +18,7 @@ $toggle-md-track-height: 14px !default;
$toggle-md-track-background-color-off: $item-md-border-color !default;
/// @prop - Background color of the checked toggle track
$toggle-md-track-background-color-on: ion-color-alpha($colors-md, primary, $alpha-md-medium, md) !default;
$toggle-md-track-background-color-on: ion-color($colors-md, primary, base, md, $alpha-md-medium) !default;
/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px !default;

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

@@ -85,7 +85,7 @@
@mixin ios-toolbar-theme($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-translucent: ion-color-alpha($colors-ios, $color-name, $alpha-ios-highest, ios);
$color-translucent: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-highest);
.toolbar-ios-#{$color-name} {

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

@@ -16,46 +16,55 @@
--ion-color-primary: #488aff;
--ion-color-primary-rgb: 72,138,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3f79e0;
--ion-color-primary-tint: #5a96ff;
--ion-color-secondary: #32db64;
--ion-color-secondary-rgb: 50,219,100;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #2cc158;
--ion-color-secondary-tint: #47df74;
--ion-color-tertiary: #f4a942;
--ion-color-tertiary-rgb: 244,169,66;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #d7953a;
--ion-color-tertiary-tint: #f5b255;
--ion-color-success: #10dc60;
--ion-color-success-rgb: 16,220,96;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #0ec254;
--ion-color-success-tint: #28e070;
--ion-color-warning: #ffce00;
--ion-color-warning-rgb: 255,206,0;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0b500;
--ion-color-warning-tint: #ffd31a;
--ion-color-danger: #f53d3d;
--ion-color-danger-rgb: 245,61,61;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #d83636;
--ion-color-danger-tint: #f65050;
--ion-color-light: #f4f4f4;
--ion-color-light-rgb: 244,244,244;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d7d7;
--ion-color-light-tint: #f5f5f5;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-dark: #222222;
--ion-color-dark-rgb: 34,34,34;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255,255,255;
--ion-color-dark-shade: #1e1e1e;
--ion-color-dark-tint: #383838;
--ion-backdrop-color: #000000;
@@ -107,6 +116,7 @@
--ion-text-color-step-950: #f2f2f2;
--ion-text-color-step-1000: #ffffff;
--ion-tabbar-background-color: #f8f8f8;
--ion-tabbar-background-color-focused: #dadada;
--ion-tabbar-border-color: #b2b2b2;
--ion-tabbar-text-color: #8c8c8c;
--ion-tabbar-text-color-active: #488aff;

10
core/src/themes/css/oceanic.css
View File

@@ -15,46 +15,55 @@
--ion-alpha-highest: .9;
--ion-color-primary: #549ee7;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-rgb: 84,158,231;
--ion-color-primary-shade: #498bce;
--ion-color-primary-tint: #59aafc;
--ion-color-secondary: #5fb3b3;
--ion-color-secondary-contrast: #fff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-rgb: 95,179,179;
--ion-color-secondary-shade: #34a29d;
--ion-color-secondary-tint: #6ececf;
--ion-color-tertiary: #fac863;
--ion-color-tertiary-contrast: #fff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-rgb: 250,200,99;
--ion-color-tertiary-shade: #eab30f;
--ion-color-tertiary-tint: #ffd36a;
--ion-color-success: #90d089;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-rgb: 144,208,137;
--ion-color-success-shade: #81bc7b;
--ion-color-success-tint: #a1eb9a;
--ion-color-warning: #f99157;
--ion-color-warning-contrast: #ffffff;
--ion-color-warning-contrast-rgb: 255,255,255;
--ion-color-warning-rgb: 249,145,87;
--ion-color-warning-shade: #ec8a54;
--ion-color-warning-tint: #ff9e60;
--ion-color-danger: #ec5f67;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-rgb: 236,95,103;
--ion-color-danger-shade: #cb535b;
--ion-color-danger-tint: #ff707b;
--ion-color-light: #d8dee9;
--ion-color-light-contrast: #1b2b34;
--ion-color-light-contrast-rgb: 27,43,52;
--ion-color-light-rgb: 216,222,233;
--ion-color-light-shade: #bcc1cd;
--ion-color-light-tint: #ecf2ff;
--ion-color-medium: #65737e;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255,255,255;
--ion-color-medium-rgb: 101,115,126;
--ion-color-medium-shade: #4f5b66;
--ion-color-medium-tint: #a7adba;
--ion-color-dark: #1b2b34;
--ion-color-dark-contrast: #d8dee9;
--ion-color-dark-contrast-rgb: 216,222,233;
--ion-color-dark-rgb: 27,43,52;
--ion-color-dark-shade: #070b0d;
--ion-color-dark-tint: #343d46;
@@ -107,6 +116,7 @@
--ion-text-color-step-950: #26363e;
--ion-text-color-step-1000: #1b2b34;
--ion-tabbar-background-color: #343d46;
--ion-tabbar-background-color-focused: #293039;
--ion-tabbar-border-color: var(--ion-border-color);
--ion-tabbar-text-color: #a7adba;
--ion-tabbar-text-color-active: #549ee7;

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

@@ -1,12 +1,14 @@
@import "./ionic.functions.list";
@import "./ionic.functions.string";
$css-variable-prefix: "--ion-";
$default-color-variation: base;
$default-color-prefix: color-;
$enable-css-variables: true;
$css-variable-prefix: "--ion-" !default;
$default-color-variation: base !default;
$default-color-prefix: color- !default;
$enable-css-variables: true !default;
$modes: (ios, md) !default;
// Private
$css-variables: ();
$modes: (ios, md);
@function get-color-shade($color) {
@return mix(#000, $color, 12%);
@@ -103,31 +105,63 @@ $modes: (ios, md);
@return (name: $name, variation: $variation, mode: $mode);
}
@function css-var($color, $name) {
// Creates a css variable from a value/alpha combination. alpha is optional. css-var aids in 3 main ways
// first is alpha generation
// -- when given alpha it will convert the value to a RGBList and create a css variable name with the suffix '-rgb'
// second is mode fallbacks
// -- when given a name that contains a mode (-ios- or -md-) it will create the proper fallback scheme for non mode variables
// -- for example when given text-ios-color the variable will result in var(text-ios-color, var(text-color, $value));
// third is when css variables are disabled
// -- provides a bottleneck method to return all colors as normal colors (with alpha transforms)
@function css-var($value, $name, $alpha: null) {
@if ($enable-css-variables) {
$is-reference: str-contains($color, $css-variable-prefix);
$is-reference: str-contains($value, $css-variable-prefix);
$global-css-variable: #{$css-variable-prefix}#{$name};
$mode: get-mode($name);
$result: null;
@if ($alpha and $is-reference) {
@error "css-var error alpha (#{$alpha}) cannot be used with references. When trying to set '#{$name}', '#{$value}' was a reference.";
}
@if ($alpha) {
$global-css-variable: "#{$global-css-variable}-rgb";
$value: color-to-rgb-list($value);
}
@if ($mode != null) {
$mode-css-variable: $global-css-variable;
$mode: "-#{$mode}-";
$global-css-variable: str-replace($mode-css-variable, $mode, "-");
$css-variables: map-merge($css-variables, ($mode-css-variable: $color)) !global;
$color: #{if($is-reference, "#{$color}", "var(#{$global-css-variable}, #{$color})")};
$color: "var(#{$mode-css-variable}, #{$color})";
$css-variables: map-merge($css-variables, ($mode-css-variable: $value)) !global;
$fallback: "var(#{$global-css-variable}, #{$value})";
@if $is-reference {
$fallback: "#{$value}";
}
$result: "var(#{$mode-css-variable}, #{$fallback})";
} @else {
$css-variables: map-merge($css-variables, ($global-css-variable: $color)) !global;
$color: "var(#{$global-css-variable}, #{$color})";
$css-variables: map-merge($css-variables, ($global-css-variable: $value)) !global;
$result: "var(#{$global-css-variable}, #{$value})";
}
@if $alpha {
$result: "rgba(#{$result}, #{$alpha})";
}
@return unquote($result);
} @else {
@if ($alpha) {
$value: color-to-rgb-list($value);
@return unquote("rgba(#{$value}, #{$alpha})");
} @else {
@return $value;
}
}
$color: if(type-of($color) != string, $color, unquote($color));
@return $color;
}
@function ion-color($colors, $name, $variation: null, $mode: null) {
@function ion-color($colors, $name, $variation: null, $mode: null, $alpha: null) {
// If CSS variables are off or someone passed a raw color, we will be passed color values
// we need to look up the map in order to provide variations
@@ -184,25 +218,16 @@ $modes: (ios, md);
$name: "#{$name}-#{$variation}";
}
@if $alpha {
@return css-var($color, $name, $alpha)
}
@return css-var($color, $name);
}
@error "Unknown Color: '#{$name}' with variation '#{$variation}'";
}
// Also can take the format
// ion-color-alpha($color-value, $css-variable-name, $alpha) {
@function ion-color-alpha($colors, $name, $alpha, $mode: null) {
@if (type-of($colors) == color) {
$value: color-to-rgb-list($colors);
$fallback: css-var($value, $name);
@return unquote("rgba(#{$value}, #{$alpha})");
} @else {
$value: ion-color($colors, $name, rgb, $mode);
@return unquote("rgba(#{$value}, #{$alpha})");
}
}
@function ion-extend-colors($parent, $children...) {
$result: map-merge($parent, ());
@@ -232,7 +257,7 @@ $modes: (ios, md);
@if ($variation == 'base') {
$test: css-var(force-hex($color), unquote("color-#{$name}"));
$test: css-var("#{red($color)},#{green($color)},#{blue($color)}", unquote("color-#{$name}-rgb"));
}@else {
} @else {
$test: css-var(force-hex($color), unquote("color-#{$name}-#{$variation}"));
}
}

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

@@ -40,15 +40,6 @@ $background-ios-color: css-var($background-ios-color-valu
$text-ios-color: css-var($text-ios-color-value, text-ios-color) !default;
$placeholder-text-ios-color: css-var($placeholder-text-color, placeholder-text-ios-color) !default;
// Generated Foreground and Background Colors for alpha
// These variables are not used, but we call this here in order to add these colors
// to the global list of css variables for a theme. This is only used to get a dump of all
// css variables that the theme uses.
// TODO: @color-mod: remove all of this
// --------------------------------------------------
$background-color-rgb: css-var(color-to-rgb-list($background-ios-color-value), background-ios-color-rgb) !default; //TODO: @color-mod: remove
$text-color-rgb: css-var(color-to-rgb-list($text-ios-color-value), text-ios-color-rgb) !default; //TODO: @color-mod: remove
// Default iOS Background & Text Color Steps
// --------------------------------------------------
$background-ios-color-step-50: css-var(mix($text-ios-color-value, $background-ios-color-value, 5%), background-ios-color-step-50) !default;
@@ -103,8 +94,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(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-translucent-background-color: css-var(rgb(248,248,248), tabbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$tabbar-ios-border-color: css-var(rgb(0, 0, 0), tabbar-ios-border-color, $alpha-ios-border-medium) !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;
@@ -113,8 +104,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(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-translucent-background-color: css-var(rgb(248,248,248), toolbar-ios-translucent-background-color, $alpha-ios-high) !default; // TODO: @color-mod: remove
$toolbar-ios-border-color: css-var(rgb(0, 0, 0), toolbar-ios-border-color, $alpha-ios-border-medium) !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;

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

@@ -40,15 +40,6 @@ $background-md-color: css-var($background-md-color-value, back
$text-md-color: css-var($text-md-color-value, text-md-color) !default;
$placeholder-text-md-color: css-var($placeholder-text-color, placeholder-text-md-color) !default;
// Generated Foreground and Background Colors for alpha
// These variables are not used, but we call this here in order to add these colors
// to the global list of css variables for a theme. This is only used to get a dump of all
// css variables that the theme uses.
// TODO: @color-mod: remove all of this
// --------------------------------------------------
$background-color-rgb: css-var(color-to-rgb-list($background-md-color-value), background-md-color-rgb) !default;
$text-color-rgb: css-var(color-to-rgb-list($text-md-color-value), text-md-color-rgb) !default;
// Default Material Design Background & Text Color Steps
// --------------------------------------------------
$background-md-color-step-50: css-var(mix($text-md-color-value, $background-md-color-value, 5%), background-md-color-step-50) !default;
@@ -103,7 +94,7 @@ $overlay-md-background-color: css-var(#fafafa, overlay-md-background-c
// --------------------------------------------------
$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-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-border-color: css-var(rgb(0, 0, 0), tabbar-md-border-color, $alpha-md-border-low) !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;
@@ -123,5 +114,3 @@ $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);

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

@@ -19,7 +19,6 @@ $colors: () !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
// - contrast: Color that will provide readable text against the base color
// - shade: 12% darker version of the base color (mix with black)
// - tint: 10% lighter version of the base color (mix with white)
@@ -27,63 +26,54 @@ $ion-colors: (
primary: (
base: $primary,
contrast: #fff,
rgb: color-to-rgb-list($primary),
shade: get-color-shade($primary),
tint: get-color-tint($primary)
),
secondary: (
base: $secondary,
contrast: #fff,
rgb: color-to-rgb-list($secondary),
shade: get-color-shade($secondary),
tint: get-color-tint($secondary)
),
tertiary: (
base: $tertiary,
contrast: #fff,
rgb: color-to-rgb-list($tertiary),
shade: get-color-shade($tertiary),
tint: get-color-tint($tertiary)
),
success: (
base: $success,
contrast: #fff,
rgb: color-to-rgb-list($success),
shade: get-color-shade($success),
tint: get-color-tint($success)
),
warning: (
base: $warning,
contrast: #000,
rgb: color-to-rgb-list($warning),
shade: get-color-shade($warning),
tint: get-color-tint($warning)
),
danger: (
base: $danger,
contrast: #fff,
rgb: color-to-rgb-list($danger),
shade: get-color-shade($danger),
tint: get-color-tint($danger)
),
light: (
base: $light,
contrast: #000,
rgb: color-to-rgb-list($light),
shade: get-color-shade($light),
tint: get-color-tint($light)
),
medium: (
base: $medium,
contrast: #000,
rgb: color-to-rgb-list($medium),
shade: get-color-shade($medium),
tint: get-color-tint($medium)
),
dark: (
base: $dark,
contrast: #fff,
rgb: color-to-rgb-list($dark),
shade: get-color-shade($dark),
tint: get-color-tint($dark)
)
@@ -124,15 +114,6 @@ $background-color: css-var($background-color-value, backgro
$text-color: css-var($text-color-value, text-color) !default;
$placeholder-text-color: css-var(#999, placeholder-text-color) !default;
// Generated Foreground and Background Colors for alpha
// These variables are not used, but we call this here in order to add these colors
// to the global list of css variables for a theme. This is only used to get a dump of all
// css variables that the theme uses.
// TODO: @color-mod: remove all of this
// --------------------------------------------------
$background-color-rgb: css-var(color-to-rgb-list($background-color-value), background-color-rgb) !default; // TODO: @color-mod: remove
$text-color-rgb: css-var(color-to-rgb-list($text-color-value), text-color-rgb) !default; // TODO: @color-mod: remove
// Default Background & Text Color Steps
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards there "opposite" color.