colibri-ui 0.7.1 → 0.7.2

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 +1 -0
  2. package/Theme/color.d.ts +18 -12
  3. package/Theme/color.js +18 -12
  4. package/Theme/themes/buenos_aires.js +39 -12
  5. package/Theme/themes/default.js +28 -1
  6. package/esm/Button/index.props.d.ts +1 -0
  7. package/esm/Theme/color.d.ts +18 -12
  8. package/esm/Theme/color.js +18 -12
  9. package/esm/Theme/themes/buenos_aires.js +39 -12
  10. package/esm/Theme/themes/default.js +28 -1
  11. package/package.json +1 -1
package/Button/index.props.d.ts CHANGED
@@ -25,6 +25,7 @@ export type ButtonBase = {
25
25
  base: BaseStyles;
26
26
  };
27
27
  export type ButtonVariant = {
28
+ default: VariantStates;
28
29
  primary: VariantStates;
29
30
  };
30
31
  export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
package/Theme/color.d.ts CHANGED
@@ -13,17 +13,23 @@ 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
+ PURPLE_1 = "rgba(38, 49, 129, .07)",
29
+ PURPLE_2 = "rgba(38, 49, 129, .15)",
30
+ PURPLE_3 = "rgba(38, 49, 129, .3)",
31
+ NEUTRAL_1 = "rgba(22,51,0,.05)",
32
+ NEUTRAL_2 = "rgba(22,51,0,.078)",
33
+ NEUTRAL_3 = "rgba(22,51,0,.129)"
28
34
  }
29
35
  export default Color;
package/Theme/color.js CHANGED
@@ -18,18 +18,24 @@ 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["PURPLE_1"] = "rgba(38, 49, 129, .07)";
34
+ Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
35
+ Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
36
+ Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
37
+ Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
38
+ Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
33
39
  })(Color || (Color = {}));
34
40
  var Color$1 = Color;
35
41
 
package/Theme/themes/buenos_aires.js CHANGED
@@ -5,31 +5,58 @@ 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
24
50
  },
25
51
  active: {
26
- backgroundColor: color.default.PURPLE_10,
27
- borderColor: color.default.PURPLE_10
52
+ color: color.default.BLACK,
53
+ backgroundColor: color.default.PURPLE_3,
54
+ borderColor: color.default.PURPLE_3
28
55
  },
29
56
  disabled: {
30
- color: color.default.PURPLE_10,
31
- backgroundColor: color.default.PURPLE_8,
32
- borderColor: color.default.PURPLE_8
57
+ color: color.default.PURPLE_3,
58
+ backgroundColor: color.default.PURPLE_1,
59
+ borderColor: color.default.PURPLE_1
33
60
  }
34
61
  }
35
62
  };
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
  },
package/esm/Button/index.props.d.ts CHANGED
@@ -25,6 +25,7 @@ export type ButtonBase = {
25
25
  base: BaseStyles;
26
26
  };
27
27
  export type ButtonVariant = {
28
+ default: VariantStates;
28
29
  primary: VariantStates;
29
30
  };
30
31
  export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
package/esm/Theme/color.d.ts CHANGED
@@ -13,17 +13,23 @@ 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
+ PURPLE_1 = "rgba(38, 49, 129, .07)",
29
+ PURPLE_2 = "rgba(38, 49, 129, .15)",
30
+ PURPLE_3 = "rgba(38, 49, 129, .3)",
31
+ NEUTRAL_1 = "rgba(22,51,0,.05)",
32
+ NEUTRAL_2 = "rgba(22,51,0,.078)",
33
+ NEUTRAL_3 = "rgba(22,51,0,.129)"
28
34
  }
29
35
  export default Color;
package/esm/Theme/color.js CHANGED
@@ -14,18 +14,24 @@ 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["PURPLE_1"] = "rgba(38, 49, 129, .07)";
30
+ Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
31
+ Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
32
+ Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
33
+ Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
34
+ Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
29
35
  })(Color || (Color = {}));
30
36
  var Color$1 = Color;
31
37
 
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -3,31 +3,58 @@ 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
22
48
  },
23
49
  active: {
24
- backgroundColor: Color.PURPLE_10,
25
- borderColor: Color.PURPLE_10
50
+ color: Color.BLACK,
51
+ backgroundColor: Color.PURPLE_3,
52
+ borderColor: Color.PURPLE_3
26
53
  },
27
54
  disabled: {
28
- color: Color.PURPLE_10,
29
- backgroundColor: Color.PURPLE_8,
30
- borderColor: Color.PURPLE_8
55
+ color: Color.PURPLE_3,
56
+ backgroundColor: Color.PURPLE_1,
57
+ borderColor: Color.PURPLE_1
31
58
  }
32
59
  }
33
60
  };
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
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},