colibri-ui 0.7.1 → 0.7.3

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.
Files changed (11) hide show
  1. package/Button/index.props.d.ts +2 -0
  2. package/Theme/color.d.ts +30 -12
  3. package/Theme/color.js +30 -12
  4. package/Theme/themes/buenos_aires.js +61 -12
  5. package/Theme/themes/default.js +50 -1
  6. package/esm/Button/index.props.d.ts +2 -0
  7. package/esm/Theme/color.d.ts +30 -12
  8. package/esm/Theme/color.js +30 -12
  9. package/esm/Theme/themes/buenos_aires.js +61 -12
  10. package/esm/Theme/themes/default.js +50 -1
  11. package/package.json +1 -1
package/Button/index.props.d.ts CHANGED
@@ -25,7 +25,9 @@ export type ButtonBase = {
25
25
  base: BaseStyles;
26
26
  };
27
27
  export type ButtonVariant = {
28
+ default: VariantStates;
28
29
  primary: VariantStates;
30
+ clear: VariantStates;
29
31
  };
30
32
  export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
31
33
  variant?: keyof ButtonVariant;
package/Theme/color.d.ts CHANGED
@@ -13,17 +13,35 @@ declare enum Color {
13
13
  BLUE_10 = "#0066DC",
14
14
  BLUE_11 = "#006DE3",
15
15
  BLUE_12 = "#093266",
16
- PURPLE_1 = "rgba(252, 253, 255, 1)",
17
- PURPLE_2 = "rgba(246, 249, 255, 1)",
18
- PURPLE_3 = "rgba(236, 242, 255, 1)",
19
- PURPLE_4 = "rgba(224, 233, 255, 1)",
20
- PURPLE_5 = "rgba(210, 222, 255, 1)",
21
- PURPLE_6 = "rgba(190, 207, 255, 1)",
22
- PURPLE_7 = "rgba(166, 188, 255, 1)",
23
- PURPLE_8 = "rgba(38, 49, 129, .07)",
24
- PURPLE_9 = "rgba(38, 49, 129, .15)",
25
- PURPLE_10 = "rgba(38, 49, 129, .3)",
26
- PURPLE_11 = "rgba(79, 98, 199, .15)",
27
- PURPLE_12 = "rgba(30, 38, 117, .15)"
16
+ GRAPHITE_1 = "#FCFDFE",
17
+ GRAPHITE_2 = "#F8FAFB",
18
+ GRAPHITE_3 = "#EDF0F4",
19
+ GRAPHITE_4 = "#E4E8ED",
20
+ GRAPHITE_5 = "#DBE1E6",
21
+ GRAPHITE_6 = "#D1D8DF",
22
+ GRAPHITE_7 = "#C4CDD6",
23
+ GRAPHITE_8 = "#AFB9C3",
24
+ GRAPHITE_9 = "#24292E",
25
+ GRAPHITE_10 = "#383D42",
26
+ GRAPHITE_11 = "#5E666F",
27
+ GRAPHITE_12 = "#22272B",
28
+ GRAY_1 = "#FCFCFD",
29
+ GRAY_2 = "#F9F9FB",
30
+ GRAY_3 = "#EFF0F3",
31
+ GRAY_4 = "#E7E8EC",
32
+ GRAY_5 = "#E0E1E6",
33
+ GRAY_6 = "#D8D9E0",
34
+ GRAY_7 = "#CDCED7",
35
+ GRAY_8 = "#B9BBC6",
36
+ GRAY_9 = "#8B8D98",
37
+ GRAY_10 = "#80828D",
38
+ GRAY_11 = "#62636C",
39
+ GRAY_12 = "#1E1F24",
40
+ PURPLE_1 = "rgba(38, 49, 129, .07)",
41
+ PURPLE_2 = "rgba(38, 49, 129, .15)",
42
+ PURPLE_3 = "rgba(38, 49, 129, .3)",
43
+ NEUTRAL_1 = "rgba(22,51,0,.05)",
44
+ NEUTRAL_2 = "rgba(22,51,0,.078)",
45
+ NEUTRAL_3 = "rgba(22,51,0,.129)"
28
46
  }
29
47
  export default Color;
package/Theme/color.js CHANGED
@@ -18,18 +18,36 @@ var Color;
18
18
  Color["BLUE_10"] = "#0066DC";
19
19
  Color["BLUE_11"] = "#006DE3";
20
20
  Color["BLUE_12"] = "#093266";
21
- Color["PURPLE_1"] = "rgba(252, 253, 255, 1)";
22
- Color["PURPLE_2"] = "rgba(246, 249, 255, 1)";
23
- Color["PURPLE_3"] = "rgba(236, 242, 255, 1)";
24
- Color["PURPLE_4"] = "rgba(224, 233, 255, 1)";
25
- Color["PURPLE_5"] = "rgba(210, 222, 255, 1)";
26
- Color["PURPLE_6"] = "rgba(190, 207, 255, 1)";
27
- Color["PURPLE_7"] = "rgba(166, 188, 255, 1)";
28
- Color["PURPLE_8"] = "rgba(38, 49, 129, .07)";
29
- Color["PURPLE_9"] = "rgba(38, 49, 129, .15)";
30
- Color["PURPLE_10"] = "rgba(38, 49, 129, .3)";
31
- Color["PURPLE_11"] = "rgba(79, 98, 199, .15)";
32
- Color["PURPLE_12"] = "rgba(30, 38, 117, .15)";
21
+ Color["GRAPHITE_1"] = "#FCFDFE";
22
+ Color["GRAPHITE_2"] = "#F8FAFB";
23
+ Color["GRAPHITE_3"] = "#EDF0F4";
24
+ Color["GRAPHITE_4"] = "#E4E8ED";
25
+ Color["GRAPHITE_5"] = "#DBE1E6";
26
+ Color["GRAPHITE_6"] = "#D1D8DF";
27
+ Color["GRAPHITE_7"] = "#C4CDD6";
28
+ Color["GRAPHITE_8"] = "#AFB9C3";
29
+ Color["GRAPHITE_9"] = "#24292E";
30
+ Color["GRAPHITE_10"] = "#383D42";
31
+ Color["GRAPHITE_11"] = "#5E666F";
32
+ Color["GRAPHITE_12"] = "#22272B";
33
+ Color["GRAY_1"] = "#FCFCFD";
34
+ Color["GRAY_2"] = "#F9F9FB";
35
+ Color["GRAY_3"] = "#EFF0F3";
36
+ Color["GRAY_4"] = "#E7E8EC";
37
+ Color["GRAY_5"] = "#E0E1E6";
38
+ Color["GRAY_6"] = "#D8D9E0";
39
+ Color["GRAY_7"] = "#CDCED7";
40
+ Color["GRAY_8"] = "#B9BBC6";
41
+ Color["GRAY_9"] = "#8B8D98";
42
+ Color["GRAY_10"] = "#80828D";
43
+ Color["GRAY_11"] = "#62636C";
44
+ Color["GRAY_12"] = "#1E1F24";
45
+ Color["PURPLE_1"] = "rgba(38, 49, 129, .07)";
46
+ Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
47
+ Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
48
+ Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
49
+ Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
50
+ Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
33
51
  })(Color || (Color = {}));
34
52
  var Color$1 = Color;
35
53
 
package/Theme/themes/buenos_aires.js CHANGED
@@ -5,31 +5,80 @@ var breakpoints = require('../breakpoints.js');
5
5
 
6
6
  var ButtonBA = {
7
7
  base: {
8
- color: color.default.BLACK,
8
+ color: color.default.WHITE,
9
9
  borderRadius: "26px",
10
10
  border: "none"
11
11
  },
12
+ "default": {
13
+ normal: {
14
+ backgroundColor: color.default.GRAPHITE_9,
15
+ borderColor: color.default.GRAPHITE_9
16
+ },
17
+ hover: {
18
+ backgroundColor: color.default.GRAPHITE_10,
19
+ borderColor: color.default.GRAPHITE_10
20
+ },
21
+ focus: {
22
+ backgroundColor: color.default.GRAPHITE_10,
23
+ borderColor: color.default.GRAPHITE_10
24
+ },
25
+ active: {
26
+ backgroundColor: color.default.GRAPHITE_10,
27
+ borderColor: color.default.GRAPHITE_10
28
+ },
29
+ disabled: {
30
+ color: color.default.GRAPHITE_7,
31
+ backgroundColor: color.default.GRAPHITE_5,
32
+ borderColor: color.default.GRAPHITE_5
33
+ }
34
+ },
12
35
  primary: {
13
36
  normal: {
14
- backgroundColor: color.default.PURPLE_9,
15
- borderColor: color.default.PURPLE_9
37
+ color: color.default.BLACK,
38
+ backgroundColor: color.default.PURPLE_2,
39
+ borderColor: color.default.PURPLE_2
16
40
  },
17
41
  hover: {
18
- backgroundColor: color.default.PURPLE_10,
19
- borderColor: color.default.PURPLE_10
42
+ color: color.default.BLACK,
43
+ backgroundColor: color.default.PURPLE_3,
44
+ borderColor: color.default.PURPLE_3
20
45
  },
21
46
  focus: {
22
- backgroundColor: color.default.PURPLE_10,
23
- borderColor: color.default.PURPLE_10
47
+ color: color.default.BLACK,
48
+ backgroundColor: color.default.PURPLE_3,
49
+ borderColor: color.default.PURPLE_3
50
+ },
51
+ active: {
52
+ color: color.default.BLACK,
53
+ backgroundColor: color.default.PURPLE_3,
54
+ borderColor: color.default.PURPLE_3
55
+ },
56
+ disabled: {
57
+ color: color.default.PURPLE_3,
58
+ backgroundColor: color.default.PURPLE_1,
59
+ borderColor: color.default.PURPLE_1
60
+ }
61
+ },
62
+ clear: {
63
+ normal: {
64
+ color: color.default.GRAY_9,
65
+ backgroundColor: color.default.WHITE,
66
+ borderColor: color.default.WHITE
67
+ },
68
+ hover: {
69
+ color: color.default.BLACK,
70
+ backgroundColor: color.default.NEUTRAL_2,
71
+ borderColor: color.default.NEUTRAL_2
24
72
  },
25
73
  active: {
26
- backgroundColor: color.default.PURPLE_10,
27
- borderColor: color.default.PURPLE_10
74
+ color: color.default.BLACK,
75
+ backgroundColor: color.default.NEUTRAL_2,
76
+ borderColor: color.default.NEUTRAL_2
28
77
  },
29
78
  disabled: {
30
- color: color.default.PURPLE_10,
31
- backgroundColor: color.default.PURPLE_8,
32
- borderColor: color.default.PURPLE_8
79
+ color: color.default.NEUTRAL_3,
80
+ backgroundColor: color.default.NEUTRAL_1,
81
+ borderColor: color.default.NEUTRAL_1
33
82
  }
34
83
  }
35
84
  };
package/Theme/themes/default.js CHANGED
@@ -5,23 +5,50 @@ var breakpoints = require('../breakpoints.js');
5
5
 
6
6
  var ButtonDefault = {
7
7
  base: {
8
- color: color.default.WHITE,
8
+ color: color.default.BLACK,
9
9
  borderRadius: "26px"
10
10
  },
11
+ "default": {
12
+ normal: {
13
+ backgroundColor: color.default.NEUTRAL_2,
14
+ borderColor: color.default.NEUTRAL_2
15
+ },
16
+ hover: {
17
+ backgroundColor: color.default.NEUTRAL_3,
18
+ borderColor: color.default.NEUTRAL_3
19
+ },
20
+ focus: {
21
+ backgroundColor: color.default.NEUTRAL_3,
22
+ borderColor: color.default.NEUTRAL_3
23
+ },
24
+ active: {
25
+ backgroundColor: color.default.NEUTRAL_3,
26
+ borderColor: color.default.NEUTRAL_3
27
+ },
28
+ disabled: {
29
+ color: color.default.NEUTRAL_3,
30
+ backgroundColor: color.default.NEUTRAL_1,
31
+ borderColor: color.default.NEUTRAL_1
32
+ }
33
+ },
11
34
  primary: {
12
35
  normal: {
36
+ color: color.default.WHITE,
13
37
  backgroundColor: color.default.BLUE_9,
14
38
  borderColor: color.default.BLUE_9
15
39
  },
16
40
  hover: {
41
+ color: color.default.WHITE,
17
42
  backgroundColor: color.default.BLUE_10,
18
43
  borderColor: color.default.BLUE_10
19
44
  },
20
45
  focus: {
46
+ color: color.default.WHITE,
21
47
  backgroundColor: color.default.BLUE_10,
22
48
  borderColor: color.default.BLUE_10
23
49
  },
24
50
  active: {
51
+ color: color.default.WHITE,
25
52
  backgroundColor: color.default.BLUE_10,
26
53
  borderColor: color.default.BLUE_10
27
54
  },
@@ -30,6 +57,28 @@ var ButtonDefault = {
30
57
  backgroundColor: color.default.BLUE_4,
31
58
  borderColor: color.default.BLUE_4
32
59
  }
60
+ },
61
+ clear: {
62
+ normal: {
63
+ color: color.default.GRAY_9,
64
+ backgroundColor: color.default.WHITE,
65
+ borderColor: color.default.WHITE
66
+ },
67
+ hover: {
68
+ color: color.default.BLACK,
69
+ backgroundColor: color.default.NEUTRAL_2,
70
+ borderColor: color.default.NEUTRAL_2
71
+ },
72
+ active: {
73
+ color: color.default.BLACK,
74
+ backgroundColor: color.default.NEUTRAL_2,
75
+ borderColor: color.default.NEUTRAL_2
76
+ },
77
+ disabled: {
78
+ color: color.default.NEUTRAL_3,
79
+ backgroundColor: color.default.NEUTRAL_1,
80
+ borderColor: color.default.NEUTRAL_1
81
+ }
33
82
  }
34
83
  };
35
84
  var THEME_DEFAULT = {
package/esm/Button/index.props.d.ts CHANGED
@@ -25,7 +25,9 @@ export type ButtonBase = {
25
25
  base: BaseStyles;
26
26
  };
27
27
  export type ButtonVariant = {
28
+ default: VariantStates;
28
29
  primary: VariantStates;
30
+ clear: VariantStates;
29
31
  };
30
32
  export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
31
33
  variant?: keyof ButtonVariant;
package/esm/Theme/color.d.ts CHANGED
@@ -13,17 +13,35 @@ declare enum Color {
13
13
  BLUE_10 = "#0066DC",
14
14
  BLUE_11 = "#006DE3",
15
15
  BLUE_12 = "#093266",
16
- PURPLE_1 = "rgba(252, 253, 255, 1)",
17
- PURPLE_2 = "rgba(246, 249, 255, 1)",
18
- PURPLE_3 = "rgba(236, 242, 255, 1)",
19
- PURPLE_4 = "rgba(224, 233, 255, 1)",
20
- PURPLE_5 = "rgba(210, 222, 255, 1)",
21
- PURPLE_6 = "rgba(190, 207, 255, 1)",
22
- PURPLE_7 = "rgba(166, 188, 255, 1)",
23
- PURPLE_8 = "rgba(38, 49, 129, .07)",
24
- PURPLE_9 = "rgba(38, 49, 129, .15)",
25
- PURPLE_10 = "rgba(38, 49, 129, .3)",
26
- PURPLE_11 = "rgba(79, 98, 199, .15)",
27
- PURPLE_12 = "rgba(30, 38, 117, .15)"
16
+ GRAPHITE_1 = "#FCFDFE",
17
+ GRAPHITE_2 = "#F8FAFB",
18
+ GRAPHITE_3 = "#EDF0F4",
19
+ GRAPHITE_4 = "#E4E8ED",
20
+ GRAPHITE_5 = "#DBE1E6",
21
+ GRAPHITE_6 = "#D1D8DF",
22
+ GRAPHITE_7 = "#C4CDD6",
23
+ GRAPHITE_8 = "#AFB9C3",
24
+ GRAPHITE_9 = "#24292E",
25
+ GRAPHITE_10 = "#383D42",
26
+ GRAPHITE_11 = "#5E666F",
27
+ GRAPHITE_12 = "#22272B",
28
+ GRAY_1 = "#FCFCFD",
29
+ GRAY_2 = "#F9F9FB",
30
+ GRAY_3 = "#EFF0F3",
31
+ GRAY_4 = "#E7E8EC",
32
+ GRAY_5 = "#E0E1E6",
33
+ GRAY_6 = "#D8D9E0",
34
+ GRAY_7 = "#CDCED7",
35
+ GRAY_8 = "#B9BBC6",
36
+ GRAY_9 = "#8B8D98",
37
+ GRAY_10 = "#80828D",
38
+ GRAY_11 = "#62636C",
39
+ GRAY_12 = "#1E1F24",
40
+ PURPLE_1 = "rgba(38, 49, 129, .07)",
41
+ PURPLE_2 = "rgba(38, 49, 129, .15)",
42
+ PURPLE_3 = "rgba(38, 49, 129, .3)",
43
+ NEUTRAL_1 = "rgba(22,51,0,.05)",
44
+ NEUTRAL_2 = "rgba(22,51,0,.078)",
45
+ NEUTRAL_3 = "rgba(22,51,0,.129)"
28
46
  }
29
47
  export default Color;
package/esm/Theme/color.js CHANGED
@@ -14,18 +14,36 @@ var Color;
14
14
  Color["BLUE_10"] = "#0066DC";
15
15
  Color["BLUE_11"] = "#006DE3";
16
16
  Color["BLUE_12"] = "#093266";
17
- Color["PURPLE_1"] = "rgba(252, 253, 255, 1)";
18
- Color["PURPLE_2"] = "rgba(246, 249, 255, 1)";
19
- Color["PURPLE_3"] = "rgba(236, 242, 255, 1)";
20
- Color["PURPLE_4"] = "rgba(224, 233, 255, 1)";
21
- Color["PURPLE_5"] = "rgba(210, 222, 255, 1)";
22
- Color["PURPLE_6"] = "rgba(190, 207, 255, 1)";
23
- Color["PURPLE_7"] = "rgba(166, 188, 255, 1)";
24
- Color["PURPLE_8"] = "rgba(38, 49, 129, .07)";
25
- Color["PURPLE_9"] = "rgba(38, 49, 129, .15)";
26
- Color["PURPLE_10"] = "rgba(38, 49, 129, .3)";
27
- Color["PURPLE_11"] = "rgba(79, 98, 199, .15)";
28
- Color["PURPLE_12"] = "rgba(30, 38, 117, .15)";
17
+ Color["GRAPHITE_1"] = "#FCFDFE";
18
+ Color["GRAPHITE_2"] = "#F8FAFB";
19
+ Color["GRAPHITE_3"] = "#EDF0F4";
20
+ Color["GRAPHITE_4"] = "#E4E8ED";
21
+ Color["GRAPHITE_5"] = "#DBE1E6";
22
+ Color["GRAPHITE_6"] = "#D1D8DF";
23
+ Color["GRAPHITE_7"] = "#C4CDD6";
24
+ Color["GRAPHITE_8"] = "#AFB9C3";
25
+ Color["GRAPHITE_9"] = "#24292E";
26
+ Color["GRAPHITE_10"] = "#383D42";
27
+ Color["GRAPHITE_11"] = "#5E666F";
28
+ Color["GRAPHITE_12"] = "#22272B";
29
+ Color["GRAY_1"] = "#FCFCFD";
30
+ Color["GRAY_2"] = "#F9F9FB";
31
+ Color["GRAY_3"] = "#EFF0F3";
32
+ Color["GRAY_4"] = "#E7E8EC";
33
+ Color["GRAY_5"] = "#E0E1E6";
34
+ Color["GRAY_6"] = "#D8D9E0";
35
+ Color["GRAY_7"] = "#CDCED7";
36
+ Color["GRAY_8"] = "#B9BBC6";
37
+ Color["GRAY_9"] = "#8B8D98";
38
+ Color["GRAY_10"] = "#80828D";
39
+ Color["GRAY_11"] = "#62636C";
40
+ Color["GRAY_12"] = "#1E1F24";
41
+ Color["PURPLE_1"] = "rgba(38, 49, 129, .07)";
42
+ Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
43
+ Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
44
+ Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
45
+ Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
46
+ Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
29
47
  })(Color || (Color = {}));
30
48
  var Color$1 = Color;
31
49
 
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -3,31 +3,80 @@ import Breakpoints from '../breakpoints.js';
3
3
 
4
4
  var ButtonBA = {
5
5
  base: {
6
- color: Color.BLACK,
6
+ color: Color.WHITE,
7
7
  borderRadius: "26px",
8
8
  border: "none"
9
9
  },
10
+ "default": {
11
+ normal: {
12
+ backgroundColor: Color.GRAPHITE_9,
13
+ borderColor: Color.GRAPHITE_9
14
+ },
15
+ hover: {
16
+ backgroundColor: Color.GRAPHITE_10,
17
+ borderColor: Color.GRAPHITE_10
18
+ },
19
+ focus: {
20
+ backgroundColor: Color.GRAPHITE_10,
21
+ borderColor: Color.GRAPHITE_10
22
+ },
23
+ active: {
24
+ backgroundColor: Color.GRAPHITE_10,
25
+ borderColor: Color.GRAPHITE_10
26
+ },
27
+ disabled: {
28
+ color: Color.GRAPHITE_7,
29
+ backgroundColor: Color.GRAPHITE_5,
30
+ borderColor: Color.GRAPHITE_5
31
+ }
32
+ },
10
33
  primary: {
11
34
  normal: {
12
- backgroundColor: Color.PURPLE_9,
13
- borderColor: Color.PURPLE_9
35
+ color: Color.BLACK,
36
+ backgroundColor: Color.PURPLE_2,
37
+ borderColor: Color.PURPLE_2
14
38
  },
15
39
  hover: {
16
- backgroundColor: Color.PURPLE_10,
17
- borderColor: Color.PURPLE_10
40
+ color: Color.BLACK,
41
+ backgroundColor: Color.PURPLE_3,
42
+ borderColor: Color.PURPLE_3
18
43
  },
19
44
  focus: {
20
- backgroundColor: Color.PURPLE_10,
21
- borderColor: Color.PURPLE_10
45
+ color: Color.BLACK,
46
+ backgroundColor: Color.PURPLE_3,
47
+ borderColor: Color.PURPLE_3
48
+ },
49
+ active: {
50
+ color: Color.BLACK,
51
+ backgroundColor: Color.PURPLE_3,
52
+ borderColor: Color.PURPLE_3
53
+ },
54
+ disabled: {
55
+ color: Color.PURPLE_3,
56
+ backgroundColor: Color.PURPLE_1,
57
+ borderColor: Color.PURPLE_1
58
+ }
59
+ },
60
+ clear: {
61
+ normal: {
62
+ color: Color.GRAY_9,
63
+ backgroundColor: Color.WHITE,
64
+ borderColor: Color.WHITE
65
+ },
66
+ hover: {
67
+ color: Color.BLACK,
68
+ backgroundColor: Color.NEUTRAL_2,
69
+ borderColor: Color.NEUTRAL_2
22
70
  },
23
71
  active: {
24
- backgroundColor: Color.PURPLE_10,
25
- borderColor: Color.PURPLE_10
72
+ color: Color.BLACK,
73
+ backgroundColor: Color.NEUTRAL_2,
74
+ borderColor: Color.NEUTRAL_2
26
75
  },
27
76
  disabled: {
28
- color: Color.PURPLE_10,
29
- backgroundColor: Color.PURPLE_8,
30
- borderColor: Color.PURPLE_8
77
+ color: Color.NEUTRAL_3,
78
+ backgroundColor: Color.NEUTRAL_1,
79
+ borderColor: Color.NEUTRAL_1
31
80
  }
32
81
  }
33
82
  };
package/esm/Theme/themes/default.js CHANGED
@@ -3,23 +3,50 @@ import Breakpoints from '../breakpoints.js';
3
3
 
4
4
  var ButtonDefault = {
5
5
  base: {
6
- color: Color.WHITE,
6
+ color: Color.BLACK,
7
7
  borderRadius: "26px"
8
8
  },
9
+ "default": {
10
+ normal: {
11
+ backgroundColor: Color.NEUTRAL_2,
12
+ borderColor: Color.NEUTRAL_2
13
+ },
14
+ hover: {
15
+ backgroundColor: Color.NEUTRAL_3,
16
+ borderColor: Color.NEUTRAL_3
17
+ },
18
+ focus: {
19
+ backgroundColor: Color.NEUTRAL_3,
20
+ borderColor: Color.NEUTRAL_3
21
+ },
22
+ active: {
23
+ backgroundColor: Color.NEUTRAL_3,
24
+ borderColor: Color.NEUTRAL_3
25
+ },
26
+ disabled: {
27
+ color: Color.NEUTRAL_3,
28
+ backgroundColor: Color.NEUTRAL_1,
29
+ borderColor: Color.NEUTRAL_1
30
+ }
31
+ },
9
32
  primary: {
10
33
  normal: {
34
+ color: Color.WHITE,
11
35
  backgroundColor: Color.BLUE_9,
12
36
  borderColor: Color.BLUE_9
13
37
  },
14
38
  hover: {
39
+ color: Color.WHITE,
15
40
  backgroundColor: Color.BLUE_10,
16
41
  borderColor: Color.BLUE_10
17
42
  },
18
43
  focus: {
44
+ color: Color.WHITE,
19
45
  backgroundColor: Color.BLUE_10,
20
46
  borderColor: Color.BLUE_10
21
47
  },
22
48
  active: {
49
+ color: Color.WHITE,
23
50
  backgroundColor: Color.BLUE_10,
24
51
  borderColor: Color.BLUE_10
25
52
  },
@@ -28,6 +55,28 @@ var ButtonDefault = {
28
55
  backgroundColor: Color.BLUE_4,
29
56
  borderColor: Color.BLUE_4
30
57
  }
58
+ },
59
+ clear: {
60
+ normal: {
61
+ color: Color.GRAY_9,
62
+ backgroundColor: Color.WHITE,
63
+ borderColor: Color.WHITE
64
+ },
65
+ hover: {
66
+ color: Color.BLACK,
67
+ backgroundColor: Color.NEUTRAL_2,
68
+ borderColor: Color.NEUTRAL_2
69
+ },
70
+ active: {
71
+ color: Color.BLACK,
72
+ backgroundColor: Color.NEUTRAL_2,
73
+ borderColor: Color.NEUTRAL_2
74
+ },
75
+ disabled: {
76
+ color: Color.NEUTRAL_3,
77
+ backgroundColor: Color.NEUTRAL_1,
78
+ borderColor: Color.NEUTRAL_1
79
+ }
31
80
  }
32
81
  };
33
82
  var THEME_DEFAULT = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.1",
3
+ "version": "0.7.3",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},