fix(theme-build): using ion prefix

packages/core/scripts/theme-builder/src/components.d.ts

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

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');
 

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'
   },
 
 ];

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;

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"`.