mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
Merge branch 'core' of github.com:ionic-team/ionic into core
This commit is contained in:
Manu Mtz.-Almeida
@ -8,12 +8,21 @@ import {
|
||||
Color,
|
||||
} from './components/Color';
|
||||
|
||||
declare global {
|
||||
interface HTMLStencilElement extends HTMLElement {
|
||||
componentOnReady(): Promise<this>;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
public static isColor (value: string): Boolean {
|
||||
if (/rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.test(value)) return true;
|
||||
|
||||
return new Color(hsl);
|
||||
return /(^#[0-9a-fA-F]+)/.test(value.trim());
|
||||
}
|
||||
|
||||
tint (percent: number = .1): Color {
|
||||
percent = 1 + percent;
|
||||
return this.shiftLightness(percent);
|
||||
contrast (threshold: number = 128): Color {
|
||||
return new Color((this.yiq >= threshold ? '#000' : '#fff'));
|
||||
}
|
||||
|
||||
shade (percent: number = .1): Color {
|
||||
percent = 1 - percent;
|
||||
return this.shiftLightness(percent);
|
||||
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));
|
||||
}
|
||||
|
||||
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})
|
||||
});
|
||||
}
|
||||
shade (weight: number = .12): Color {
|
||||
return this.mix({r: 0, g: 0, b: 0}, weight);
|
||||
}
|
||||
|
||||
return steps;
|
||||
tint (weight: number = .1): Color {
|
||||
return this.mix({r: 255, g: 255, b: 255}, weight);
|
||||
}
|
||||
|
||||
toList (): string {
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -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';
|
||||
|
||||
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}'
|
||||
}
|
||||
onIframeLoad () {
|
||||
this.applyStyles();
|
||||
|
||||
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}`;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -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 {
|
||||
<button type="button" onClick={this.submitUpdate.bind(this)}>Save Theme</button>
|
||||
<button type="button" onClick={this.createNew.bind(this)}>Create</button>
|
||||
<button type="button" onClick={this.deleteTheme.bind(this)}>Delete</button>
|
||||
</div>,
|
||||
<div class="instructions">
|
||||
<h2>Instructions</h2>
|
||||
<p>Primary CSS Properties will highlight on hover.</p>
|
||||
<p><b>CTRL + Hover: Property</b><br/> Will visibly toggle color in preview.</p>
|
||||
<p><b>CTRL + Hover: Preview</b><br/>Will visibly highlight properties used under the mouse.</p>
|
||||
<p><b>ALT + Double Click: Primary Property</b><br/>Auto generate steps or shade/tint/contrast
|
||||
variations.</p>
|
||||
</div>
|
||||
];
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -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) {
|
||||
this.demoModeChange.emit(ev.currentTarget.value);
|
||||
}
|
||||
|
||||
onChangeMode(ev) {
|
||||
this.demoModeChange.emit(ev.currentTarget.value);
|
||||
onChangeUrl (ev) {
|
||||
this.demoUrlChange.emit(ev.currentTarget.value);
|
||||
}
|
||||
|
||||
render() {
|
||||
render () {
|
||||
return [
|
||||
<div>
|
||||
|
||||
@ -31,8 +31,8 @@ export class DemoSelection {
|
||||
</select>
|
||||
|
||||
<select onChange={this.onChangeMode.bind(this)}>
|
||||
<option value='md' selected={'md' === this.demoMode}>md</option>
|
||||
<option value='ios' selected={'ios' === this.demoMode}>ios</option>
|
||||
<option value="md" selected={'md' === this.demoMode}>md</option>
|
||||
<option value="ios" selected={'ios' === this.demoMode}>ios</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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`;
|
||||
}
|
||||
|
||||
|
||||
@ -17,4 +17,8 @@ main > section {
|
||||
max-width: 600px;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
#css-proxy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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};
|
||||
|
||||
@ -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 {
|
||||
|
||||
@State() cssText: string = '';
|
||||
demoData: { name: string, url: string }[];
|
||||
themeData: { name: string }[];
|
||||
|
||||
@State() demoUrl: string;
|
||||
@State() demoMode: string;
|
||||
@State() cssText: 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('themeCssChange')
|
||||
onThemeCssChange(ev) {
|
||||
this.cssText = ev.detail.cssText;
|
||||
this.themeName = ev.detail.themeName;
|
||||
@Listen('demoUrlChange')
|
||||
onDemoUrlChange (ev) {
|
||||
this.demoUrl = ev.detail;
|
||||
localStorage.setItem(STORED_DEMO_URL_KEY, this.demoUrl);
|
||||
}
|
||||
|
||||
console.log('ThemeBuilder themeCssChange', this.themeName);
|
||||
@Listen('propertiesUsed')
|
||||
onPropertiesUsed (ev) {
|
||||
this.propertiesUsed = ev.detail.properties;
|
||||
}
|
||||
|
||||
@Listen('propertyHoverStart')
|
||||
onPropertyHoverStart(ev) {
|
||||
onPropertyHoverStart (ev) {
|
||||
this.hoverProperty = ev.detail.property;
|
||||
}
|
||||
|
||||
@Listen('propertyHoverStop')
|
||||
onPropertyHoverStop() {
|
||||
onPropertyHoverStop () {
|
||||
this.hoverProperty = undefined;
|
||||
}
|
||||
|
||||
@Listen('propertiesUsed')
|
||||
onPropertiesUsed(ev) {
|
||||
this.propertiesUsed = ev.detail.properties;
|
||||
@Listen('themeCssChange')
|
||||
onThemeCssChange (ev) {
|
||||
this.cssText = ev.detail.cssText;
|
||||
this.themeName = ev.detail.themeName;
|
||||
|
||||
console.log('ThemeBuilder themeCssChange', this.themeName);
|
||||
}
|
||||
|
||||
render() {
|
||||
render () {
|
||||
return [
|
||||
<main>
|
||||
<section class='preview-column'>
|
||||
<section class="preview-column">
|
||||
<demo-selection demoData={this.demoData} demoUrl={this.demoUrl} demoMode={this.demoMode}></demo-selection>
|
||||
<app-preview demoUrl={this.demoUrl} demoMode={this.demoMode} cssText={this.cssText} hoverProperty={this.hoverProperty}></app-preview>
|
||||
<app-preview demoUrl={this.demoUrl} demoMode={this.demoMode} cssText={this.cssText}
|
||||
hoverProperty={this.hoverProperty}></app-preview>
|
||||
</section>
|
||||
|
||||
<section class='selector-column'>
|
||||
<section class="selector-column">
|
||||
<theme-selector themeData={this.themeData} propertiesUsed={this.propertiesUsed}></theme-selector>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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`;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
async search () {
|
||||
const input: HTMLInputElement = this.el.querySelector('#searchInput') as HTMLInputElement,
|
||||
value = input.value;
|
||||
|
||||
input.value = '';
|
||||
parseCss (css: string) {
|
||||
console.log('ThemeSelector parseCss');
|
||||
|
||||
try {
|
||||
this.palettes = await fetch(`${COLOR_URL}?search=${value}&stuff=poop`).then(r => r.json()) || [];
|
||||
} catch (e) {
|
||||
this.palettes = [];
|
||||
}
|
||||
}
|
||||
this.cssHolder.innerHTML = css.replace(':root', `#${this.proxyElement.id}`);
|
||||
const computed = window.getComputedStyle(this.proxyElement);
|
||||
|
||||
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;
|
||||
}
|
||||
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');
|
||||
|
||||
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 = <section>
|
||||
{
|
||||
this.themeVariables
|
||||
.filter(d => !d.computed)
|
||||
.map(d => <variable-selector class={this.propertiesUsed.indexOf(d.property) >= 0 ? 'used' : ''}
|
||||
property={d.property} value={d.value}></variable-selector>)
|
||||
.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 <variable-selector
|
||||
class={{'is-primary': !!computedReferences.length, used: this.propertiesUsed.indexOf(d.property) >= 0}}
|
||||
property={d.property} value={d.value}
|
||||
usedWith={Array.from(new Set(computedReferences))}></variable-selector>;
|
||||
})
|
||||
}
|
||||
</section>,
|
||||
search = <section>
|
||||
@ -260,17 +254,12 @@ export class ThemeSelector {
|
||||
{(d.colors || []).map((c: string) => <div class="color" data-color={`#${c}`}
|
||||
style={{backgroundColor: `#${c}`}}>
|
||||
<div class="color-buttons">
|
||||
<button onClick={onColorClick} data-property="--ion-color-primary" class="primary">p</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-secondary" class="secondary">s</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-tertiary" class="tertiary">t</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-success" class="success">ss</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-warning" class="warning">w</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-danger" class="danger">d</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-light" class="light">l</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-medium" class="medium">m</button>
|
||||
<button onClick={onColorClick} data-property="--ion-color-dark" class="dark">dk</button>
|
||||
<button onClick={onColorClick} data-property="--ion-background-color" class="background">bg</button>
|
||||
<button onClick={onColorClick} data-property="--ion-text-color" class="text">txt</button>
|
||||
{this.themeVariables
|
||||
.filter(variable => !!variable.quickPick)
|
||||
.map(variable => <button onClick={onColorClick}
|
||||
data-property={variable.property}
|
||||
style={{backgroundColor: `var(${variable.property})`}}>{variable.quickPick.text}</button>)
|
||||
}
|
||||
</div>
|
||||
</div>)}
|
||||
</div>)
|
||||
@ -280,17 +269,118 @@ export class ThemeSelector {
|
||||
</section>;
|
||||
|
||||
return [
|
||||
<div id="css-proxy" ref={el => this.proxyElement = el}></div>,
|
||||
<div>
|
||||
<div class="top-bar">
|
||||
<select onChange={this.onChangeUrl.bind(this)}>
|
||||
{this.themeData.map(d => <option value={d.name} selected={this.themeName === d.name}>{d.name}</option>)}
|
||||
</select>
|
||||
<button type="button" class="search-toggle"
|
||||
onClick={this.toggleSearchMode.bind(this)}>{this.searchMode ? 'Close' : 'Open'} Search
|
||||
</button>
|
||||
<div class="right">
|
||||
<button type="button" class="search-toggle"
|
||||
onClick={this.toggleSearchMode.bind(this)}>{this.searchMode ? 'Close' : 'Open'} Search
|
||||
</button>
|
||||
<div class="settings">
|
||||
<div class="row">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="generateContrast" checked={this.generateContrast}
|
||||
onChange={this.toggleCheck.bind(this, 'generateContrast')}></input>
|
||||
<label>Auto Contrast</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="generateVariations" checked={this.generateVariations}
|
||||
onChange={this.toggleCheck.bind(this, 'generateVariations')}></input>
|
||||
<label>Auto Shade/Tint</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="generateSteps" checked={this.generateSteps}
|
||||
onChange={this.toggleCheck.bind(this, 'generateSteps')}></input>
|
||||
<label>Auto Steps</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="showSteps" checked={this.showSteps}
|
||||
onChange={this.toggleCheck.bind(this, 'showSteps')}></input>
|
||||
<label>Show Steps</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.searchMode ? search : variables}
|
||||
</div>
|
||||
];
|
||||
}
|
||||
|
||||
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());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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)) {
|
||||
this.generateColors.emit({
|
||||
color,
|
||||
property: this.property
|
||||
});
|
||||
} else if (/(^--ion-background-color$|^--ion-text-color$)/.test(this.property)) {
|
||||
|
||||
if (this.usedWith) {
|
||||
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 [
|
||||
<section class={value ? 'valid' : 'invalid'}>
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link href="/theme-builder/build/app.css" rel="stylesheet">
|
||||
<script src="/theme-builder/build/app.js"></script>
|
||||
<style id="themer"></style>
|
||||
</head>
|
||||
<body>
|
||||
<theme-builder></theme-builder>
|
||||
|
||||
@ -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-50',
|
||||
computed: {
|
||||
type: ComputedType.step,
|
||||
params: {property: '--ion-text-color', amount: .050, from: '--ion-background-color' }
|
||||
}
|
||||
},
|
||||
{
|
||||
property: '--ion-text-color-step-100',
|
||||
computed: {
|
||||
type: ComputedType.step,
|
||||
params: {property: '--ion-text-color', amount: .100, from: '--ion-background-color' }
|
||||
}
|
||||
},
|
||||
{
|
||||
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-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-100'
|
||||
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-200'
|
||||
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-300'
|
||||
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-400'
|
||||
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'
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -31,6 +31,11 @@
|
||||
<ion-button color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button color="tertiary" class="activated">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button color="warning" class="activated">Warning.activated</ion-button>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.content-md hr {
|
||||
background-color: $background-color-step-100;
|
||||
background-color: $background-md-color-step-50;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
|
||||
|
||||
@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
|
||||
|
||||
@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section style="max-width: 450px">
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-title>Card Header</ion-card-title>
|
||||
|
||||
Reference in New Issue
Block a user