diff --git a/packages/core/scripts/theme-builder/src/components.d.ts b/packages/core/scripts/theme-builder/src/components.d.ts index d1a6d3ffc2..e626c51c34 100644 --- a/packages/core/scripts/theme-builder/src/components.d.ts +++ b/packages/core/scripts/theme-builder/src/components.d.ts @@ -191,3 +191,4 @@ declare global { } } +declare global { namespace JSX { interface StencilJSX {} } } diff --git a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx index 8cd3092027..6050a7f1ea 100644 --- a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx +++ b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, PropDidChange } from '@stencil/core'; +import { Component, Prop, Watch } from '@stencil/core'; @Component({ @@ -13,7 +13,7 @@ export class AppPreview { @Prop() cssText: string; iframe: HTMLIFrameElement; - @PropDidChange('cssText') + @Watch('cssText') onCssTextChange() { console.log('AppPreview onCssTextChange'); diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts index d7ce7a19fa..d90c2abee9 100644 --- a/packages/core/scripts/theme-builder/src/theme-variables.ts +++ b/packages/core/scripts/theme-builder/src/theme-variables.ts @@ -1,152 +1,151 @@ 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' }, ]; diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 851c284293..b57ad7ce7b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -300,7 +300,7 @@ declare global { } namespace JSXElements { export interface IonBackdropAttributes extends HTMLAttributes { - + mode?: 'ios' | 'md'; } } } @@ -2966,6 +2966,7 @@ declare global { } namespace JSXElements { export interface IonTabsAttributes extends HTMLAttributes { + color?: string; name?: string; scrollable?: boolean; tabbarHidden?: boolean; diff --git a/packages/core/src/components/backdrop/readme.md b/packages/core/src/components/backdrop/readme.md index eeb5f59ee4..a328977e01 100644 --- a/packages/core/src/components/backdrop/readme.md +++ b/packages/core/src/components/backdrop/readme.md @@ -14,7 +14,7 @@ Backdrops are full screen components that overlay other components. They are use #### mode -any + The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -24,7 +24,7 @@ Possible values are: `"ios"` or `"md"`. #### mode -any + The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.