@vectara/vectara-ui 19.6.0 → 20.1.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/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/flex/FlexContainer.d.ts

@@ -1,31 +1,10 @@
 import { ReactNode } from "react";
-import { FlexSpacing } from "./types";
-declare const alignItemsToClassNameMap: {
-    readonly baseline: "vuiFlexContainer--alignItemsBaseline";
-    readonly center: "vuiFlexContainer--alignItemsCenter";
-    readonly end: "vuiFlexContainer--alignItemsEnd";
-    readonly start: "vuiFlexContainer--alignItemsStart";
-    readonly stretch: "vuiFlexContainer--alignItemsStretch";
-};
-declare const directionToClassNameMap: {
-    readonly column: "vuiFlexContainer--directionColumn";
-    readonly columnReverse: "vuiFlexContainer--directionColumnReverse";
-    readonly row: "vuiFlexContainer--directionRow";
-    readonly rowReverse: "vuiFlexContainer--directionRowReverse";
-};
-declare const justifyContentToClassNameMap: {
-    readonly center: "vuiFlexContainer--justifyContentCenter";
-    readonly end: "vuiFlexContainer--justifyContentEnd";
-    readonly start: "vuiFlexContainer--justifyContentStart";
-    readonly spaceAround: "vuiFlexContainer--justifyContentSpaceAround";
-    readonly spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween";
-    readonly spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly";
-};
+import { AlignItemsPosition, FlexDirection, FlexSpacing, JustifyContentPosition } from "./types";
 export type Props = {
     children?: ReactNode;
-    alignItems?: keyof typeof alignItemsToClassNameMap;
-    direction?: keyof typeof directionToClassNameMap;
-    justifyContent?: keyof typeof justifyContentToClassNameMap;
+    alignItems?: AlignItemsPosition;
+    direction?: FlexDirection;
+    justifyContent?: JustifyContentPosition;
     spacing?: FlexSpacing;
     wrap?: boolean;
     className?: string;
@@ -33,4 +12,3 @@ export type Props = {
     inline?: boolean;
 };
 export declare const VuiFlexContainer: ({ children, alignItems, direction, justifyContent, spacing, wrap, className, fullWidth, inline, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/flex/types.d.ts

@@ -1,2 +1,8 @@
 export declare const FLEX_SPACING: readonly ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
 export type FlexSpacing = (typeof FLEX_SPACING)[number];
+export declare const ALIGN_ITEMS_POSITION: readonly ["baseline", "center", "end", "start", "stretch"];
+export type AlignItemsPosition = (typeof ALIGN_ITEMS_POSITION)[number];
+export declare const FLEX_DIRECTION: readonly ["column", "columnReverse", "row", "rowReverse"];
+export type FlexDirection = (typeof FLEX_DIRECTION)[number];
+export declare const JUSTIFY_CONTENT_POSITION: readonly ["center", "end", "start", "spaceAround", "spaceBetween", "spaceEvenly"];
+export type JustifyContentPosition = (typeof JUSTIFY_CONTENT_POSITION)[number];

package/lib/components/flex/types.js

@@ -1 +1,11 @@
 export const FLEX_SPACING = ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export const ALIGN_ITEMS_POSITION = ["baseline", "center", "end", "start", "stretch"];
+export const FLEX_DIRECTION = ["column", "columnReverse", "row", "rowReverse"];
+export const JUSTIFY_CONTENT_POSITION = [
+    "center",
+    "end",
+    "start",
+    "spaceAround",
+    "spaceBetween",
+    "spaceEvenly"
+];

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/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/popover/Popover.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Props as VuiTooltipProps } from "../tooltip/Tooltip";
 export type AnchorSide = "left" | "right" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
@@ -12,5 +13,7 @@ export type Props = {
     anchorSide?: AnchorSide;
     anchorOffsetX?: number;
     anchorOffsetY?: number;
+    tooltip?: string;
+    tooltipProps?: Omit<VuiTooltipProps, "children" | "tip">;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, tooltip, tooltipProps, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;