@omnia/velcron 7.0.528-dev → 7.0.529-dev

package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts

@@ -5,8 +5,6 @@ export interface ColorDefinition {
     dark: boolean;
     color: string;
     colorToned: string;
-    colorStyles: ColorStyles;
-    colorTonedStyles: ColorStyles;
 }
 export interface ColorStyles {
     background: object | string;

package/internal-do-not-import-from-here/shared/models/theming/ThemeMethods.d.ts

@@ -0,0 +1,10 @@
+import { ColorDefinition, ThemeDefinitionV2, TypographyType } from "@omnia/fx-models";
+export declare const useThemeMethods: (themedefinition: ThemeDefinitionV2) => {
+    colorSchema: (colorSchemaType: string) => import("@omnia/fx-models").ColorSchema;
+    typography: (typographyType: string) => TypographyType;
+    color: (colorSchemaType: string, colorType: string) => string;
+    colorDefinition: (colorSchemaType: string, colorType: string) => ColorDefinition;
+    complementaryColorType: (colorType: string) => string;
+    complementaryColor: (colorSchemaType: string, colorType: string) => string;
+    complementaryColorDefinition: (colorSchemaType: string, colorType: string) => ColorDefinition;
+};

package/internal-do-not-import-from-here/shared/models/theming/ThemeMethods.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeMethods = void 0;
+const fx_models_1 = require("@omnia/fx-models");
+const useThemeMethods = (themedefinition) => {
+    const colorSchema = (colorSchemaType) => {
+        if (colorSchemaType === fx_models_1.ColorSchemaTypes.primary) {
+            return themedefinition.primary;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.secondary) {
+            return themedefinition.secondary;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.accent1) {
+            return themedefinition.accent1;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.accent2) {
+            return themedefinition.accent2;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.accent3) {
+            return themedefinition.accent3;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.background) {
+            return themedefinition.background;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.neutral) {
+            return themedefinition.neutral;
+        }
+        else if (colorSchemaType === fx_models_1.ColorSchemaTypes.error) {
+            return themedefinition.error;
+        }
+        return themedefinition.background;
+    };
+    const typography = (typographyType) => {
+        if (typographyType === fx_models_1.TypographyTypes.h1) {
+            return themedefinition.typography.h1;
+        }
+        else if (typographyType === fx_models_1.TypographyTypes.h2) {
+            return themedefinition.typography.h2;
+        }
+        else if (typographyType === fx_models_1.TypographyTypes.h3) {
+            return themedefinition.typography.h3;
+        }
+        else if (typographyType === fx_models_1.TypographyTypes.caption) {
+            return themedefinition.typography.caption;
+        }
+        else if (typographyType === fx_models_1.TypographyTypes.link) {
+            return themedefinition.typography.link;
+        }
+        else if (typographyType === fx_models_1.TypographyTypes.text) {
+            return themedefinition.typography.text;
+        }
+        return themedefinition.typography.text;
+    };
+    const color = (colorSchemaType, colorType) => {
+        const mappedColorSchema = colorSchema(colorSchemaType);
+        if (colorType === fx_models_1.ColorTypes.base) {
+            return mappedColorSchema.base.color;
+        }
+        else if (colorType === fx_models_1.ColorTypes.baseTone) {
+            return mappedColorSchema.base.colorToned;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onBase) {
+            return mappedColorSchema.onBase.color;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onBaseTone) {
+            return mappedColorSchema.onBase.colorToned;
+        }
+        else if (colorType === fx_models_1.ColorTypes.container) {
+            return mappedColorSchema.container.color;
+        }
+        else if (colorType === fx_models_1.ColorTypes.containerTone) {
+            return mappedColorSchema.container.colorToned;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onContainer) {
+            return mappedColorSchema.onContainer.color;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onContainerTone) {
+            return mappedColorSchema.onContainer.colorToned;
+        }
+        return colorType;
+    };
+    const colorDefinition = (colorSchemaType, colorType) => {
+        const mappedColorSchema = colorSchema(colorSchemaType);
+        if (colorType === fx_models_1.ColorTypes.base
+            || colorType === fx_models_1.ColorTypes.baseTone) {
+            return mappedColorSchema.base;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onBase
+            ||
+                colorType === fx_models_1.ColorTypes.onBaseTone) {
+            return mappedColorSchema.onBase;
+        }
+        else if (colorType === fx_models_1.ColorTypes.container
+            ||
+                colorType === fx_models_1.ColorTypes.containerTone) {
+            return mappedColorSchema.container;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onContainer
+            ||
+                colorType === fx_models_1.ColorTypes.onContainerTone) {
+            return mappedColorSchema.onContainer;
+        }
+        return mappedColorSchema.base;
+    };
+    const complementaryColorType = (colorType) => {
+        if (colorType === fx_models_1.ColorTypes.base
+            || colorType === fx_models_1.ColorTypes.baseTone) {
+            return fx_models_1.ColorTypes.onBase;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onBase
+            || colorType === fx_models_1.ColorTypes.onBaseTone) {
+            return fx_models_1.ColorTypes.base;
+        }
+        else if (colorType === fx_models_1.ColorTypes.container
+            || colorType === fx_models_1.ColorTypes.containerTone) {
+            return fx_models_1.ColorTypes.onContainer;
+        }
+        else if (colorType === fx_models_1.ColorTypes.onContainer
+            || colorType === fx_models_1.ColorTypes.onContainerTone) {
+            return fx_models_1.ColorTypes.container;
+        }
+        return colorType;
+    };
+    const complementaryColor = (colorSchemaType, colorType) => {
+        const matchingColorType = complementaryColorType(colorType);
+        return color(colorSchemaType, matchingColorType);
+    };
+    const complementaryColorDefinition = (colorSchemaType, colorType) => {
+        const matchingColorType = complementaryColorType(colorType);
+        return colorDefinition(colorSchemaType, matchingColorType);
+    };
+    return {
+        colorSchema,
+        typography,
+        color,
+        colorDefinition,
+        complementaryColorType,
+        complementaryColor,
+        complementaryColorDefinition
+    };
+};
+exports.useThemeMethods = useThemeMethods;

package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts

@@ -13,7 +13,6 @@ export interface TypographyType {
     large: TypographyTypeBreakPoint;
     medium?: TypographyTypeBreakPoint;
     small?: TypographyTypeBreakPoint;
-    style: object | string;
 }
 export interface TypographyTypeBreakPoint {
     weight: number;

package/internal-do-not-import-from-here/shared/models/theming/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./ThemeDefinitionV2";
 export * from "./TypographyDefinition";
 export * from "./OmniaThemes";
+export * from "./ThemeMethods";

package/internal-do-not-import-from-here/shared/models/theming/index.js

@@ -4,3 +4,4 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ThemeDefinitionV2"), exports);
 tslib_1.__exportStar(require("./TypographyDefinition"), exports);
 tslib_1.__exportStar(require("./OmniaThemes"), exports);
+tslib_1.__exportStar(require("./ThemeMethods"), exports);

package/models/VelcronDefinitions.d.ts

@@ -41,7 +41,7 @@ export interface VelcronRenderContext {
     rootContext: VelcronState;
     currentContext: VelcronState;
     theming?: ReturnType<typeof useVelcronThemingStore>;
-    colorSchemaName?: string;
+    colorSchemaType?: string;
     colorSchema?: ColorSchema;
     actions?: {
         [name: string]: [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "7.0.528-dev",
+  "version": "7.0.529-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronRenderers.d.ts

@@ -14,10 +14,14 @@ export declare class VelcronRenderers {
                 currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
             };
             get: {
-                colorSchema: (schema: string) => import("@omnia/fx-models").ColorSchema;
-                typography: (name: string) => import("@omnia/fx-models").TypographyType;
-                color: (schemaName: string, colorType: string) => string;
-                complementaryColor: (colorType: string) => string;
+                colorSchema: (colorSchemaType: string) => import("@omnia/fx-models").ColorSchema;
+                typography: (typographyType: string) => import("@omnia/fx-models").TypographyType;
+                color: (colorSchemaType: string, colorType: string) => string;
+                colorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
+                complementaryColorType: (colorType: string) => string;
+                complementaryColor: (colorSchemaType: string, colorType: string) => string;
+                complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
+                currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
             };
             actions: {
                 setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;

package/parser/VelcronRenderers.js

@@ -75,11 +75,11 @@ class VelcronRenderers {
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
             const schema = VelcronData_1.VelcronData.dataBind(result, definition.colorSchema);
-            result.colorSchemaName = stores_1.ReactivitySystem.makeReactive(schema);
-            result.colorSchema = result.theming.get.colorSchema(result.colorSchemaName);
+            result.colorSchemaType = stores_1.ReactivitySystem.makeReactive(schema);
+            result.colorSchema = result.theming.get.colorSchema(result.colorSchemaType);
         }
         else {
-            result.colorSchemaName = currentRenderCtx.colorSchemaName;
+            result.colorSchemaType = currentRenderCtx.colorSchemaType;
             result.colorSchema = currentRenderCtx.colorSchema;
         }
         return result;

package/parser/VelcronStyles.js

@@ -47,19 +47,19 @@ class VelcronStyles {
         }
         if (borderSettings.top || borderSettings.top === 0) {
             styleBase["borderTopStyle"] = "solid";
-            styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+            styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
         }
         if (borderSettings.right || borderSettings.right === 0) {
             styleBase["borderRightStyle"] = "solid";
-            styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+            styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
         }
         if (borderSettings.bottom || borderSettings.bottom === 0) {
             styleBase["borderBottomStyle"] = "solid";
-            styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+            styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
         }
         if (borderSettings.left || borderSettings.left === 0) {
             styleBase["borderLeftStyle"] = "solid";
-            styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+            styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
         }
     }
     static create(definition, renderCtx) {
@@ -92,7 +92,7 @@ class VelcronStyles {
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
             const textDefinition = definition;
             if (textDefinition.color) {
-                styleBase["color"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, textDefinition.color);
+                styleBase["color"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, textDefinition.color);
             }
             else {
                 styleBase["color"] = renderCtx.colorSchema.onBase.color;

package/stores/VelcronTheming.d.ts

@@ -1,13 +1,17 @@
-import { ThemeDefinitionV2, TypographyType } from "..";
+import { ThemeDefinitionV2 } from "..";
 export declare const useVelcronThemingStore: (newStateWithName?: string) => {
     state: {
         currentTheme: ThemeDefinitionV2;
     };
     get: {
-        colorSchema: (schema: string) => import("..").ColorSchema;
-        typography: (name: string) => TypographyType;
-        color: (schemaName: string, colorType: string) => string;
-        complementaryColor: (colorType: string) => string;
+        colorSchema: (colorSchemaType: string) => import("..").ColorSchema;
+        typography: (typographyType: string) => import("..").TypographyType;
+        color: (colorSchemaType: string, colorType: string) => string;
+        colorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
+        complementaryColorType: (colorType: string) => string;
+        complementaryColor: (colorSchemaType: string, colorType: string) => string;
+        complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
+        currentTheme: () => ThemeDefinitionV2;
     };
     actions: {
         setTheme(newTheme: ThemeDefinitionV2): void;

package/stores/VelcronTheming.js

@@ -12,106 +12,31 @@ exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("Velcron
         };
     },
     getters(state) {
-        const colorSchema = (schema) => {
-            if (schema === __1.ColorSchemaTypes.primary) {
-                return state.currentTheme?.primary;
-            }
-            else if (schema === __1.ColorSchemaTypes.secondary) {
-                return state.currentTheme?.secondary;
-            }
-            else if (schema === __1.ColorSchemaTypes.accent1) {
-                return state.currentTheme?.accent1;
-            }
-            else if (schema === __1.ColorSchemaTypes.accent2) {
-                return state.currentTheme?.accent2;
-            }
-            else if (schema === __1.ColorSchemaTypes.accent3) {
-                return state.currentTheme?.accent3;
-            }
-            else if (schema === __1.ColorSchemaTypes.background) {
-                return state.currentTheme?.background;
-            }
-            else if (schema === __1.ColorSchemaTypes.neutral) {
-                return state.currentTheme?.neutral;
-            }
-            else if (schema === __1.ColorSchemaTypes.error) {
-                return state.currentTheme?.error;
-            }
-            return state.currentTheme?.background;
-        };
-        const typography = (name) => {
-            if (name === __1.TypographyTypes.h1) {
-                return state.currentTheme.typography.h1;
-            }
-            else if (name === __1.TypographyTypes.h2) {
-                return state.currentTheme.typography.h2;
-            }
-            else if (name === __1.TypographyTypes.h3) {
-                return state.currentTheme.typography.h3;
-            }
-            else if (name === __1.TypographyTypes.caption) {
-                return state.currentTheme.typography.caption;
-            }
-            else if (name === __1.TypographyTypes.link) {
-                return state.currentTheme.typography.link;
-            }
-            else if (name === __1.TypographyTypes.text) {
-                return state.currentTheme.typography.text;
-            }
-            return state.currentTheme.typography.text;
-        };
-        const complementaryColor = (colorType) => {
-            if (colorType === __1.ColorTypes.base
-                || colorType === __1.ColorTypes.baseTone) {
-                return __1.ColorTypes.onBase;
-            }
-            else if (colorType === __1.ColorTypes.onBase
-                || colorType === __1.ColorTypes.onBaseTone) {
-                return __1.ColorTypes.base;
-            }
-            else if (colorType === __1.ColorTypes.container
-                || colorType === __1.ColorTypes.containerTone) {
-                return __1.ColorTypes.onContainer;
-            }
-            else if (colorType === __1.ColorTypes.onContainer
-                || colorType === __1.ColorTypes.onContainerTone) {
-                return __1.ColorTypes.container;
-            }
-            return colorType;
-        };
-        const color = (schemaName, colorType) => {
-            const mappedColorSchema = colorSchema(schemaName);
-            if (colorType === __1.ColorTypes.base) {
-                return mappedColorSchema.base.color;
-            }
-            else if (colorType === __1.ColorTypes.baseTone) {
-                return mappedColorSchema.base.colorToned;
-            }
-            else if (colorType === __1.ColorTypes.onBase) {
-                return mappedColorSchema.onBase.color;
-            }
-            else if (colorType === __1.ColorTypes.onBaseTone) {
-                return mappedColorSchema.onBase.colorToned;
-            }
-            else if (colorType === __1.ColorTypes.container) {
-                return mappedColorSchema.container.color;
-            }
-            else if (colorType === __1.ColorTypes.containerTone) {
-                return mappedColorSchema.container.colorToned;
-            }
-            else if (colorType === __1.ColorTypes.onContainer) {
-                return mappedColorSchema.onContainer.color;
-            }
-            else if (colorType === __1.ColorTypes.onContainerTone) {
-                return mappedColorSchema.onContainer.colorToned;
-            }
-            return colorType;
-        };
         return {
-            colorSchema,
-            typography,
-            color,
-            complementaryColor
+            colorSchema: (colorSchemaType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).colorSchema(colorSchemaType);
+            },
+            typography: (typographyType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).typography(typographyType);
+            },
+            color: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).color(colorSchemaType, colorType);
+            },
+            colorDefinition: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).colorDefinition(colorSchemaType, colorType);
+            },
+            complementaryColorType: (colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorType(colorType);
+            },
+            complementaryColor: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColor(colorSchemaType, colorType);
+            },
+            complementaryColorDefinition: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorDefinition(colorSchemaType, colorType);
+            },
+            currentTheme: () => {
+                return this.currentTheme.state;
+            }
         };
     },
     actions(state) {