fix(theme-build): using ion prefix

This commit is contained in:
Manu Mtz.-Almeida
2018-02-05 18:50:52 +01:00
parent f41bb39ce3
commit ba5c8511ed
5 changed files with 56 additions and 55 deletions

View File

@ -191,3 +191,4 @@ declare global {
} }
} }
declare global { namespace JSX { interface StencilJSX {} } }

View File

@ -1,4 +1,4 @@
import { Component, Prop, PropDidChange } from '@stencil/core'; import { Component, Prop, Watch } from '@stencil/core';
@Component({ @Component({
@ -13,7 +13,7 @@ export class AppPreview {
@Prop() cssText: string; @Prop() cssText: string;
iframe: HTMLIFrameElement; iframe: HTMLIFrameElement;
@PropDidChange('cssText') @Watch('cssText')
onCssTextChange() { onCssTextChange() {
console.log('AppPreview onCssTextChange'); console.log('AppPreview onCssTextChange');

View File

@ -1,152 +1,151 @@
export const THEME_VARIABLES = [ export const THEME_VARIABLES = [
{ {
property: '--color-primary' property: '--ion-color-primary'
}, },
{ {
property: '--color-primary-tint' property: '--ion-color-primary-tint'
}, },
{ {
property: '--color-primary-shade' property: '--ion-color-primary-shade'
}, },
{ {
property: '--color-primary-contrast' property: '--ion-color-primary-contrast'
}, },
{ {
property: '--color-secondary' property: '--ion-color-secondary'
}, },
{ {
property: '--color-secondary-tint' property: '--ion-color-secondary-tint'
}, },
{ {
property: '--color-secondary-shade' property: '--ion-color-secondary-shade'
}, },
{ {
property: '--color-secondary-contrast' property: '--ion-color-secondary-contrast'
}, },
{ {
property: '--color-tertiary' property: '--ion-color-tertiary'
}, },
{ {
property: '--color-tertiary-tint' property: '--ion-color-tertiary-tint'
}, },
{ {
property: '--color-tertiary-shade' property: '--ion-color-tertiary-shade'
}, },
{ {
property: '--color-tertiary-contrast' property: '--ion-color-tertiary-contrast'
}, },
{ {
property: '--color-success' property: '--ion-color-success'
}, },
{ {
property: '--color-success-tint' property: '--ion-color-success-tint'
}, },
{ {
property: '--color-success-shade' property: '--ion-color-success-shade'
}, },
{ {
property: '--color-success-contrast' property: '--ion-color-success-contrast'
}, },
{ {
property: '--color-warning' property: '--ion-color-warning'
}, },
{ {
property: '--color-warning-tint' property: '--ion-color-warning-tint'
}, },
{ {
property: '--color-warning-shade' property: '--ion-color-warning-shade'
}, },
{ {
property: '--color-warning-contrast' property: '--ion-color-warning-contrast'
}, },
{ {
property: '--color-danger' property: '--ion-color-danger'
}, },
{ {
property: '--color-danger-tint' property: '--ion-color-danger-tint'
}, },
{ {
property: '--color-danger-shade' property: '--ion-color-danger-shade'
}, },
{ {
property: '--color-danger-contrast' property: '--ion-color-danger-contrast'
}, },
{ {
property: '--color-light' property: '--ion-color-light'
}, },
{ {
property: '--color-light-tint' property: '--ion-color-light-tint'
}, },
{ {
property: '--color-light-shade' property: '--ion-color-light-shade'
}, },
{ {
property: '--color-light-contrast' property: '--ion-color-light-contrast'
}, },
{ {
property: '--color-medium' property: '--ion-color-medium'
}, },
{ {
property: '--color-medium-tint' property: '--ion-color-medium-tint'
}, },
{ {
property: '--color-medium-shade' property: '--ion-color-medium-shade'
}, },
{ {
property: '--color-medium-contrast' property: '--ion-color-medium-contrast'
}, },
{ {
property: '--color-dark' property: '--ion-color-dark'
}, },
{ {
property: '--color-dark-tint' property: '--ion-color-dark-tint'
}, },
{ {
property: '--color-dark-shade' property: '--ion-color-dark-shade'
}, },
{ {
property: '--color-dark-contrast' property: '--ion-color-dark-contrast'
}, },
{ {
property: '--text-color' property: '--ion-text-color'
}, },
{ {
property: '--text-color-alt' property: '--ion-text-color-alt'
}, },
{ {
property: '--background-color' property: '--ion-background-color'
}, },
{ {
property: '--background-color-alt' property: '--ion-background-color-alt'
}, },
{ {
property: '--toolbar-background-color' property: '--ion-toolbar-background-color'
}, },
{ {
property: '--tabbar-background-color' property: '--ion-tabbar-background-color'
}, },
{ {
property: '--tabbar-text-color' property: '--ion-tabbar-text-color'
}, },
{ {
property: '--tabbar-text-color-active' property: '--ion-tabbar-text-color-active'
}, },
{ {
property: '--item-background-color' property: '--ion-item-background-color'
}, },
{ {
property: '--item-background-color-alt' property: '--ion-item-background-color-alt'
}, },
{ {
property: '--border-color' property: '--ion-border-color'
}, },
{ {
property: '--backdrop-color' property: '--ion-backdrop-color'
}, },
{ {
property: '--box-shadow-color' property: '--ion-box-shadow-color'
}, },
]; ];

View File

@ -300,7 +300,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonBackdropAttributes extends HTMLAttributes { export interface IonBackdropAttributes extends HTMLAttributes {
mode?: 'ios' | 'md';
} }
} }
} }
@ -2966,6 +2966,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabsAttributes extends HTMLAttributes { export interface IonTabsAttributes extends HTMLAttributes {
color?: string;
name?: string; name?: string;
scrollable?: boolean; scrollable?: boolean;
tabbarHidden?: boolean; tabbarHidden?: boolean;

View File

@ -14,7 +14,7 @@ Backdrops are full screen components that overlay other components. They are use
#### mode #### mode
any
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.
@ -24,7 +24,7 @@ Possible values are: `"ios"` or `"md"`.
#### mode #### mode
any
The mode determines which platform styles to use. The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`. Possible values are: `"ios"` or `"md"`.