Skip to content

Commit 794c7bb

Browse files
smashbricksmashbrick
committed
requested Changes
1 parent 566e185 commit 794c7bb

File tree

4 files changed

+143
-128
lines changed

4 files changed

+143
-128
lines changed

‎lib/src/components/Button/button.styles.css.ts

Lines changed: 48 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,6 @@
11
import { recipe } from "@vanilla-extract/recipes";
2-
import { createTheme } from "@vanilla-extract/css";
3-
import { ButtonTheme } from "./button.types";
42

5-
export const [defaultButtonTheme, defaultButtonVars]: ButtonTheme = createTheme(
6-
{
7-
color: "#FFFFFF",
8-
backgroundColor: "#1AB5EB",
9-
borderColor: "none",
10-
hoverBackgroundColor: "#008FCB",
11-
hoverColor: "#FFFFFF",
12-
hoverBorderColor: "none",
13-
focusBackgroundColor: "#1AB5EB40",
14-
focusColor: "#FFFFFF",
15-
focusBorderColor: "#C6EDFB",
16-
disabledBackgroundColor: "#8CDAF5",
17-
disabledColor: "#FFFFFF",
18-
disabledBorderColor: "none",
19-
}
20-
);
21-
22-
export const [lightButtonTheme, lightButtonVars]: ButtonTheme = createTheme({
23-
color: "#1AB5EB",
24-
backgroundColor: "#F9F9F9",
25-
borderColor: "#DDDDDD",
26-
hoverBackgroundColor: "#F0F0F0",
27-
hoverColor: "#008FCB",
28-
hoverBorderColor: "none",
29-
focusBackgroundColor: "#F9F9F9",
30-
focusColor: "#1AB5EB",
31-
focusBorderColor: "#C6EDFB",
32-
disabledBackgroundColor: "#F9F9F9",
33-
disabledColor: "#1AB5EB",
34-
disabledBorderColor: "#DDDDDD",
35-
});
36-
37-
export const [ghostButtonTheme, ghostButtonVars]: ButtonTheme = createTheme({
38-
color: "#1AB5EB",
39-
backgroundColor: "none",
40-
borderColor: "none",
41-
hoverBackgroundColor: "#0000000D",
42-
hoverColor: "#008FCB",
43-
hoverBorderColor: "none",
44-
focusBackgroundColor: "none",
45-
focusColor: "#1AB5EB",
46-
focusBorderColor: "#C6EDFB",
47-
disabledBackgroundColor: "none",
48-
disabledColor: "#1AB5EB",
49-
disabledBorderColor: "",
50-
});
51-
52-
export const [hallowButtonTheme, hallowButtonVars]: ButtonTheme = createTheme({
53-
color: "#1AB5EB",
54-
backgroundColor: "none",
55-
borderColor: "#1AB5EB",
56-
hoverBackgroundColor: "none",
57-
hoverColor: "#1AB5EB",
58-
hoverBorderColor: "#AAAAAA",
59-
focusBackgroundColor: "none",
60-
focusColor: "#101010",
61-
focusBorderColor: "#C6EDFB",
62-
disabledBackgroundColor: "none",
63-
disabledColor: "#878787",
64-
disabledBorderColor: "#EEEEEE",
65-
});
3+
import { defaultVars, lightVars, ghostVars, hallowVars } from "src/themes";
664

675
export const buttonStyles = recipe({
686
base: {
@@ -74,90 +12,90 @@ export const buttonStyles = recipe({
7412
variants: {
7513
variant: {
7614
default: {
77-
background: defaultButtonVars.backgroundColor,
78-
color: defaultButtonVars.color,
79-
borderColor: defaultButtonVars.borderColor,
15+
background: defaultVars.backgroundColor,
16+
color: defaultVars.color,
17+
borderColor: defaultVars.borderColor,
8018
border: 0,
8119
":hover": {
82-
background: defaultButtonVars.hoverBackgroundColor,
83-
color: defaultButtonVars.hoverColor,
84-
borderColor: defaultButtonVars.hoverBorderColor,
20+
background: defaultVars.hoverBackgroundColor,
21+
color: defaultVars.hoverColor,
22+
borderColor: defaultVars.hoverBorderColor,
8523
},
8624
":focus": {
8725
borderWidth: "2px",
88-
background: defaultButtonVars.focusBackgroundColor,
89-
color: defaultButtonVars.focusColor,
90-
borderColor: defaultButtonVars.focusBorderColor,
26+
background: defaultVars.focusBackgroundColor,
27+
color: defaultVars.focusColor,
28+
borderColor: defaultVars.focusBorderColor,
9129
},
9230
":disabled": {
93-
background: defaultButtonVars.disabledBackgroundColor,
94-
color: defaultButtonVars.disabledColor,
95-
borderColor: defaultButtonVars.disabledBorderColor,
31+
background: defaultVars.disabledBackgroundColor,
32+
color: defaultVars.disabledColor,
33+
borderColor: defaultVars.disabledBorderColor,
9634
},
9735
},
9836
light: {
99-
background: lightButtonVars.backgroundColor,
100-
color: lightButtonVars.color,
37+
background: lightVars.backgroundColor,
38+
color: lightVars.color,
10139
border: "1px solid",
102-
borderColor: lightButtonVars.borderColor,
40+
borderColor: lightVars.borderColor,
10341
":hover": {
104-
background: lightButtonVars.hoverBackgroundColor,
105-
color: lightButtonVars.hoverColor,
106-
borderColor: lightButtonVars.hoverBorderColor,
42+
background: lightVars.hoverBackgroundColor,
43+
color: lightVars.hoverColor,
44+
borderColor: lightVars.hoverBorderColor,
10745
},
10846
":focus": {
10947
borderWidth: "2px",
110-
background: lightButtonVars.focusBackgroundColor,
111-
color: lightButtonVars.focusColor,
112-
borderColor: lightButtonVars.focusBorderColor,
48+
background: lightVars.focusBackgroundColor,
49+
color: lightVars.focusColor,
50+
borderColor: lightVars.focusBorderColor,
11351
},
11452
":disabled": {
115-
background: lightButtonVars.disabledBackgroundColor,
116-
color: lightButtonVars.disabledColor,
117-
borderColor: lightButtonVars.disabledBorderColor,
53+
background: lightVars.disabledBackgroundColor,
54+
color: lightVars.disabledColor,
55+
borderColor: lightVars.disabledBorderColor,
11856
},
11957
},
12058
ghost: {
121-
background: ghostButtonVars.backgroundColor,
59+
background: ghostVars.backgroundColor,
12260
border: 0,
123-
color: ghostButtonVars.color,
61+
color: ghostVars.color,
12462
":hover": {
125-
background: ghostButtonVars.hoverBackgroundColor,
126-
color: ghostButtonVars.hoverColor,
127-
borderColor: ghostButtonVars.hoverBorderColor,
63+
background: ghostVars.hoverBackgroundColor,
64+
color: ghostVars.hoverColor,
65+
borderColor: ghostVars.hoverBorderColor,
12866
},
12967
":focus": {
13068
borderWidth: "2px",
131-
background: ghostButtonVars.focusBackgroundColor,
132-
color: ghostButtonVars.focusColor,
133-
borderColor: ghostButtonVars.focusBorderColor,
69+
background: ghostVars.focusBackgroundColor,
70+
color: ghostVars.focusColor,
71+
borderColor: ghostVars.focusBorderColor,
13472
},
13573
":disabled": {
136-
background: ghostButtonVars.disabledBackgroundColor,
137-
color: ghostButtonVars.disabledColor,
138-
borderColor: ghostButtonVars.disabledBorderColor,
74+
background: ghostVars.disabledBackgroundColor,
75+
color: ghostVars.disabledColor,
76+
borderColor: ghostVars.disabledBorderColor,
13977
},
14078
},
14179
hallow: {
142-
background: hallowButtonVars.backgroundColor,
80+
background: hallowVars.backgroundColor,
14381
border: "1px solid",
144-
color: hallowButtonVars.color,
145-
borderColor: hallowButtonVars.borderColor,
82+
color: hallowVars.color,
83+
borderColor: hallowVars.borderColor,
14684
":hover": {
147-
background: hallowButtonVars.hoverBackgroundColor,
148-
color: hallowButtonVars.hoverColor,
149-
borderColor: hallowButtonVars.hoverBorderColor,
85+
background: hallowVars.hoverBackgroundColor,
86+
color: hallowVars.hoverColor,
87+
borderColor: hallowVars.hoverBorderColor,
15088
},
15189
":focus": {
15290
borderWidth: "2px",
153-
background: hallowButtonVars.focusBackgroundColor,
154-
color: hallowButtonVars.focusColor,
155-
borderColor: hallowButtonVars.focusBorderColor,
91+
background: hallowVars.focusBackgroundColor,
92+
color: hallowVars.focusColor,
93+
borderColor: hallowVars.focusBorderColor,
15694
},
15795
":disabled": {
158-
background: hallowButtonVars.disabledBackgroundColor,
159-
color: hallowButtonVars.disabledColor,
160-
borderColor: hallowButtonVars.disabledBorderColor,
96+
background: hallowVars.disabledBackgroundColor,
97+
color: hallowVars.disabledColor,
98+
borderColor: hallowVars.disabledBorderColor,
16199
},
162100
},
163101
},

‎lib/src/components/Button/button.types.ts

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,3 @@ import { buttonStyles } from "./button.styles.css";
33

44
export type ButtonProps = RecipeVariants<typeof buttonStyles> &
55
JSX.IntrinsicElements["button"];
6-
7-
export type ButtonTheme = [
8-
string,
9-
{
10-
color: string;
11-
backgroundColor: string;
12-
borderColor: string;
13-
hoverColor: string;
14-
hoverBackgroundColor: string;
15-
hoverBorderColor: string;
16-
focusColor: string;
17-
focusBackgroundColor: string;
18-
focusBorderColor: string;
19-
disabledColor: string;
20-
disabledBackgroundColor: string;
21-
disabledBorderColor: string;
22-
}
23-
];

‎lib/src/styles/colors.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const Colors = {
2+
white: "#FFFFFF",
3+
defaultBackground: "#1AB5EB",
4+
defaultHover: "#008FCB",
5+
defaultFocus: "#1AB5EB40",
6+
defaultFocusBorder: "#C6EDFB",
7+
defaultDisabledBlue: "#8CDAF5",
8+
lightBackground: "#F9F9F9",
9+
lightBorder: "#DDDDDD",
10+
lightHover: "#F0F0F0",
11+
hallowHover: "#AAAAAA",
12+
hallowDisabled: "#878787",
13+
hallowDisabledBorder: "#EEEEEE",
14+
hallowFocus: "#101010",
15+
};

‎lib/src/themes/index.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Colors } from "src/styles/colors";
2+
import { createTheme } from "@vanilla-extract/css";
3+
4+
export type Theme = [
5+
string,
6+
{
7+
color: string;
8+
backgroundColor: string;
9+
borderColor: string;
10+
hoverColor: string;
11+
hoverBackgroundColor: string;
12+
hoverBorderColor: string;
13+
focusColor: string;
14+
focusBackgroundColor: string;
15+
focusBorderColor: string;
16+
disabledColor: string;
17+
disabledBackgroundColor: string;
18+
disabledBorderColor: string;
19+
}
20+
];
21+
22+
export const [defaultTheme, defaultVars]: Theme = createTheme({
23+
color: Colors.white,
24+
backgroundColor: Colors.defaultBackground,
25+
borderColor: "none",
26+
hoverBackgroundColor: Colors.defaultHover,
27+
hoverColor: Colors.white,
28+
hoverBorderColor: "none",
29+
focusBackgroundColor: Colors.defaultFocus,
30+
focusColor: Colors.white,
31+
focusBorderColor: Colors.defaultFocusBorder,
32+
disabledBackgroundColor: Colors.defaultDisabledBlue,
33+
disabledColor: Colors.white,
34+
disabledBorderColor: "none",
35+
});
36+
37+
export const [lightTheme, lightVars]: Theme = createTheme({
38+
color: Colors.defaultBackground,
39+
backgroundColor: Colors.lightBackground,
40+
borderColor: Colors.lightBorder,
41+
hoverBackgroundColor: Colors.lightHover,
42+
hoverColor: Colors.defaultHover,
43+
hoverBorderColor: "none",
44+
focusBackgroundColor: Colors.lightBackground,
45+
focusColor: Colors.defaultBackground,
46+
focusBorderColor: Colors.defaultFocusBorder,
47+
disabledBackgroundColor: Colors.lightBackground,
48+
disabledColor: Colors.defaultBackground,
49+
disabledBorderColor: Colors.lightBorder,
50+
});
51+
52+
export const [ghostTheme, ghostVars]: Theme = createTheme({
53+
color: Colors.defaultBackground,
54+
backgroundColor: "none",
55+
borderColor: "none",
56+
hoverBackgroundColor: "#0000000D",
57+
hoverColor: Colors.defaultHover,
58+
hoverBorderColor: "none",
59+
focusBackgroundColor: "none",
60+
focusColor: Colors.defaultBackground,
61+
focusBorderColor: Colors.defaultFocusBorder,
62+
disabledBackgroundColor: "none",
63+
disabledColor: Colors.defaultBackground,
64+
disabledBorderColor: "",
65+
});
66+
67+
export const [hallowTheme, hallowVars]: Theme = createTheme({
68+
color: Colors.defaultBackground,
69+
backgroundColor: "none",
70+
borderColor: Colors.defaultBackground,
71+
hoverBackgroundColor: "none",
72+
hoverColor: Colors.defaultBackground,
73+
hoverBorderColor: Colors.hallowHover,
74+
focusBackgroundColor: "none",
75+
focusColor: Colors.hallowFocus,
76+
focusBorderColor: Colors.defaultFocusBorder,
77+
disabledBackgroundColor: "none",
78+
disabledColor: Colors.hallowDisabled,
79+
disabledBorderColor: Colors.hallowDisabledBorder,
80+
});

0 commit comments

Comments
 (0)