diff --git a/packages/core/scripts/theme-builder/src/components.d.ts b/packages/core/scripts/theme-builder/src/components.d.ts index 7604e5227d..7beccaa2b8 100644 --- a/packages/core/scripts/theme-builder/src/components.d.ts +++ b/packages/core/scripts/theme-builder/src/components.d.ts @@ -8,12 +8,21 @@ import { Color, } from './components/Color'; +declare global { + interface HTMLStencilElement extends HTMLElement { + componentOnReady(): Promise; + componentOnReady(done: (ele?: this) => void): void; + } +} + + + import { AppPreview as AppPreview } from './components/app-preview/app-preview'; declare global { - interface HTMLAppPreviewElement extends AppPreview, HTMLElement { + interface HTMLAppPreviewElement extends AppPreview, HTMLStencilElement { } var HTMLAppPreviewElement: { prototype: HTMLAppPreviewElement; @@ -46,7 +55,7 @@ import { } from './components/css-text/css-text'; declare global { - interface HTMLCssTextElement extends CssText, HTMLElement { + interface HTMLCssTextElement extends CssText, HTMLStencilElement { } var HTMLCssTextElement: { prototype: HTMLCssTextElement; @@ -77,7 +86,7 @@ import { } from './components/demo-selection/demo-selection'; declare global { - interface HTMLDemoSelectionElement extends DemoSelection, HTMLElement { + interface HTMLDemoSelectionElement extends DemoSelection, HTMLStencilElement { } var HTMLDemoSelectionElement: { prototype: HTMLDemoSelectionElement; @@ -109,7 +118,7 @@ import { } from './components/theme-builder/theme-builder'; declare global { - interface HTMLThemeBuilderElement extends ThemeBuilder, HTMLElement { + interface HTMLThemeBuilderElement extends ThemeBuilder, HTMLStencilElement { } var HTMLThemeBuilderElement: { prototype: HTMLThemeBuilderElement; @@ -139,7 +148,7 @@ import { } from './components/theme-selector/theme-selector'; declare global { - interface HTMLThemeSelectorElement extends ThemeSelector, HTMLElement { + interface HTMLThemeSelectorElement extends ThemeSelector, HTMLStencilElement { } var HTMLThemeSelectorElement: { prototype: HTMLThemeSelectorElement; @@ -170,7 +179,7 @@ import { } from './components/variable-selector/variable-selector'; declare global { - interface HTMLVariableSelectorElement extends VariableSelector, HTMLElement { + interface HTMLVariableSelectorElement extends VariableSelector, HTMLStencilElement { } var HTMLVariableSelectorElement: { prototype: HTMLVariableSelectorElement; @@ -192,6 +201,7 @@ declare global { isRgb?: boolean; property?: string; type?: 'color' | 'percent'; + usedWith?: string[]; value?: Color | string | number; } } diff --git a/packages/core/scripts/theme-builder/src/components/Color.ts b/packages/core/scripts/theme-builder/src/components/Color.ts index a01af5b247..7b9456ec19 100644 --- a/packages/core/scripts/theme-builder/src/components/Color.ts +++ b/packages/core/scripts/theme-builder/src/components/Color.ts @@ -1,24 +1,13 @@ interface RGB { - r: number, - g: number, b: number + g: number, + r: number, } interface HSL { h: number, - s: number, l: number -} - - -export declare interface ColorStep { - id: string, - color: Color -} - -export declare interface ColorStepDefinition { - color?: Color, - increments: number[] + s: number, } function componentToHex (c) { @@ -52,6 +41,7 @@ function hslToRGB ({h, s, l}: HSL): RGB { s = s / 100; l = l / 100; if (s == 0) { + l = Math.round(l * 255); return { r: l, g: l, @@ -102,7 +92,7 @@ function rgbToHSL ({r, g, b}: RGB): HSL { b = Math.max(Math.min(b / 255, 1), 0); const max = Math.max(r, g, b), min = Math.min(r, g, b), - l = (max + min) / 2; + l = Math.min(1, Math.max(0, (max + min) / 2)); let d, h, s; if (max !== min) { @@ -132,16 +122,10 @@ function rgbToYIQ ({r, g, b}: RGB): number { export class Color { readonly hex: string; - readonly rgb: RGB; readonly hsl: HSL; + readonly rgb: RGB; readonly yiq: number; - public static isColor (value: string): Boolean { - if (/rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.test(value)) return true; - - return /(^#[0-9a-fA-F]+)/.test(value.trim()); - } - constructor (value: string | RGB | HSL) { if (typeof(value) === 'string' && /rgb\(/.test(value)) { const matches = /rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.exec(value); @@ -172,41 +156,27 @@ export class Color { this.yiq = rgbToYIQ(this.rgb); } + public static isColor (value: string): Boolean { + if (/rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.test(value)) return true; + + return /(^#[0-9a-fA-F]+)/.test(value.trim()); + } + contrast (threshold: number = 128): Color { return new Color((this.yiq >= threshold ? '#000' : '#fff')); } - shiftLightness (percent: number): Color { - const hsl: HSL = Object.assign({}, this.hsl, { - l: this.hsl.l * percent - }); - - return new Color(hsl); + mix (from: string | RGB | HSL | Color, amount: number = .5): Color { + const base: Color = from instanceof Color ? from : new Color(from); + return new Color(mixColors(this, base, amount)); } - tint (percent: number = .1): Color { - percent = 1 + percent; - return this.shiftLightness(percent); + shade (weight: number = .12): Color { + return this.mix({r: 0, g: 0, b: 0}, weight); } - shade (percent: number = .1): Color { - percent = 1 - percent; - return this.shiftLightness(percent); - } - - steps (from: ColorStepDefinition = {increments: [.2, .3, .5, .75]}): ColorStep[] { - const steps: ColorStep[] = [], - mixColor: Color = from.color || new Color((this.yiq > 128 ? '#000' : '#fff')); - - for (let i = 1; i <= from.increments.length; i++) { - const {r, g, b} = mixColors(this, mixColor, from.increments[i - 1]); - steps.push({ - id: (i * 100).toString(), - color: new Color({r,g,b}) - }); - } - - return steps; + tint (weight: number = .1): Color { + return this.mix({r: 255, g: 255, b: 255}, weight); } toList (): string { diff --git a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.js b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.js index 0b0b18f018..3df115c83b 100644 --- a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.js +++ b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.js @@ -1,56 +1,61 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; + var c = arguments.length, + r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; }; -import { Component, Prop, Watch } from '@stencil/core'; +import {Component, Prop, Watch} from '@stencil/core'; + let AppPreview = class AppPreview { - onCssTextChange() { - console.log('AppPreview onCssTextChange'); - this.applyStyles(); - } - applyStyles() { - if (this.iframe && this.iframe.contentDocument && this.iframe.contentDocument.documentElement) { - const iframeDoc = this.iframe.contentDocument; - const themerStyleId = 'themer-style'; - let themerStyle = iframeDoc.getElementById(themerStyleId); - if (!themerStyle) { - themerStyle = iframeDoc.createElement('style'); - themerStyle.id = themerStyleId; - iframeDoc.documentElement.appendChild(themerStyle); - } - themerStyle.innerHTML = this.cssText; - } - } - onIframeLoad() { - this.applyStyles(); - } - render() { - const url = `${this.demoUrl}?ionicplatform=${this.demoMode}`; - return [ - h("div", null, - h("iframe", { src: url, ref: el => this.iframe = el, onLoad: this.onIframeLoad.bind(this) })) - ]; + onCssTextChange () { + console.log('AppPreview onCssTextChange'); + this.applyStyles(); + } + + applyStyles () { + if (this.iframe && this.iframe.contentDocument && this.iframe.contentDocument.documentElement) { + const iframeDoc = this.iframe.contentDocument; + const themerStyleId = 'themer-style'; + let themerStyle = iframeDoc.getElementById(themerStyleId); + if (!themerStyle) { + themerStyle = iframeDoc.createElement('style'); + themerStyle.id = themerStyleId; + iframeDoc.documentElement.appendChild(themerStyle); + } + themerStyle.innerHTML = this.cssText; } + } + + onIframeLoad () { + this.applyStyles(); + } + + render () { + const url = `${this.demoUrl}?ionicplatform=${this.demoMode}`; + return [ + h("div", null, + h("iframe", {src: url, ref: el => this.iframe = el, onLoad: this.onIframeLoad.bind(this)})) + ]; + } }; __decorate([ - Prop() + Prop() ], AppPreview.prototype, "demoUrl", void 0); __decorate([ - Prop() + Prop() ], AppPreview.prototype, "demoMode", void 0); __decorate([ - Prop() + Prop() ], AppPreview.prototype, "cssText", void 0); __decorate([ - Watch('cssText') + Watch('cssText') ], AppPreview.prototype, "onCssTextChange", null); AppPreview = __decorate([ - Component({ - tag: 'app-preview', - styleUrl: 'app-preview.css', - shadow: true - }) + Component({ + tag: 'app-preview', + styleUrl: 'app-preview.css', + shadow: true + }) ], AppPreview); -export { AppPreview }; +export {AppPreview}; diff --git a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx index 3e50b0e5bd..21f49ef4fd 100644 --- a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx +++ b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx @@ -9,14 +9,33 @@ import { Color } from '../Color'; }) export class AppPreview { - @Prop() demoUrl: string; - @Prop() demoMode: string; @Prop() cssText: string; + @Prop() demoMode: string; + @Prop() demoUrl: string; + hasIframeListener: boolean = false; @Prop() hoverProperty: string; + iframe: HTMLIFrameElement; @Event() propertiesUsed: EventEmitter; - iframe: HTMLIFrameElement; - hasIframeListener: boolean = false; + applyStyles () { + if (this.iframe && this.iframe.contentDocument && this.iframe.contentDocument.documentElement) { + const iframeDoc = this.iframe.contentDocument; + const themerStyleId = 'themer-style'; + + let themerStyle: HTMLStyleElement = iframeDoc.getElementById(themerStyleId) as any; + if (!themerStyle) { + themerStyle = iframeDoc.createElement('style'); + themerStyle.id = themerStyleId; + iframeDoc.documentElement.appendChild(themerStyle); + + const applicationStyle = iframeDoc.createElement('style'); + iframeDoc.documentElement.appendChild(applicationStyle); + applicationStyle.innerHTML = 'html.theme-property-searching body * { pointer-events: auto !important}'; + } + + themerStyle.innerHTML = this.cssText; + } + } @Watch('cssText') onCssTextChange () { @@ -36,29 +55,15 @@ export class AppPreview { if (Color.isColor(value)) { el.style.setProperty(this.hoverProperty, '#ff0000'); } else { - el.style.setProperty(this.hoverProperty, parseFloat(value) > .5 ? '.1': '1'); + el.style.setProperty(this.hoverProperty, parseFloat(value) > .5 ? '.1' : '1'); } } } - applyStyles () { - if (this.iframe && this.iframe.contentDocument && this.iframe.contentDocument.documentElement) { - const iframeDoc = this.iframe.contentDocument; - const themerStyleId = 'themer-style'; + onIframeLoad () { + this.applyStyles(); - let themerStyle: HTMLStyleElement = iframeDoc.getElementById(themerStyleId) as any; - if (!themerStyle) { - themerStyle = iframeDoc.createElement('style'); - themerStyle.id = themerStyleId; - iframeDoc.documentElement.appendChild(themerStyle); - - const applicationStyle = iframeDoc.createElement('style'); - iframeDoc.documentElement.appendChild(applicationStyle); - applicationStyle.innerHTML = 'html.theme-property-searching body * { pointer-events: auto !important}' - } - - themerStyle.innerHTML = this.cssText; - } + this.iframe.contentDocument.documentElement.addEventListener('mousemove', this.onIframeMouseMove.bind(this)); } onIframeMouseMove (ev) { @@ -90,29 +95,22 @@ export class AppPreview { this.propertiesUsed.emit({ properties: Array.from(new Set(properties)).filter(prop => !/(-ios-|-md-)/.test(prop)) - }) + }); } } @Listen('body:keyup', {capture: true}) onKeyUp (ev: KeyboardEvent) { - if (!ev.ctrlKey) { + if (ev.keyCode === 17) { const el: HTMLElement = this.iframe.contentDocument.documentElement; el.classList.remove('theme-property-searching'); this.propertiesUsed.emit({ properties: [] - }) + }); } } - - onIframeLoad () { - this.applyStyles(); - - this.iframe.contentDocument.documentElement.addEventListener('mousemove', this.onIframeMouseMove.bind(this)); - } - render () { const url = `${this.demoUrl}?ionicplatform=${this.demoMode}`; diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css index 3d400b497e..39bec6d5b4 100644 --- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css +++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css @@ -7,7 +7,7 @@ h1 { textarea { margin: 12px 0 0 0; - min-width: 300px; + min-width: 360px; height: 680px; font-family: Courier New, Courier, monospace; } @@ -18,3 +18,12 @@ button { font-size: 14px; cursor: pointer; } + +.instructions { + font-size: 12px; + width: 300px; +} + +.instructions p { + padding-left: 8px; +} diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.js b/packages/core/scripts/theme-builder/src/components/css-text/css-text.js index 6f4a8e5ccb..0fed582b87 100644 --- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.js +++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.js @@ -1,79 +1,85 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; + var c = arguments.length, + r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; }; -import { Component, Prop } from '@stencil/core'; -import { STORED_THEME_KEY, deleteCssUrl, getThemeUrl, saveCssUrl } from '../helpers'; +import {Component, Prop} from '@stencil/core'; +import {deleteCssUrl, getThemeUrl, saveCssUrl, STORED_THEME_KEY} from '../helpers'; + let CssText = class CssText { - submitUpdate(ev) { - ev.stopPropagation(); - ev.preventDefault(); - this.saveCss(this.themeName, this.cssText); + submitUpdate (ev) { + ev.stopPropagation(); + ev.preventDefault(); + this.saveCss(this.themeName, this.cssText); + } + + saveCss (themeName, cssText) { + const url = saveCssUrl(themeName, cssText); + fetch(url).then(rsp => { + return rsp.text().then(txt => { + console.log('theme server response:', txt); + }); + }).catch(err => { + console.log(err); + }); + } + + createNew (ev) { + ev.stopPropagation(); + ev.preventDefault(); + const name = prompt(`New theme name:`); + if (name) { + const themeName = name.split('.')[0].trim().toLowerCase(); + if (themeName.length) { + console.log('createNew themeName', themeName); + localStorage.setItem(STORED_THEME_KEY, themeName); + this.saveCss(themeName, this.cssText); + } } - saveCss(themeName, cssText) { - const url = saveCssUrl(themeName, cssText); - fetch(url).then(rsp => { - return rsp.text().then(txt => { - console.log('theme server response:', txt); - }); - }).catch(err => { - console.log(err); + } + + deleteTheme (ev) { + ev.stopPropagation(); + ev.preventDefault(); + const shouldDelete = confirm(`Sure you want to delete "${this.themeName}"?`); + if (shouldDelete) { + const url = deleteCssUrl(this.themeName); + fetch(url).then(rsp => { + return rsp.text().then(txt => { + console.log('theme server response:', txt); }); + }).catch(err => { + console.log(err); + }); + localStorage.removeItem(STORED_THEME_KEY); } - createNew(ev) { - ev.stopPropagation(); - ev.preventDefault(); - const name = prompt(`New theme name:`); - if (name) { - const themeName = name.split('.')[0].trim().toLowerCase(); - if (themeName.length) { - console.log('createNew themeName', themeName); - localStorage.setItem(STORED_THEME_KEY, themeName); - this.saveCss(themeName, this.cssText); - } - } - } - deleteTheme(ev) { - ev.stopPropagation(); - ev.preventDefault(); - const shouldDelete = confirm(`Sure you want to delete "${this.themeName}"?`); - if (shouldDelete) { - const url = deleteCssUrl(this.themeName); - fetch(url).then(rsp => { - return rsp.text().then(txt => { - console.log('theme server response:', txt); - }); - }).catch(err => { - console.log(err); - }); - localStorage.removeItem(STORED_THEME_KEY); - } - } - render() { - return [ - h("h1", null, getThemeUrl(this.themeName)), - h("div", null, - h("textarea", { readOnly: true, spellcheck: 'false' }, this.cssText)), - h("div", null, - h("button", { type: 'button', onClick: this.submitUpdate.bind(this) }, "Save Theme"), - h("button", { type: 'button', onClick: this.createNew.bind(this) }, "Create"), - h("button", { type: 'button', onClick: this.deleteTheme.bind(this) }, "Delete")) - ]; - } + } + + render () { + return [ + h("h1", null, getThemeUrl(this.themeName)), + h("div", null, + h("textarea", {readOnly: true, spellcheck: 'false'}, this.cssText)), + h("div", null, + h("button", {type: 'button', onClick: this.submitUpdate.bind(this)}, "Save Theme"), + h("button", {type: 'button', onClick: this.createNew.bind(this)}, "Create"), + h("button", {type: 'button', onClick: this.deleteTheme.bind(this)}, "Delete")) + ]; + } }; __decorate([ - Prop() + Prop() ], CssText.prototype, "themeName", void 0); __decorate([ - Prop() + Prop() ], CssText.prototype, "cssText", void 0); CssText = __decorate([ - Component({ - tag: 'css-text', - styleUrl: 'css-text.css', - shadow: true - }) + Component({ + tag: 'css-text', + styleUrl: 'css-text.css', + shadow: true + }) ], CssText); -export { CssText }; +export {CssText}; diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx b/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx index abc8cd1aa1..67f8de611a 100644 --- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx +++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx @@ -8,28 +8,9 @@ import { deleteCssUrl, getThemeUrl, saveCssUrl, STORED_THEME_KEY } from '../help }) export class CssText { + @Prop() cssText: string; @Element() el: HTMLElement; @Prop() themeName: string; - @Prop() cssText: string; - - submitUpdate (ev: UIEvent) { - ev.stopPropagation(); - ev.preventDefault(); - - this.saveCss(this.themeName, this.cssText); - } - - saveCss (themeName: string, cssText: string) { - const url = saveCssUrl(themeName, cssText); - - fetch(url).then(rsp => { - return rsp.text().then(txt => { - console.log('theme server response:', txt); - }); - }).catch(err => { - console.log(err); - }); - } createNew (ev: UIEvent) { ev.stopPropagation(); @@ -82,7 +63,34 @@ export class CssText { + , +
+

Instructions

+

Primary CSS Properties will highlight on hover.

+

CTRL + Hover: Property
Will visibly toggle color in preview.

+

CTRL + Hover: Preview
Will visibly highlight properties used under the mouse.

+

ALT + Double Click: Primary Property
Auto generate steps or shade/tint/contrast + variations.

]; } + + saveCss (themeName: string, cssText: string) { + const url = saveCssUrl(themeName, cssText); + + fetch(url).then(rsp => { + return rsp.text().then(txt => { + console.log('theme server response:', txt); + }); + }).catch(err => { + console.log(err); + }); + } + + submitUpdate (ev: UIEvent) { + ev.stopPropagation(); + ev.preventDefault(); + + this.saveCss(this.themeName, this.cssText); + } } diff --git a/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.js b/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.js index 7b2a465d13..a87bf1dd00 100644 --- a/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.js +++ b/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.js @@ -1,47 +1,54 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; + var c = arguments.length, + r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; }; -import { Component, Event, Prop } from '@stencil/core'; +import {Component, Event, Prop} from '@stencil/core'; + let DemoSelection = class DemoSelection { - onChangeUrl(ev) { - this.demoUrlChange.emit(ev.currentTarget.value); - } - onChangeMode(ev) { - this.demoModeChange.emit(ev.currentTarget.value); - } - render() { - return [ - h("div", null, - h("select", { onChange: this.onChangeUrl.bind(this) }, this.demoData.map(d => h("option", { value: d.url, selected: d.url === this.demoUrl }, d.name))), - h("select", { onChange: this.onChangeMode.bind(this) }, - h("option", { value: 'md', selected: 'md' === this.demoMode }, "md"), - h("option", { value: 'ios', selected: 'ios' === this.demoMode }, "ios"))) - ]; - } + onChangeUrl (ev) { + this.demoUrlChange.emit(ev.currentTarget.value); + } + + onChangeMode (ev) { + this.demoModeChange.emit(ev.currentTarget.value); + } + + render () { + return [ + h("div", null, + h("select", {onChange: this.onChangeUrl.bind(this)}, this.demoData.map(d => h("option", { + value: d.url, + selected: d.url === this.demoUrl + }, d.name))), + h("select", {onChange: this.onChangeMode.bind(this)}, + h("option", {value: 'md', selected: 'md' === this.demoMode}, "md"), + h("option", {value: 'ios', selected: 'ios' === this.demoMode}, "ios"))) + ]; + } }; __decorate([ - Prop() + Prop() ], DemoSelection.prototype, "demoData", void 0); __decorate([ - Prop() + Prop() ], DemoSelection.prototype, "demoUrl", void 0); __decorate([ - Prop() + Prop() ], DemoSelection.prototype, "demoMode", void 0); __decorate([ - Event() + Event() ], DemoSelection.prototype, "demoUrlChange", void 0); __decorate([ - Event() + Event() ], DemoSelection.prototype, "demoModeChange", void 0); DemoSelection = __decorate([ - Component({ - tag: 'demo-selection', - styleUrl: 'demo-selection.css', - shadow: true - }) + Component({ + tag: 'demo-selection', + styleUrl: 'demo-selection.css', + shadow: true + }) ], DemoSelection); -export { DemoSelection }; +export {DemoSelection}; diff --git a/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.tsx b/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.tsx index 5383f5297c..a32057920b 100644 --- a/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.tsx +++ b/packages/core/scripts/theme-builder/src/components/demo-selection/demo-selection.tsx @@ -9,20 +9,20 @@ import { Component, Event, EventEmitter, Prop } from '@stencil/core'; export class DemoSelection { @Prop() demoData: { name: string, url: string }[]; - @Prop() demoUrl: string; @Prop() demoMode: string; - @Event() demoUrlChange: EventEmitter; @Event() demoModeChange: EventEmitter; + @Prop() demoUrl: string; + @Event() demoUrlChange: EventEmitter; - onChangeUrl(ev) { - this.demoUrlChange.emit(ev.currentTarget.value); - } - - onChangeMode(ev) { + onChangeMode (ev) { this.demoModeChange.emit(ev.currentTarget.value); } - render() { + onChangeUrl (ev) { + this.demoUrlChange.emit(ev.currentTarget.value); + } + + render () { return [
@@ -31,8 +31,8 @@ export class DemoSelection {
diff --git a/packages/core/scripts/theme-builder/src/components/helpers.ts b/packages/core/scripts/theme-builder/src/components/helpers.ts index afcaf76caf..ac45363cf8 100644 --- a/packages/core/scripts/theme-builder/src/components/helpers.ts +++ b/packages/core/scripts/theme-builder/src/components/helpers.ts @@ -1,4 +1,3 @@ - export const SERVER_DOMAIN = `http://localhost:5454`; export const DATA_URL = `${SERVER_DOMAIN}/data`; export const COLOR_URL = `${SERVER_DOMAIN}/color`; @@ -6,16 +5,16 @@ export const SAVE_CSS_URL = `${SERVER_DOMAIN}/save-css`; export const DELETE_CSS_URL = `${SERVER_DOMAIN}/delete-css`; export const CSS_THEME_FILE_PATH = `/src/themes/css`; -export function saveCssUrl(themeName: string, cssText: string) { +export function saveCssUrl (themeName: string, cssText: string) { cssText = encodeURIComponent(cssText); return `${SAVE_CSS_URL}?theme=${themeName}&css=${cssText}`; } -export function deleteCssUrl(themeName: string) { +export function deleteCssUrl (themeName: string) { return `${DELETE_CSS_URL}?theme=${themeName}`; } -export function getThemeUrl(themeName: string) { +export function getThemeUrl (themeName: string) { return `${CSS_THEME_FILE_PATH}/${themeName}.css`; } diff --git a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css index 85863334b2..4c3f13aa68 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css +++ b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css @@ -17,4 +17,8 @@ main > section { max-width: 600px; height: 100%; overflow-y: scroll; -} \ No newline at end of file +} + +#css-proxy { + display: none; +} diff --git a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.js b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.js index ffb7029a05..9775345201 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.js +++ b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.js @@ -1,88 +1,96 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; + var c = arguments.length, + r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; }; -import { Component, Listen, State } from '@stencil/core'; -import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers'; +import {Component, Listen, State} from '@stencil/core'; +import {DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY} from '../helpers'; + let ThemeBuilder = class ThemeBuilder { - constructor() { - this.cssText = ''; - this.themeName = ''; - } - componentWillLoad() { - return fetch(DATA_URL).then(rsp => { - return rsp.json().then(data => { - this.demoData = data.demos; - this.themeData = data.themes; - this.initUrl(); - }); - }).catch(err => { - console.log('ThemeBuilder componentWillLoad', err); - }); - } - initUrl() { - console.log('ThemeBuilder initUrl'); - const storedUrl = localStorage.getItem(STORED_DEMO_URL_KEY); - const defaultUrl = this.demoData[0].url; - this.demoUrl = storedUrl || defaultUrl; - const storedMode = localStorage.getItem(STORED_DEMO_MODE_KEY); - const defaultMode = 'md'; - this.demoMode = storedMode || defaultMode; - } - onDemoUrlChange(ev) { - this.demoUrl = ev.detail; - localStorage.setItem(STORED_DEMO_URL_KEY, this.demoUrl); - } - onDemoModeChange(ev) { - this.demoMode = ev.detail; - localStorage.setItem(STORED_DEMO_MODE_KEY, this.demoMode); - } - onThemeCssChange(ev) { - this.cssText = ev.detail.cssText; - this.themeName = ev.detail.themeName; - console.log('ThemeBuilder themeCssChange', this.themeName); - } - render() { - return [ - h("main", null, - h("section", { class: 'preview-column' }, - h("demo-selection", { demoData: this.demoData, demoUrl: this.demoUrl, demoMode: this.demoMode }), - h("app-preview", { demoUrl: this.demoUrl, demoMode: this.demoMode, cssText: this.cssText })), - h("section", { class: 'selector-column' }, - h("theme-selector", { themeData: this.themeData })), - h("section", null, - h("css-text", { themeName: this.themeName, cssText: this.cssText }))) - ]; - } + constructor () { + this.cssText = ''; + this.themeName = ''; + } + + componentWillLoad () { + return fetch(DATA_URL).then(rsp => { + return rsp.json().then(data => { + this.demoData = data.demos; + this.themeData = data.themes; + this.initUrl(); + }); + }).catch(err => { + console.log('ThemeBuilder componentWillLoad', err); + }); + } + + initUrl () { + console.log('ThemeBuilder initUrl'); + const storedUrl = localStorage.getItem(STORED_DEMO_URL_KEY); + const defaultUrl = this.demoData[0].url; + this.demoUrl = storedUrl || defaultUrl; + const storedMode = localStorage.getItem(STORED_DEMO_MODE_KEY); + const defaultMode = 'md'; + this.demoMode = storedMode || defaultMode; + } + + onDemoUrlChange (ev) { + this.demoUrl = ev.detail; + localStorage.setItem(STORED_DEMO_URL_KEY, this.demoUrl); + } + + onDemoModeChange (ev) { + this.demoMode = ev.detail; + localStorage.setItem(STORED_DEMO_MODE_KEY, this.demoMode); + } + + onThemeCssChange (ev) { + this.cssText = ev.detail.cssText; + this.themeName = ev.detail.themeName; + console.log('ThemeBuilder themeCssChange', this.themeName); + } + + render () { + return [ + h("main", null, + h("section", {class: 'preview-column'}, + h("demo-selection", {demoData: this.demoData, demoUrl: this.demoUrl, demoMode: this.demoMode}), + h("app-preview", {demoUrl: this.demoUrl, demoMode: this.demoMode, cssText: this.cssText})), + h("section", {class: 'selector-column'}, + h("theme-selector", {themeData: this.themeData})), + h("section", null, + h("css-text", {themeName: this.themeName, cssText: this.cssText}))) + ]; + } }; __decorate([ - State() + State() ], ThemeBuilder.prototype, "demoUrl", void 0); __decorate([ - State() + State() ], ThemeBuilder.prototype, "demoMode", void 0); __decorate([ - State() + State() ], ThemeBuilder.prototype, "cssText", void 0); __decorate([ - State() + State() ], ThemeBuilder.prototype, "themeName", void 0); __decorate([ - Listen('demoUrlChange') + Listen('demoUrlChange') ], ThemeBuilder.prototype, "onDemoUrlChange", null); __decorate([ - Listen('demoModeChange') + Listen('demoModeChange') ], ThemeBuilder.prototype, "onDemoModeChange", null); __decorate([ - Listen('themeCssChange') + Listen('themeCssChange') ], ThemeBuilder.prototype, "onThemeCssChange", null); ThemeBuilder = __decorate([ - Component({ - tag: 'theme-builder', - styleUrl: 'theme-builder.css', - shadow: true - }) + Component({ + tag: 'theme-builder', + styleUrl: 'theme-builder.css', + shadow: true + }) ], ThemeBuilder); -export { ThemeBuilder }; +export {ThemeBuilder}; diff --git a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx index 5ef9f3fe1d..4f5ef7a507 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx +++ b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx @@ -1,4 +1,4 @@ -import { Component, Listen, State } from '@stencil/core'; +import { Component, Listen, State } from '@stencil/core'; import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers'; @@ -9,17 +9,16 @@ import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers' }) export class ThemeBuilder { - demoData: { name: string, url: string }[]; - themeData: { name: string }[]; - - @State() demoUrl: string; - @State() demoMode: string; @State() cssText: string = ''; + demoData: { name: string, url: string }[]; + @State() demoMode: string; + @State() demoUrl: string; @State() hoverProperty: string; @State() propertiesUsed: string[]; + themeData: { name: string }[]; @State() themeName: string = ''; - componentWillLoad() { + componentWillLoad () { return fetch(DATA_URL).then(rsp => { return rsp.json().then(data => { this.demoData = data.demos; @@ -31,7 +30,7 @@ export class ThemeBuilder { }); } - initUrl() { + initUrl () { console.log('ThemeBuilder initUrl'); const storedUrl = localStorage.getItem(STORED_DEMO_URL_KEY); const defaultUrl = this.demoData[0].url; @@ -42,50 +41,51 @@ export class ThemeBuilder { this.demoMode = storedMode || defaultMode; } - @Listen('demoUrlChange') - onDemoUrlChange(ev) { - this.demoUrl = ev.detail; - localStorage.setItem(STORED_DEMO_URL_KEY, this.demoUrl); - } - @Listen('demoModeChange') - onDemoModeChange(ev) { + onDemoModeChange (ev) { this.demoMode = ev.detail; localStorage.setItem(STORED_DEMO_MODE_KEY, this.demoMode); } + @Listen('demoUrlChange') + onDemoUrlChange (ev) { + this.demoUrl = ev.detail; + localStorage.setItem(STORED_DEMO_URL_KEY, this.demoUrl); + } + + @Listen('propertiesUsed') + onPropertiesUsed (ev) { + this.propertiesUsed = ev.detail.properties; + } + + @Listen('propertyHoverStart') + onPropertyHoverStart (ev) { + this.hoverProperty = ev.detail.property; + } + + @Listen('propertyHoverStop') + onPropertyHoverStop () { + this.hoverProperty = undefined; + } + @Listen('themeCssChange') - onThemeCssChange(ev) { + onThemeCssChange (ev) { this.cssText = ev.detail.cssText; this.themeName = ev.detail.themeName; console.log('ThemeBuilder themeCssChange', this.themeName); } - @Listen('propertyHoverStart') - onPropertyHoverStart(ev) { - this.hoverProperty = ev.detail.property; - } - - @Listen('propertyHoverStop') - onPropertyHoverStop() { - this.hoverProperty = undefined; - } - - @Listen('propertiesUsed') - onPropertiesUsed(ev) { - this.propertiesUsed = ev.detail.properties; - } - - render() { + render () { return [
-
+
- +
-
+
diff --git a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.css b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.css index 357b0e0d92..a553cc35ae 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.css +++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.css @@ -47,7 +47,7 @@ section { .color:after { position: absolute; top: 0; - content: "#" attr(data-color); + content: attr(data-color); pointer-events: none; font-size: 12px; text-shadow: rgba(255, 255, 255, .5) 1px 1px; @@ -79,54 +79,11 @@ section { cursor: pointer; opacity: .5; text-shadow: rgba(255, 255, 255, .5) 1px 1px; -} - -.color-buttons button.primary { - background-color: var(--ion-color-primary); -} - -.color-buttons button.secondary { - background-color: var(--ion-color-secondary); -} - -.color-buttons button.tertiary { - background-color: var(--ion-color-tertiary); -} - -.color-buttons button.success { - background-color: var(--ion-color-success); -} - -.color-buttons button.warning { - background-color: var(--ion-color-warning); -} - -.color-buttons button.danger { - background-color: var(--ion-color-danger); -} - -.color-buttons button.light { - background-color: var(--ion-color-light); -} - -.color-buttons button.medium { - background-color: var(--ion-color-medium); -} - -.color-buttons button.dark { - background-color: var(--ion-color-dark); -} - -.color-buttons button.background { - background-color: var(--ion-background-color); -} - -.color-buttons button.text { - background-color: var(--ion-text-color); + box-shadow: rgba(0, 0, 0, .5) 1px 1px; } .color-buttons button:hover { - background-color: rgba(161, 60, 68, 0.53); + opacity: .8; } .top-bar { @@ -150,3 +107,27 @@ section { display: inline-block; font-size: 11px; } + +.checkbox { + padding: 8px 8px 0 0; + font-size: 10px; + color: #333333; + width: 100px; +} + +.settings { + display: flex; + flex-direction: column; +} + +.settings .row { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.right { + display: flex; + flex-direction: column; + justify-content: flex-end; +} diff --git a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.js b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.js index 5b6d975343..96c05f13e0 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.js +++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.js @@ -1,130 +1,142 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; + var c = arguments.length, + r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; }; -import { Component, Event, Listen, Prop, State } from '@stencil/core'; -import { THEME_VARIABLES } from '../../theme-variables'; +import {Component, Event, Listen, Prop, State} from '@stencil/core'; +import {THEME_VARIABLES} from '../../theme-variables'; import * as Helpers from '../helpers'; + console.log(Helpers); let ThemeSelector = class ThemeSelector { - constructor() { - this.themeVariables = []; - } - onChangeUrl(ev) { - this.themeName = ev.currentTarget.value; - localStorage.setItem(Helpers.STORED_THEME_KEY, this.themeName); - this.loadThemeCss(); - } - componentWillLoad() { - const storedThemeName = localStorage.getItem(Helpers.STORED_THEME_KEY); - const defaultThemeName = this.themeData[0].name; - this.themeName = storedThemeName || defaultThemeName; - this.loadThemeCss(); - } - loadThemeCss() { - console.log('ThemeSelector loadThemeCss'); - const themeUrl = Helpers.getThemeUrl(this.themeName); - return fetch(themeUrl).then(rsp => { - return rsp.text().then(css => { - this.parseCss(css); - this.generateCss(); - }); - }); - } - parseCss(css) { - console.log('ThemeSelector parseCss'); - const themer = document.getElementById('themer'); - themer.innerHTML = css; - const computed = window.getComputedStyle(document.body); - this.themeVariables = THEME_VARIABLES.map(themeVariable => { - const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR); - return { - property: themeVariable.property.trim(), - value: value, - type: themeVariable.type, - computed: themeVariable.computed, - isRgb: value.indexOf('rgb') > -1 - }; - }); - } - generateCss() { - console.log('ThemeSelector generateCss', this.themeName); - const c = []; - c.push(`/** ${this.themeName} theme **/`); - c.push(`\n`); - c.push(':root {'); - this.themeVariables.forEach(themeVariable => { - themeVariable.value = Helpers.cleanCssValue(themeVariable.value); - c.push(` ${themeVariable.property}: ${themeVariable.value};`); - }); - c.push('}'); - const cssText = c.join('\n'); - this.themeCssChange.emit({ - cssText: cssText, - themeName: this.themeName - }); - } - onColorChange(ev) { - console.log('ThemeSelector colorChange'); - this.themeVariables = this.themeVariables.map(themeVariable => { - let value = themeVariable.value; - if (ev.detail.property === themeVariable.property) { - value = ev.detail.value; - } - return { - property: themeVariable.property, - value: value, - type: themeVariable.type, - computed: themeVariable.computed, - isRgb: themeVariable.isRgb - }; - }); - this.themeVariables - .filter(themeVariable => !!themeVariable.computed) - .forEach(themeVariable => { - const computed = themeVariable.computed || {}, fn = computed.fn, params = computed.params; - if (Helpers[fn]) { - themeVariable.value = Helpers[fn].apply(fn, params); - } - else { - console.log(`Unknown Helpers Function '${fn}'`); - } - }); + constructor () { + this.themeVariables = []; + } + + onChangeUrl (ev) { + this.themeName = ev.currentTarget.value; + localStorage.setItem(Helpers.STORED_THEME_KEY, this.themeName); + this.loadThemeCss(); + } + + componentWillLoad () { + const storedThemeName = localStorage.getItem(Helpers.STORED_THEME_KEY); + const defaultThemeName = this.themeData[0].name; + this.themeName = storedThemeName || defaultThemeName; + this.loadThemeCss(); + } + + loadThemeCss () { + console.log('ThemeSelector loadThemeCss'); + const themeUrl = Helpers.getThemeUrl(this.themeName); + return fetch(themeUrl).then(rsp => { + return rsp.text().then(css => { + this.parseCss(css); this.generateCss(); - } - render() { - return [ - h("div", null, - h("select", { onChange: this.onChangeUrl.bind(this) }, this.themeData.map(d => h("option", { value: d.name, selected: this.themeName === d.name }, d.name))), - h("section", null, this.themeVariables - .filter(d => !d.computed) - .map(d => h("variable-selector", { property: d.property, value: d.value, isRgb: d.isRgb, type: d.type })))) - ]; - } + }); + }); + } + + parseCss (css) { + console.log('ThemeSelector parseCss'); + const themer = document.getElementById('themer'); + themer.innerHTML = css; + const computed = window.getComputedStyle(document.body); + this.themeVariables = THEME_VARIABLES.map(themeVariable => { + const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR); + return { + property: themeVariable.property.trim(), + value: value, + type: themeVariable.type, + computed: themeVariable.computed, + isRgb: value.indexOf('rgb') > -1 + }; + }); + } + + generateCss () { + console.log('ThemeSelector generateCss', this.themeName); + const c = []; + c.push(`/** ${this.themeName} theme **/`); + c.push(`\n`); + c.push(':root {'); + this.themeVariables.forEach(themeVariable => { + themeVariable.value = Helpers.cleanCssValue(themeVariable.value); + c.push(` ${themeVariable.property}: ${themeVariable.value};`); + }); + c.push('}'); + const cssText = c.join('\n'); + this.themeCssChange.emit({ + cssText: cssText, + themeName: this.themeName + }); + } + + onColorChange (ev) { + console.log('ThemeSelector colorChange'); + this.themeVariables = this.themeVariables.map(themeVariable => { + let value = themeVariable.value; + if (ev.detail.property === themeVariable.property) { + value = ev.detail.value; + } + return { + property: themeVariable.property, + value: value, + type: themeVariable.type, + computed: themeVariable.computed, + isRgb: themeVariable.isRgb + }; + }); + this.themeVariables + .filter(themeVariable => !!themeVariable.computed) + .forEach(themeVariable => { + const computed = themeVariable.computed || {}, fn = computed.fn, params = computed.params; + if (Helpers[fn]) { + themeVariable.value = Helpers[fn].apply(fn, params); + } + else { + console.log(`Unknown Helpers Function '${fn}'`); + } + }); + this.generateCss(); + } + + render () { + return [ + h("div", null, + h("select", {onChange: this.onChangeUrl.bind(this)}, this.themeData.map(d => h("option", { + value: d.name, + selected: this.themeName === d.name + }, d.name))), + h("section", null, this.themeVariables + .filter(d => !d.computed) + .map(d => h("variable-selector", {property: d.property, value: d.value, isRgb: d.isRgb, type: d.type})))) + ]; + } }; __decorate([ - State() + State() ], ThemeSelector.prototype, "themeName", void 0); __decorate([ - State() + State() ], ThemeSelector.prototype, "themeVariables", void 0); __decorate([ - Prop() + Prop() ], ThemeSelector.prototype, "themeData", void 0); __decorate([ - Event() + Event() ], ThemeSelector.prototype, "themeCssChange", void 0); __decorate([ - Listen('colorChange') + Listen('colorChange') ], ThemeSelector.prototype, "onColorChange", null); ThemeSelector = __decorate([ - Component({ - tag: 'theme-selector', - styleUrl: 'theme-selector.css', - shadow: true - }) + Component({ + tag: 'theme-selector', + styleUrl: 'theme-selector.css', + shadow: true + }) ], ThemeSelector); -export { ThemeSelector }; +export {ThemeSelector}; const PLACEHOLDER_COLOR = `#ff00ff`; diff --git a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx index 8f3b276d22..d08015520b 100644 --- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx +++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx @@ -1,14 +1,8 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, State } from '@stencil/core'; -import { THEME_VARIABLES } from '../../theme-variables'; -import { Color, ColorStep } from '../Color'; +import { ComputedType, THEME_VARIABLES, ThemeVariable } from '../../theme-variables'; +import { Color } from '../Color'; import { COLOR_URL, getThemeUrl, STORED_THEME_KEY } from '../helpers'; -interface ThemeVariable { - property: string; - value?: Color | number | string; - computed?: string; -} - const PLACEHOLDER_COLOR = '#ff00ff'; @Component({ @@ -19,62 +13,49 @@ const PLACEHOLDER_COLOR = '#ff00ff'; export class ThemeSelector { @Element() el: HTMLThemeSelectorElement; - @State() themeName: string; - @State() themeVariables: ThemeVariable[] = []; - @State() searchMode: boolean; + @State() generateContrast: boolean = false; + @State() generateSteps: boolean = true; + @State() generateVariations: boolean = true; @State() palettes: any[]; @Prop() propertiesUsed: string[] = []; - @Prop() themeData: { name: string }[]; - @Event() themeCssChange: EventEmitter; @Event() propertyHoverStart: EventEmitter; @Event() propertyHoverStop: EventEmitter; - + @State() searchMode: boolean; + @State() showSteps: boolean = true; + @Event() themeCssChange: EventEmitter; + @Prop() themeData: { name: string }[]; + @State() themeName: string; + @State() themeVariables: ThemeVariable[] = []; private currentHoveredProperty: string; + private cssHolder: HTMLStyleElement; + private proxyElement: HTMLElement; - async onChangeUrl (ev) { - this.themeName = ev.currentTarget.value; - localStorage.setItem(STORED_THEME_KEY, this.themeName); + changeColor (property: string, value: Color | string) { + this.themeVariables = this.themeVariables.map(themeVariable => { + if (property === themeVariable.property) { + return Object.assign({}, themeVariable, { + value: value instanceof Color ? value : themeVariable.value instanceof Color ? new Color(value) : value + }); + } + return themeVariable; + }); - await this.loadThemeCss(); + this.updateComputed(property); + this.generateCss(); } - async componentWillLoad () { + async componentDidLoad () { const storedThemeName = localStorage.getItem(STORED_THEME_KEY); const defaultThemeName = this.themeData[0].name; + this.cssHolder = document.createElement('style'); + this.el.insertBefore(this.cssHolder, this.el.firstChild); + this.themeName = storedThemeName || defaultThemeName; await this.loadThemeCss(); } - async loadThemeCss () { - console.log('ThemeSelector loadThemeCss'); - - const themeUrl = getThemeUrl(this.themeName); - - const css = await fetch(themeUrl).then(r => r.text()); - this.parseCss(css); - this.generateCss(); - } - - parseCss (css: string) { - console.log('ThemeSelector parseCss'); - - const themer = document.getElementById('themer') as HTMLStyleElement; - themer.innerHTML = css; - - const computed = window.getComputedStyle(document.body); - - this.themeVariables = THEME_VARIABLES.map(themeVariable => { - const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR); - - return Object.assign({}, themeVariable, { - property: themeVariable.property.trim(), - value: themeVariable.computed ? value : (!Color.isColor(value) ? parseFloat(value) : new Color(value)) - }); - }); - } - generateCss () { console.log('ThemeSelector generateCss', this.themeName); @@ -84,8 +65,11 @@ export class ThemeSelector { c.push(':root {'); this.themeVariables.forEach(themeVariable => { - const value = themeVariable.value; - c.push(` ${themeVariable.property}: ${value instanceof Color ? value.hex : value};`); + const variableValue = themeVariable.value, + value = variableValue instanceof Color ? variableValue.hex : variableValue; + c.push(` ${themeVariable.property}: ${value};`); + + this.el.style.setProperty(themeVariable.property, value.toString()); }); c.push('}'); @@ -119,34 +103,45 @@ export class ThemeSelector { } } + isVariableDependentOn (property: string, variable: ThemeVariable) { + const params = (variable.computed && variable.computed && variable.computed.params) || {}; + if (!property) return true; + return (variable.property === property || params.from === property || params.property === property); + } + + async loadThemeCss () { + console.log('ThemeSelector loadThemeCss'); + + const themeUrl = getThemeUrl(this.themeName); + + const css = await fetch(themeUrl).then(r => r.text()); + this.parseCss(css); + this.generateCss(); + } + + async onChangeUrl (ev) { + this.themeName = ev.currentTarget.value; + localStorage.setItem(STORED_THEME_KEY, this.themeName); + + await this.loadThemeCss(); + } + @Listen('colorChange') onColorChange (ev) { console.log('ThemeSelector colorChange'); this.changeColor(ev.detail.property, ev.detail.value); } - changeColor (property: string, value: Color | string) { - this.themeVariables = this.themeVariables.map(themeVariable => { - if (property === themeVariable.property) { - return Object.assign({}, themeVariable, { - value: value instanceof Color ? value : themeVariable.value instanceof Color ? new Color(value) : value - }); - } - return themeVariable; - }); + onColorClick (ev: MouseEvent) { + let target: HTMLElement = ev.currentTarget as HTMLElement; + const property = target.getAttribute('data-property'); - this.themeVariables - .filter(themeVariable => !!themeVariable.computed) - .forEach(themeVariable => { - const computed = themeVariable.computed, - referenceVariable = this.themeVariables.find(themeVariable => themeVariable.property === computed), - value = referenceVariable.value; - if (value instanceof Color) { - themeVariable.value = value.toList(); - } - }); + while (target && !target.classList.contains('color')) { + target = target.parentElement as HTMLElement; + } - this.generateCss(); + const color = target.getAttribute('data-color'); + this.changeColor(property, color.toLowerCase()); } @Listen('generateColors') @@ -157,23 +152,27 @@ export class ThemeSelector { if (color && property) { if (steps) { - const steps: ColorStep[] = color.steps(); - steps.forEach((step: ColorStep) => { - const themeVariable: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-step-${step.id}`); - themeVariable && (themeVariable.value = step.color); + this.themeVariables.filter((variable: ThemeVariable) => { + const type: ComputedType = variable.computed && variable.computed.type, + params = (variable.computed && variable.computed.params) || {}; + + if (type === ComputedType.step && params.property === property) { + return variable; + } + }).forEach((variable: ThemeVariable) => { + const params: any = variable.computed.params || {}, + stepFromVariable: ThemeVariable = this.themeVariables.find(themeVariable => themeVariable.property === params.from), + stepFromValue = stepFromVariable && stepFromVariable.value; + + if (stepFromValue instanceof Color) { + variable.value = color.mix(stepFromValue, params.amount); + } }); } else { - const tint: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-tint`), - shade: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-shade`), - contrast: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-contrast`); - - tint && (tint.value = color.tint()); - shade && (shade.value = color.shade()); - contrast && (contrast.value = color.contrast()); + this.updateVariations(property, color); } this.generateCss(); - //TODO: Figure out why we need this typed to any (this.el as any).forceUpdate(); } } @@ -208,34 +207,21 @@ export class ThemeSelector { } } - toggleSearchMode () { - this.searchMode = !this.searchMode; - } + parseCss (css: string) { + console.log('ThemeSelector parseCss'); - async search () { - const input: HTMLInputElement = this.el.querySelector('#searchInput') as HTMLInputElement, - value = input.value; + this.cssHolder.innerHTML = css.replace(':root', `#${this.proxyElement.id}`); + const computed = window.getComputedStyle(this.proxyElement); - input.value = ''; + this.themeVariables = THEME_VARIABLES.map(themeVariable => { + const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR), + type: string = (themeVariable.computed && themeVariable.computed.type) || (!Color.isColor(value) ? 'percent' : 'color'); - try { - this.palettes = await fetch(`${COLOR_URL}?search=${value}&stuff=poop`).then(r => r.json()) || []; - } catch (e) { - this.palettes = []; - } - } - - onColorClick (ev: MouseEvent) { - console.log(ev); - let target: HTMLElement = ev.currentTarget as HTMLElement; - const property = target.getAttribute('data-property'); - - while (target && !target.classList.contains('color')) { - target = target.parentElement as HTMLElement; - } - - const color = target.getAttribute('data-color'); - this.changeColor(property, color); + return Object.assign({}, themeVariable, { + property: themeVariable.property.trim(), + value: type === 'color' || type === ComputedType.step ? new Color(value) : type === 'percent' ? parseFloat(value) : value + }); + }); } render () { @@ -244,9 +230,17 @@ export class ThemeSelector { variables =
{ this.themeVariables - .filter(d => !d.computed) - .map(d => = 0 ? 'used' : ''} - property={d.property} value={d.value}>) + .filter(d => !(d.computed && (d.computed.type === ComputedType.rgblist || (d.computed.type === ComputedType.step && !this.showSteps)))) + .map(d => { + const computedReferences: ComputedType[] = this.themeVariables + .filter(variable => variable.computed && variable.computed.params && variable.computed.params.property === d.property) + .map(variable => variable.computed.type); + + return = 0}} + property={d.property} value={d.value} + usedWith={Array.from(new Set(computedReferences))}>; + }) }
, search =
@@ -260,17 +254,12 @@ export class ThemeSelector { {(d.colors || []).map((c: string) =>
- - - - - - - - - - - + {this.themeVariables + .filter(variable => !!variable.quickPick) + .map(variable => ) + }
)} ) @@ -280,17 +269,118 @@ export class ThemeSelector {
; return [ +
this.proxyElement = el}>
,
- +
+ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
{this.searchMode ? search : variables}
]; } + + async search () { + const input: HTMLInputElement = this.el.querySelector('#searchInput') as HTMLInputElement, + value = input.value; + + input.value = ''; + + try { + this.palettes = await fetch(`${COLOR_URL}?search=${value}`).then(r => r.json()) || []; + } catch (e) { + this.palettes = []; + } + } + + toggleCheck (param: string, ev: Event) { + this[param] = (ev.target as HTMLInputElement).checked; + } + + toggleSearchMode () { + this.searchMode = !this.searchMode; + } + + updateComputed (property?: string) { + this.themeVariables + .filter(themeVariable => !!themeVariable.computed && this.isVariableDependentOn(property, themeVariable)) + .forEach(themeVariable => { + const computed = themeVariable.computed, + type: ComputedType = computed.type, + params = computed.params || {}; + + if (type === ComputedType.rgblist) { + const referenceVariable: ThemeVariable = this.themeVariables.find(themeVariable => themeVariable.property === params.property), + value = referenceVariable && referenceVariable.value; + + if (value instanceof Color) { + themeVariable.value = value.toList(); + } + } else if (this.generateSteps && type === ComputedType.step) { + const referenceVariable: ThemeVariable = this.themeVariables.find(themeVariable => themeVariable.property === params.property), + stepFromVariable: ThemeVariable = this.themeVariables.find(themeVariable => themeVariable.property === params.from), + referenceValue = referenceVariable && referenceVariable.value, + fromValue = stepFromVariable && stepFromVariable.value; + + if (referenceValue instanceof Color && (typeof(fromValue) === 'string' || fromValue instanceof Color)) { + themeVariable.value = referenceValue.mix(fromValue, params.amount); + } + } + }); + + if (this.generateVariations) { + this.themeVariables + .filter(themeVariable => !themeVariable.computed && this.isVariableDependentOn(property, themeVariable)) + .forEach(themeVariable => { + const property: string = themeVariable.property, + color: Color = themeVariable.value as Color; + this.updateVariations(property, color); + }); + } + } + + updateVariations (property: string, color: Color) { + const tint: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-tint`), + shade: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-shade`); + + tint && (tint.value = color.tint()); + shade && (shade.value = color.shade()); + + if (this.generateContrast) { + const contrast: ThemeVariable = this.themeVariables.find((variable: ThemeVariable) => variable.property === `${property}-contrast`); + contrast && (contrast.value = color.contrast()); + } + } }; diff --git a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css index 81dc3dfd74..1c950ab591 100644 --- a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css +++ b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.css @@ -23,22 +23,30 @@ input[type="text"] { } input[type="color"] { - -webkit-appearance: none; - border: none; - width: 64px; + -webkit-appearance: none; + border: none; + width: 64px; height: 20px; outline: none; background: transparent; } input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; + padding: 0; } input[type="color"]::-webkit-color-swatch { - border: 1px solid black; + border: 1px solid black; } :host(.used) section { background-color: var(--variable-selector-color, rgba(255, 149, 243, 0.91)); } + +:host(.used) section .property-label { + outline: 1px solid rgba(0, 0, 0, .5); +} + +:host(.is-primary) .property-label:hover { + background-color: rgba(255, 75, 24, 0.16); +} diff --git a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx index 555530c421..cc80d15bb6 100644 --- a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx +++ b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx @@ -1,4 +1,5 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { ComputedType } from '../../theme-variables'; import { Color } from '../Color'; @@ -9,13 +10,14 @@ import { Color } from '. }) export class VariableSelector { + @Event() colorChange: EventEmitter; @Element() el: HTMLElement; + @Event() generateColors: EventEmitter; + @Prop() isRgb: boolean; @Prop() property: string; @Prop() type: 'color' | 'percent'; + @Prop() usedWith: string[]; @Prop({mutable: true}) value: Color | string | number; - @Prop() isRgb: boolean; - @Event() colorChange: EventEmitter; - @Event() generateColors: EventEmitter; @Method() getProperty () { @@ -25,7 +27,6 @@ export class VariableSelector { onChange (ev) { const input: HTMLInputElement = ev.currentTarget, value = ev.currentTarget.value; - if (input.type === 'color') { this.value = new Color(value); } else if (input.type === 'text') { @@ -44,20 +45,15 @@ export class VariableSelector { }); } - @Listen('dblclick') onMouseUp (ev) { if (ev.altKey) { const color = this.value as Color; - if (/(primary|secondary|tertiary|success|warning|danger|light|medium|dark)$/.test(this.property)) { + + if (this.usedWith) { this.generateColors.emit({ color, - property: this.property - }); - } else if (/(^--ion-background-color$|^--ion-text-color$)/.test(this.property)) { - this.generateColors.emit({ - color, - steps: true, + steps: this.usedWith.indexOf(ComputedType.step) >= 0, property: this.property }); } @@ -68,6 +64,7 @@ export class VariableSelector { if (this.value instanceof Color || this.value == null) { const color = this.value && this.value as Color, value = color.hex, {r, g, b} = color.rgb; + this.el.style.setProperty('--variable-selector-color', `rgba(${r}, ${g}, ${b}, .5`); return [
diff --git a/packages/core/scripts/theme-builder/src/index.html b/packages/core/scripts/theme-builder/src/index.html index fae310c616..80519b655c 100644 --- a/packages/core/scripts/theme-builder/src/index.html +++ b/packages/core/scripts/theme-builder/src/index.html @@ -9,7 +9,6 @@ - diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts index f0a0818c0d..a9ab92b9b4 100644 --- a/packages/core/scripts/theme-builder/src/theme-variables.ts +++ b/packages/core/scripts/theme-builder/src/theme-variables.ts @@ -1,4 +1,17 @@ -export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', computed?: string}[] = [ +import { Color } from './components/Color'; +export interface ThemeVariable { + property: string; + quickPick?: {text: string}, + value?: Color | number | string; + computed?: {type: ComputedType, params: any} +} + +export enum ComputedType { + rgblist = 'computed-rgblist', + step = 'computed-step' +} + +export const THEME_VARIABLES: ThemeVariable[] = [ { property: '--ion-alpha-lowest' }, @@ -15,14 +28,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-alpha-highest' }, { - property: '--ion-color-primary' + property: '--ion-color-primary', + quickPick: {text: 'p'} }, { property: '--ion-color-primary-contrast' }, { property: '--ion-color-primary-rgb', - computed: '--ion-color-primary' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-primary'} + } }, { property: '--ion-color-primary-shade' @@ -31,14 +48,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-primary-tint' }, { - property: '--ion-color-secondary' + property: '--ion-color-secondary', + quickPick: {text: 's'} }, { property: '--ion-color-secondary-contrast' }, { property: '--ion-color-secondary-rgb', - computed: '--ion-color-secondary' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-secondary'} + } }, { property: '--ion-color-secondary-shade' @@ -47,14 +68,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-secondary-tint' }, { - property: '--ion-color-tertiary' + property: '--ion-color-tertiary', + quickPick: {text: 't'} }, { property: '--ion-color-tertiary-contrast' }, { property: '--ion-color-tertiary-rgb', - computed: '--ion-color-tertiary' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-tertiary'} + } }, { property: '--ion-color-tertiary-shade' @@ -63,14 +88,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-tertiary-tint' }, { - property: '--ion-color-success' + property: '--ion-color-success', + quickPick: {text: 'ss'} }, { property: '--ion-color-success-contrast' }, { property: '--ion-color-success-rgb', - computed: '--ion-color-success' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-success'} + } }, { property: '--ion-color-success-shade' @@ -79,14 +108,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-success-tint' }, { - property: '--ion-color-warning' + property: '--ion-color-warning', + quickPick: {text: 'w'} }, { property: '--ion-color-warning-contrast' }, { property: '--ion-color-warning-rgb', - computed: '--ion-color-warning' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-warning'} + } }, { property: '--ion-color-warning-shade' @@ -95,14 +128,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-warning-tint' }, { - property: '--ion-color-danger' + property: '--ion-color-danger', + quickPick: {text: 'd'} }, { property: '--ion-color-danger-contrast' }, { property: '--ion-color-danger-rgb', - computed: '--ion-color-danger' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-danger'} + } }, { property: '--ion-color-danger-shade' @@ -111,14 +148,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-danger-tint' }, { - property: '--ion-color-light' + property: '--ion-color-light', + quickPick: {text: 'l'} }, { property: '--ion-color-light-contrast' }, { property: '--ion-color-light-rgb', - computed: '--ion-color-light' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-light'} + } }, { property: '--ion-color-light-shade' @@ -127,14 +168,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-light-tint' }, { - property: '--ion-color-medium' + property: '--ion-color-medium', + quickPick: {text: 'm'} }, { property: '--ion-color-medium-contrast' }, { property: '--ion-color-medium-rgb', - computed: '--ion-color-medium' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-medium'} + } }, { property: '--ion-color-medium-shade' @@ -143,14 +188,18 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-color-medium-tint' }, { - property: '--ion-color-dark' + property: '--ion-color-dark', + quickPick: {text: 'd'} }, { property: '--ion-color-dark-contrast' }, { property: '--ion-color-dark-rgb', - computed: '--ion-color-dark' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-color-dark'} + } }, { property: '--ion-color-dark-shade' @@ -162,23 +211,157 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-backdrop-color' }, { - property: '--ion-background-color' + property: '--ion-background-color', + quickPick: { + text: 'bg' + } }, { property: '--ion-background-color-rgb', - computed: '--ion-background-color' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-background-color'} + } }, { - property: '--ion-background-color-step-100' + property: '--ion-background-color-step-50', + computed: { + type: ComputedType.step, + params: {property: '--ion-background-color', amount: .050, from: '--ion-text-color' } + } }, { - property: '--ion-background-color-step-200' + property: '--ion-background-color-step-100', + computed: { + type: ComputedType.step, + params: {property: '--ion-background-color', amount: .100, from: '--ion-text-color' } + } }, { - property: '--ion-background-color-step-300' + property: '--ion-background-color-step-150', + computed: { + type: ComputedType.step, + params: {property: '--ion-background-color', amount: .150, from: '--ion-text-color' } + } }, { - property: '--ion-background-color-step-400' + property: '--ion-background-color-step-200', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-300', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-400', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-500', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-600', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-700', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-800', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-900', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-background-color-step-1000', + computed: { + type: ComputedType.step, + params: {property: '--ion-background-color', amount: 1, from: '--ion-text-color' } + } }, { property: '--ion-border-color' @@ -187,23 +370,157 @@ export const THEME_VARIABLES: {property: string, type?: 'percent' | 'color', com property: '--ion-box-shadow-color' }, { - property: '--ion-text-color' + property: '--ion-text-color', + quickPick: { + text: 'txt' + } }, { property: '--ion-text-color-rgb', - computed: '--ion-text-color' + computed: { + type: ComputedType.rgblist, + params: {property: '--ion-text-color'} + } }, { - property: '--ion-text-color-step-100' + property: '--ion-text-color-step-50', + computed: { + type: ComputedType.step, + params: {property: '--ion-text-color', amount: .050, from: '--ion-background-color' } + } }, { - property: '--ion-text-color-step-200' + property: '--ion-text-color-step-100', + computed: { + type: ComputedType.step, + params: {property: '--ion-text-color', amount: .100, from: '--ion-background-color' } + } }, { - property: '--ion-text-color-step-300' + property: '--ion-text-color-step-150', + computed: { + type: ComputedType.step, + params: {property: '--ion-text-color', amount: .150, from: '--ion-background-color' } + } }, { - property: '--ion-text-color-step-400' + property: '--ion-text-color-step-200', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-300', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-400', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-500', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-600', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-700', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-800', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-900', + computed: { + type: ComputedType.step, + 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' } + } + }, + { + property: '--ion-text-color-step-1000', + computed: { + type: ComputedType.step, + params: {property: '--ion-text-color', amount: 1, from: '--ion-background-color' } + } }, { property: '--ion-tabbar-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 e93ce5e890..4231e95ed1 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 @@ -28,7 +28,7 @@ $action-sheet-ios-group-margin-top: 10px !default; $action-sheet-ios-group-margin-bottom: 10px !default; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $background-ios-color-step-100 !default; +$action-sheet-ios-background-color: $background-ios-color-step-50 !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; @@ -49,7 +49,7 @@ $action-sheet-ios-title-padding-bottom: $action-sheet-ios-title- $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-ios-color-step-300 !default; +$action-sheet-ios-title-color: $text-ios-color-step-600 !default; /// @prop - Font size of the action sheet title $action-sheet-ios-title-font-size: 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: $background-ios-color-step-100 !default; +$action-sheet-ios-title-border-color: $background-ios-color-step-50 !default; /// @prop - Font size of the action sheet sub title $action-sheet-ios-sub-title-font-size: 12px !default; @@ -112,7 +112,7 @@ $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: $background-ios-color-step-100 !default; +$action-sheet-ios-button-border-color: $background-ios-color-step-50 !default; /// @prop - Background color of the action sheet button $action-sheet-ios-button-background: transparent !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss index 0af7b413ba..347cca1591 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -10,7 +10,7 @@ $action-sheet-md-font-family: $font-family-md-base !de $action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet -$action-sheet-md-background: $background-md-color-step-100 !default; +$action-sheet-md-background: $background-md-color-step-50 !default; /// @prop - Padding top of the action sheet $action-sheet-md-padding-top: 8px !default; @@ -19,7 +19,7 @@ $action-sheet-md-padding-top: 8px !default; $action-sheet-md-padding-bottom: 8px !default; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: $text-md-color-step-200 !default; +$action-sheet-md-title-color: $text-md-color-step-400 !default; /// @prop - Font size of the action sheet title $action-sheet-md-title-font-size: 16px !default; @@ -55,7 +55,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-tit $action-sheet-md-button-min-height: 48px !default; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-md-color-step-100 !default; +$action-sheet-md-button-text-color: $text-md-color-step-150 !default; /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: 16px !default; @@ -76,7 +76,7 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button- $action-sheet-md-button-background: transparent !default; /// @prop - Background color of the action sheet activated button -$action-sheet-md-button-background-activated: $background-md-color-step-100 !default; +$action-sheet-md-button-background-activated: $background-md-color-step-50 !default; /// @prop - Background color of the selected action sheet button $action-sheet-md-button-background-selected: null !default; diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index 53f772ab83..d0cbe2b0da 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -18,7 +18,7 @@ $alert-ios-max-width: 270px !default; $alert-ios-border-radius: 13px !default; /// @prop - Background color of the alert -$alert-ios-background-color: $background-ios-color-step-100 !default; +$alert-ios-background-color: $background-ios-color-step-50 !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; @@ -54,7 +54,7 @@ $alert-ios-title-font-weight: 600 !default; $alert-ios-sub-title-font-size: 14px !default; /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-ios-color-step-200 !default; +$alert-ios-sub-title-text-color: $text-ios-color-step-400 !default; /// @prop - Padding top of the alert message $alert-ios-message-padding-top: 0 !default; @@ -111,7 +111,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end !de $alert-ios-input-placeholder-color: $placeholder-text-ios-color !default; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-ios-color-step-200 !default; +$alert-ios-input-border-color: $background-ios-color-step-250 !default; /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !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-low) !default; +$alert-ios-button-border-color: $background-ios-color-step-150 !default; /// @prop - Border radius of the alert button $alert-ios-button-border-radius: 0 !default; diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss index 53b1a0cccb..1c4fc66c1f 100644 --- a/packages/core/src/components/alert/alert.md.vars.scss +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -18,7 +18,7 @@ $alert-md-max-width: 280px !default; $alert-md-border-radius: 2px !default; /// @prop - Background color of the alert -$alert-md-background-color: $background-md-color-step-100 !default; +$alert-md-background-color: $background-md-color-step-50 !default; /// @prop - Box shadow color of the alert $alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; @@ -66,7 +66,7 @@ $alert-md-message-padding-start: 24px !default; $alert-md-message-font-size: 15px !default; /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-md-color-step-300 !default; +$alert-md-message-text-color: $text-md-color-step-600 !default; /// @prop - Padding top of the alert empty message $alert-md-message-empty-padding-top: 0 !default; @@ -171,7 +171,7 @@ $alert-md-button-text-color: ion-color($colors-md, primary, bas $alert-md-button-background-color: transparent !default; /// @prop - Background color of the alert activated button -$alert-md-button-background-color-activated: $background-color-step-200 !default; +$alert-md-button-background-color-activated: $background-md-color-step-400 !default; /// @prop - Border radius of the alert button $alert-md-button-border-radius: 2px !default; @@ -228,7 +228,7 @@ $alert-md-radio-border-style: solid !default; $alert-md-radio-border-radius: 50% !default; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $text-md-color-step-300 !default; +$alert-md-radio-border-color-off: $text-md-color-step-600 !default; /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color !default; diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss index 51d7e88526..7b2fb9bd43 100644 --- a/packages/core/src/components/button/button.md.vars.scss +++ b/packages/core/src/components/button/button.md.vars.scss @@ -73,7 +73,7 @@ $button-md-opacity-activated: 1 !default; $button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default; /// @prop - Background color of the ripple on the button -$button-md-ripple-background-color: $text-md-color-step-200 !default; +$button-md-ripple-background-color: $text-md-color-step-400 !default; /// @prop - Background color of the focused button $button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default; @@ -193,7 +193,7 @@ $button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !def $button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default; /// @prop - Background color of the ripple on the clear button -$button-md-clear-ripple-background-color: $text-md-color-step-300 !default; +$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; diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html index f1f885fc30..4438d72995 100644 --- a/packages/core/src/components/button/test/basic/index.html +++ b/packages/core/src/components/button/test/basic/index.html @@ -31,6 +31,11 @@ Secondary.activated

+

+ Tertiary + Tertiary.activated +

+

Warning Warning.activated diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 68d5de1f45..4a863bbc53 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -28,4 +28,4 @@ $card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default $card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-ios-color-step-200 !default; +$card-ios-subtitle-color: $text-ios-color-step-400 !default; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 7050c991ac..e9e7a3f17f 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -19,4 +19,4 @@ $card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; $card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-md-color-step-100 !default; +$card-md-subtitle-color: $text-md-color-step-150 !default; diff --git a/packages/core/src/components/card-title/card-title.md.vars.scss b/packages/core/src/components/card-title/card-title.md.vars.scss index 0dc11d90f2..3500080c53 100644 --- a/packages/core/src/components/card-title/card-title.md.vars.scss +++ b/packages/core/src/components/card-title/card-title.md.vars.scss @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top !default; $card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title -$card-md-title-text-color: $text-md-color-step-100 !default; +$card-md-title-text-color: $text-md-color-step-150 !default; diff --git a/packages/core/src/components/card/card.ios.vars.scss b/packages/core/src/components/card/card.ios.vars.scss index 63b042eab5..77d2f62433 100755 --- a/packages/core/src/components/card/card.ios.vars.scss +++ b/packages/core/src/components/card/card.ios.vars.scss @@ -34,4 +34,4 @@ $card-ios-font-family: $font-family-ios-base !default; $card-ios-font-size: 14px !default; /// @prop - Color of the card text -$card-ios-text-color: $text-ios-color-step-200 !default; +$card-ios-text-color: $text-ios-color-step-400 !default; diff --git a/packages/core/src/components/card/card.md.vars.scss b/packages/core/src/components/card/card.md.vars.scss index b790670c80..7d70786543 100755 --- a/packages/core/src/components/card/card.md.vars.scss +++ b/packages/core/src/components/card/card.md.vars.scss @@ -34,4 +34,4 @@ $card-md-font-family: $font-family-md-base !default; $card-md-line-height: 1.5 !default; /// @prop - Color of the card text -$card-md-text-color: $text-md-color-step-100 !default; +$card-md-text-color: $text-md-color-step-150 !default; diff --git a/packages/core/src/components/chip/chip.ios.vars.scss b/packages/core/src/components/chip/chip.ios.vars.scss index 2295c19680..93ba203f0c 100644 --- a/packages/core/src/components/chip/chip.ios.vars.scss +++ b/packages/core/src/components/chip/chip.ios.vars.scss @@ -28,7 +28,7 @@ $chip-ios-font-family: $font-family-ios-base !default; $chip-ios-font-size: 13px !default; /// @prop - Text color of the chip -$chip-ios-text-color: $text-ios-color-step-100 !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; diff --git a/packages/core/src/components/chip/chip.md.vars.scss b/packages/core/src/components/chip/chip.md.vars.scss index 43c95cb08e..90a1cfc5e2 100644 --- a/packages/core/src/components/chip/chip.md.vars.scss +++ b/packages/core/src/components/chip/chip.md.vars.scss @@ -28,7 +28,7 @@ $chip-md-font-family: $font-family-md-base !default; $chip-md-font-size: 13px !default; /// @prop - Text color of the chip -$chip-md-text-color: $text-md-color-step-100 !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; diff --git a/packages/core/src/components/content/content.ios.vars.scss b/packages/core/src/components/content/content.ios.vars.scss index dd256438ee..b9296de3ad 100644 --- a/packages/core/src/components/content/content.ios.vars.scss +++ b/packages/core/src/components/content/content.ios.vars.scss @@ -7,7 +7,7 @@ $content-ios-font-family: $font-family-ios-base !default; /// @prop - Background color of the outer content -$content-ios-outer-background: $background-ios-color-step-100 !default; +$content-ios-outer-background: $background-ios-color-step-50 !default; /// @prop - Background color of the content when making transition $content-ios-transition-background: #000 !default; diff --git a/packages/core/src/components/content/content.md.scss b/packages/core/src/components/content/content.md.scss index 65b1f9263b..c7eeb5b65a 100644 --- a/packages/core/src/components/content/content.md.scss +++ b/packages/core/src/components/content/content.md.scss @@ -12,7 +12,7 @@ } .content-md hr { - background-color: $background-color-step-100; + background-color: $background-md-color-step-50; } diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss index 8a8b0b2e0e..7a378918cd 100644 --- a/packages/core/src/components/datetime/datetime.ios.vars.scss +++ b/packages/core/src/components/datetime/datetime.ios.vars.scss @@ -21,4 +21,4 @@ $datetime-ios-padding-start: $item-ios-padding-start !default; $datetime-ios-font-family: $font-family-ios-base !default; /// @prop - Color of the datetime placeholder -$datetime-ios-placeholder-color: $text-ios-color-step-300 !default; +$datetime-ios-placeholder-color: $text-ios-color-step-600 !default; diff --git a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index aec5fc2c4d..28b4f24429 100644 --- a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-ios-color-step-200 !default; +$infinite-scroll-ios-loading-color: $text-ios-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; diff --git a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index 8a06bd1a99..a6e82de847 100644 --- a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-md-color-step-200 !default; +$infinite-scroll-md-loading-color: $text-md-color-step-400 !default; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss index edce485b40..7d7e84b0ff 100644 --- a/packages/core/src/components/input/input.ios.vars.scss +++ b/packages/core/src/components/input/input.ios.vars.scss @@ -54,7 +54,7 @@ $input-ios-inset-margin-start: 0 !default; $input-ios-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-ios-input-clear-icon-color: $text-ios-color-step-200 !default; +$input-ios-input-clear-icon-color: $text-ios-color-step-400 !default; /// @prop - Icon used to clear the input $input-ios-input-clear-icon-svg: "" !default; diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss index 920839706b..238d3b8364 100644 --- a/packages/core/src/components/input/input.md.vars.scss +++ b/packages/core/src/components/input/input.md.vars.scss @@ -27,7 +27,7 @@ $input-md-margin-start: ($item-md-padding-start / 2) !default; $input-md-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-md-input-clear-icon-color: $text-md-color-step-200 !default; +$input-md-input-clear-icon-color: $text-md-color-step-400 !default; /// @prop - Icon used to clear the input $input-md-input-clear-icon-svg: "" !default; diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss index 4198e9e226..cc91c5142f 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.ios.vars.scss @@ -12,10 +12,10 @@ $item-ios-divider-font-family: $font-family-ios-base !default; $item-ios-divider-font-size: 17px !default; /// @prop - Background for the divider -$item-ios-divider-background: $background-ios-color-step-100 !default; +$item-ios-divider-background: $background-ios-color-step-50 !default; /// @prop - Color for the divider -$item-ios-divider-color: $text-ios-color-step-100 !default; +$item-ios-divider-color: $text-ios-color-step-150 !default; /// @prop - Padding start for the divider $item-ios-divider-padding-start: $item-ios-padding-start !default; diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss index 84735c3267..510960adba 100644 --- a/packages/core/src/components/item-divider/item-divider.md.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.md.vars.scss @@ -6,7 +6,7 @@ // -------------------------------------------------- /// @prop - Color for the divider -$item-md-divider-color: $text-md-color-step-300 !default; +$item-md-divider-color: $text-md-color-step-600 !default; /// @prop - Background for the divider $item-md-divider-background: $background-md-color !default; diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss index 22102d67c8..29c11c7a18 100644 --- a/packages/core/src/components/item/item.ios.vars.scss +++ b/packages/core/src/components/item/item.ios.vars.scss @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def $item-ios-paragraph-font-size: 14px !default; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-ios-color-step-300 !default; +$item-ios-paragraph-text-color: $text-ios-color-step-600 !default; /// @prop - Width of the avatar in the item $item-ios-avatar-width: 36px !default; diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss index 75b5c3c561..5cde987b3e 100644 --- a/packages/core/src/components/item/item.md.vars.scss +++ b/packages/core/src/components/item/item.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-color-step-200 !default; +$item-md-paragraph-text-color: $text-md-color-step-400 !default; /// @prop - Font family of the item $item-md-font-family: $font-family-md-base !default; diff --git a/packages/core/src/components/label/label.md.vars.scss b/packages/core/src/components/label/label.md.vars.scss index a147901b62..4f273299f0 100644 --- a/packages/core/src/components/label/label.md.vars.scss +++ b/packages/core/src/components/label/label.md.vars.scss @@ -9,7 +9,7 @@ $label-md-font-family: $font-family-md-base !default; /// @prop - Text color of the label by an input, select, or datetime -$label-md-text-color: $text-md-color-step-300 !default; +$label-md-text-color: $text-md-color-step-600 !default; /// @prop - Text color of the stacked/floating label when it is focused $label-md-text-color-focused: ion-color($colors-md, primary, base, md) !default; diff --git a/packages/core/src/components/list-header/list-header.ios.vars.scss b/packages/core/src/components/list-header/list-header.ios.vars.scss index 1465d021a2..338ed5e118 100644 --- a/packages/core/src/components/list-header/list-header.ios.vars.scss +++ b/packages/core/src/components/list-header/list-header.ios.vars.scss @@ -24,7 +24,7 @@ $list-ios-header-letter-spacing: 1px !default; $list-ios-header-text-transform: uppercase !default; /// @prop - Text color of the header in a list -$list-ios-header-color: $text-ios-color-step-100 !default; +$list-ios-header-color: $text-ios-color-step-150 !default; /// @prop - Background color of the header in a list $list-ios-header-background-color: transparent !default; diff --git a/packages/core/src/components/list-header/list-header.md.vars.scss b/packages/core/src/components/list-header/list-header.md.vars.scss index ff3fa2e4e6..b17ae6053f 100644 --- a/packages/core/src/components/list-header/list-header.md.vars.scss +++ b/packages/core/src/components/list-header/list-header.md.vars.scss @@ -21,4 +21,4 @@ $list-md-header-border-top: 1px solid $item-md-border-color !default; $list-md-header-font-size: 14px !default; /// @prop - Text color of the header in a list -$list-md-header-color: $text-md-color-step-200 !default; +$list-md-header-color: $text-md-color-step-400 !default; diff --git a/packages/core/src/components/loading/loading.ios.vars.scss b/packages/core/src/components/loading/loading.ios.vars.scss index cc9e237e60..107fa0e808 100644 --- a/packages/core/src/components/loading/loading.ios.vars.scss +++ b/packages/core/src/components/loading/loading.ios.vars.scss @@ -31,7 +31,7 @@ $loading-ios-border-radius: 8px !default; $loading-ios-text-color: $text-ios-color !default; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $background-ios-color-step-100 !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; @@ -40,7 +40,7 @@ $loading-ios-translucent-background-color: ion-color-alpha($background-ios-colo $loading-ios-content-font-weight: bold !default; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-ios-color-step-200 !default; +$loading-ios-spinner-color: $text-ios-color-step-400 !default; /// @prop - Color of the ios loading spinner $loading-ios-spinner-ios-color: $loading-ios-spinner-color !default; diff --git a/packages/core/src/components/loading/loading.md.vars.scss b/packages/core/src/components/loading/loading.md.vars.scss index c83cc50239..20009afdfe 100644 --- a/packages/core/src/components/loading/loading.md.vars.scss +++ b/packages/core/src/components/loading/loading.md.vars.scss @@ -28,10 +28,10 @@ $loading-md-max-height: 90% !default; $loading-md-border-radius: 2px !default; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-100 !default; +$loading-md-text-color: $text-md-color-step-150 !default; /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-100 !default; +$loading-md-background: $background-md-color-step-50 !default; /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; diff --git a/packages/core/src/components/note/note.ios.vars.scss b/packages/core/src/components/note/note.ios.vars.scss index cc5c22e8bd..2e2ea2a51e 100644 --- a/packages/core/src/components/note/note.ios.vars.scss +++ b/packages/core/src/components/note/note.ios.vars.scss @@ -7,4 +7,4 @@ $note-ios-font-family: $font-family-ios-base !default; /// @prop - Text color of the note -$note-ios-color: $text-ios-color-step-400 !default; +$note-ios-color: $text-ios-color-step-650 !default; diff --git a/packages/core/src/components/note/note.md.vars.scss b/packages/core/src/components/note/note.md.vars.scss index 57ed95b0dc..60f6def267 100644 --- a/packages/core/src/components/note/note.md.vars.scss +++ b/packages/core/src/components/note/note.md.vars.scss @@ -7,4 +7,4 @@ $note-md-font-family: $font-family-md-base !default; /// @prop - Text color of the note -$note-md-color: $text-md-color-step-400 !default; +$note-md-color: $text-md-color-step-800 !default; diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss index d8fdf21c07..d45c5cd89a 100644 --- a/packages/core/src/components/radio/radio.md.vars.scss +++ b/packages/core/src/components/radio/radio.md.vars.scss @@ -12,7 +12,7 @@ $radio-md-color-on: ion-color($colors-md, primary, base, md) !d $radio-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default; /// @prop - Color of the unchecked radio -$radio-md-color-off: $text-md-color-step-300 !default; +$radio-md-color-off: $text-md-color-step-600 !default; /// @prop - Width of the radio icon $radio-md-icon-width: 16px !default; diff --git a/packages/core/src/components/range/range.ios.vars.scss b/packages/core/src/components/range/range.ios.vars.scss index 7d88af5ed1..e81df75cda 100644 --- a/packages/core/src/components/range/range.ios.vars.scss +++ b/packages/core/src/components/range/range.ios.vars.scss @@ -25,7 +25,7 @@ $range-ios-hit-height: $range-ios-slider-height !default; $range-ios-bar-height: 1px !default; /// @prop - Background of the range bar -$range-ios-bar-background-color: $background-ios-color-step-200 !default; +$range-ios-bar-background-color: $background-ios-color-step-250 !default; /// @prop - Background of the active range bar $range-ios-bar-active-background-color: ion-color($colors-ios, primary, base, ios) !default; diff --git a/packages/core/src/components/range/range.md.vars.scss b/packages/core/src/components/range/range.md.vars.scss index d3c293fa29..7fac28c5e4 100644 --- a/packages/core/src/components/range/range.md.vars.scss +++ b/packages/core/src/components/range/range.md.vars.scss @@ -25,7 +25,7 @@ $range-md-hit-height: $range-md-slider-height !default; $range-md-bar-height: 2px !default; /// @prop - Background of the range bar -$range-md-bar-background-color: $background-md-color-step-300 !default; +$range-md-bar-background-color: $background-md-color-step-250 !default; /// @prop - Background of the active range bar $range-md-bar-active-background-color: ion-color($colors-md, primary, base, md) !default; diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss index c8c67d34ba..4b117d9003 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss @@ -31,7 +31,7 @@ $searchbar-ios-cancel-button-color: ion-color($colors-ios, primary $searchbar-ios-cancel-button-background-color: transparent !default; /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default; +$searchbar-ios-input-search-icon-color: $text-ios-color-step-400 !default; /// @prop - Svg for the searchbar input search icon $searchbar-ios-input-search-icon-svg: "" !default; @@ -46,7 +46,7 @@ $searchbar-ios-input-height: 36px !default; $searchbar-ios-input-border-radius: 10px !default; /// @prop - Color of the searchbar input placeholder -$searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default; +$searchbar-ios-input-placeholder-color: $text-ios-color-step-400 !default; /// @prop - Color of the searchbar input text $searchbar-ios-input-text-color: $text-ios-color !default; @@ -61,7 +61,7 @@ $searchbar-ios-input-transition: all 300ms ease !default; $searchbar-ios-cancel-transition: all 300ms ease !default; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default; +$searchbar-ios-input-clear-icon-color: $text-ios-color-step-400 !default; /// @prop - Svg for the searchbar input clear icon $searchbar-ios-input-clear-icon-svg: "" !default; diff --git a/packages/core/src/components/searchbar/searchbar.md.vars.scss b/packages/core/src/components/searchbar/searchbar.md.vars.scss index 93d594cc65..1a5a901fd5 100644 --- a/packages/core/src/components/searchbar/searchbar.md.vars.scss +++ b/packages/core/src/components/searchbar/searchbar.md.vars.scss @@ -22,7 +22,7 @@ $searchbar-md-font-family: $font-family-md-base !default; $searchbar-md-background: inherit !default; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100 !default; +$searchbar-md-cancel-button-color: $text-md-color-step-100 !default; /// @prop - Background color of the searchbar cancel button $searchbar-md-cancel-button-background-color: transparent !default; @@ -31,7 +31,7 @@ $searchbar-md-cancel-button-background-color: transparent !default; $searchbar-md-cancel-button-font-size: 1.8em !default; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-200 !default; +$searchbar-md-input-search-icon-color: $text-md-color-step-400 !default; /// @prop - Svg for the searchbar input search icon $searchbar-md-input-search-icon-svg: "" !default; @@ -52,7 +52,7 @@ $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), $searchbar-md-input-placeholder-color: $placeholder-text-md-color !default; /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-md-color-step-100 !default; +$searchbar-md-input-text-color: $text-md-color-step-150 !default; /// @prop - Background of the searchbar input $searchbar-md-input-background-color: $background-md-color !default; @@ -61,7 +61,7 @@ $searchbar-md-input-background-color: $background-md-color !default; $searchbar-md-input-border-radius: 2px !default; /// @prop - Color of the searchbar input clear icon -$searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default; +$searchbar-md-input-clear-icon-color: $text-md-color-step-400 !default; /// @prop - Svg for the searchbar input clear icon $searchbar-md-input-clear-icon-svg: "" !default; diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss index 41462d8e84..ec59df8459 100644 --- a/packages/core/src/components/select/select.ios.vars.scss +++ b/packages/core/src/components/select/select.ios.vars.scss @@ -21,7 +21,7 @@ $select-ios-padding-start: $item-ios-padding-start !default; $select-ios-font-family: $font-family-ios-base !default; /// @prop - Color of the select icon -$select-ios-icon-color: $text-ios-color-step-400 !default; +$select-ios-icon-color: $text-ios-color-step-650 !default; /// @prop - Color of the select placeholder $select-ios-placeholder-color: $select-ios-icon-color !default; diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss index 4a6fa7bc50..cbb7086d21 100644 --- a/packages/core/src/components/select/select.md.scss +++ b/packages/core/src/components/select/select.md.scss @@ -61,7 +61,7 @@ } .select-popover-md .item-radio-checked { - background-color: $background-md-color-step-200; + background-color: $background-md-color-step-150; } .select-popover-md .item-radio-checked ion-label { diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss index 46c6c46fad..f9514ab6e4 100644 --- a/packages/core/src/components/select/select.md.vars.scss +++ b/packages/core/src/components/select/select.md.vars.scss @@ -21,7 +21,7 @@ $select-md-padding-start: $item-md-padding-start !default; $select-md-font-family: $font-family-md-base !default; /// @prop - Color of the select icon -$select-md-icon-color: $text-md-color-step-300 !default; +$select-md-icon-color: $text-md-color-step-600 !default; /// @prop - Color of the select placeholder $select-md-placeholder-color: $select-md-icon-color !default; diff --git a/packages/core/src/components/slides/slides.ios.vars.scss b/packages/core/src/components/slides/slides.ios.vars.scss index c2445e4c70..77a5679f8a 100644 --- a/packages/core/src/components/slides/slides.ios.vars.scss +++ b/packages/core/src/components/slides/slides.ios.vars.scss @@ -1,7 +1,7 @@ @import "../../themes/ionic.globals.ios"; /// @prop - Slides Bullet Background color -$slides-ios-bullet-background-color: text-ios-color-step-200 !default; +$slides-ios-bullet-background-color: $text-ios-color-step-400 !default; /// @prop - Slides Bullet Background color when Active $slides-ios-bullet-background-color-active: ion-color($colors-ios, primary, base, ios) !default; diff --git a/packages/core/src/components/slides/slides.md.vars.scss b/packages/core/src/components/slides/slides.md.vars.scss index 91a0c9d2f3..f200b10db6 100644 --- a/packages/core/src/components/slides/slides.md.vars.scss +++ b/packages/core/src/components/slides/slides.md.vars.scss @@ -1,7 +1,7 @@ @import "../../themes/ionic.globals.md"; /// @prop - Slides Bullet Background color -$slides-md-bullet-background-color: $text-md-color-step-200 !default; +$slides-md-bullet-background-color: $text-md-color-step-400 !default; /// @prop - Slides Bullet Background color when Active $slides-md-bullet-background-color-active: ion-color($colors-md, primary, base, md) !default; diff --git a/packages/core/src/components/spinner/spinner.ios.vars.scss b/packages/core/src/components/spinner/spinner.ios.vars.scss index b6c72cff64..c6b057001e 100644 --- a/packages/core/src/components/spinner/spinner.ios.vars.scss +++ b/packages/core/src/components/spinner/spinner.ios.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Color of the ios spinner -$spinner-ios-ios-color: $text-ios-color-step-200 !default; +$spinner-ios-ios-color: $text-ios-color-step-400 !default; /// @prop - Color of the bubbles spinner $spinner-ios-bubbles-color: $text-ios-color !default; /// @prop - Color of the circles spinner -$spinner-ios-circles-color: $text-ios-color-step-200 !default; +$spinner-ios-circles-color: $text-ios-color-step-400 !default; /// @prop - Color of the crescent spinner $spinner-ios-crescent-color: $text-ios-color !default; /// @prop - Color of the dots spinner -$spinner-ios-dots-color: $text-ios-color-step-200 !default; +$spinner-ios-dots-color: $text-ios-color-step-400 !default; diff --git a/packages/core/src/components/spinner/spinner.md.vars.scss b/packages/core/src/components/spinner/spinner.md.vars.scss index 40162f1043..53b9596297 100644 --- a/packages/core/src/components/spinner/spinner.md.vars.scss +++ b/packages/core/src/components/spinner/spinner.md.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Color of the ios spinner -$spinner-md-ios-color: $text-md-color-step-200 !default; +$spinner-md-ios-color: $text-md-color-step-400 !default; /// @prop - Color of the bubbles spinner $spinner-md-bubbles-color: $text-md-color !default; /// @prop - Color of the circles spinner -$spinner-md-circles-color: $text-md-color-step-200 !default; +$spinner-md-circles-color: $text-md-color-step-400 !default; /// @prop - Color of the crescent spinner $spinner-md-crescent-color: $text-md-color !default; /// @prop - Color of the dots spinner -$spinner-md-dots-color: $text-color-step-200 !default; +$spinner-md-dots-color: $text-md-color-step-400 !default; diff --git a/packages/core/src/components/tabs/tabs.ios.scss b/packages/core/src/components/tabs/tabs.ios.scss index 7675c1c47c..338a675a1b 100644 --- a/packages/core/src/components/tabs/tabs.ios.scss +++ b/packages/core/src/components/tabs/tabs.ios.scss @@ -124,7 +124,7 @@ $translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios); .tabbar-ios-#{$color-name} { - border-color: $background-ios-color-step-300; + border-color: $background-ios-color-step-400; color: $color-contrast; background-color: $color-base; diff --git a/packages/core/src/components/toast/toast.ios.vars.scss b/packages/core/src/components/toast/toast.ios.vars.scss index 1a75dbe95d..6abc2b0cd4 100644 --- a/packages/core/src/components/toast/toast.ios.vars.scss +++ b/packages/core/src/components/toast/toast.ios.vars.scss @@ -7,7 +7,7 @@ $toast-ios-font-family: $font-family-ios-base !default; /// @prop - Background Color of the toast wrapper -$toast-ios-background-color: $background-ios-color-step-100 !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; @@ -16,7 +16,7 @@ $toast-ios-translucent-background-color: ion-color-alpha($background-io $toast-ios-border-radius: 14px !default; /// @prop - Color of the toast title -$toast-ios-title-color: $text-ios-color-step-100 !default; +$toast-ios-title-color: $text-ios-color-step-150 !default; /// @prop - Font size of the toast title $toast-ios-title-font-size: 14px !default; @@ -34,7 +34,7 @@ $toast-ios-title-padding-bottom: $toast-ios-title-padding-top ! $toast-ios-title-padding-start: $toast-ios-title-padding-end !default; /// @prop - Color of the toast button -$toast-ios-button-color: $text-ios-color-step-200 !default; +$toast-ios-button-color: $text-ios-color-step-400 !default; /// @prop - Filter of the translucent toast $toast-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/packages/core/src/components/toast/toast.md.vars.scss b/packages/core/src/components/toast/toast.md.vars.scss index dfa76bb657..d0f84b9d17 100644 --- a/packages/core/src/components/toast/toast.md.vars.scss +++ b/packages/core/src/components/toast/toast.md.vars.scss @@ -7,7 +7,7 @@ $toast-md-font-family: $font-family-md-base !default; /// @prop - Background of the toast wrapper -$toast-md-background: $text-md-color-step-100 !default; +$toast-md-background: $text-md-color-step-150 !default; /// @prop - Color of the toast title $toast-md-title-color: $background-md-color !default; diff --git a/packages/core/src/components/toggle/toggle.ios.vars.scss b/packages/core/src/components/toggle/toggle.ios.vars.scss index 504f3d6398..804744187e 100644 --- a/packages/core/src/components/toggle/toggle.ios.vars.scss +++ b/packages/core/src/components/toggle/toggle.ios.vars.scss @@ -21,7 +21,7 @@ $toggle-ios-border-radius: $toggle-ios-height / 2 !default; $toggle-ios-background-color-off: $item-ios-background-color !default; /// @prop - Border color of the unchecked toggle -$toggle-ios-border-color-off: $background-ios-color-step-100 !default; +$toggle-ios-border-color-off: $background-ios-color-step-50 !default; /// @prop - Background color of the checked toggle $toggle-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default; diff --git a/packages/core/src/components/toolbar/toolbar.ios.vars.scss b/packages/core/src/components/toolbar/toolbar.ios.vars.scss index e157539951..7e83aadc30 100644 --- a/packages/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/packages/core/src/components/toolbar/toolbar.ios.vars.scss @@ -22,7 +22,7 @@ $toolbar-ios-font-family: $font-family-ios-base !defau $toolbar-ios-button-font-size: 17px !default; /// @prop - Text color of the toolbar button -$toolbar-ios-button-color: $toolbar-ios-text-color !default; +$toolbar-ios-button-color: ion-color($colors-ios, primary, base, ios) !default; /// @prop - Background color of the toolbar button $toolbar-ios-button-background-color: $toolbar-ios-background-color !default; diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css index 40e649ae2b..ec8946babc 100644 --- a/packages/core/src/themes/css/default.css +++ b/packages/core/src/themes/css/default.css @@ -1,6 +1,5 @@ /** default theme **/ - :root { --ion-alpha-lowest: 0.06; --ion-alpha-low: 0.1; @@ -8,65 +7,97 @@ --ion-alpha-high: 0.75; --ion-alpha-highest: 0.9; --ion-color-primary: #488aff; + --ion-color-primary-rgb: 72,138,255; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-rgb: "72,138,255"; --ion-color-primary-shade: #3f79e0; - --ion-color-primary-tint: #427feb; + --ion-color-primary-tint: #5a96ff; --ion-color-secondary: #32db64; + --ion-color-secondary-rgb: 50,219,100; --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-rgb: "50,219,100"; --ion-color-secondary-shade: #2cc158; - --ion-color-secondary-tint: #2ec95c; + --ion-color-secondary-tint: #47df74; --ion-color-tertiary: #f4a942; + --ion-color-tertiary-rgb: 244,169,66; --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-rgb: "244,169,66"; - --ion-color-tertiary-shade: #d6903d; - --ion-color-tertiary-tint: #ffa529; + --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-rgb: "16,220,96"; - --ion-color-success-shade: #10cb60; - --ion-color-success-tint: #23df6d; + --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-rgb: "255,206,0"; - --ion-color-warning-shade: #f1c100; - --ion-color-warning-tint: #ffd214; + --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-rgb: "245,61,61"; --ion-color-danger-shade: #d83636; - --ion-color-danger-tint: #e13838; + --ion-color-danger-tint: #f65050; --ion-color-light: #f4f4f4; + --ion-color-light-rgb: 244,244,244; --ion-color-light-contrast: #000000; - --ion-color-light-rgb: "244,244,244"; --ion-color-light-shade: #d7d7d7; - --ion-color-light-tint: #e0e0e0; + --ion-color-light-tint: #f5f5f5; --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152,154,162; --ion-color-medium-contrast: #000000; - --ion-color-medium-rgb: "152,154,162"; - --ion-color-medium-shade: #8c8e95; - --ion-color-medium-tint: #86888f; + --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-rgb: "34,34,34"; - --ion-color-dark-shade: #343434; - --ion-color-dark-tint: #3d3d3d; + --ion-color-dark-shade: #1e1e1e; + --ion-color-dark-tint: #383838; --ion-backdrop-color: #000000; --ion-background-color: #ffffff; - --ion-background-color-rgb: "255,255,255"; - --ion-background-color-step-100: #f2f2f2; - --ion-background-color-step-200: #dcdcdc; - --ion-background-color-step-300: #bdbdbd; - --ion-background-color-step-400: #444444; + --ion-background-color-rgb: 255,255,255; + --ion-background-color-step-50: #f2f2f2; + --ion-background-color-step-100: #e6e6e6; + --ion-background-color-step-150: #d9d9d9; + --ion-background-color-step-200: #cccccc; + --ion-background-color-step-250: #bfbfbf; + --ion-background-color-step-300: #b3b3b3; + --ion-background-color-step-350: #a6a6a6; + --ion-background-color-step-400: #999999; + --ion-background-color-step-450: #8c8c8c; + --ion-background-color-step-500: #808080; + --ion-background-color-step-550: #737373; + --ion-background-color-step-600: #666666; + --ion-background-color-step-650: #595959; + --ion-background-color-step-700: #4d4d4d; + --ion-background-color-step-750: #404040; + --ion-background-color-step-800: #333333; + --ion-background-color-step-850: #262626; + --ion-background-color-step-900: #191919; + --ion-background-color-step-950: #0d0d0d; + --ion-background-color-step-1000: #000000; --ion-border-color: #b2b2b2; --ion-box-shadow-color: #000000; --ion-text-color: #000000; - --ion-text-color-rgb: "0,0,0"; - --ion-text-color-step-100: #222222; - --ion-text-color-step-200: #666666; - --ion-text-color-step-300: #999999; - --ion-text-color-step-400: #c5c5c5; + --ion-text-color-rgb: 0,0,0; + --ion-text-color-step-50: #0d0d0d; + --ion-text-color-step-100: #1a1a1a; + --ion-text-color-step-150: #262626; + --ion-text-color-step-200: #333333; + --ion-text-color-step-250: #404040; + --ion-text-color-step-300: #4d4d4d; + --ion-text-color-step-350: #595959; + --ion-text-color-step-400: #666666; + --ion-text-color-step-450: #737373; + --ion-text-color-step-500: #808080; + --ion-text-color-step-550: #8c8c8c; + --ion-text-color-step-600: #999999; + --ion-text-color-step-650: #a6a6a6; + --ion-text-color-step-700: #b3b3b3; + --ion-text-color-step-750: #bfbfbf; + --ion-text-color-step-800: #cccccc; + --ion-text-color-step-850: #d9d9d9; + --ion-text-color-step-900: #e6e6e6; + --ion-text-color-step-950: #f2f2f2; + --ion-text-color-step-1000: #ffffff; --ion-tabbar-background-color: #f8f8f8; --ion-tabbar-border-color: #b2b2b2; --ion-tabbar-text-color: #8c8c8c; @@ -81,4 +112,4 @@ --ion-item-border-color: #c8c7cc; --ion-item-text-color: #000000; --ion-placeholder-text-color: #999999; -} \ No newline at end of file +} diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css index 0bb41ea916..81008bbe7f 100644 --- a/packages/core/src/themes/css/oceanic.css +++ b/packages/core/src/themes/css/oceanic.css @@ -8,64 +8,96 @@ --ion-alpha-highest: .9; --ion-color-primary: #549ee7; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-rgb: '84,158,231'; + --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-rgb: '95,179,179'; + --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-rgb: '250,200,99'; + --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-rgb: '144,208,137'; + --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-rgb: '249,145,87'; + --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-rgb: '236,95,103'; + --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-rgb: '216,222,233'; + --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-rgb: '101,115,126'; + --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-rgb: '27,43,52'; + --ion-color-dark-rgb: 27,43,52; --ion-color-dark-shade: #070b0d; --ion-color-dark-tint: #343d46; --ion-backdrop-color: #1b2b34; --ion-background-color: #1b2b34; - --ion-background-color-rgb: '27,43,52'; - --ion-background-color-step-100: #293a43; - --ion-background-color-step-200: #465b6e; - --ion-background-color-step-300: #61879e; - --ion-background-color-step-400: #91adbf; + --ion-background-color-rgb: 27,43,52; + --ion-background-color-step-50: #26363e; + --ion-background-color-step-100: #324048; + --ion-background-color-step-150: #3d4b52; + --ion-background-color-step-200: #49555d; + --ion-background-color-step-250: #546067; + --ion-background-color-step-300: #5f6b71; + --ion-background-color-step-350: #6b757b; + --ion-background-color-step-400: #768085; + --ion-background-color-step-450: #828a8f; + --ion-background-color-step-500: #8d959a; + --ion-background-color-step-550: #98a0a4; + --ion-background-color-step-600: #a4aaae; + --ion-background-color-step-650: #afb5b8; + --ion-background-color-step-700: #bbbfc2; + --ion-background-color-step-750: #c6cacc; + --ion-background-color-step-800: #d1d5d6; + --ion-background-color-step-850: #dddfe1; + --ion-background-color-step-900: #e8eaeb; + --ion-background-color-step-950: #f4f4f5; + --ion-background-color-step-1000: #ffffff; --ion-border-color: #1b2b34; --ion-box-shadow-color: #000000; --ion-text-color: #ffffff; - --ion-text-color-rgb: '255,255,255'; - --ion-text-color-step-100: #c5c5c5; - --ion-text-color-step-200: #b0b0b0; - --ion-text-color-step-300: #aeaeae; - --ion-text-color-step-400: #222; + --ion-text-color-rgb: 255,255,255; + --ion-text-color-step-50: #f4f4f5; + --ion-text-color-step-100: #e8eaeb; + --ion-text-color-step-150: #dddfe1; + --ion-text-color-step-200: #d1d5d6; + --ion-text-color-step-250: #c6cacc; + --ion-text-color-step-300: #bbbfc2; + --ion-text-color-step-350: #afb5b8; + --ion-text-color-step-400: #a4aaae; + --ion-text-color-step-450: #98a0a4; + --ion-text-color-step-500: #8d959a; + --ion-text-color-step-550: #828a8f; + --ion-text-color-step-600: #768085; + --ion-text-color-step-650: #6b757b; + --ion-text-color-step-700: #5f6b71; + --ion-text-color-step-750: #546067; + --ion-text-color-step-800: #49555d; + --ion-text-color-step-850: #3d4b52; + --ion-text-color-step-900: #324048; + --ion-text-color-step-950: #26363e; + --ion-text-color-step-1000: #1b2b34; --ion-tabbar-background-color: #343d46; --ion-tabbar-border-color: var(--ion-border-color); --ion-tabbar-text-color: #a7adba; diff --git a/packages/core/src/themes/ionic.functions.color.scss b/packages/core/src/themes/ionic.functions.color.scss index be36e6ace3..4375901952 100644 --- a/packages/core/src/themes/ionic.functions.color.scss +++ b/packages/core/src/themes/ionic.functions.color.scss @@ -8,12 +8,12 @@ $enable-css-variables: true; $css-variables: (); $modes: (ios, md); -@mixin css-variables-to-root { - :root { - @each $name, $color in $css-variables { - #{$name}: $color; - } +@function force-hex($color) { + @if type-of($color) == "color" { + $hex: str-slice(ie-hex-str($color), 4); + @return unquote("\##{to-lower-case($hex)}"); } + @return $color; } @function get-mode($name) { @@ -217,3 +217,22 @@ $modes: (ios, md); } @return $result; } + +@mixin css-variables-to-root($colors) { + @each $name, $value in $colors { + @each $variation, $color in $value { + @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 { + $test: css-var(force-hex($color), unquote("color-#{$name}-#{$variation}")); + } + } + } + + :root { + @each $name, $color in $css-variables { + #{$name}: $color; + } + } +} diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss index 4f9b98f201..f484c3c70f 100644 --- a/packages/core/src/themes/ionic.theme.default.ios.scss +++ b/packages/core/src/themes/ionic.theme.default.ios.scss @@ -13,7 +13,6 @@ $content-ios-padding: $content-padding !default; $font-family-ios-base: $font-family-base !default; $font-size-ios-base: $font-size-base !default; - // Default iOS Alpha levels // -------------------------------------------------- $alpha-ios-lowest: css-var($alpha-lowest, alpha-ios-lowest); @@ -45,14 +44,47 @@ $text-color-rgb: css-var(color-to-rgb-list($text-io // Default iOS Background & Text Color Steps // -------------------------------------------------- -$background-ios-color-step-100: css-var(#f7f7f7, background-ios-color-step-100) !default; -$background-ios-color-step-200: css-var(#bdbdbd, background-ios-color-step-200) !default; -$background-ios-color-step-300: css-var(#999, background-ios-color-step-300) !default; -$background-ios-color-step-400: css-var(#222, background-ios-color-step-400) !default; -$text-ios-color-step-100: css-var(#222, text-ios-color-step-100) !default; -$text-ios-color-step-200: css-var(#666, text-ios-color-step-200) !default; -$text-ios-color-step-300: css-var(#8f8f8f, text-ios-color-step-400) !default; -$text-ios-color-step-400: css-var(#aeaeae, text-ios-color-step-300) !default; +$background-ios-color-step-50: css-var(mix($text-ios-color-value, $background-ios-color-value, 5%), background-ios-color-step-50) !default; +$background-ios-color-step-100: css-var(mix($text-ios-color-value, $background-ios-color-value, 10%), background-ios-color-step-100) !default; +$background-ios-color-step-150: css-var(mix($text-ios-color-value, $background-ios-color-value, 15%), background-ios-color-step-150) !default; +$background-ios-color-step-200: css-var(mix($text-ios-color-value, $background-ios-color-value, 20%), background-ios-color-step-200) !default; +$background-ios-color-step-250: css-var(mix($text-ios-color-value, $background-ios-color-value, 25%), background-ios-color-step-250) !default; +$background-ios-color-step-300: css-var(mix($text-ios-color-value, $background-ios-color-value, 30%), background-ios-color-step-300) !default; +$background-ios-color-step-350: css-var(mix($text-ios-color-value, $background-ios-color-value, 35%), background-ios-color-step-350) !default; +$background-ios-color-step-400: css-var(mix($text-ios-color-value, $background-ios-color-value, 40%), background-ios-color-step-400) !default; +$background-ios-color-step-450: css-var(mix($text-ios-color-value, $background-ios-color-value, 45%), background-ios-color-step-450) !default; +$background-ios-color-step-500: css-var(mix($text-ios-color-value, $background-ios-color-value, 50%), background-ios-color-step-500) !default; +$background-ios-color-step-550: css-var(mix($text-ios-color-value, $background-ios-color-value, 55%), background-ios-color-step-550) !default; +$background-ios-color-step-600: css-var(mix($text-ios-color-value, $background-ios-color-value, 60%), background-ios-color-step-600) !default; +$background-ios-color-step-650: css-var(mix($text-ios-color-value, $background-ios-color-value, 65%), background-ios-color-step-650) !default; +$background-ios-color-step-700: css-var(mix($text-ios-color-value, $background-ios-color-value, 70%), background-ios-color-step-700) !default; +$background-ios-color-step-750: css-var(mix($text-ios-color-value, $background-ios-color-value, 75%), background-ios-color-step-750) !default; +$background-ios-color-step-800: css-var(mix($text-ios-color-value, $background-ios-color-value, 80%), background-ios-color-step-800) !default; +$background-ios-color-step-850: css-var(mix($text-ios-color-value, $background-ios-color-value, 85%), background-ios-color-step-850) !default; +$background-ios-color-step-900: css-var(mix($text-ios-color-value, $background-ios-color-value, 90%), background-ios-color-step-900) !default; +$background-ios-color-step-950: css-var(mix($text-ios-color-value, $background-ios-color-value, 95%), background-ios-color-step-950) !default; +$background-ios-color-step-1000: css-var(mix($text-ios-color-value, $background-ios-color-value, 100%), background-ios-color-step-1000) !default; +$text-ios-color-step-50: css-var(mix($background-ios-color-value, $text-ios-color-value, 5%), text-ios-color-step-50) !default; +$text-ios-color-step-100: css-var(mix($background-ios-color-value, $text-ios-color-value, 10%), text-ios-color-step-100) !default; +$text-ios-color-step-150: css-var(mix($background-ios-color-value, $text-ios-color-value, 15%), text-ios-color-step-150) !default; +$text-ios-color-step-200: css-var(mix($background-ios-color-value, $text-ios-color-value, 20%), text-ios-color-step-200) !default; +$text-ios-color-step-250: css-var(mix($background-ios-color-value, $text-ios-color-value, 25%), text-ios-color-step-250) !default; +$text-ios-color-step-300: css-var(mix($background-ios-color-value, $text-ios-color-value, 30%), text-ios-color-step-300) !default; +$text-ios-color-step-350: css-var(mix($background-ios-color-value, $text-ios-color-value, 35%), text-ios-color-step-350) !default; +$text-ios-color-step-400: css-var(mix($background-ios-color-value, $text-ios-color-value, 40%), text-ios-color-step-400) !default; +$text-ios-color-step-450: css-var(mix($background-ios-color-value, $text-ios-color-value, 45%), text-ios-color-step-450) !default; +$text-ios-color-step-500: css-var(mix($background-ios-color-value, $text-ios-color-value, 50%), text-ios-color-step-500) !default; +$text-ios-color-step-550: css-var(mix($background-ios-color-value, $text-ios-color-value, 55%), text-ios-color-step-550) !default; +$text-ios-color-step-600: css-var(mix($background-ios-color-value, $text-ios-color-value, 60%), text-ios-color-step-600) !default; +$text-ios-color-step-650: css-var(mix($background-ios-color-value, $text-ios-color-value, 65%), text-ios-color-step-650) !default; +$text-ios-color-step-700: css-var(mix($background-ios-color-value, $text-ios-color-value, 70%), text-ios-color-step-700) !default; +$text-ios-color-step-750: css-var(mix($background-ios-color-value, $text-ios-color-value, 75%), text-ios-color-step-750) !default; +$text-ios-color-step-800: css-var(mix($background-ios-color-value, $text-ios-color-value, 80%), text-ios-color-step-800) !default; +$text-ios-color-step-850: css-var(mix($background-ios-color-value, $text-ios-color-value, 85%), text-ios-color-step-850) !default; +$text-ios-color-step-900: css-var(mix($background-ios-color-value, $text-ios-color-value, 90%), text-ios-color-step-900) !default; +$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 // -------------------------------------------------- diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss index f600242fe2..db7f04c902 100644 --- a/packages/core/src/themes/ionic.theme.default.md.scss +++ b/packages/core/src/themes/ionic.theme.default.md.scss @@ -44,14 +44,46 @@ $text-color-rgb: css-var(color-to-rgb-list($text-md-color // Default Material Design Background & Text Color Steps // -------------------------------------------------- -$background-md-color-step-100: css-var($background-color-step-100, background-md-color-step-100) !default; -$background-md-color-step-200: css-var($background-color-step-200, background-md-color-step-200) !default; -$background-md-color-step-300: css-var($background-color-step-300, background-md-color-step-300) !default; -$background-md-color-step-400: css-var($background-color-step-400, background-md-color-step-400) !default; -$text-md-color-step-100: css-var($text-color-step-100, text-md-color-step-100) !default; -$text-md-color-step-200: css-var($text-color-step-200, text-md-color-step-200) !default; -$text-md-color-step-300: css-var($text-color-step-300, text-md-color-step-300) !default; -$text-md-color-step-400: css-var($text-color-step-400, text-md-color-step-400) !default; +$background-md-color-step-50: css-var(mix($text-md-color-value, $background-md-color-value, 5%), background-md-color-step-50) !default; +$background-md-color-step-100: css-var(mix($text-md-color-value, $background-md-color-value, 10%), background-md-color-step-100) !default; +$background-md-color-step-150: css-var(mix($text-md-color-value, $background-md-color-value, 15%), background-md-color-step-150) !default; +$background-md-color-step-200: css-var(mix($text-md-color-value, $background-md-color-value, 20%), background-md-color-step-200) !default; +$background-md-color-step-250: css-var(mix($text-md-color-value, $background-md-color-value, 25%), background-md-color-step-250) !default; +$background-md-color-step-300: css-var(mix($text-md-color-value, $background-md-color-value, 30%), background-md-color-step-300) !default; +$background-md-color-step-350: css-var(mix($text-md-color-value, $background-md-color-value, 35%), background-md-color-step-350) !default; +$background-md-color-step-400: css-var(mix($text-md-color-value, $background-md-color-value, 40%), background-md-color-step-400) !default; +$background-md-color-step-450: css-var(mix($text-md-color-value, $background-md-color-value, 45%), background-md-color-step-450) !default; +$background-md-color-step-500: css-var(mix($text-md-color-value, $background-md-color-value, 50%), background-md-color-step-500) !default; +$background-md-color-step-550: css-var(mix($text-md-color-value, $background-md-color-value, 55%), background-md-color-step-550) !default; +$background-md-color-step-600: css-var(mix($text-md-color-value, $background-md-color-value, 60%), background-md-color-step-600) !default; +$background-md-color-step-650: css-var(mix($text-md-color-value, $background-md-color-value, 65%), background-md-color-step-650) !default; +$background-md-color-step-700: css-var(mix($text-md-color-value, $background-md-color-value, 70%), background-md-color-step-700) !default; +$background-md-color-step-750: css-var(mix($text-md-color-value, $background-md-color-value, 75%), background-md-color-step-750) !default; +$background-md-color-step-800: css-var(mix($text-md-color-value, $background-md-color-value, 80%), background-md-color-step-800) !default; +$background-md-color-step-850: css-var(mix($text-md-color-value, $background-md-color-value, 85%), background-md-color-step-850) !default; +$background-md-color-step-900: css-var(mix($text-md-color-value, $background-md-color-value, 90%), background-md-color-step-900) !default; +$background-md-color-step-950: css-var(mix($text-md-color-value, $background-md-color-value, 95%), background-md-color-step-950) !default; +$background-md-color-step-1000: css-var(mix($text-md-color-value, $background-md-color-value, 100%), background-md-color-step-1000) !default; +$text-md-color-step-50: css-var(mix($background-md-color-value, $text-md-color-value, 5%), text-md-color-step-50) !default; +$text-md-color-step-100: css-var(mix($background-md-color-value, $text-md-color-value, 10%), text-md-color-step-100) !default; +$text-md-color-step-150: css-var(mix($background-md-color-value, $text-md-color-value, 15%), text-md-color-step-150) !default; +$text-md-color-step-200: css-var(mix($background-md-color-value, $text-md-color-value, 20%), text-md-color-step-200) !default; +$text-md-color-step-250: css-var(mix($background-md-color-value, $text-md-color-value, 25%), text-md-color-step-250) !default; +$text-md-color-step-300: css-var(mix($background-md-color-value, $text-md-color-value, 30%), text-md-color-step-300) !default; +$text-md-color-step-350: css-var(mix($background-md-color-value, $text-md-color-value, 35%), text-md-color-step-350) !default; +$text-md-color-step-400: css-var(mix($background-md-color-value, $text-md-color-value, 40%), text-md-color-step-400) !default; +$text-md-color-step-450: css-var(mix($background-md-color-value, $text-md-color-value, 45%), text-md-color-step-450) !default; +$text-md-color-step-500: css-var(mix($background-md-color-value, $text-md-color-value, 50%), text-md-color-step-500) !default; +$text-md-color-step-550: css-var(mix($background-md-color-value, $text-md-color-value, 55%), text-md-color-step-550) !default; +$text-md-color-step-600: css-var(mix($background-md-color-value, $text-md-color-value, 60%), text-md-color-step-600) !default; +$text-md-color-step-650: css-var(mix($background-md-color-value, $text-md-color-value, 65%), text-md-color-step-650) !default; +$text-md-color-step-700: css-var(mix($background-md-color-value, $text-md-color-value, 70%), text-md-color-step-700) !default; +$text-md-color-step-750: css-var(mix($background-md-color-value, $text-md-color-value, 75%), text-md-color-step-750) !default; +$text-md-color-step-800: css-var(mix($background-md-color-value, $text-md-color-value, 80%), text-md-color-step-800) !default; +$text-md-color-step-850: css-var(mix($background-md-color-value, $text-md-color-value, 85%), text-md-color-step-850) !default; +$text-md-color-step-900: css-var(mix($background-md-color-value, $text-md-color-value, 90%), text-md-color-step-900) !default; +$text-md-color-step-950: css-var(mix($background-md-color-value, $text-md-color-value, 95%), text-md-color-step-950) !default; +$text-md-color-step-1000: css-var(mix($background-md-color-value, $text-md-color-value, 100%), text-md-color-step-1000) !default; // Material Design General Colors // -------------------------------------------------- @@ -62,8 +94,8 @@ $box-shadow-md-color: css-var($box-shadow-color, box-shadow-md // Material Design Tabs & Tab bar // -------------------------------------------------- $tabbar-md-background-color: css-var($tabbar-background-color, tabbar-md-background-color) !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-ios-lowest)) -$tabbar-md-text-color: css-var($text-md-color-step-200, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-ios-high)) +$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-text-color-active: css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default; // Material Design Toolbar diff --git a/packages/core/src/themes/ionic.theme.default.scss b/packages/core/src/themes/ionic.theme.default.scss index 090a2b9424..3c99cd9b6c 100644 --- a/packages/core/src/themes/ionic.theme.default.scss +++ b/packages/core/src/themes/ionic.theme.default.scss @@ -28,71 +28,71 @@ $alpha-highest: .9 !default; // - 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: slightly darker version of the base color (mix with black) -// - tint: slightly lighter version of the base color (mix with white) +// - shade: 12% darker version of the base color (mix with black) +// - tint: 10% lighter version of the base color (mix with white) $ion-colors: ( primary: ( base: $primary, contrast: #fff, rgb: color-to-rgb-list($primary), - shade: #3f79e0, - tint: #427feb + shade: mix(#000, $primary, 12%), + tint: mix(#fff, $primary, 10%) ), secondary: ( base: $secondary, contrast: #fff, rgb: color-to-rgb-list($secondary), - shade: #2cc158, - tint: #2ec95c + shade: mix(#000, $secondary, 12%), + tint: mix(#fff, $secondary, 10%) ), tertiary: ( base: $tertiary, contrast: #fff, rgb: color-to-rgb-list($tertiary), - shade: #d6903d, - tint: #ffa529 + shade: mix(#000, $tertiary, 12%), + tint: mix(#fff, $tertiary, 10%) ), success: ( base: $success, contrast: #fff, rgb: color-to-rgb-list($success), - shade: #10cb60, - tint: #23df6d + shade: mix(#000, $success, 12%), + tint: mix(#fff, $success, 10%) ), warning: ( base: $warning, contrast: #000, rgb: color-to-rgb-list($warning), - shade: #f1c100, - tint: #ffd214 + shade: mix(#000, $warning, 12%), + tint: mix(#fff, $warning, 10%) ), danger: ( base: $danger, contrast: #fff, rgb: color-to-rgb-list($danger), - shade: #d83636, - tint: #e13838 + shade: mix(#000, $danger, 12%), + tint: mix(#fff, $danger, 10%) ), light: ( base: $light, contrast: #000, rgb: color-to-rgb-list($light), - shade: #d7d7d7, - tint: #e0e0e0 + shade: mix(#000, $light, 12%), + tint: mix(#fff, $light, 10%) ), medium: ( base: $medium, contrast: #000, rgb: color-to-rgb-list($medium), - shade: #8c8e95, - tint: #86888f + shade: mix(#000, $medium, 12%), + tint: mix(#fff, $medium, 10%) ), dark: ( base: $dark, contrast: #fff, rgb: color-to-rgb-list($dark), - shade: #343434, - tint: #3d3d3d + shade: mix(#000, $dark, 12%), + tint: mix(#fff, $dark, 10%) ) ); $colors: ion-extend-colors($ion-colors, $colors); @@ -139,14 +139,46 @@ $text-color-rgb: css-var(color-to-rgb-list($text-color-va // For example a $text-color of white would generally step towards black, // but a $text-color of black would step towards white. // -------------------------------------------------- -$background-color-step-100: css-var(#f2f2f2, background-color-step-100) !default; -$background-color-step-200: css-var(#dcdcdc, background-color-step-200) !default; -$background-color-step-300: css-var(#bdbdbd, background-color-step-300) !default; -$background-color-step-400: css-var(#444, background-color-step-400) !default; -$text-color-step-100: css-var(#222, text-color-step-100) !default; -$text-color-step-200: css-var(#666, text-color-step-200) !default; -$text-color-step-300: css-var(#999, text-color-step-300) !default; -$text-color-step-400: css-var(#c5c5c5, text-color-step-400) !default; +$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; +$background-color-step-150: css-var(mix($text-color-value, $background-color-value, 15%), background-color-step-150) !default; +$background-color-step-200: css-var(mix($text-color-value, $background-color-value, 20%), background-color-step-200) !default; +$background-color-step-250: css-var(mix($text-color-value, $background-color-value, 25%), background-color-step-250) !default; +$background-color-step-300: css-var(mix($text-color-value, $background-color-value, 30%), background-color-step-300) !default; +$background-color-step-350: css-var(mix($text-color-value, $background-color-value, 35%), background-color-step-350) !default; +$background-color-step-400: css-var(mix($text-color-value, $background-color-value, 40%), background-color-step-400) !default; +$background-color-step-450: css-var(mix($text-color-value, $background-color-value, 45%), background-color-step-450) !default; +$background-color-step-500: css-var(mix($text-color-value, $background-color-value, 50%), background-color-step-500) !default; +$background-color-step-550: css-var(mix($text-color-value, $background-color-value, 55%), background-color-step-550) !default; +$background-color-step-600: css-var(mix($text-color-value, $background-color-value, 60%), background-color-step-600) !default; +$background-color-step-650: css-var(mix($text-color-value, $background-color-value, 65%), background-color-step-650) !default; +$background-color-step-700: css-var(mix($text-color-value, $background-color-value, 70%), background-color-step-700) !default; +$background-color-step-750: css-var(mix($text-color-value, $background-color-value, 75%), background-color-step-750) !default; +$background-color-step-800: css-var(mix($text-color-value, $background-color-value, 80%), background-color-step-800) !default; +$background-color-step-850: css-var(mix($text-color-value, $background-color-value, 85%), background-color-step-850) !default; +$background-color-step-900: css-var(mix($text-color-value, $background-color-value, 90%), background-color-step-900) !default; +$background-color-step-950: css-var(mix($text-color-value, $background-color-value, 95%), background-color-step-950) !default; +$background-color-step-1000: css-var(mix($text-color-value, $background-color-value, 100%), background-color-step-1000) !default; +$text-color-step-50: css-var(mix($background-color-value, $text-color-value, 5%), text-color-step-50) !default; +$text-color-step-100: css-var(mix($background-color-value, $text-color-value, 10%), text-color-step-100) !default; +$text-color-step-150: css-var(mix($background-color-value, $text-color-value, 15%), text-color-step-150) !default; +$text-color-step-200: css-var(mix($background-color-value, $text-color-value, 20%), text-color-step-200) !default; +$text-color-step-250: css-var(mix($background-color-value, $text-color-value, 25%), text-color-step-250) !default; +$text-color-step-300: css-var(mix($background-color-value, $text-color-value, 30%), text-color-step-300) !default; +$text-color-step-350: css-var(mix($background-color-value, $text-color-value, 35%), text-color-step-350) !default; +$text-color-step-400: css-var(mix($background-color-value, $text-color-value, 40%), text-color-step-400) !default; +$text-color-step-450: css-var(mix($background-color-value, $text-color-value, 45%), text-color-step-450) !default; +$text-color-step-500: css-var(mix($background-color-value, $text-color-value, 50%), text-color-step-500) !default; +$text-color-step-550: css-var(mix($background-color-value, $text-color-value, 55%), text-color-step-550) !default; +$text-color-step-600: css-var(mix($background-color-value, $text-color-value, 60%), text-color-step-600) !default; +$text-color-step-650: css-var(mix($background-color-value, $text-color-value, 65%), text-color-step-650) !default; +$text-color-step-700: css-var(mix($background-color-value, $text-color-value, 70%), text-color-step-700) !default; +$text-color-step-750: css-var(mix($background-color-value, $text-color-value, 75%), text-color-step-750) !default; +$text-color-step-800: css-var(mix($background-color-value, $text-color-value, 80%), text-color-step-800) !default; +$text-color-step-850: css-var(mix($background-color-value, $text-color-value, 85%), text-color-step-850) !default; +$text-color-step-900: css-var(mix($background-color-value, $text-color-value, 90%), text-color-step-900) !default; +$text-color-step-950: css-var(mix($background-color-value, $text-color-value, 95%), text-color-step-950) !default; +$text-color-step-1000: css-var(mix($background-color-value, $text-color-value, 100%), text-color-step-1000) !default; // Default General Colors // -------------------------------------------------- diff --git a/packages/core/src/themes/test/css-variables/index.html b/packages/core/src/themes/test/css-variables/index.html index 6909e921da..771c61144d 100644 --- a/packages/core/src/themes/test/css-variables/index.html +++ b/packages/core/src/themes/test/css-variables/index.html @@ -115,7 +115,7 @@

-
+
Card Header