@vectara/vectara-ui 19.5.0 → 20.0.0

package/lib/components/accordion/_index.scss

@@ -10,7 +10,7 @@
 
   &:hover {
     color: var(--vui-color-primary-shade);
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
     border-color: rgba(var(--vui-color-primary-shade-rgb), 0.5);
     text-decoration: underline;
   }

package/lib/components/accountButton/AccountButton.d.ts

@@ -7,5 +7,8 @@ type Props = {
     options?: OptionListItem<string>[];
     after?: React.ReactNode;
 };
-export declare const VuiAccountButton: ({ userName, email, info, options, after, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export type AccountButtonHandle = {
+    closeMenu: () => void;
+};
+export declare const VuiAccountButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<AccountButtonHandle>>;
 export {};

package/lib/components/accountButton/AccountButton.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { BiExpandVertical } from "react-icons/bi";
 import classNames from "classnames";
 import { VuiIcon } from "../icon/Icon";
@@ -23,9 +23,12 @@ const Button = forwardRef((_a, ref) => {
     });
     return (_jsx("button", Object.assign({ className: classes, type: "button" }, rest, { ref: ref, "aria-expanded": isSelected, "aria-haspopup": "menu" }, { children: children })));
 });
-export const VuiAccountButton = (_a) => {
+export const VuiAccountButton = forwardRef((_a, ref) => {
     var { userName, email, info, options, after } = _a, rest = __rest(_a, ["userName", "email", "info", "options", "after"]);
     const [isOpen, setIsOpen] = useState(false);
+    useImperativeHandle(ref, () => ({
+        closeMenu: () => setIsOpen(false)
+    }));
     const areUnique = userName && email && userName !== email;
     const primaryLabel = areUnique ? userName : email;
     const secondaryLabel = areUnique ? email : null;
@@ -33,4 +36,4 @@ export const VuiAccountButton = (_a) => {
     return (_jsx(VuiInfoMenu, Object.assign({ isOpen: isOpen, setIsOpen: setIsOpen, button: button, info: info, infoAfter: after, anchorSide: "rightUp" }, { children: options && (_jsx(VuiOptionsList, { size: "l", onSelectOption: () => {
                 setIsOpen(false);
             }, options: options })) })));
-};
+});

package/lib/components/button/buttonSecondary.scss

@@ -13,23 +13,23 @@
 // Color
 $color: (
   accent: (
-    "border-color": rgba(var(--vui-color-accent-shade-rgb), 0.5),
+    "border-color": var(--vui-color-accent-border),
     "color": var(--vui-color-accent-shade)
   ),
   primary: (
-    "border-color": rgba(var(--vui-color-primary-shade-rgb), 0.5),
+    "border-color": var(--vui-color-primary-border),
     "color": var(--vui-color-primary-shade)
   ),
   success: (
-    "border-color": rgba(var(--vui-color-success-shade-rgb), 0.5),
+    "border-color": var(--vui-color-success-border),
     "color": var(--vui-color-success-shade)
   ),
   danger: (
-    "border-color": rgba(var(--vui-color-danger-shade-rgb), 0.5),
+    "border-color": var(--vui-color-danger-border),
     "color": var(--vui-color-danger-shade)
   ),
   warning: (
-    "border-color": rgba(var(--vui-color-warning-shade-rgb), 0.5),
+    "border-color": var(--vui-color-warning-border),
     "color": var(--vui-color-warning-shade)
   ),
   neutral: (

package/lib/components/callout/_index.scss

@@ -23,24 +23,24 @@
 // Color
 $color: (
   accent: (
-    "border-color": var(--vui-color-accent-light-shade),
-    "background-color": var(--vui-color-accent-lighter-shade)
+    "border-color": var(--vui-color-accent-border),
+    "background-color": var(--vui-color-accent-background)
   ),
   primary: (
-    "border-color": var(--vui-color-primary-light-shade),
-    "background-color": var(--vui-color-primary-lighter-shade)
+    "border-color": var(--vui-color-primary-border),
+    "background-color": var(--vui-color-primary-background)
   ),
   success: (
-    "border-color": var(--vui-color-success-light-shade),
-    "background-color": var(--vui-color-success-lighter-shade)
+    "border-color": var(--vui-color-success-border),
+    "background-color": var(--vui-color-success-background)
   ),
   warning: (
-    "border-color": var(--vui-color-warning-light-shade),
-    "background-color": var(--vui-color-warning-lighter-shade)
+    "border-color": var(--vui-color-warning-border),
+    "background-color": var(--vui-color-warning-background)
   ),
   danger: (
-    "border-color": var(--vui-color-danger-light-shade),
-    "background-color": var(--vui-color-danger-lighter-shade)
+    "border-color": var(--vui-color-danger-border),
+    "background-color": var(--vui-color-danger-background)
   ),
   neutral: (
     "border-color": var(--vui-color-medium-shade),

package/lib/components/card/_index.scss

@@ -182,7 +182,6 @@
   transition: box-shadow $transitionSpeed, border-color $transitionSpeed;
 
   &:hover {
-    border-color: var(--vui-color-primary-highlight-shade);
     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   }
 }

package/lib/components/chat/_index.scss

@@ -25,7 +25,7 @@ $minChatWidth: 600px;
   padding: $sizeXs $sizeS;
   font-size: $fontSizeStandard;
   color: var(--vui-color-text);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
   border: 1px solid var(--vui-color-border-medium);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transition: all $transitionSpeed;
@@ -104,7 +104,7 @@ $minChatWidth: 600px;
   padding: $sizeXs $sizeS;
   font-size: $fontSizeStandard;
   color: var(--vui-color-text);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   // Ensure shadow overlaps on top of conversation.
   z-index: 2;

package/lib/components/chip/_index.scss

@@ -68,6 +68,6 @@
     color: var(--vui-color-primary-shade);
   }
   .vuiChip__append {
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
   }
 }

package/lib/components/complexConfigurationButton/_index.scss

@@ -1,6 +1,6 @@
 .vuiComplexConfigurationButton {
   width: 100%;
-  border: 1px solid var(--vui-color-primary-highlight-shade);
+  border: 1px solid var(--vui-color-border-light);
   padding: $sizeS $sizeM;
   border-radius: $sizeXs;
   transition: box-shadow $transitionSpeed, border-color $transitionSpeed;

package/lib/components/context/Theme.d.ts

@@ -3,36 +3,34 @@ export type Theme = {
     fontFamilyMonospace?: string;
     colorAccentShade?: string;
     colorAccentShadeRgb?: string;
-    colorAccentLightShade?: string;
-    colorAccentLightShadeRgb?: string;
-    colorAccentLighterShade?: string;
-    colorAccentLighterShadeRgb?: string;
+    colorAccentBorder?: string;
+    colorAccentBorderRgb?: string;
+    colorAccentBackground?: string;
+    colorAccentBackgroundRgb?: string;
     colorPrimaryShade?: string;
     colorPrimaryShadeRgb?: string;
-    colorPrimaryLightShade?: string;
-    colorPrimaryLightShadeRgb?: string;
-    colorPrimaryLighterShade?: string;
-    colorPrimaryLighterShadeRgb?: string;
+    colorPrimaryBorder?: string;
+    colorPrimaryBorderRgb?: string;
+    colorPrimaryBackground?: string;
+    colorPrimaryBackgroundRgb?: string;
     colorSuccessShade?: string;
     colorSuccessShadeRgb?: string;
-    colorSuccessLightShade?: string;
-    colorSuccessLightShadeRgb?: string;
-    colorSuccessLighterShade?: string;
-    colorSuccessLighterShadeRgb?: string;
+    colorSuccessBorder?: string;
+    colorSuccessBorderRgb?: string;
+    colorSuccessBackground?: string;
+    colorSuccessBackgroundRgb?: string;
     colorWarningShade?: string;
     colorWarningShadeRgb?: string;
-    colorWarningLightShade?: string;
-    colorWarningLightShadeRgb?: string;
-    colorWarningLighterShade?: string;
-    colorWarningLighterShadeRgb?: string;
+    colorWarningBorder?: string;
+    colorWarningBorderRgb?: string;
+    colorWarningBackground?: string;
+    colorWarningBackgroundRgb?: string;
     colorDangerShade?: string;
     colorDangerShadeRgb?: string;
-    colorDangerLightShade?: string;
-    colorDangerLightShadeRgb?: string;
-    colorDangerLighterShade?: string;
-    colorDangerLighterShadeRgb?: string;
-    colorPrimaryHighlightShade?: string;
-    colorPrimaryHighlightShadeRgb?: string;
+    colorDangerBorder?: string;
+    colorDangerBorderRgb?: string;
+    colorDangerBackground?: string;
+    colorDangerBackgroundRgb?: string;
     colorSubduedShade?: string;
     colorSubduedShadeRgb?: string;
     colorEmptyShade?: string;

package/lib/components/context/Theme.js

@@ -16,22 +16,21 @@ const colorWarning = "#a86f1b";
 const colorDanger = "#d22d2d";
 // Semantic colors
 const colorAccentShade = colorAccent;
-const colorAccentLightShade = toRgba(colorAccent, 0.5);
-const colorAccentLighterShade = "#eee7ff";
+const colorAccentBorder = toRgba(colorAccent, 0.5);
+const colorAccentBackground = "#efeaf9";
 const colorPrimaryShade = colorPrimary;
-const colorPrimaryLightShade = toRgba(colorPrimary, 0.5);
-const colorPrimaryLighterShade = "#f1f7ff";
+const colorPrimaryBorder = toRgba(colorPrimary, 0.5);
+const colorPrimaryBackground = "#e8eefb";
 const colorSuccessShade = colorSuccess;
-const colorSuccessLightShade = toRgba(colorSuccess, 0.5);
-const colorSuccessLighterShade = "#e2f2e0";
+const colorSuccessBorder = toRgba(colorSuccess, 0.5);
+const colorSuccessBackground = "#ebf4e9";
 const colorWarningShade = colorWarning;
-const colorWarningLightShade = toRgba(colorWarning, 0.5);
-const colorWarningLighterShade = "#ffeed4";
+const colorWarningBorder = toRgba(colorWarning, 0.5);
+const colorWarningBackground = "#f6f1e9";
 const colorDangerShade = colorDanger;
-const colorDangerLightShade = toRgba(colorDanger, 0.5);
-const colorDangerLighterShade = "#fff1f1";
+const colorDangerBorder = toRgba(colorDanger, 0.5);
+const colorDangerBackground = "#fceaeb";
 // Special colors
-const colorPrimaryHighlightShade = "#d9e2ff";
 const colorSubduedShade = "#6d7686";
 // Neutral colors
 const colorEmptyShade = "#ffffff";
@@ -88,37 +87,35 @@ export const LIGHT_THEME = {
     // Semantic colors
     colorAccentShade,
     colorAccentShadeRgb: toRgb(colorAccentShade),
-    colorAccentLightShade,
-    colorAccentLightShadeRgb: toRgb(colorAccentLightShade),
-    colorAccentLighterShade,
-    colorAccentLighterShadeRgb: toRgb(colorAccentLighterShade),
+    colorAccentBorder,
+    colorAccentBorderRgb: toRgb(colorAccentBorder),
+    colorAccentBackground,
+    colorAccentBackgroundRgb: toRgb(colorAccentBackground),
     colorPrimaryShade,
     colorPrimaryShadeRgb: toRgb(colorPrimaryShade),
-    colorPrimaryLightShade,
-    colorPrimaryLightShadeRgb: toRgb(colorPrimaryLightShade),
-    colorPrimaryLighterShade,
-    colorPrimaryLighterShadeRgb: toRgb(colorPrimaryLighterShade),
+    colorPrimaryBorder,
+    colorPrimaryBorderRgb: toRgb(colorPrimaryBorder),
+    colorPrimaryBackground,
+    colorPrimaryBackgroundRgb: toRgb(colorPrimaryBackground),
     colorSuccessShade,
     colorSuccessShadeRgb: toRgb(colorSuccessShade),
-    colorSuccessLightShade,
-    colorSuccessLightShadeRgb: toRgb(colorSuccessLightShade),
-    colorSuccessLighterShade,
-    colorSuccessLighterShadeRgb: toRgb(colorSuccessLighterShade),
+    colorSuccessBorder,
+    colorSuccessBorderRgb: toRgb(colorSuccessBorder),
+    colorSuccessBackground,
+    colorSuccessBackgroundRgb: toRgb(colorSuccessBackground),
     colorWarningShade,
     colorWarningShadeRgb: toRgb(colorWarningShade),
-    colorWarningLightShade,
-    colorWarningLightShadeRgb: toRgb(colorWarningLightShade),
-    colorWarningLighterShade,
-    colorWarningLighterShadeRgb: toRgb(colorWarningLighterShade),
+    colorWarningBorder,
+    colorWarningBorderRgb: toRgb(colorWarningBorder),
+    colorWarningBackground,
+    colorWarningBackgroundRgb: toRgb(colorWarningBackground),
     colorDangerShade,
     colorDangerShadeRgb: toRgb(colorDangerShade),
-    colorDangerLightShade,
-    colorDangerLightShadeRgb: toRgb(colorDangerLightShade),
-    colorDangerLighterShade,
-    colorDangerLighterShadeRgb: toRgb(colorDangerLighterShade),
+    colorDangerBorder,
+    colorDangerBorderRgb: toRgb(colorDangerBorder),
+    colorDangerBackground,
+    colorDangerBackgroundRgb: toRgb(colorDangerBackground),
     // Special colors
-    colorPrimaryHighlightShade,
-    colorPrimaryHighlightShadeRgb: toRgb(colorPrimaryHighlightShade),
     colorSubduedShade,
     colorSubduedShadeRgb: toRgb(colorSubduedShade),
     // Neutral colors
@@ -181,8 +178,6 @@ export const LIGHT_THEME = {
 };
 export const DARK_THEME = {
     // Special colors
-    colorPrimaryHighlightShade,
-    colorPrimaryHighlightShadeRgb: toRgb(colorPrimaryHighlightShade),
     colorSubduedShade,
     colorSubduedShadeRgb: toRgb(colorSubduedShade),
     // Neutral colors (inverted)
@@ -218,37 +213,35 @@ export const toStyle = (theme) => {
         // Semantic colors
         "--vui-color-accent-shade": theme.colorAccentShade,
         "--vui-color-accent-shade-rgb": theme.colorAccentShadeRgb,
-        "--vui-color-accent-light-shade": theme.colorAccentLightShade,
-        "--vui-color-accent-light-shade-rgb": theme.colorAccentLightShadeRgb,
-        "--vui-color-accent-lighter-shade": theme.colorAccentLighterShade,
-        "--vui-color-accent-lighter-shade-rgb": theme.colorAccentLighterShadeRgb,
+        "--vui-color-accent-border": theme.colorAccentBorder,
+        "--vui-color-accent-border-rgb": theme.colorAccentBorderRgb,
+        "--vui-color-accent-background": theme.colorAccentBackground,
+        "--vui-color-accent-background-rgb": theme.colorAccentBackgroundRgb,
         "--vui-color-primary-shade": theme.colorPrimaryShade,
         "--vui-color-primary-shade-rgb": theme.colorPrimaryShadeRgb,
-        "--vui-color-primary-light-shade": theme.colorPrimaryLightShade,
-        "--vui-color-primary-light-shade-rgb": theme.colorPrimaryLightShadeRgb,
-        "--vui-color-primary-lighter-shade": theme.colorPrimaryLighterShade,
-        "--vui-color-primary-lighter-shade-rgb": theme.colorPrimaryLighterShadeRgb,
+        "--vui-color-primary-border": theme.colorPrimaryBorder,
+        "--vui-color-primary-border-rgb": theme.colorPrimaryBorderRgb,
+        "--vui-color-primary-background": theme.colorPrimaryBackground,
+        "--vui-color-primary-background-rgb": theme.colorPrimaryBackgroundRgb,
         "--vui-color-success-shade": theme.colorSuccessShade,
         "--vui-color-success-shade-rgb": theme.colorSuccessShadeRgb,
-        "--vui-color-success-light-shade": theme.colorSuccessLightShade,
-        "--vui-color-success-light-shade-rgb": theme.colorSuccessLightShadeRgb,
-        "--vui-color-success-lighter-shade": theme.colorSuccessLighterShade,
-        "--vui-color-success-lighter-shade-rgb": theme.colorSuccessLighterShadeRgb,
+        "--vui-color-success-border": theme.colorSuccessBorder,
+        "--vui-color-success-border-rgb": theme.colorSuccessBorderRgb,
+        "--vui-color-success-background": theme.colorSuccessBackground,
+        "--vui-color-success-background-rgb": theme.colorSuccessBackgroundRgb,
         "--vui-color-warning-shade": theme.colorWarningShade,
         "--vui-color-warning-shade-rgb": theme.colorWarningShadeRgb,
-        "--vui-color-warning-light-shade": theme.colorWarningLightShade,
-        "--vui-color-warning-light-shade-rgb": theme.colorWarningLightShadeRgb,
-        "--vui-color-warning-lighter-shade": theme.colorWarningLighterShade,
-        "--vui-color-warning-lighter-shade-rgb": theme.colorWarningLighterShadeRgb,
+        "--vui-color-warning-border": theme.colorWarningBorder,
+        "--vui-color-warning-border-rgb": theme.colorWarningBorderRgb,
+        "--vui-color-warning-background": theme.colorWarningBackground,
+        "--vui-color-warning-background-rgb": theme.colorWarningBackgroundRgb,
         "--vui-color-danger-shade": theme.colorDangerShade,
         "--vui-color-danger-shade-rgb": theme.colorDangerShadeRgb,
-        "--vui-color-danger-light-shade": theme.colorDangerLightShade,
-        "--vui-color-danger-light-shade-rgb": theme.colorDangerLightShadeRgb,
-        "--vui-color-danger-lighter-shade": theme.colorDangerLighterShade,
-        "--vui-color-danger-lighter-shade-rgb": theme.colorDangerLighterShadeRgb,
+        "--vui-color-danger-border": theme.colorDangerBorder,
+        "--vui-color-danger-border-rgb": theme.colorDangerBorderRgb,
+        "--vui-color-danger-background": theme.colorDangerBackground,
+        "--vui-color-danger-background-rgb": theme.colorDangerBackgroundRgb,
         // Special colors
-        "--vui-color-primary-highlight-shade": theme.colorPrimaryHighlightShade,
-        "--vui-color-primary-highlight-shade-rgb": theme.colorPrimaryHighlightShadeRgb,
         "--vui-color-subdued-shade": theme.colorSubduedShade,
         "--vui-color-subdued-shade-rgb": theme.colorSubduedShadeRgb,
         // Neutral colors
@@ -274,6 +267,12 @@ export const toStyle = (theme) => {
         "--vui-color-border-medium-rgb": theme.colorBorderMediumRgb,
         "--vui-color-border-light": theme.colorBorderLight,
         "--vui-color-border-light-rgb": theme.colorBorderLightRgb,
+        // Semantic colors mapped to categorical.
+        "--vui-color-accent-text": theme.colorAccentShade,
+        "--vui-color-primary-text": theme.colorPrimaryShade,
+        "--vui-color-success-text": theme.colorSuccessShade,
+        "--vui-color-warning-text": theme.colorWarningShade,
+        "--vui-color-danger-text": theme.colorDangerShade,
         // Categorical colors
         "--vui-color-indigo-background": theme.colorIndigoBackground,
         "--vui-color-indigo-text": theme.colorIndigoText,

package/lib/components/form/superCheckboxGroup/_index.scss

@@ -16,7 +16,7 @@
   &:hover {
     text-decoration: underline;
     text-decoration-color: var(--vui-color-primary-shade);
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
 
     .vuiSuperCheckbox__text {
       color: var(--vui-color-primary-shade) !important;

package/lib/components/form/superRadioGroup/_index.scss

@@ -16,7 +16,7 @@
   &:hover {
     text-decoration: underline;
     text-decoration-color: var(--vui-color-primary-shade);
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
 
     .vuiSuperRadioButton__text {
       color: var(--vui-color-primary-shade) !important;

package/lib/components/icon/_index.scss

@@ -14,27 +14,27 @@ $color: (
   accent: (
     "icon": var(--vui-color-accent-shade),
     "fill": var(--vui-color-accent-shade),
-    "token": var(--vui-color-accent-lighter-shade)
+    "token": var(--vui-color-accent-background)
   ),
   primary: (
     "icon": var(--vui-color-primary-shade),
     "fill": var(--vui-color-primary-shade),
-    "token": var(--vui-color-primary-lighter-shade)
+    "token": var(--vui-color-primary-background)
   ),
   success: (
     "icon": var(--vui-color-success-shade),
     "fill": var(--vui-color-success-shade),
-    "token": var(--vui-color-success-lighter-shade)
+    "token": var(--vui-color-success-background)
   ),
   warning: (
     "icon": var(--vui-color-warning-shade),
     "fill": var(--vui-color-warning-shade),
-    "token": var(--vui-color-warning-lighter-shade)
+    "token": var(--vui-color-warning-background)
   ),
   danger: (
     "icon": var(--vui-color-danger-shade),
     "fill": var(--vui-color-danger-shade),
-    "token": var(--vui-color-danger-lighter-shade)
+    "token": var(--vui-color-danger-background)
   ),
   subdued: (
     "icon": var(--vui-color-subdued-shade),
@@ -65,11 +65,11 @@ $colors: (
 );
 
 $tokenColors: (
-  accent: var(--vui-color-accent-lighter-shade),
-  primary: var(--vui-color-primary-lighter-shade),
-  success: var(--vui-color-success-lighter-shade),
-  warning: var(--vui-color-warning-lighter-shade),
-  danger: var(--vui-color-danger-lighter-shade),
+  accent: var(--vui-color-accent-background),
+  primary: var(--vui-color-primary-background),
+  success: var(--vui-color-success-background),
+  warning: var(--vui-color-warning-background),
+  danger: var(--vui-color-danger-background),
   subdued: var(--vui-color-medium-shade),
   neutral: var(--vui-color-dark-shade),
   empty: #ffffff

package/lib/components/image/_index.scss

@@ -32,7 +32,7 @@
   border-radius: $sizeXxs;
 
   &--error {
-    background-color: var(--vui-color-danger-lighter-shade);
+    background-color: var(--vui-color-danger-background);
 
     p {
       color: var(--vui-color-danger-shade);

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 import { VuiAccordion } from "./accordion/Accordion";
-import { VuiAccountButton } from "./accountButton/AccountButton";
+import { VuiAccountButton, AccountButtonHandle } from "./accountButton/AccountButton";
 import { VuiAppContent } from "./app/AppContent";
 import { VuiAppHeader } from "./app/AppHeader";
 import { VuiAppLayout } from "./app/AppLayout";
@@ -116,5 +116,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
 export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/list/_index.scss

@@ -24,6 +24,6 @@
 }
 
 .vuiListNumber-isComplete {
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
   color: var(--vui-color-accent-shade);
 }

package/lib/components/menu/_index.scss

@@ -31,17 +31,17 @@
 $color: (
   neutral: (
     "color": var(--vui-color-text),
-    "background-color": var(--vui-color-primary-lighter-shade),
+    "background-color": var(--vui-color-primary-background),
     "hover-color": var(--vui-color-primary-shade)
   ),
   primary: (
     "color": var(--vui-color-primary-shade),
-    "background-color": var(--vui-color-primary-lighter-shade),
+    "background-color": var(--vui-color-primary-background),
     "hover-color": var(--vui-color-primary-shade)
   ),
   danger: (
     "color": var(--vui-color-danger-shade),
-    "background-color": var(--vui-color-danger-lighter-shade),
+    "background-color": var(--vui-color-danger-background),
     "hover-color": var(--vui-color-danger-shade)
   )
 );

package/lib/components/optionsList/_index.scss

@@ -47,32 +47,32 @@ $color: (
   accent: (
     "color": var(--vui-color-accent-shade),
     "hover-color": var(--vui-color-accent-shade),
-    "selected-color": var(--vui-color-accent-lighter-shade)
+    "selected-color": var(--vui-color-accent-background)
   ),
   primary: (
     "color": var(--vui-color-primary-shade),
     "hover-color": var(--vui-color-primary-shade),
-    "selected-color": var(--vui-color-primary-lighter-shade)
+    "selected-color": var(--vui-color-primary-background)
   ),
   success: (
     "color": var(--vui-color-success-shade),
     "hover-color": var(--vui-color-success-shade),
-    "selected-color": var(--vui-color-success-lighter-shade)
+    "selected-color": var(--vui-color-success-background)
   ),
   danger: (
     "color": var(--vui-color-danger-shade),
     "hover-color": var(--vui-color-danger-shade),
-    "selected-color": var(--vui-color-danger-lighter-shade)
+    "selected-color": var(--vui-color-danger-background)
   ),
   warning: (
     "color": var(--vui-color-warning-shade),
     "hover-color": var(--vui-color-warning-shade),
-    "selected-color": var(--vui-color-warning-lighter-shade)
+    "selected-color": var(--vui-color-warning-background)
   ),
   neutral: (
     "color": var(--vui-color-text),
     "hover-color": var(--vui-color-primary-shade),
-    "selected-color": var(--vui-color-primary-lighter-shade)
+    "selected-color": var(--vui-color-primary-background)
   )
 );
 

package/lib/components/patch/VuiPatch.d.ts

@@ -1,4 +1,4 @@
-export declare const PATCH_COLOR: readonly ["red", "orange", "amber", "lime", "emerald", "teal", "sky", "indigo", "purple", "fuchsia", "pink", "slate"];
+export declare const PATCH_COLOR: readonly ["primary", "accent", "success", "warning", "danger", "red", "orange", "amber", "lime", "emerald", "teal", "sky", "indigo", "purple", "fuchsia", "pink", "slate"];
 export type PatchColor = (typeof PATCH_COLOR)[number];
 type Props = {
     color: PatchColor;

package/lib/components/patch/VuiPatch.js

@@ -12,6 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 export const PATCH_COLOR = [
+    "primary",
+    "accent",
+    "success",
+    "warning",
+    "danger",
     "red",
     "orange",
     "amber",

package/lib/components/patch/_index.scss

@@ -6,7 +6,8 @@
   justify-content: center;
 }
 
-$colors: "indigo", "emerald", "amber", "pink", "sky", "orange", "slate", "teal", "lime", "purple", "fuchsia", "red";
+$colors: "primary", "accent", "success", "warning", "danger", "indigo", "emerald", "amber", "pink", "sky", "orange",
+  "slate", "teal", "lime", "purple", "fuchsia", "red";
 
 @each $color in $colors {
   .vuiPatch--#{$color} {

package/lib/components/progressBar/_index.scss

@@ -35,19 +35,19 @@
 // Color
 $color: (
   accent: (
-    "background-color": linear-gradient(to top, var(--vui-color-accent-shade), var(--vui-color-accent-light-shade))
+    "background-color": linear-gradient(to top, var(--vui-color-accent-shade), var(--vui-color-accent-border))
   ),
   primary: (
-    "background-color": linear-gradient(to top, var(--vui-color-primary-shade), var(--vui-color-primary-light-shade))
+    "background-color": linear-gradient(to top, var(--vui-color-primary-shade), var(--vui-color-primary-border))
   ),
   success: (
-    "background-color": linear-gradient(to top, var(--vui-color-success-shade), var(--vui-color-success-light-shade))
+    "background-color": linear-gradient(to top, var(--vui-color-success-shade), var(--vui-color-success-border))
   ),
   warning: (
-    "background-color": linear-gradient(to top, var(--vui-color-warning-shade), var(--vui-color-warning-light-shade))
+    "background-color": linear-gradient(to top, var(--vui-color-warning-shade), var(--vui-color-warning-border))
   ),
   danger: (
-    "background-color": linear-gradient(to top, var(--vui-color-danger-shade), var(--vui-color-danger-light-shade))
+    "background-color": linear-gradient(to top, var(--vui-color-danger-shade), var(--vui-color-danger-border))
   ),
   neutral: (
     "background-color": linear-gradient(to top, var(--vui-color-dark-shade), var(--vui-color-medium-shade))