@canaia/ui-kit 0.0.10-alpha.5 → 0.0.10-alpha.8
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/package.json +4 -7
- package/src/theme/chat.ts +67 -0
- package/src/theme/colors.ts +98 -0
- package/src/theme/fonts/fonts.css +44 -0
- package/src/theme/fonts/fonts.ts +8 -0
- package/src/theme/index.tsx +20 -0
- package/src/theme/styles.ts +25 -0
- package/src/theme/theme-export.ts +1 -0
- package/src/theme/vars.css +94 -0
package/package.json
CHANGED
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canaia/ui-kit",
|
|
3
|
-
"version": "0.0.10-alpha.
|
|
3
|
+
"version": "0.0.10-alpha.8",
|
|
4
4
|
"main": "dist/canaia-ui-kit.umd.js",
|
|
5
5
|
"module": "dist/canaia-ui-kit.es.js",
|
|
6
|
-
"type": "module",
|
|
7
6
|
"types": "dist/index.d.ts",
|
|
7
|
+
"type": "module",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
10
|
"import": "./dist/canaia-ui-kit.es.js",
|
|
11
11
|
"require": "./dist/canaia-ui-kit.umd.js",
|
|
12
12
|
"types": "./dist/index.d.ts"
|
|
13
|
-
},
|
|
14
|
-
"./theme": {
|
|
15
|
-
"import": "./dist/theme.es.js",
|
|
16
|
-
"types": "./dist/theme.d.ts"
|
|
17
13
|
}
|
|
18
14
|
},
|
|
19
15
|
"files": [
|
|
20
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"src/theme"
|
|
21
18
|
],
|
|
22
19
|
"scripts": {
|
|
23
20
|
"build:types": "tsc",
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
const chat = {
|
|
2
|
+
".chat-wrapper": {
|
|
3
|
+
background: "#4E4D4D",
|
|
4
|
+
border: "2px solid #D6D6D6",
|
|
5
|
+
borderRadius: "8px",
|
|
6
|
+
fontSize: "16px",
|
|
7
|
+
minHeight: "240px",
|
|
8
|
+
overflow: "hidden",
|
|
9
|
+
padding: "1rem 0",
|
|
10
|
+
width: "100%",
|
|
11
|
+
},
|
|
12
|
+
".message-input": {
|
|
13
|
+
borderTop: "1px solid #ccc",
|
|
14
|
+
},
|
|
15
|
+
".cs-message-list": {
|
|
16
|
+
background: "#4E4D4D",
|
|
17
|
+
},
|
|
18
|
+
".cs-chat-container .cs-message-input": {
|
|
19
|
+
background: "#4E4D4D",
|
|
20
|
+
border: "0",
|
|
21
|
+
padding: "1rem 0",
|
|
22
|
+
},
|
|
23
|
+
".scrollbar-container": {
|
|
24
|
+
background: "transparent",
|
|
25
|
+
},
|
|
26
|
+
".cs-message-input__content-editor-wrapper": {
|
|
27
|
+
background: "#6E6E6E",
|
|
28
|
+
},
|
|
29
|
+
".cs-message-input__content-editor": {
|
|
30
|
+
background: "transparent",
|
|
31
|
+
color: "#fff",
|
|
32
|
+
textAlign: "left"
|
|
33
|
+
},
|
|
34
|
+
".cs-message--incoming .cs-message__content": {
|
|
35
|
+
background: "transparent",
|
|
36
|
+
padding: "1rem 0",
|
|
37
|
+
color: "#fff",
|
|
38
|
+
textAlign: "left",
|
|
39
|
+
fontSize: "16px"
|
|
40
|
+
},
|
|
41
|
+
".cs-message.cs-message--outgoing.cs-message--first .cs-message__content": {
|
|
42
|
+
background: "#efefef",
|
|
43
|
+
borderRadius: "20px",
|
|
44
|
+
color: "#000",
|
|
45
|
+
},
|
|
46
|
+
".cs-message.cs-message--incoming.cs-message--first .cs-message__content": {
|
|
47
|
+
background: "transparent",
|
|
48
|
+
color: "#fff",
|
|
49
|
+
},
|
|
50
|
+
".cs-message.cs-message--outgoing.cs-message--single .cs-message__content": {
|
|
51
|
+
background: "#fff",
|
|
52
|
+
fontSize:"16px"
|
|
53
|
+
},
|
|
54
|
+
".cs-message-list .cs-typing-indicator": {
|
|
55
|
+
background: "transparent",
|
|
56
|
+
margin: "0 1.2em 0 .8em",
|
|
57
|
+
padding: "0",
|
|
58
|
+
},
|
|
59
|
+
".cs-typing-indicator__text": {
|
|
60
|
+
color: "#fff"
|
|
61
|
+
},
|
|
62
|
+
".cs-typing-indicator__dot": {
|
|
63
|
+
backgroundColor: "#fff"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export default chat;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
const colors = {
|
|
2
|
+
primary: {
|
|
3
|
+
200: "#8BBFCB",
|
|
4
|
+
300: "#67ABBB",
|
|
5
|
+
400: "#4A94A6",
|
|
6
|
+
500: "#3B7684",
|
|
7
|
+
600: "#2B555F"
|
|
8
|
+
},
|
|
9
|
+
elevate: {
|
|
10
|
+
200: "#FFF8FA",
|
|
11
|
+
300: "#FFD6E2",
|
|
12
|
+
400: "#FFA3BF",
|
|
13
|
+
500: "#FF6F9A",
|
|
14
|
+
600: "#FF3D77",
|
|
15
|
+
700: "#FF0A53"
|
|
16
|
+
},
|
|
17
|
+
assist: {
|
|
18
|
+
200: "#F9FCFE",
|
|
19
|
+
300: "#B4D8F4",
|
|
20
|
+
400: "#87C1ED",
|
|
21
|
+
500: "#5AA9E6",
|
|
22
|
+
600: "#2F93DF",
|
|
23
|
+
700: "#1D79BE"
|
|
24
|
+
},
|
|
25
|
+
play: {
|
|
26
|
+
300: "#FEE2DC",
|
|
27
|
+
400: "#FCB8AB",
|
|
28
|
+
500: "#FB8E79",
|
|
29
|
+
600: "#FA6448",
|
|
30
|
+
700: "#F93916"
|
|
31
|
+
},
|
|
32
|
+
talent: {
|
|
33
|
+
300: "#D4BBD8",
|
|
34
|
+
400: "#AB7AB3",
|
|
35
|
+
500: "#965BA0",
|
|
36
|
+
600: "#77487F",
|
|
37
|
+
700: "#58365E",
|
|
38
|
+
},
|
|
39
|
+
collect: {
|
|
40
|
+
300: "#95DAB8",
|
|
41
|
+
400: "#6FCD9E",
|
|
42
|
+
500: "#48BF84",
|
|
43
|
+
600: "#389F6C",
|
|
44
|
+
700: "#F93916"
|
|
45
|
+
},
|
|
46
|
+
ad: {
|
|
47
|
+
300: "#AA7A60",
|
|
48
|
+
400: "#8C624B",
|
|
49
|
+
500: "#694A38",
|
|
50
|
+
600: "#493427",
|
|
51
|
+
700: "#281C15"
|
|
52
|
+
},
|
|
53
|
+
black: {
|
|
54
|
+
40: "#EFEFEF",
|
|
55
|
+
50: "#D7D7D7",
|
|
56
|
+
100: "#C1C1C1",
|
|
57
|
+
200: "#999999",
|
|
58
|
+
300: "#999999",
|
|
59
|
+
400: "#666666",
|
|
60
|
+
500: "#333333",
|
|
61
|
+
600: "#222222",
|
|
62
|
+
},
|
|
63
|
+
white: {
|
|
64
|
+
50: "#EFEFEF",
|
|
65
|
+
100: "#FFFFFF"
|
|
66
|
+
},
|
|
67
|
+
success: {
|
|
68
|
+
200: "#C6F6D5",
|
|
69
|
+
300: "#2CD888",
|
|
70
|
+
400: "#21B06E",
|
|
71
|
+
500: "#198754",
|
|
72
|
+
600: "#115A38"
|
|
73
|
+
},
|
|
74
|
+
danger: {
|
|
75
|
+
200: "#FED7D7",
|
|
76
|
+
300: "#F81C34",
|
|
77
|
+
400: "#DB071E",
|
|
78
|
+
500: "#CE0015",
|
|
79
|
+
600: "#C10004",
|
|
80
|
+
},
|
|
81
|
+
warning: {
|
|
82
|
+
200: "#FEEBCB",
|
|
83
|
+
300: "#FFCF70",
|
|
84
|
+
400: "#FFBE3D",
|
|
85
|
+
500: "#FFAE0C",
|
|
86
|
+
600: "#D68F00"
|
|
87
|
+
},
|
|
88
|
+
info: {
|
|
89
|
+
200: "#BEE3F8",
|
|
90
|
+
300: "#47AFFF",
|
|
91
|
+
400: "#1499FF",
|
|
92
|
+
500: "#007EDF",
|
|
93
|
+
600: "#0062AD"
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
export const colorKeys = Object.keys(colors);
|
|
97
|
+
export default colors;
|
|
98
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "Sansation-Regular";
|
|
3
|
+
src: url("../../assets/fonts/sansation/Sansation-Regular.eot");
|
|
4
|
+
src: url("../../assets/fonts/sansation/Sansation-Regular.eot?#iefix") format("embedded-opentype"),
|
|
5
|
+
url("../../assets/fonts/sansation/Sansation-Regular.woff2") format("woff2"),
|
|
6
|
+
url("../../assets/fonts/sansation/Sansation-Regular.woff") format("woff"),
|
|
7
|
+
url("../../assets/fonts/sansation/Sansation-Regular.ttf") format("truetype"),
|
|
8
|
+
url("../../assets/fonts/sansation/Sansation-Regular.svg#Sansation-Regular") format("svg");
|
|
9
|
+
font-weight: normal;
|
|
10
|
+
font-style: normal;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: "Sansation-Bold";
|
|
15
|
+
src: url("../../assets/fonts/sansation/Sansation-Bold.eot");
|
|
16
|
+
src: url("../../assets/fonts/sansation/Sansation-Bold.eot?#iefix") format("embedded-opentype"),
|
|
17
|
+
url("../../assets/fonts/sansation/Sansation-Bold.woff2") format("woff2"),
|
|
18
|
+
url("../../assets/fonts/sansation/Sansation-Bold.woff") format("woff"),
|
|
19
|
+
url("../../assets/fonts/sansation/Sansation-Bold.ttf") format("truetype"),
|
|
20
|
+
url("../../assets/fonts/sansation/Sansation-Bold.svg#Sansation-Bold") format("svg");
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Lato Regular */
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: "Lato-Regular";
|
|
28
|
+
src: url("../../assets/fonts/lato/Lato-Regular.woff2") format("woff2"),
|
|
29
|
+
url("../../assets/fonts/lato/Lato-Regular.woff") format("woff"),
|
|
30
|
+
url("../../assets/fonts/lato/Lato-Regular.ttf") format("truetype");
|
|
31
|
+
font-weight: normal;
|
|
32
|
+
font-style: normal;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Lato Bold */
|
|
36
|
+
@font-face {
|
|
37
|
+
font-family: "Lato-Bold";
|
|
38
|
+
src: url("../../assets/fonts/lato/Lato-Bold.woff2") format("woff2"),
|
|
39
|
+
url("../../assets/fonts/lato/Lato-Bold.woff") format("woff"),
|
|
40
|
+
url("../../assets/fonts/lato/Lato-Bold.ttf") format("truetype");
|
|
41
|
+
font-weight: bold;
|
|
42
|
+
font-style: normal;
|
|
43
|
+
}
|
|
44
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// src/theme/theme.ts
|
|
2
|
+
|
|
3
|
+
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
|
|
4
|
+
import fonts from "./fonts/fonts";
|
|
5
|
+
import styles from "./styles";
|
|
6
|
+
import colors from "./colors";
|
|
7
|
+
|
|
8
|
+
const config: ThemeConfig = {
|
|
9
|
+
initialColorMode: "light",
|
|
10
|
+
useSystemColorMode: false,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const theme = extendTheme({
|
|
14
|
+
config,
|
|
15
|
+
colors,
|
|
16
|
+
fonts,
|
|
17
|
+
styles,
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export default theme;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import chat from './chat'
|
|
2
|
+
|
|
3
|
+
const styles = {
|
|
4
|
+
global: {
|
|
5
|
+
body: {
|
|
6
|
+
color: "#000",
|
|
7
|
+
textAlign: "center",
|
|
8
|
+
fontFamily: "Sansation-Regular, sans-serif",
|
|
9
|
+
fontSize: "14px",
|
|
10
|
+
fontStyle: "normal",
|
|
11
|
+
fontWeight: 400,
|
|
12
|
+
lineHeight: "normal",
|
|
13
|
+
},
|
|
14
|
+
"*": {
|
|
15
|
+
boxSizing: "border-box",
|
|
16
|
+
},
|
|
17
|
+
a: {
|
|
18
|
+
cursor: "pointer",
|
|
19
|
+
},
|
|
20
|
+
...chat,
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export default styles;
|
|
25
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as theme } from "./index";
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Primary */
|
|
3
|
+
--primary-200: #8BBFCB;
|
|
4
|
+
--primary-300: #67ABBB;
|
|
5
|
+
--primary-400: #4A94A6;
|
|
6
|
+
--primary-500: #3B7684;
|
|
7
|
+
--primary-600: #2B555F;
|
|
8
|
+
|
|
9
|
+
/* Elevate */
|
|
10
|
+
--elevate-200: #FFF8FA;
|
|
11
|
+
--elevate-300: #FFD6E2;
|
|
12
|
+
--elevate-400: #FFA3BF;
|
|
13
|
+
--elevate-500: #FF6F9A;
|
|
14
|
+
--elevate-600: #FF3D77;
|
|
15
|
+
--elevate-700: #FF0A53;
|
|
16
|
+
|
|
17
|
+
/* Assist */
|
|
18
|
+
--assist-200: #F9FCFE;
|
|
19
|
+
--assist-300: #B4D8F4;
|
|
20
|
+
--assist-400: #87C1ED;
|
|
21
|
+
--assist-500: #5AA9E6;
|
|
22
|
+
--assist-600: #2F93DF;
|
|
23
|
+
--assist-700: #1D79BE;
|
|
24
|
+
|
|
25
|
+
/* Play */
|
|
26
|
+
--play-300: #FEE2DC;
|
|
27
|
+
--play-400: #FCB8AB;
|
|
28
|
+
--play-500: #FB8E79;
|
|
29
|
+
--play-600: #FA6448;
|
|
30
|
+
--play-700: #F93916;
|
|
31
|
+
|
|
32
|
+
/* Talent */
|
|
33
|
+
--talent-300: #D4BBD8;
|
|
34
|
+
--talent-400: #AB7AB3;
|
|
35
|
+
--talent-500: #965BA0;
|
|
36
|
+
--talent-600: #77487F;
|
|
37
|
+
--talent-700: #58365E;
|
|
38
|
+
|
|
39
|
+
/* Collect */
|
|
40
|
+
--collect-300: #95DAB8;
|
|
41
|
+
--collect-400: #6FCD9E;
|
|
42
|
+
--collect-500: #48BF84;
|
|
43
|
+
--collect-600: #389F6C;
|
|
44
|
+
--collect-700: #F93916;
|
|
45
|
+
|
|
46
|
+
/* Ad */
|
|
47
|
+
--ad-300: #AA7A60;
|
|
48
|
+
--ad-400: #8C624B;
|
|
49
|
+
--ad-500: #694A38;
|
|
50
|
+
--ad-600: #493427;
|
|
51
|
+
--ad-700: #281C15;
|
|
52
|
+
|
|
53
|
+
/* Black */
|
|
54
|
+
--black-40: #EFEFEF;
|
|
55
|
+
--black-50: #D7D7D7;
|
|
56
|
+
--black-100: #C1C1C1;
|
|
57
|
+
--black-200: #999999;
|
|
58
|
+
--black-300: #999999;
|
|
59
|
+
--black-400: #666666;
|
|
60
|
+
--black-500: #333333;
|
|
61
|
+
--black-600: #222222;
|
|
62
|
+
|
|
63
|
+
/* White */
|
|
64
|
+
--white-50: #EFEFEF;
|
|
65
|
+
--white-100: #FFFFFF;
|
|
66
|
+
|
|
67
|
+
/* Success */
|
|
68
|
+
--success-200: #C6F6D5;
|
|
69
|
+
--success-300: #2CD888;
|
|
70
|
+
--success-400: #21B06E;
|
|
71
|
+
--success-500: #198754;
|
|
72
|
+
--success-600: #115A38;
|
|
73
|
+
|
|
74
|
+
/* Danger */
|
|
75
|
+
--danger-200: #FED7D7;
|
|
76
|
+
--danger-300: #F81C34;
|
|
77
|
+
--danger-400: #DB071E;
|
|
78
|
+
--danger-500: #CE0015;
|
|
79
|
+
--danger-600: #C10004;
|
|
80
|
+
|
|
81
|
+
/* Warning */
|
|
82
|
+
--warning-200: #FEEBCB;
|
|
83
|
+
--warning-300: #FFCF70;
|
|
84
|
+
--warning-400: #FFBE3D;
|
|
85
|
+
--warning-500: #FFAE0C;
|
|
86
|
+
--warning-600: #D68F00;
|
|
87
|
+
|
|
88
|
+
/* Info */
|
|
89
|
+
--info-200: #BEE3F8;
|
|
90
|
+
--info-300: #47AFFF;
|
|
91
|
+
--info-400: #1499FF;
|
|
92
|
+
--info-500: #007EDF;
|
|
93
|
+
--info-600: #0062AD;
|
|
94
|
+
}
|