@omnia/velcron 7.0.529-dev → 7.0.531-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.
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { ColorDefinition, ThemeDefinitionV2
|
|
1
|
+
import { ColorDefinition, ThemeDefinitionV2 } from "./ThemeDefinitionV2";
|
|
2
|
+
import { TypographyType } from "./TypographyDefinition";
|
|
2
3
|
export declare const useThemeMethods: (themedefinition: ThemeDefinitionV2) => {
|
|
3
|
-
colorSchema: (colorSchemaType: string) => import("
|
|
4
|
+
colorSchema: (colorSchemaType: string) => import("./ThemeDefinitionV2").ColorSchema;
|
|
4
5
|
typography: (typographyType: string) => TypographyType;
|
|
5
6
|
color: (colorSchemaType: string, colorType: string) => string;
|
|
6
7
|
colorDefinition: (colorSchemaType: string, colorType: string) => ColorDefinition;
|
|
@@ -1,123 +1,124 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useThemeMethods = void 0;
|
|
4
|
-
const
|
|
4
|
+
const ThemeDefinitionV2_1 = require("./ThemeDefinitionV2");
|
|
5
|
+
const TypographyDefinition_1 = require("./TypographyDefinition");
|
|
5
6
|
const useThemeMethods = (themedefinition) => {
|
|
6
7
|
const colorSchema = (colorSchemaType) => {
|
|
7
|
-
if (colorSchemaType ===
|
|
8
|
+
if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.primary) {
|
|
8
9
|
return themedefinition.primary;
|
|
9
10
|
}
|
|
10
|
-
else if (colorSchemaType ===
|
|
11
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.secondary) {
|
|
11
12
|
return themedefinition.secondary;
|
|
12
13
|
}
|
|
13
|
-
else if (colorSchemaType ===
|
|
14
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent1) {
|
|
14
15
|
return themedefinition.accent1;
|
|
15
16
|
}
|
|
16
|
-
else if (colorSchemaType ===
|
|
17
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent2) {
|
|
17
18
|
return themedefinition.accent2;
|
|
18
19
|
}
|
|
19
|
-
else if (colorSchemaType ===
|
|
20
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.accent3) {
|
|
20
21
|
return themedefinition.accent3;
|
|
21
22
|
}
|
|
22
|
-
else if (colorSchemaType ===
|
|
23
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.background) {
|
|
23
24
|
return themedefinition.background;
|
|
24
25
|
}
|
|
25
|
-
else if (colorSchemaType ===
|
|
26
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.neutral) {
|
|
26
27
|
return themedefinition.neutral;
|
|
27
28
|
}
|
|
28
|
-
else if (colorSchemaType ===
|
|
29
|
+
else if (colorSchemaType === ThemeDefinitionV2_1.ColorSchemaTypes.error) {
|
|
29
30
|
return themedefinition.error;
|
|
30
31
|
}
|
|
31
32
|
return themedefinition.background;
|
|
32
33
|
};
|
|
33
34
|
const typography = (typographyType) => {
|
|
34
|
-
if (typographyType ===
|
|
35
|
+
if (typographyType === TypographyDefinition_1.TypographyTypes.h1) {
|
|
35
36
|
return themedefinition.typography.h1;
|
|
36
37
|
}
|
|
37
|
-
else if (typographyType ===
|
|
38
|
+
else if (typographyType === TypographyDefinition_1.TypographyTypes.h2) {
|
|
38
39
|
return themedefinition.typography.h2;
|
|
39
40
|
}
|
|
40
|
-
else if (typographyType ===
|
|
41
|
+
else if (typographyType === TypographyDefinition_1.TypographyTypes.h3) {
|
|
41
42
|
return themedefinition.typography.h3;
|
|
42
43
|
}
|
|
43
|
-
else if (typographyType ===
|
|
44
|
+
else if (typographyType === TypographyDefinition_1.TypographyTypes.caption) {
|
|
44
45
|
return themedefinition.typography.caption;
|
|
45
46
|
}
|
|
46
|
-
else if (typographyType ===
|
|
47
|
+
else if (typographyType === TypographyDefinition_1.TypographyTypes.link) {
|
|
47
48
|
return themedefinition.typography.link;
|
|
48
49
|
}
|
|
49
|
-
else if (typographyType ===
|
|
50
|
+
else if (typographyType === TypographyDefinition_1.TypographyTypes.text) {
|
|
50
51
|
return themedefinition.typography.text;
|
|
51
52
|
}
|
|
52
53
|
return themedefinition.typography.text;
|
|
53
54
|
};
|
|
54
55
|
const color = (colorSchemaType, colorType) => {
|
|
55
56
|
const mappedColorSchema = colorSchema(colorSchemaType);
|
|
56
|
-
if (colorType ===
|
|
57
|
+
if (colorType === ThemeDefinitionV2_1.ColorTypes.base) {
|
|
57
58
|
return mappedColorSchema.base.color;
|
|
58
59
|
}
|
|
59
|
-
else if (colorType ===
|
|
60
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
|
|
60
61
|
return mappedColorSchema.base.colorToned;
|
|
61
62
|
}
|
|
62
|
-
else if (colorType ===
|
|
63
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase) {
|
|
63
64
|
return mappedColorSchema.onBase.color;
|
|
64
65
|
}
|
|
65
|
-
else if (colorType ===
|
|
66
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
|
|
66
67
|
return mappedColorSchema.onBase.colorToned;
|
|
67
68
|
}
|
|
68
|
-
else if (colorType ===
|
|
69
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.container) {
|
|
69
70
|
return mappedColorSchema.container.color;
|
|
70
71
|
}
|
|
71
|
-
else if (colorType ===
|
|
72
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
|
|
72
73
|
return mappedColorSchema.container.colorToned;
|
|
73
74
|
}
|
|
74
|
-
else if (colorType ===
|
|
75
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer) {
|
|
75
76
|
return mappedColorSchema.onContainer.color;
|
|
76
77
|
}
|
|
77
|
-
else if (colorType ===
|
|
78
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
|
|
78
79
|
return mappedColorSchema.onContainer.colorToned;
|
|
79
80
|
}
|
|
80
81
|
return colorType;
|
|
81
82
|
};
|
|
82
83
|
const colorDefinition = (colorSchemaType, colorType) => {
|
|
83
84
|
const mappedColorSchema = colorSchema(colorSchemaType);
|
|
84
|
-
if (colorType ===
|
|
85
|
-
|| colorType ===
|
|
85
|
+
if (colorType === ThemeDefinitionV2_1.ColorTypes.base
|
|
86
|
+
|| colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
|
|
86
87
|
return mappedColorSchema.base;
|
|
87
88
|
}
|
|
88
|
-
else if (colorType ===
|
|
89
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase
|
|
89
90
|
||
|
|
90
|
-
colorType ===
|
|
91
|
+
colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
|
|
91
92
|
return mappedColorSchema.onBase;
|
|
92
93
|
}
|
|
93
|
-
else if (colorType ===
|
|
94
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.container
|
|
94
95
|
||
|
|
95
|
-
colorType ===
|
|
96
|
+
colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
|
|
96
97
|
return mappedColorSchema.container;
|
|
97
98
|
}
|
|
98
|
-
else if (colorType ===
|
|
99
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer
|
|
99
100
|
||
|
|
100
|
-
colorType ===
|
|
101
|
+
colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
|
|
101
102
|
return mappedColorSchema.onContainer;
|
|
102
103
|
}
|
|
103
104
|
return mappedColorSchema.base;
|
|
104
105
|
};
|
|
105
106
|
const complementaryColorType = (colorType) => {
|
|
106
|
-
if (colorType ===
|
|
107
|
-
|| colorType ===
|
|
108
|
-
return
|
|
107
|
+
if (colorType === ThemeDefinitionV2_1.ColorTypes.base
|
|
108
|
+
|| colorType === ThemeDefinitionV2_1.ColorTypes.baseTone) {
|
|
109
|
+
return ThemeDefinitionV2_1.ColorTypes.onBase;
|
|
109
110
|
}
|
|
110
|
-
else if (colorType ===
|
|
111
|
-
|| colorType ===
|
|
112
|
-
return
|
|
111
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onBase
|
|
112
|
+
|| colorType === ThemeDefinitionV2_1.ColorTypes.onBaseTone) {
|
|
113
|
+
return ThemeDefinitionV2_1.ColorTypes.base;
|
|
113
114
|
}
|
|
114
|
-
else if (colorType ===
|
|
115
|
-
|| colorType ===
|
|
116
|
-
return
|
|
115
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.container
|
|
116
|
+
|| colorType === ThemeDefinitionV2_1.ColorTypes.containerTone) {
|
|
117
|
+
return ThemeDefinitionV2_1.ColorTypes.onContainer;
|
|
117
118
|
}
|
|
118
|
-
else if (colorType ===
|
|
119
|
-
|| colorType ===
|
|
120
|
-
return
|
|
119
|
+
else if (colorType === ThemeDefinitionV2_1.ColorTypes.onContainer
|
|
120
|
+
|| colorType === ThemeDefinitionV2_1.ColorTypes.onContainerTone) {
|
|
121
|
+
return ThemeDefinitionV2_1.ColorTypes.container;
|
|
121
122
|
}
|
|
122
123
|
return colorType;
|
|
123
124
|
};
|