@vectara/vectara-ui 11.1.0 → 11.2.0
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/lib/components/accordion/_index.scss +6 -6
- package/lib/components/accountButton/_index.scss +3 -3
- package/lib/components/app/AppHeader.js +4 -5
- package/lib/components/app/appHeader.scss +2 -2
- package/lib/components/app/appSideNav/_index.scss +2 -2
- package/lib/components/app/appSideNav/appSideNav.scss +7 -7
- package/lib/components/app/appSideNav/appSideNavSections.scss +1 -1
- package/lib/components/app/appSideNav/appSideNavTree.scss +1 -1
- package/lib/components/badge/_index.scss +18 -18
- package/lib/components/button/buttonPrimary.scss +16 -16
- package/lib/components/button/buttonSecondary.scss +15 -15
- package/lib/components/button/buttonTertiary.scss +14 -14
- package/lib/components/button/iconButton.scss +7 -7
- package/lib/components/callout/_index.scss +12 -12
- package/lib/components/card/_index.scss +5 -5
- package/lib/components/chat/_index.scss +11 -11
- package/lib/components/chat/chatTurn.scss +4 -4
- package/lib/components/code/_index.scss +4 -4
- package/lib/components/context/Context.d.ts +5 -1
- package/lib/components/context/Context.js +24 -3
- package/lib/components/context/Theme.d.ts +58 -0
- package/lib/components/context/Theme.js +190 -0
- package/lib/components/datePicker/_index.scss +17 -17
- package/lib/components/drawer/_index.scss +5 -5
- package/lib/components/form/input/_index.scss +3 -3
- package/lib/components/form/itemsInput/_index.scss +1 -1
- package/lib/components/form/label/_index.scss +1 -1
- package/lib/components/form/select/_index.scss +4 -4
- package/lib/components/form/superRadioGroup/_index.scss +5 -5
- package/lib/components/form/textArea/_index.scss +2 -2
- package/lib/components/horizontalRule/_index.scss +7 -7
- package/lib/components/icon/_index.scss +39 -39
- package/lib/components/image/Image.d.ts +3 -2
- package/lib/components/image/Image.js +7 -13
- package/lib/components/image/_index.scss +21 -9
- package/lib/components/index.d.ts +2 -1
- package/lib/components/index.js +2 -1
- package/lib/components/infoList/_index.scss +2 -2
- package/lib/components/infoMenu/_index.scss +1 -1
- package/lib/components/infoTable/_index.scss +6 -6
- package/lib/components/link/_index.scss +1 -1
- package/lib/components/list/_index.scss +4 -4
- package/lib/components/menu/_index.scss +11 -11
- package/lib/components/modal/_index.scss +4 -4
- package/lib/components/notification/_index.scss +2 -2
- package/lib/components/optionsButton/_index.scss +14 -14
- package/lib/components/optionsList/_index.scss +19 -19
- package/lib/components/panel/_index.scss +1 -1
- package/lib/components/popover/_index.scss +4 -4
- package/lib/components/progressBar/_index.scss +7 -7
- package/lib/components/prompt/_index.scss +7 -7
- package/lib/components/screenBlock/_index.scss +5 -5
- package/lib/components/searchInput/_index.scss +13 -13
- package/lib/components/searchResult/_index.scss +3 -3
- package/lib/components/searchSelect/_index.scss +4 -4
- package/lib/components/skeleton/_index.scss +7 -7
- package/lib/components/spinner/_index.scss +8 -8
- package/lib/components/steps/_index.scss +18 -18
- package/lib/components/summary/_index.scss +6 -6
- package/lib/components/table/_index.scss +8 -8
- package/lib/components/tabs/_enclosed.scss +5 -5
- package/lib/components/tabs/_index.scss +2 -2
- package/lib/components/tabs/_open.scss +6 -6
- package/lib/components/timeline/_index.scss +2 -2
- package/lib/components/toggle/_index.scss +4 -4
- package/lib/components/tooltip/Tooltip.js +7 -9
- package/lib/components/tooltip/_index.scss +2 -2
- package/lib/components/topicButton/_index.scss +2 -2
- package/lib/components/typography/_text.scss +12 -12
- package/lib/components/typography/_textColor.scss +8 -8
- package/lib/components/typography/_title.scss +8 -8
- package/lib/sassUtils/index.scss +0 -1
- package/lib/styles/index.css +507 -698
- package/package.json +2 -1
- package/lib/sassUtils/_colors.scss +0 -156
|
@@ -4,20 +4,20 @@
|
|
|
4
4
|
padding: $sizeXs $sizeS;
|
|
5
5
|
// Work inside panels or other containers with different background colors.
|
|
6
6
|
background-color: transparent;
|
|
7
|
-
border: 1px solid var(--color-border-light);
|
|
7
|
+
border: 1px solid var(--vui-color-border-light);
|
|
8
8
|
width: 100%;
|
|
9
9
|
border-radius: $sizeXxs;
|
|
10
10
|
|
|
11
11
|
&:hover {
|
|
12
|
-
color: var(--color-primary);
|
|
13
|
-
background-color: var(--color-primary-lighter-shade);
|
|
14
|
-
border-color: rgba(var(--color-primary-rgb), 0.5);
|
|
12
|
+
color: var(--vui-color-primary-shade);
|
|
13
|
+
background-color: var(--vui-color-primary-lighter-shade);
|
|
14
|
+
border-color: rgba(var(--vui-color-primary-shade-rgb), 0.5);
|
|
15
15
|
text-decoration: underline;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.vuiAccordionHeader--isOpen {
|
|
20
|
-
color: var(--color-text);
|
|
20
|
+
color: var(--vui-color-text);
|
|
21
21
|
font-weight: $fontWeightBold;
|
|
22
22
|
border-bottom-right-radius: 0;
|
|
23
23
|
border-bottom-left-radius: 0;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.vuiAccordionBody {
|
|
31
|
-
border: 1px solid var(--color-border-light);
|
|
31
|
+
border: 1px solid var(--vui-color-border-light);
|
|
32
32
|
border-top: none;
|
|
33
33
|
padding: $sizeM $sizeL;
|
|
34
34
|
border-bottom-right-radius: $sizeXxs;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
&:hover,
|
|
13
13
|
&.vuiAccountButton-isActive {
|
|
14
|
-
border-color:
|
|
14
|
+
border-color: var(--vui-color-medium-shade);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
|
|
25
25
|
.vuiAccountButton__primaryLabel {
|
|
26
26
|
font-size: $fontSizeStandard;
|
|
27
|
-
color:
|
|
27
|
+
color: var(--vui-color-full-shade);
|
|
28
28
|
font-weight: $fontWeightBold;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.vuiAccountButton__secondaryLabel {
|
|
32
32
|
margin-top: $sizeXxs;
|
|
33
33
|
font-size: $fontSizeSmall;
|
|
34
|
-
color:
|
|
34
|
+
color: var(--vui-color-dark-shade);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.vuiAccountButton__labels {
|
|
@@ -10,13 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import classNames from "classnames";
|
|
14
13
|
import { VuiFlexContainer } from "../flex/FlexContainer";
|
|
15
14
|
import { VuiFlexItem } from "../flex/FlexItem";
|
|
15
|
+
import { useVuiContext } from "../context/Context";
|
|
16
16
|
export const VuiAppHeader = (_a) => {
|
|
17
17
|
var { left, right, content, growRight, className, darkTheme } = _a, rest = __rest(_a, ["left", "right", "content", "growRight", "className", "darkTheme"]);
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
});
|
|
21
|
-
return (_jsx("div", Object.assign({ className: classes }, rest, { children: content ? (content) : (_jsxs(VuiFlexContainer, Object.assign({ className: "vuiAppHeader__inner", justifyContent: "spaceBetween", alignItems: "center" }, { children: [Boolean(left) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: left }))), Boolean(right) && (_jsx(VuiFlexItem, Object.assign({ grow: growRight ? 1 : false, shrink: false }, { children: right })))] }))) })));
|
|
18
|
+
const { getThemeStyle } = useVuiContext();
|
|
19
|
+
const style = darkTheme ? getThemeStyle("dark") : {};
|
|
20
|
+
return (_jsx("div", Object.assign({ className: "vuiAppHeader" }, rest, { style: style }, { children: content ? (content) : (_jsxs(VuiFlexContainer, Object.assign({ className: "vuiAppHeader__inner", justifyContent: "spaceBetween", alignItems: "center" }, { children: [Boolean(left) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: left }))), Boolean(right) && (_jsx(VuiFlexItem, Object.assign({ grow: growRight ? 1 : false, shrink: false }, { children: right })))] }))) })));
|
|
22
21
|
};
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
width: 100vw;
|
|
6
6
|
height: $appHeaderHeight;
|
|
7
|
-
background-color: var(--color-empty-shade);
|
|
7
|
+
background-color: var(--vui-color-empty-shade);
|
|
8
8
|
padding: $sizeXs $sizeM;
|
|
9
9
|
z-index: $appHeaderZIndex;
|
|
10
|
-
border-bottom: 1px solid var(--color-border);
|
|
10
|
+
border-bottom: 1px solid var(--vui-color-border-medium);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.vuiAppHeader__inner {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@mixin appSideNavItem--m {
|
|
2
2
|
display: block;
|
|
3
|
-
color: var(--color-text);
|
|
3
|
+
color: var(--vui-color-text);
|
|
4
4
|
font-size: $fontSizeStandard;
|
|
5
5
|
padding: 0 $sizeM;
|
|
6
6
|
margin-left: -$sizeM;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
@mixin appSideNavItem--l {
|
|
12
12
|
display: block;
|
|
13
|
-
color: var(--color-text);
|
|
13
|
+
color: var(--vui-color-text);
|
|
14
14
|
font-size: $fontSizeMedium;
|
|
15
15
|
padding: 0 $sizeM;
|
|
16
16
|
padding-top: $appSideNavLinkSpacing + 2px;
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
.vuiAppSideNavCollapseButton {
|
|
37
37
|
display: block;
|
|
38
|
-
color:
|
|
38
|
+
color: var(--vui-color-subdued-shade);
|
|
39
39
|
font-size: $fontSizeStandard;
|
|
40
40
|
text-decoration: none;
|
|
41
41
|
padding: 0 $sizeM;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
margin-bottom: $sizeM;
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
color: var(--color-primary);
|
|
46
|
+
color: var(--vui-color-primary-shade);
|
|
47
47
|
text-decoration: underline;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
@@ -60,18 +60,18 @@
|
|
|
60
60
|
text-decoration: none;
|
|
61
61
|
border-radius: $sizeXxs;
|
|
62
62
|
line-height: 1.1;
|
|
63
|
-
border-top: 1px solid
|
|
64
|
-
border-bottom: 1px solid
|
|
63
|
+
border-top: 1px solid var(--vui-color-empty-shade);
|
|
64
|
+
border-bottom: 1px solid var(--vui-color-empty-shade);
|
|
65
65
|
|
|
66
66
|
&:hover {
|
|
67
|
-
background-color:
|
|
68
|
-
color: var(--color-primary);
|
|
67
|
+
background-color: var(--vui-color-light-shade);
|
|
68
|
+
color: var(--vui-color-primary-shade);
|
|
69
69
|
text-decoration: underline;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.vuiAppSideNavLink--active {
|
|
74
|
-
background-color:
|
|
74
|
+
background-color: var(--vui-color-light-shade);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.vuiAppSideNav--m {
|
|
@@ -23,34 +23,34 @@
|
|
|
23
23
|
// Color
|
|
24
24
|
$color: (
|
|
25
25
|
accent: (
|
|
26
|
-
"color": var(--color-accent),
|
|
27
|
-
"background-color": rgba(var(--color-accent-rgb), 0.1),
|
|
28
|
-
"border-color": rgba(var(--color-accent-rgb), 0.1)
|
|
26
|
+
"color": var(--vui-color-accent-shade),
|
|
27
|
+
"background-color": rgba(var(--vui-color-accent-shade-rgb), 0.1),
|
|
28
|
+
"border-color": rgba(var(--vui-color-accent-shade-rgb), 0.1)
|
|
29
29
|
),
|
|
30
30
|
primary: (
|
|
31
|
-
"color": var(--color-primary),
|
|
32
|
-
"background-color": rgba(var(--color-primary-rgb), 0.1),
|
|
33
|
-
"border-color": rgba(var(--color-primary-rgb), 0.1)
|
|
31
|
+
"color": var(--vui-color-primary-shade),
|
|
32
|
+
"background-color": rgba(var(--vui-color-primary-shade-rgb), 0.1),
|
|
33
|
+
"border-color": rgba(var(--vui-color-primary-shade-rgb), 0.1)
|
|
34
34
|
),
|
|
35
35
|
success: (
|
|
36
|
-
"color": var(--color-success),
|
|
37
|
-
"background-color": rgba(var(--color-success-rgb), 0.1),
|
|
38
|
-
"border-color": rgba(var(--color-success-rgb), 0.1)
|
|
36
|
+
"color": var(--vui-color-success-shade),
|
|
37
|
+
"background-color": rgba(var(--vui-color-success-shade-rgb), 0.1),
|
|
38
|
+
"border-color": rgba(var(--vui-color-success-shade-rgb), 0.1)
|
|
39
39
|
),
|
|
40
40
|
warning: (
|
|
41
|
-
"color": var(--color-warning),
|
|
42
|
-
"background-color": rgba(var(--color-warning-rgb), 0.1),
|
|
43
|
-
"border-color": rgba(var(--color-warning-rgb), 0.1)
|
|
41
|
+
"color": var(--vui-color-warning-shade),
|
|
42
|
+
"background-color": rgba(var(--vui-color-warning-shade-rgb), 0.1),
|
|
43
|
+
"border-color": rgba(var(--vui-color-warning-shade-rgb), 0.1)
|
|
44
44
|
),
|
|
45
45
|
danger: (
|
|
46
|
-
"color": var(--color-danger),
|
|
47
|
-
"background-color": rgba(var(--color-danger-rgb), 0.1),
|
|
48
|
-
"border-color": rgba(var(--color-danger-rgb), 0.1)
|
|
46
|
+
"color": var(--vui-color-danger-shade),
|
|
47
|
+
"background-color": rgba(var(--vui-color-danger-shade-rgb), 0.1),
|
|
48
|
+
"border-color": rgba(var(--vui-color-danger-shade-rgb), 0.1)
|
|
49
49
|
),
|
|
50
50
|
neutral: (
|
|
51
|
-
"color": var(--color-text),
|
|
52
|
-
"background-color": var(--color-light-shade),
|
|
53
|
-
"border-color": rgba(var(--color-text-rgb), 0.1)
|
|
51
|
+
"color": var(--vui-color-text),
|
|
52
|
+
"background-color": var(--vui-color-light-shade),
|
|
53
|
+
"border-color": rgba(var(--vui-color-text-rgb), 0.1)
|
|
54
54
|
)
|
|
55
55
|
);
|
|
56
56
|
|
|
@@ -10,38 +10,38 @@
|
|
|
10
10
|
$color: (
|
|
11
11
|
accent: (
|
|
12
12
|
"color": #ffffff,
|
|
13
|
-
"background-color": var(--color-accent),
|
|
14
|
-
"border-color": var(--color-accent)
|
|
13
|
+
"background-color": var(--vui-color-accent-shade),
|
|
14
|
+
"border-color": var(--vui-color-accent-shade)
|
|
15
15
|
),
|
|
16
16
|
primary: (
|
|
17
17
|
"color": #ffffff,
|
|
18
|
-
"background-color": var(--color-primary),
|
|
19
|
-
"border-color": var(--color-primary)
|
|
18
|
+
"background-color": var(--vui-color-primary-shade),
|
|
19
|
+
"border-color": var(--vui-color-primary-shade)
|
|
20
20
|
),
|
|
21
21
|
success: (
|
|
22
22
|
"color": #ffffff,
|
|
23
|
-
"background-color": var(--color-success),
|
|
24
|
-
"border-color": var(--color-success)
|
|
23
|
+
"background-color": var(--vui-color-success-shade),
|
|
24
|
+
"border-color": var(--vui-color-success-shade)
|
|
25
25
|
),
|
|
26
26
|
danger: (
|
|
27
27
|
"color": #ffffff,
|
|
28
|
-
"background-color": var(--color-danger),
|
|
29
|
-
"border-color": var(--color-danger)
|
|
28
|
+
"background-color": var(--vui-color-danger-shade),
|
|
29
|
+
"border-color": var(--vui-color-danger-shade)
|
|
30
30
|
),
|
|
31
31
|
warning: (
|
|
32
32
|
"color": #ffffff,
|
|
33
|
-
"background-color": var(--color-warning),
|
|
34
|
-
"border-color": var(--color-warning)
|
|
33
|
+
"background-color": var(--vui-color-warning-shade),
|
|
34
|
+
"border-color": var(--vui-color-warning-shade)
|
|
35
35
|
),
|
|
36
36
|
neutral: (
|
|
37
|
-
"color": var(--color-text),
|
|
38
|
-
"background-color":
|
|
39
|
-
"border-color":
|
|
37
|
+
"color": var(--vui-color-text),
|
|
38
|
+
"background-color": var(--vui-color-empty-shade),
|
|
39
|
+
"border-color": var(--vui-color-empty-shade)
|
|
40
40
|
),
|
|
41
41
|
subdued: (
|
|
42
|
-
"color":
|
|
43
|
-
"background-color":
|
|
44
|
-
"border-color":
|
|
42
|
+
"color": var(--vui-color-subdued-shade),
|
|
43
|
+
"background-color": rgba(var(--vui-color-subdued-shade-rgb), 0.1),
|
|
44
|
+
"border-color": rgba(var(--vui-color-subdued-shade-rgb), 0.1)
|
|
45
45
|
)
|
|
46
46
|
);
|
|
47
47
|
|
|
@@ -7,38 +7,38 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.vuiButtonSecondary--solid {
|
|
10
|
-
background-color:
|
|
10
|
+
background-color: var(--vui-color-empty-shade);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
// Color
|
|
14
14
|
$color: (
|
|
15
15
|
accent: (
|
|
16
|
-
"border-color": rgba(var(--color-accent-rgb), 0.5),
|
|
17
|
-
"color": var(--color-accent)
|
|
16
|
+
"border-color": rgba(var(--vui-color-accent-shade-rgb), 0.5),
|
|
17
|
+
"color": var(--vui-color-accent-shade)
|
|
18
18
|
),
|
|
19
19
|
primary: (
|
|
20
|
-
"border-color": rgba(var(--color-primary-rgb), 0.5),
|
|
21
|
-
"color": var(--color-primary)
|
|
20
|
+
"border-color": rgba(var(--vui-color-primary-shade-rgb), 0.5),
|
|
21
|
+
"color": var(--vui-color-primary-shade)
|
|
22
22
|
),
|
|
23
23
|
success: (
|
|
24
|
-
"border-color": rgba(var(--color-success-rgb), 0.5),
|
|
25
|
-
"color": var(--color-success)
|
|
24
|
+
"border-color": rgba(var(--vui-color-success-shade-rgb), 0.5),
|
|
25
|
+
"color": var(--vui-color-success-shade)
|
|
26
26
|
),
|
|
27
27
|
danger: (
|
|
28
|
-
"border-color": rgba(var(--color-danger-rgb), 0.5),
|
|
29
|
-
"color": var(--color-danger)
|
|
28
|
+
"border-color": rgba(var(--vui-color-danger-shade-rgb), 0.5),
|
|
29
|
+
"color": var(--vui-color-danger-shade)
|
|
30
30
|
),
|
|
31
31
|
warning: (
|
|
32
|
-
"border-color": rgba(var(--color-warning-rgb), 0.5),
|
|
33
|
-
"color": var(--color-warning)
|
|
32
|
+
"border-color": rgba(var(--vui-color-warning-shade-rgb), 0.5),
|
|
33
|
+
"color": var(--vui-color-warning-shade)
|
|
34
34
|
),
|
|
35
35
|
neutral: (
|
|
36
|
-
"border-color": var(--color-border),
|
|
37
|
-
"color": var(--color-text)
|
|
36
|
+
"border-color": var(--vui-color-border-medium),
|
|
37
|
+
"color": var(--vui-color-text)
|
|
38
38
|
),
|
|
39
39
|
subdued: (
|
|
40
|
-
"border-color": var(--color-border-light),
|
|
41
|
-
"color":
|
|
40
|
+
"border-color": var(--vui-color-border-light),
|
|
41
|
+
"color": var(--vui-color-subdued-shade)
|
|
42
42
|
)
|
|
43
43
|
);
|
|
44
44
|
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
// Color
|
|
17
17
|
$color: (
|
|
18
18
|
accent: (
|
|
19
|
-
"color": var(--color-accent),
|
|
20
|
-
"selected-color": rgba(var(--color-accent-rgb), 0.1)
|
|
19
|
+
"color": var(--vui-color-accent-shade),
|
|
20
|
+
"selected-color": rgba(var(--vui-color-accent-shade-rgb), 0.1)
|
|
21
21
|
),
|
|
22
22
|
primary: (
|
|
23
|
-
"color": var(--color-primary),
|
|
24
|
-
"selected-color": rgba(var(--color-primary-rgb), 0.1)
|
|
23
|
+
"color": var(--vui-color-primary-shade),
|
|
24
|
+
"selected-color": rgba(var(--vui-color-primary-shade-rgb), 0.1)
|
|
25
25
|
),
|
|
26
26
|
success: (
|
|
27
|
-
"color": var(--color-success),
|
|
28
|
-
"selected-color": rgba(var(--color-success-rgb), 0.1)
|
|
27
|
+
"color": var(--vui-color-success-shade),
|
|
28
|
+
"selected-color": rgba(var(--vui-color-success-shade-rgb), 0.1)
|
|
29
29
|
),
|
|
30
30
|
danger: (
|
|
31
|
-
"color": var(--color-danger),
|
|
32
|
-
"selected-color": rgba(var(--color-danger-rgb), 0.1)
|
|
31
|
+
"color": var(--vui-color-danger-shade),
|
|
32
|
+
"selected-color": rgba(var(--vui-color-danger-shade-rgb), 0.1)
|
|
33
33
|
),
|
|
34
34
|
warning: (
|
|
35
|
-
"color": var(--color-warning),
|
|
36
|
-
"selected-color": rgba(var(--color-warning-rgb), 0.1)
|
|
35
|
+
"color": var(--vui-color-warning-shade),
|
|
36
|
+
"selected-color": rgba(var(--vui-color-warning-shade-rgb), 0.1)
|
|
37
37
|
),
|
|
38
38
|
neutral: (
|
|
39
|
-
"color": var(--color-text),
|
|
40
|
-
"selected-color": rgba(var(--color-text-rgb), 0.1)
|
|
39
|
+
"color": var(--vui-color-text),
|
|
40
|
+
"selected-color": rgba(var(--vui-color-text-rgb), 0.1)
|
|
41
41
|
),
|
|
42
42
|
subdued: (
|
|
43
|
-
"color":
|
|
44
|
-
"selected-color": rgba(var(--color-subdued-rgb), 0.1)
|
|
43
|
+
"color": var(--vui-color-subdued-shade),
|
|
44
|
+
"selected-color": rgba(var(--vui-color-subdued-rgb), 0.1)
|
|
45
45
|
)
|
|
46
46
|
);
|
|
47
47
|
|
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
// Color
|
|
9
9
|
$color: (
|
|
10
|
-
accent: var(--color-accent),
|
|
11
|
-
primary: var(--color-primary),
|
|
12
|
-
success: var(--color-success),
|
|
13
|
-
warning: var(--color-warning),
|
|
14
|
-
danger: var(--color-danger),
|
|
15
|
-
neutral: var(--color-text),
|
|
16
|
-
subdued: var(--color-subdued)
|
|
10
|
+
accent: var(--vui-color-accent-shade),
|
|
11
|
+
primary: var(--vui-color-primary-shade),
|
|
12
|
+
success: var(--vui-color-success-shade),
|
|
13
|
+
warning: var(--vui-color-warning-shade),
|
|
14
|
+
danger: var(--vui-color-danger-shade),
|
|
15
|
+
neutral: var(--vui-color-text),
|
|
16
|
+
subdued: var(--vui-color-subdued)
|
|
17
17
|
);
|
|
18
18
|
|
|
19
19
|
@each $colorName, $colorValue in $color {
|
|
@@ -23,28 +23,28 @@
|
|
|
23
23
|
// Color
|
|
24
24
|
$color: (
|
|
25
25
|
accent: (
|
|
26
|
-
"border-color": var(--color-accent-light-shade),
|
|
27
|
-
"background-color": var(--color-accent-lighter-shade)
|
|
26
|
+
"border-color": var(--vui-color-accent-light-shade),
|
|
27
|
+
"background-color": var(--vui-color-accent-lighter-shade)
|
|
28
28
|
),
|
|
29
29
|
primary: (
|
|
30
|
-
"border-color": var(--color-primary-light-shade),
|
|
31
|
-
"background-color": var(--color-primary-lighter-shade)
|
|
30
|
+
"border-color": var(--vui-color-primary-light-shade),
|
|
31
|
+
"background-color": var(--vui-color-primary-lighter-shade)
|
|
32
32
|
),
|
|
33
33
|
success: (
|
|
34
|
-
"border-color": var(--color-success-light-shade),
|
|
35
|
-
"background-color": var(--color-success-lighter-shade)
|
|
34
|
+
"border-color": var(--vui-color-success-light-shade),
|
|
35
|
+
"background-color": var(--vui-color-success-lighter-shade)
|
|
36
36
|
),
|
|
37
37
|
warning: (
|
|
38
|
-
"border-color": var(--color-warning-light-shade),
|
|
39
|
-
"background-color": var(--color-warning-lighter-shade)
|
|
38
|
+
"border-color": var(--vui-color-warning-light-shade),
|
|
39
|
+
"background-color": var(--vui-color-warning-lighter-shade)
|
|
40
40
|
),
|
|
41
41
|
danger: (
|
|
42
|
-
"border-color": var(--color-danger-light-shade),
|
|
43
|
-
"background-color": var(--color-danger-lighter-shade)
|
|
42
|
+
"border-color": var(--vui-color-danger-light-shade),
|
|
43
|
+
"background-color": var(--vui-color-danger-lighter-shade)
|
|
44
44
|
),
|
|
45
45
|
neutral: (
|
|
46
|
-
"border-color":
|
|
47
|
-
"background-color":
|
|
46
|
+
"border-color": var(--vui-color-medium-shade),
|
|
47
|
+
"background-color": var(--vui-color-light-shade)
|
|
48
48
|
)
|
|
49
49
|
);
|
|
50
50
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.vuiCard {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
|
-
background-color:
|
|
4
|
+
background-color: var(--vui-color-empty-shade);
|
|
5
5
|
border-radius: $sizeXs;
|
|
6
6
|
box-shadow: $shadowLargeStart;
|
|
7
7
|
width: 100%;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
display: flex;
|
|
60
60
|
flex-direction: column;
|
|
61
61
|
width: 100%;
|
|
62
|
-
border-top: 1px solid var(--color-border-light);
|
|
62
|
+
border-top: 1px solid var(--vui-color-border-light);
|
|
63
63
|
padding: $sizeM $sizeL;
|
|
64
64
|
flex-grow: 1;
|
|
65
65
|
}
|
|
@@ -105,13 +105,13 @@
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.vuiCard--highlight {
|
|
108
|
-
border: 2px solid var(--color-primary);
|
|
108
|
+
border: 2px solid var(--vui-color-primary-shade);
|
|
109
109
|
|
|
110
110
|
.vuiCard__header {
|
|
111
|
-
background-color: var(--color-primary-lighter-shade);
|
|
111
|
+
background-color: var(--vui-color-primary-lighter-shade);
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.vuiCard__body {
|
|
115
|
-
border-top: var(--color-primary-lighter-shade);
|
|
115
|
+
border-top: var(--vui-color-primary-lighter-shade);
|
|
116
116
|
}
|
|
117
117
|
}
|
|
@@ -24,9 +24,9 @@ $minChatWidth: 600px;
|
|
|
24
24
|
.vuiChatButton {
|
|
25
25
|
padding: $sizeXs $sizeS;
|
|
26
26
|
font-size: $fontSizeStandard;
|
|
27
|
-
color: var(--color-text);
|
|
28
|
-
background-color: var(--color-primary-lighter-shade);
|
|
29
|
-
border: 1px solid var(--color-border);
|
|
27
|
+
color: var(--vui-color-text);
|
|
28
|
+
background-color: var(--vui-color-primary-lighter-shade);
|
|
29
|
+
border: 1px solid var(--vui-color-border-medium);
|
|
30
30
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
31
31
|
transition: all $transitionSpeed;
|
|
32
32
|
animation: popUp 0.4s cubic-bezier(0.5, 0, 0.5, 1) 1;
|
|
@@ -58,8 +58,8 @@ $minChatWidth: 600px;
|
|
|
58
58
|
max-width: 420px;
|
|
59
59
|
border-radius: $sizeXs;
|
|
60
60
|
overflow: hidden;
|
|
61
|
-
border: 1px solid var(--color-border);
|
|
62
|
-
background-color:
|
|
61
|
+
border: 1px solid var(--vui-color-border-medium);
|
|
62
|
+
background-color: var(--vui-color-light-shade);
|
|
63
63
|
|
|
64
64
|
@media screen and (max-height: $minChatHeight) {
|
|
65
65
|
& {
|
|
@@ -103,8 +103,8 @@ $minChatWidth: 600px;
|
|
|
103
103
|
.vuiChat__header {
|
|
104
104
|
padding: $sizeXs $sizeS;
|
|
105
105
|
font-size: $fontSizeStandard;
|
|
106
|
-
color: var(--color-text);
|
|
107
|
-
background-color: var(--color-primary-lighter-shade);
|
|
106
|
+
color: var(--vui-color-text);
|
|
107
|
+
background-color: var(--vui-color-primary-lighter-shade);
|
|
108
108
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
109
109
|
// Ensure shadow overlaps on top of conversation.
|
|
110
110
|
z-index: 2;
|
|
@@ -119,7 +119,7 @@ $minChatWidth: 600px;
|
|
|
119
119
|
.vuiChat__introduction {
|
|
120
120
|
padding: $sizeM $sizeL 0;
|
|
121
121
|
font-size: $fontSizeStandard;
|
|
122
|
-
color:
|
|
122
|
+
color: var(--vui-color-full-shade);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.vuiChat__turns {
|
|
@@ -131,7 +131,7 @@ $minChatWidth: 600px;
|
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.vuiChat__input {
|
|
134
|
-
border-top: 1px solid var(--color-border-light);
|
|
134
|
+
border-top: 1px solid var(--vui-color-border-light);
|
|
135
135
|
padding: $sizeXs $sizeS;
|
|
136
136
|
}
|
|
137
137
|
|
|
@@ -144,7 +144,7 @@ $minChatWidth: 600px;
|
|
|
144
144
|
bottom: $sizeXxs;
|
|
145
145
|
padding: $sizeXxs $sizeS;
|
|
146
146
|
overflow-y: auto;
|
|
147
|
-
background-color:
|
|
148
|
-
border: 1px solid var(--color-border);
|
|
147
|
+
background-color: var(--vui-color-empty-shade);
|
|
148
|
+
border: 1px solid var(--vui-color-border-medium);
|
|
149
149
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
150
150
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
left: 0;
|
|
4
4
|
box-shadow: $shadowLargeStart;
|
|
5
|
-
background-color:
|
|
5
|
+
background-color: var(--vui-color-empty-shade);
|
|
6
6
|
padding: $sizeL $sizeS $sizeL $sizeL;
|
|
7
7
|
margin-right: $sizeXxs;
|
|
8
8
|
transition: all $transitionSpeed;
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.vuiChatQuestion {
|
|
22
|
-
color: var(--color-accent);
|
|
22
|
+
color: var(--vui-color-accent-shade);
|
|
23
23
|
font-weight: $fontWeightBold;
|
|
24
24
|
font-size: $fontSizeStandard;
|
|
25
25
|
margin-bottom: $sizeXs;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.vuiChatQuestion--error {
|
|
29
|
-
color: var(--color-danger);
|
|
29
|
+
color: var(--vui-color-danger-shade);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.vuiChat__inspectButton {
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.vuiChatAnswer {
|
|
37
|
-
color:
|
|
37
|
+
color: var(--vui-color-full-shade);
|
|
38
38
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
padding: 0 !important;
|
|
18
18
|
margin: 0 !important;
|
|
19
19
|
max-height: inherit;
|
|
20
|
-
background-color:
|
|
20
|
+
background-color: var(--vui-color-light-shade) !important;
|
|
21
21
|
border-radius: $sizeXxs;
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
display: block;
|
|
26
26
|
width: 100%;
|
|
27
27
|
padding: $sizeM $sizeL;
|
|
28
|
-
background-color:
|
|
29
|
-
color: var(--color-text);
|
|
28
|
+
background-color: var(--vui-color-light-shade);
|
|
29
|
+
color: var(--vui-color-text);
|
|
30
30
|
font-family: "Roboto Mono", monospace;
|
|
31
31
|
// Ensure PrismJS components wrap their lines.
|
|
32
32
|
word-wrap: break-word !important;
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
word-break: break-word !important;
|
|
35
35
|
white-space: pre-wrap !important;
|
|
36
36
|
font-size: $fontSizeSmall !important;
|
|
37
|
-
color:
|
|
37
|
+
color: var(--vui-color-dark-shade) !important;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.vuiCodeFullscreen {
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { LinkProps } from "../link/types";
|
|
3
|
+
import { Theme } from "./Theme";
|
|
3
4
|
type LinkProvider = (linkConfig: LinkProps) => JSX.Element;
|
|
4
5
|
type PathProvider = () => string;
|
|
5
6
|
interface VuiContextType {
|
|
6
7
|
createLink: LinkProvider;
|
|
7
8
|
getPath: PathProvider;
|
|
8
9
|
DrawerTitle: keyof JSX.IntrinsicElements;
|
|
10
|
+
getThemeStyle: (theme: "dark" | "light") => Record<string, string>;
|
|
9
11
|
}
|
|
10
12
|
type Props = {
|
|
11
13
|
children: ReactNode;
|
|
12
14
|
linkProvider?: LinkProvider;
|
|
13
15
|
pathProvider?: PathProvider;
|
|
14
16
|
drawerTitle?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
17
|
+
theme?: Theme;
|
|
18
|
+
isThemeIsolated?: boolean;
|
|
15
19
|
};
|
|
16
|
-
export declare const VuiContextProvider: ({ children, linkProvider, pathProvider, drawerTitle }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const VuiContextProvider: ({ children, linkProvider, pathProvider, drawerTitle, theme, isThemeIsolated }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
17
21
|
export declare const useVuiContext: () => VuiContextType;
|
|
18
22
|
export {};
|