@manamerge/mana-atomic-ui 1.0.244 → 1.0.245
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/dist/index.js +15 -32
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/manamerge/atoms/button.ts +2 -2
- package/dist/themes/themes/manamerge/atoms/link.ts +28 -0
- package/dist/themes/themes/manamerge/molecules/cardSimpleRender.ts +2 -2
- package/dist/themes/themes/manamerge/molecules/cardTeaser.ts +1 -1
- package/dist/themes/themes/manamerge/molecules/navigation.ts +3 -1
- package/dist/types/components/Molecules/Header/Header.css.d.ts +1 -1
- package/dist/types/themes/ManamergeTheme.d.ts +30 -0
- package/dist/types/themes/manamerge/atoms/link.d.ts +28 -0
- package/dist/types/themes/manamerge/molecules/navigation.d.ts +2 -0
- package/package.json +1 -1
|
@@ -90,8 +90,8 @@ const button = {
|
|
|
90
90
|
hover: {
|
|
91
91
|
text: colors.one.a,
|
|
92
92
|
border: `1px solid ${colors.one.a}`,
|
|
93
|
-
background: colors.two.
|
|
94
|
-
opacity:
|
|
93
|
+
background: colors.two.d,
|
|
94
|
+
opacity: 0.95 // Slight brightness for hover effect
|
|
95
95
|
},
|
|
96
96
|
active: {
|
|
97
97
|
text: colors.one.a,
|
|
@@ -11,6 +11,10 @@ const Link = {
|
|
|
11
11
|
hover: {
|
|
12
12
|
color: colors.one.b
|
|
13
13
|
},
|
|
14
|
+
focusVisible: {
|
|
15
|
+
outline: `2px solid ${colors.two.b}`,
|
|
16
|
+
outlineOffset: "4px"
|
|
17
|
+
},
|
|
14
18
|
disabled: {
|
|
15
19
|
color: colors.one.e
|
|
16
20
|
}
|
|
@@ -24,6 +28,10 @@ const Link = {
|
|
|
24
28
|
hover: {
|
|
25
29
|
color: colors.one.b
|
|
26
30
|
},
|
|
31
|
+
focusVisible: {
|
|
32
|
+
outline: `2px solid ${colors.two.b}`,
|
|
33
|
+
outlineOffset: "4px"
|
|
34
|
+
},
|
|
27
35
|
disabled: {
|
|
28
36
|
color: colors.one.e
|
|
29
37
|
}
|
|
@@ -37,6 +45,10 @@ const Link = {
|
|
|
37
45
|
hover: {
|
|
38
46
|
color: colors.one.b
|
|
39
47
|
},
|
|
48
|
+
focusVisible: {
|
|
49
|
+
outline: `2px solid ${colors.two.b}`,
|
|
50
|
+
outlineOffset: "4px"
|
|
51
|
+
},
|
|
40
52
|
disabled: {
|
|
41
53
|
color: colors.one.e
|
|
42
54
|
}
|
|
@@ -50,6 +62,10 @@ const Link = {
|
|
|
50
62
|
hover: {
|
|
51
63
|
color: colors.one.b
|
|
52
64
|
},
|
|
65
|
+
focusVisible: {
|
|
66
|
+
outline: `2px solid ${colors.two.b}`,
|
|
67
|
+
outlineOffset: "4px"
|
|
68
|
+
},
|
|
53
69
|
disabled: {
|
|
54
70
|
color: colors.one.e
|
|
55
71
|
}
|
|
@@ -63,6 +79,10 @@ const Link = {
|
|
|
63
79
|
hover: {
|
|
64
80
|
color: colors.one.b
|
|
65
81
|
},
|
|
82
|
+
focusVisible: {
|
|
83
|
+
outline: `2px solid ${colors.two.b}`,
|
|
84
|
+
outlineOffset: "4px"
|
|
85
|
+
},
|
|
66
86
|
disabled: {
|
|
67
87
|
color: colors.one.e
|
|
68
88
|
}
|
|
@@ -76,6 +96,10 @@ const Link = {
|
|
|
76
96
|
hover: {
|
|
77
97
|
color: colors.two.a
|
|
78
98
|
},
|
|
99
|
+
focusVisible: {
|
|
100
|
+
outline: `2px solid ${colors.two.b}`,
|
|
101
|
+
outlineOffset: "4px"
|
|
102
|
+
},
|
|
79
103
|
disabled: {
|
|
80
104
|
color: colors.one.e
|
|
81
105
|
}
|
|
@@ -90,6 +114,10 @@ const Link = {
|
|
|
90
114
|
hover: {
|
|
91
115
|
color: colors.two.a
|
|
92
116
|
},
|
|
117
|
+
focusVisible: {
|
|
118
|
+
outline: `2px solid ${colors.two.b}`,
|
|
119
|
+
outlineOffset: "4px"
|
|
120
|
+
},
|
|
93
121
|
disabled: {
|
|
94
122
|
color: colors.one.e
|
|
95
123
|
}
|
|
@@ -15,13 +15,13 @@ const cardSimpleRender = {
|
|
|
15
15
|
minWidth: "250px",
|
|
16
16
|
focus: {
|
|
17
17
|
border: "",
|
|
18
|
-
outline: `2px dashed ${colors.two.
|
|
18
|
+
outline: `2px dashed ${colors.two.b}`,
|
|
19
19
|
boxShadow: "",
|
|
20
20
|
transition: "outline 0.5s ease"
|
|
21
21
|
},
|
|
22
22
|
hover: {
|
|
23
23
|
border: "",
|
|
24
|
-
outline: `2px solid ${colors.two.
|
|
24
|
+
outline: `2px solid ${colors.two.b}`,
|
|
25
25
|
boxShadow: "",
|
|
26
26
|
transition: "outline 0.5s ease"
|
|
27
27
|
},
|
|
@@ -7,7 +7,7 @@ const navigation = {
|
|
|
7
7
|
// background: `linear-gradient( to right, transparent 30%, ${colors.two.g} 60%, ${colors.two.g} 90%)`,
|
|
8
8
|
padding: "13px 20px 13px 20px",
|
|
9
9
|
atomIcon: {
|
|
10
|
-
variant: "
|
|
10
|
+
variant: "xl",
|
|
11
11
|
color: colors.one.c,
|
|
12
12
|
focus: {
|
|
13
13
|
outline: "0px solid transparent",
|
|
@@ -46,9 +46,11 @@ const navigation = {
|
|
|
46
46
|
},
|
|
47
47
|
navLinks: {
|
|
48
48
|
mobileGap: "20px",
|
|
49
|
+
padding: "10px 10px 10px 0",
|
|
49
50
|
responsive: {
|
|
50
51
|
largeMobileUp: {
|
|
51
52
|
gap: "50px",
|
|
53
|
+
padding: "10px",
|
|
52
54
|
justifyContent: "flex-end", // change here if you want the menu to aligned on the left/center/right
|
|
53
55
|
margin: "0 30px 0 0"
|
|
54
56
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const BackgroundImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
|
|
3
2
|
export declare const WrapperBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
3
|
moleculeVariant: string;
|
|
4
|
+
imageURLBackground?: string | undefined;
|
|
5
5
|
withOverlay?: boolean | undefined;
|
|
6
6
|
}>> & string;
|
|
7
7
|
export declare const WrapperHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
@@ -10,6 +10,10 @@ export declare const ManamergeTheme: {
|
|
|
10
10
|
hover: {
|
|
11
11
|
color: string;
|
|
12
12
|
};
|
|
13
|
+
focusVisible: {
|
|
14
|
+
outline: string;
|
|
15
|
+
outlineOffset: string;
|
|
16
|
+
};
|
|
13
17
|
disabled: {
|
|
14
18
|
color: string;
|
|
15
19
|
};
|
|
@@ -23,6 +27,10 @@ export declare const ManamergeTheme: {
|
|
|
23
27
|
hover: {
|
|
24
28
|
color: string;
|
|
25
29
|
};
|
|
30
|
+
focusVisible: {
|
|
31
|
+
outline: string;
|
|
32
|
+
outlineOffset: string;
|
|
33
|
+
};
|
|
26
34
|
disabled: {
|
|
27
35
|
color: string;
|
|
28
36
|
};
|
|
@@ -36,6 +44,10 @@ export declare const ManamergeTheme: {
|
|
|
36
44
|
hover: {
|
|
37
45
|
color: string;
|
|
38
46
|
};
|
|
47
|
+
focusVisible: {
|
|
48
|
+
outline: string;
|
|
49
|
+
outlineOffset: string;
|
|
50
|
+
};
|
|
39
51
|
disabled: {
|
|
40
52
|
color: string;
|
|
41
53
|
};
|
|
@@ -49,6 +61,10 @@ export declare const ManamergeTheme: {
|
|
|
49
61
|
hover: {
|
|
50
62
|
color: string;
|
|
51
63
|
};
|
|
64
|
+
focusVisible: {
|
|
65
|
+
outline: string;
|
|
66
|
+
outlineOffset: string;
|
|
67
|
+
};
|
|
52
68
|
disabled: {
|
|
53
69
|
color: string;
|
|
54
70
|
};
|
|
@@ -62,6 +78,10 @@ export declare const ManamergeTheme: {
|
|
|
62
78
|
hover: {
|
|
63
79
|
color: string;
|
|
64
80
|
};
|
|
81
|
+
focusVisible: {
|
|
82
|
+
outline: string;
|
|
83
|
+
outlineOffset: string;
|
|
84
|
+
};
|
|
65
85
|
disabled: {
|
|
66
86
|
color: string;
|
|
67
87
|
};
|
|
@@ -75,6 +95,10 @@ export declare const ManamergeTheme: {
|
|
|
75
95
|
hover: {
|
|
76
96
|
color: string;
|
|
77
97
|
};
|
|
98
|
+
focusVisible: {
|
|
99
|
+
outline: string;
|
|
100
|
+
outlineOffset: string;
|
|
101
|
+
};
|
|
78
102
|
disabled: {
|
|
79
103
|
color: string;
|
|
80
104
|
};
|
|
@@ -89,6 +113,10 @@ export declare const ManamergeTheme: {
|
|
|
89
113
|
hover: {
|
|
90
114
|
color: string;
|
|
91
115
|
};
|
|
116
|
+
focusVisible: {
|
|
117
|
+
outline: string;
|
|
118
|
+
outlineOffset: string;
|
|
119
|
+
};
|
|
92
120
|
disabled: {
|
|
93
121
|
color: string;
|
|
94
122
|
};
|
|
@@ -1214,9 +1242,11 @@ export declare const ManamergeTheme: {
|
|
|
1214
1242
|
};
|
|
1215
1243
|
navLinks: {
|
|
1216
1244
|
mobileGap: string;
|
|
1245
|
+
padding: string;
|
|
1217
1246
|
responsive: {
|
|
1218
1247
|
largeMobileUp: {
|
|
1219
1248
|
gap: string;
|
|
1249
|
+
padding: string;
|
|
1220
1250
|
justifyContent: string;
|
|
1221
1251
|
margin: string;
|
|
1222
1252
|
};
|
|
@@ -8,6 +8,10 @@ declare const Link: {
|
|
|
8
8
|
hover: {
|
|
9
9
|
color: string;
|
|
10
10
|
};
|
|
11
|
+
focusVisible: {
|
|
12
|
+
outline: string;
|
|
13
|
+
outlineOffset: string;
|
|
14
|
+
};
|
|
11
15
|
disabled: {
|
|
12
16
|
color: string;
|
|
13
17
|
};
|
|
@@ -21,6 +25,10 @@ declare const Link: {
|
|
|
21
25
|
hover: {
|
|
22
26
|
color: string;
|
|
23
27
|
};
|
|
28
|
+
focusVisible: {
|
|
29
|
+
outline: string;
|
|
30
|
+
outlineOffset: string;
|
|
31
|
+
};
|
|
24
32
|
disabled: {
|
|
25
33
|
color: string;
|
|
26
34
|
};
|
|
@@ -34,6 +42,10 @@ declare const Link: {
|
|
|
34
42
|
hover: {
|
|
35
43
|
color: string;
|
|
36
44
|
};
|
|
45
|
+
focusVisible: {
|
|
46
|
+
outline: string;
|
|
47
|
+
outlineOffset: string;
|
|
48
|
+
};
|
|
37
49
|
disabled: {
|
|
38
50
|
color: string;
|
|
39
51
|
};
|
|
@@ -47,6 +59,10 @@ declare const Link: {
|
|
|
47
59
|
hover: {
|
|
48
60
|
color: string;
|
|
49
61
|
};
|
|
62
|
+
focusVisible: {
|
|
63
|
+
outline: string;
|
|
64
|
+
outlineOffset: string;
|
|
65
|
+
};
|
|
50
66
|
disabled: {
|
|
51
67
|
color: string;
|
|
52
68
|
};
|
|
@@ -60,6 +76,10 @@ declare const Link: {
|
|
|
60
76
|
hover: {
|
|
61
77
|
color: string;
|
|
62
78
|
};
|
|
79
|
+
focusVisible: {
|
|
80
|
+
outline: string;
|
|
81
|
+
outlineOffset: string;
|
|
82
|
+
};
|
|
63
83
|
disabled: {
|
|
64
84
|
color: string;
|
|
65
85
|
};
|
|
@@ -73,6 +93,10 @@ declare const Link: {
|
|
|
73
93
|
hover: {
|
|
74
94
|
color: string;
|
|
75
95
|
};
|
|
96
|
+
focusVisible: {
|
|
97
|
+
outline: string;
|
|
98
|
+
outlineOffset: string;
|
|
99
|
+
};
|
|
76
100
|
disabled: {
|
|
77
101
|
color: string;
|
|
78
102
|
};
|
|
@@ -87,6 +111,10 @@ declare const Link: {
|
|
|
87
111
|
hover: {
|
|
88
112
|
color: string;
|
|
89
113
|
};
|
|
114
|
+
focusVisible: {
|
|
115
|
+
outline: string;
|
|
116
|
+
outlineOffset: string;
|
|
117
|
+
};
|
|
90
118
|
disabled: {
|
|
91
119
|
color: string;
|
|
92
120
|
};
|