@omnia/velcron 8.0.130-dev → 8.0.131-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal-do-not-import-from-here/shared/models/theming/Blueprints.d.ts +11 -4
- package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts +7 -4
- package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.js +2 -0
- package/package.json +1 -1
- package/stores/VelcronColorSchema.d.ts +9 -6
- package/stores/VelcronTheming.d.ts +4 -1
- package/stores/VelcronTheming.js +7 -4
|
@@ -4,8 +4,9 @@ import { TypographyValue } from "./Typography";
|
|
|
4
4
|
export interface BoxDimensions extends Spacing {
|
|
5
5
|
}
|
|
6
6
|
import { TypographyBlueprint } from "./Typography";
|
|
7
|
-
import { GuidValue, VelcronAppDefinition } from "@omnia/fx-models";
|
|
7
|
+
import { Guid, GuidValue, VelcronAppDefinition } from "@omnia/fx-models";
|
|
8
8
|
export interface Blueprints {
|
|
9
|
+
id: Guid;
|
|
9
10
|
name?: string;
|
|
10
11
|
}
|
|
11
12
|
export type BlueprintVariant = "primary" | "secondary" | "variant1" | "variant2" | "variant3";
|
|
@@ -34,7 +35,7 @@ export interface ChromeBlueprint {
|
|
|
34
35
|
spacing?: Spacing;
|
|
35
36
|
};
|
|
36
37
|
}
|
|
37
|
-
export type ButtonTypes = "primary" | "basic" | "accent1" | "warn" | "
|
|
38
|
+
export type ButtonTypes = "primary" | "basic" | "accent1" | "warn" | "link" | "variant1" | "variant2" | "variant3" | "variant4";
|
|
38
39
|
export interface ComponentBlueprints extends Blueprints {
|
|
39
40
|
buttons?: {
|
|
40
41
|
text?: {
|
|
@@ -42,16 +43,22 @@ export interface ComponentBlueprints extends Blueprints {
|
|
|
42
43
|
basic?: ButtonBlueprint;
|
|
43
44
|
accent1?: ButtonBlueprint;
|
|
44
45
|
warn?: ButtonBlueprint;
|
|
45
|
-
disabled?: ButtonBlueprint;
|
|
46
46
|
link?: ButtonBlueprint;
|
|
47
|
+
variant1?: ButtonBlueprint;
|
|
48
|
+
variant2?: ButtonBlueprint;
|
|
49
|
+
variant3?: ButtonBlueprint;
|
|
50
|
+
variant4?: ButtonBlueprint;
|
|
47
51
|
};
|
|
48
52
|
icon?: {
|
|
49
53
|
primary?: ButtonBlueprint;
|
|
50
54
|
basic?: ButtonBlueprint;
|
|
51
55
|
accent1?: ButtonBlueprint;
|
|
52
56
|
warn?: ButtonBlueprint;
|
|
53
|
-
disabled?: ButtonBlueprint;
|
|
54
57
|
link?: ButtonBlueprint;
|
|
58
|
+
variant1?: ButtonBlueprint;
|
|
59
|
+
variant2?: ButtonBlueprint;
|
|
60
|
+
variant3?: ButtonBlueprint;
|
|
61
|
+
variant4?: ButtonBlueprint;
|
|
55
62
|
};
|
|
56
63
|
};
|
|
57
64
|
tabs?: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Guid } from "../Guid";
|
|
2
|
-
import { BoxDimensions
|
|
2
|
+
import { BoxDimensions } from "./Blueprints";
|
|
3
3
|
export interface ColorTypeResult<resultType> {
|
|
4
4
|
base: resultType;
|
|
5
5
|
baseTone: resultType;
|
|
@@ -39,14 +39,15 @@ export interface ColorSchemas {
|
|
|
39
39
|
error: ColorSchema;
|
|
40
40
|
info: ColorSchema;
|
|
41
41
|
warning: ColorSchema;
|
|
42
|
+
notification: ColorSchema;
|
|
42
43
|
}
|
|
43
44
|
export interface ThemeDefinitionV2 {
|
|
44
45
|
id: Guid;
|
|
45
46
|
name?: string;
|
|
46
47
|
colors: ColorSchemas;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
typographyId: Guid;
|
|
49
|
+
spacingId: Guid;
|
|
50
|
+
componentId: Guid;
|
|
50
51
|
}
|
|
51
52
|
export type ColorSchemaType = keyof typeof ColorSchemaTypes;
|
|
52
53
|
export declare enum ColorSchemaTypes {
|
|
@@ -56,6 +57,8 @@ export declare enum ColorSchemaTypes {
|
|
|
56
57
|
accent2 = "accent2",
|
|
57
58
|
accent3 = "accent3",
|
|
58
59
|
neutral = "neutral",
|
|
60
|
+
warning = "warning",
|
|
61
|
+
notification = "notification",
|
|
59
62
|
background = "background",
|
|
60
63
|
error = "error",
|
|
61
64
|
info = "info",
|
|
@@ -9,6 +9,8 @@ var ColorSchemaTypes;
|
|
|
9
9
|
ColorSchemaTypes["accent2"] = "accent2";
|
|
10
10
|
ColorSchemaTypes["accent3"] = "accent3";
|
|
11
11
|
ColorSchemaTypes["neutral"] = "neutral";
|
|
12
|
+
ColorSchemaTypes["warning"] = "warning";
|
|
13
|
+
ColorSchemaTypes["notification"] = "notification";
|
|
12
14
|
ColorSchemaTypes["background"] = "background";
|
|
13
15
|
ColorSchemaTypes["error"] = "error";
|
|
14
16
|
ColorSchemaTypes["info"] = "info";
|
package/package.json
CHANGED
|
@@ -8,21 +8,24 @@ export declare const useVelcronColorSchemaStore: (newStateWithName?: string) =>
|
|
|
8
8
|
onContainer: ColorDefinition;
|
|
9
9
|
isContainer: boolean;
|
|
10
10
|
name: string;
|
|
11
|
-
colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic";
|
|
11
|
+
colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic";
|
|
12
12
|
themeStore: {
|
|
13
13
|
state: {
|
|
14
14
|
currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
|
|
15
|
+
components: import("@omnia/fx-models").ComponentBlueprints;
|
|
16
|
+
spacing: import("@omnia/fx-models").SpacingBlueprints;
|
|
17
|
+
typography: import("@omnia/fx-models").TypographyBlueprints;
|
|
15
18
|
};
|
|
16
19
|
get: {
|
|
17
20
|
componentBlueprints: () => void;
|
|
18
|
-
colorSchema: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic") => ColorSchema;
|
|
21
|
+
colorSchema: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic") => ColorSchema;
|
|
19
22
|
spacing: () => import("@omnia/fx-models").SpacingDefinition;
|
|
20
23
|
typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => any;
|
|
21
|
-
color: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
|
|
22
|
-
colorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
|
|
24
|
+
color: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
|
|
25
|
+
colorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
|
|
23
26
|
complementaryColorType: (colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
|
|
24
|
-
complementaryColor: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
|
|
25
|
-
complementaryColorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
|
|
27
|
+
complementaryColor: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
|
|
28
|
+
complementaryColorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
|
|
26
29
|
currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
|
|
27
30
|
};
|
|
28
31
|
actions: {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
|
|
1
|
+
import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ComponentBlueprints, SpacingBlueprints, ThemeDefinitionV2, TypographyBlueprints, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
|
|
2
2
|
export declare const useVelcronThemingStore: (newStateWithName?: string) => {
|
|
3
3
|
state: {
|
|
4
4
|
currentTheme: ThemeDefinitionV2;
|
|
5
|
+
components: ComponentBlueprints;
|
|
6
|
+
spacing: SpacingBlueprints;
|
|
7
|
+
typography: TypographyBlueprints;
|
|
5
8
|
};
|
|
6
9
|
get: {
|
|
7
10
|
componentBlueprints: () => void;
|
package/stores/VelcronTheming.js
CHANGED
|
@@ -7,23 +7,26 @@ exports.useVelcronThemingStore = (0, _1.defineVelcronStore)("VelcronTheming", {
|
|
|
7
7
|
setup() {
|
|
8
8
|
return {
|
|
9
9
|
state: {
|
|
10
|
-
currentTheme: {}
|
|
10
|
+
currentTheme: {},
|
|
11
|
+
components: {},
|
|
12
|
+
spacing: {},
|
|
13
|
+
typography: {},
|
|
11
14
|
}
|
|
12
15
|
};
|
|
13
16
|
},
|
|
14
17
|
getters(state) {
|
|
15
18
|
return {
|
|
16
19
|
componentBlueprints: () => {
|
|
17
|
-
state.
|
|
20
|
+
state.components;
|
|
18
21
|
},
|
|
19
22
|
colorSchema: (colorSchemaType) => {
|
|
20
23
|
return (0, __1.useThemeMethods)(() => state.currentTheme).colorSchema(colorSchemaType);
|
|
21
24
|
},
|
|
22
25
|
spacing: () => {
|
|
23
|
-
return state.
|
|
26
|
+
return state.spacing.primary.inner;
|
|
24
27
|
},
|
|
25
28
|
typography: (typographyType, size) => {
|
|
26
|
-
const typography = state.
|
|
29
|
+
const typography = state.typography.primary;
|
|
27
30
|
if (typographyType === __1.TypographyTypes.text) {
|
|
28
31
|
return typography.text[size];
|
|
29
32
|
}
|