@unitedstatespowersquadrons/components 1.2.4 → 1.2.6-pre.1
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/Colors.tsx +14 -0
- package/Styles.tsx +8 -2
- package/package.json +1 -1
package/Colors.tsx
CHANGED
|
@@ -14,6 +14,11 @@ const hoverColors = {
|
|
|
14
14
|
red: "#660000",
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
+
const insigniaColors = {
|
|
18
|
+
gold: "#FFBF3F",
|
|
19
|
+
silver: "#AAAAAA",
|
|
20
|
+
};
|
|
21
|
+
|
|
17
22
|
const shades = {
|
|
18
23
|
_0: "black",
|
|
19
24
|
_1: "#111111",
|
|
@@ -99,6 +104,14 @@ const specificColors = {
|
|
|
99
104
|
purple: "#9955FF",
|
|
100
105
|
red: "#DD7777",
|
|
101
106
|
},
|
|
107
|
+
shadow: {
|
|
108
|
+
blue: "#4477DD",
|
|
109
|
+
gray: "#AAAAAA",
|
|
110
|
+
green: "#44AA44",
|
|
111
|
+
orange: "#DD7722",
|
|
112
|
+
purple: "#7733DD",
|
|
113
|
+
red: "#BB5555",
|
|
114
|
+
},
|
|
102
115
|
},
|
|
103
116
|
border: "gray",
|
|
104
117
|
shadow: "#AAAAAA",
|
|
@@ -114,6 +127,7 @@ const specificColors = {
|
|
|
114
127
|
|
|
115
128
|
const Colors = {
|
|
116
129
|
...baseColors,
|
|
130
|
+
...insigniaColors,
|
|
117
131
|
hover: { ...hoverColors },
|
|
118
132
|
shade,
|
|
119
133
|
shades,
|
package/Styles.tsx
CHANGED
|
@@ -4,11 +4,13 @@ const colorStyles = {
|
|
|
4
4
|
black: { color: Colors.black },
|
|
5
5
|
blue: { color: Colors.blue },
|
|
6
6
|
darkGray: { color: Colors.darkGray },
|
|
7
|
+
gold: { color: Colors.gold },
|
|
7
8
|
gray: { color: Colors.gray },
|
|
8
9
|
green: { color: Colors.green },
|
|
9
10
|
orange: { color: Colors.orange },
|
|
10
11
|
purple: { color: Colors.purple },
|
|
11
12
|
red: { color: Colors.red },
|
|
13
|
+
silver: { color: Colors.silver },
|
|
12
14
|
};
|
|
13
15
|
|
|
14
16
|
const hoverColorStyles = {
|
|
@@ -23,12 +25,16 @@ const hoverColorStyles = {
|
|
|
23
25
|
};
|
|
24
26
|
|
|
25
27
|
const colorizeButton = (color: ButtonColorName) => {
|
|
28
|
+
const hover = Colors.button.background.hover[color];
|
|
29
|
+
const normal = Colors.button.background.normal[color];
|
|
30
|
+
const shadow = Colors.button.background.shadow[color];
|
|
31
|
+
|
|
26
32
|
return({
|
|
27
33
|
"&:hover": {
|
|
28
|
-
backgroundColor:
|
|
34
|
+
backgroundColor: `linear-gradient(180deg, ${normal}, ${hover}, ${hover}, ${normal}) !important`,
|
|
29
35
|
fontWeight: "normal",
|
|
30
36
|
},
|
|
31
|
-
backgroundColor:
|
|
37
|
+
backgroundColor: `linear-gradient(180deg, ${shadow}, ${normal}, ${normal}, ${shadow}) !important`,
|
|
32
38
|
color: `${Colors.black} !important`,
|
|
33
39
|
});
|
|
34
40
|
};
|