@vectara/vectara-ui 19.6.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/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/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))

package/lib/components/prompt/_index.scss

@@ -29,7 +29,7 @@
 
 .vuiPrompt--interactive {
   &:hover {
-    background-color: var(--vui-color-accent-lighter-shade);
+    background-color: var(--vui-color-accent-background);
     color: var(--vui-color-accent-shade);
   }
 }
@@ -38,7 +38,7 @@
 $color: (
   danger: (
     "color": var(--vui-color-danger-shade),
-    "background-color": var(--vui-color-danger-lighter-shade)
+    "background-color": var(--vui-color-danger-background)
   ),
   neutral: (
     "color": var(--vui-color-dark-shade),

package/lib/components/searchInput/_index.scss

@@ -165,7 +165,7 @@
   &:hover {
     text-decoration: underline;
     color: var(--vui-color-primary-shade);
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
   }
 
   &:focus-visible {

package/lib/components/skeleton/_index.scss

@@ -39,19 +39,19 @@
 // Color variants
 $color: (
   accent: (
-    "backgroundColor": var(--vui-color-accent-lighter-shade)
+    "backgroundColor": var(--vui-color-accent-background)
   ),
   primary: (
-    "backgroundColor": var(--vui-color-primary-lighter-shade)
+    "backgroundColor": var(--vui-color-primary-background)
   ),
   success: (
-    "backgroundColor": var(--vui-color-success-lighter-shade)
+    "backgroundColor": var(--vui-color-success-background)
   ),
   danger: (
-    "backgroundColor": var(--vui-color-danger-lighter-shade)
+    "backgroundColor": var(--vui-color-danger-background)
   ),
   warning: (
-    "backgroundColor": var(--vui-color-warning-lighter-shade)
+    "backgroundColor": var(--vui-color-warning-background)
   ),
   neutral: (
     "backgroundColor": var(--vui-color-medium-shade)

package/lib/components/steps/_index.scss

@@ -115,7 +115,7 @@ $stepSizeM: 36px;
   }
 
   &--complete {
-    background-color: var(--vui-color-success-lighter-shade);
+    background-color: var(--vui-color-success-background);
   }
 
   &--current {
@@ -134,11 +134,11 @@ $stepSizeM: 36px;
   }
 
   &--warning {
-    background-color: var(--vui-color-warning-lighter-shade);
+    background-color: var(--vui-color-warning-background);
   }
 
   &--danger {
-    background-color: var(--vui-color-danger-lighter-shade);
+    background-color: var(--vui-color-danger-background);
   }
 }
 

package/lib/components/summary/_index.scss

@@ -18,7 +18,7 @@
 
   &:hover {
     color: var(--vui-color-primary-shade);
-    background-color: var(--vui-color-primary-lighter-shade);
+    background-color: var(--vui-color-primary-background);
     text-decoration: underline;
   }
 }

package/lib/components/tabs/_open.scss

@@ -25,7 +25,7 @@
     &:hover {
       .vuiTab__inner {
         color: var(--vui-color-primary-shade);
-        background-color: var(--vui-color-primary-lighter-shade);
+        background-color: var(--vui-color-primary-background);
 
         .vuiIcon__inner {
           color: var(--vui-color-primary-shade) !important;

package/lib/styles/index.css

@@ -231,7 +231,7 @@ fieldset {
 }
 .vuiAccordionHeader: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;
 }
@@ -879,7 +879,7 @@ fieldset {
 }
 
 .vuiButtonSecondary--accent {
-  border: 1px solid rgba(var(--vui-color-accent-shade-rgb), 0.5);
+  border: 1px solid var(--vui-color-accent-border);
   color: var(--vui-color-accent-shade);
 }
 .vuiButtonSecondary--accent.vuiButtonSecondary-isSelected {
@@ -887,7 +887,7 @@ fieldset {
 }
 
 .vuiButtonSecondary--primary {
-  border: 1px solid rgba(var(--vui-color-primary-shade-rgb), 0.5);
+  border: 1px solid var(--vui-color-primary-border);
   color: var(--vui-color-primary-shade);
 }
 .vuiButtonSecondary--primary.vuiButtonSecondary-isSelected {
@@ -895,7 +895,7 @@ fieldset {
 }
 
 .vuiButtonSecondary--success {
-  border: 1px solid rgba(var(--vui-color-success-shade-rgb), 0.5);
+  border: 1px solid var(--vui-color-success-border);
   color: var(--vui-color-success-shade);
 }
 .vuiButtonSecondary--success.vuiButtonSecondary-isSelected {
@@ -903,7 +903,7 @@ fieldset {
 }
 
 .vuiButtonSecondary--danger {
-  border: 1px solid rgba(var(--vui-color-danger-shade-rgb), 0.5);
+  border: 1px solid var(--vui-color-danger-border);
   color: var(--vui-color-danger-shade);
 }
 .vuiButtonSecondary--danger.vuiButtonSecondary-isSelected {
@@ -911,7 +911,7 @@ fieldset {
 }
 
 .vuiButtonSecondary--warning {
-  border: 1px solid rgba(var(--vui-color-warning-shade-rgb), 0.5);
+  border: 1px solid var(--vui-color-warning-border);
   color: var(--vui-color-warning-shade);
 }
 .vuiButtonSecondary--warning.vuiButtonSecondary-isSelected {
@@ -1120,32 +1120,32 @@ fieldset {
 
 .vuiCallout--accent {
   border-radius: 4px;
-  border: 1px solid var(--vui-color-accent-light-shade);
-  background-color: var(--vui-color-accent-lighter-shade);
+  border: 1px solid var(--vui-color-accent-border);
+  background-color: var(--vui-color-accent-background);
 }
 
 .vuiCallout--primary {
   border-radius: 4px;
-  border: 1px solid var(--vui-color-primary-light-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  border: 1px solid var(--vui-color-primary-border);
+  background-color: var(--vui-color-primary-background);
 }
 
 .vuiCallout--success {
   border-radius: 4px;
-  border: 1px solid var(--vui-color-success-light-shade);
-  background-color: var(--vui-color-success-lighter-shade);
+  border: 1px solid var(--vui-color-success-border);
+  background-color: var(--vui-color-success-background);
 }
 
 .vuiCallout--warning {
   border-radius: 4px;
-  border: 1px solid var(--vui-color-warning-light-shade);
-  background-color: var(--vui-color-warning-lighter-shade);
+  border: 1px solid var(--vui-color-warning-border);
+  background-color: var(--vui-color-warning-background);
 }
 
 .vuiCallout--danger {
   border-radius: 4px;
-  border: 1px solid var(--vui-color-danger-light-shade);
-  background-color: var(--vui-color-danger-lighter-shade);
+  border: 1px solid var(--vui-color-danger-border);
+  background-color: var(--vui-color-danger-background);
 }
 
 .vuiCallout--neutral {
@@ -1313,7 +1313,6 @@ fieldset {
   transition: box-shadow 0.2s, border-color 0.2s;
 }
 .vuiSimpleCard--interactive: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;
 }
 
@@ -1411,7 +1410,7 @@ fieldset {
   padding: 8px 12px;
   font-size: 14px;
   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 0.2s;
@@ -1481,7 +1480,7 @@ fieldset {
   padding: 8px 12px;
   font-size: 14px;
   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;
   z-index: 2;
 }
@@ -1585,7 +1584,7 @@ fieldset {
   color: var(--vui-color-primary-shade);
 }
 .vuiChip-isActive .vuiChip__append {
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 
 .vuiCodeContainer {
@@ -1663,7 +1662,7 @@ fieldset {
 
 .vuiComplexConfigurationButton {
   width: 100%;
-  border: 1px solid var(--vui-color-primary-highlight-shade);
+  border: 1px solid var(--vui-color-border-light);
   padding: 12px 16px;
   border-radius: 8px;
   transition: box-shadow 0.2s, border-color 0.2s;
@@ -3087,7 +3086,7 @@ h2.react-datepicker__current-month {
 .vuiSuperCheckbox: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:hover .vuiSuperCheckbox__text {
   color: var(--vui-color-primary-shade) !important;
@@ -3115,7 +3114,7 @@ h2.react-datepicker__current-month {
 .vuiSuperRadioButton: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:hover .vuiSuperRadioButton__text {
   color: var(--vui-color-primary-shade) !important;
@@ -3834,31 +3833,31 @@ h2.react-datepicker__current-month {
   padding: 2px;
 }
 .vuiIcon--token.vuiIcon--accent {
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
 }
 .vuiIcon--token.vuiIcon--accent .vuiIcon__inner {
   color: var(--vui-color-accent-shade);
 }
 .vuiIcon--token.vuiIcon--primary {
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiIcon--token.vuiIcon--primary .vuiIcon__inner {
   color: var(--vui-color-primary-shade);
 }
 .vuiIcon--token.vuiIcon--success {
-  background-color: var(--vui-color-success-lighter-shade);
+  background-color: var(--vui-color-success-background);
 }
 .vuiIcon--token.vuiIcon--success .vuiIcon__inner {
   color: var(--vui-color-success-shade);
 }
 .vuiIcon--token.vuiIcon--warning {
-  background-color: var(--vui-color-warning-lighter-shade);
+  background-color: var(--vui-color-warning-background);
 }
 .vuiIcon--token.vuiIcon--warning .vuiIcon__inner {
   color: var(--vui-color-warning-shade);
 }
 .vuiIcon--token.vuiIcon--danger {
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 .vuiIcon--token.vuiIcon--danger .vuiIcon__inner {
   color: var(--vui-color-danger-shade);
@@ -3915,7 +3914,7 @@ h2.react-datepicker__current-month {
   border-radius: 4px;
 }
 .vuiImage__placeholder--error {
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 .vuiImage__placeholder--error p {
   color: var(--vui-color-danger-shade);
@@ -4184,7 +4183,7 @@ h2.react-datepicker__current-month {
 }
 
 .vuiListNumber-isComplete {
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
   color: var(--vui-color-accent-shade);
 }
 
@@ -4218,7 +4217,7 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-text);
 }
 .vuiMenuItem--neutral.vuiMenuItem--clickable:hover {
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiMenuItem--neutral.vuiMenuItem--clickable:hover .vuiMenuItem__title,
 .vuiMenuItem--neutral.vuiMenuItem--clickable:hover .vuiMenuItem__text {
@@ -4229,7 +4228,7 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-primary-shade);
 }
 .vuiMenuItem--primary.vuiMenuItem--clickable:hover {
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiMenuItem--primary.vuiMenuItem--clickable:hover .vuiMenuItem__title,
 .vuiMenuItem--primary.vuiMenuItem--clickable:hover .vuiMenuItem__text {
@@ -4240,7 +4239,7 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-danger-shade);
 }
 .vuiMenuItem--danger.vuiMenuItem--clickable:hover {
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 .vuiMenuItem--danger.vuiMenuItem--clickable:hover .vuiMenuItem__title,
 .vuiMenuItem--danger.vuiMenuItem--clickable:hover .vuiMenuItem__text {
@@ -4515,7 +4514,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--accent:focus-visible, .vuiOptionsListItem--accent:hover {
   color: var(--vui-color-accent-shade);
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
 }
 .vuiOptionsListItem--accent:focus-visible .vuiIcon__inner, .vuiOptionsListItem--accent:hover .vuiIcon__inner {
   color: var(--vui-color-accent-shade);
@@ -4526,7 +4525,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--primary:focus-visible, .vuiOptionsListItem--primary:hover {
   color: var(--vui-color-primary-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiOptionsListItem--primary:focus-visible .vuiIcon__inner, .vuiOptionsListItem--primary:hover .vuiIcon__inner {
   color: var(--vui-color-primary-shade);
@@ -4537,7 +4536,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--success:focus-visible, .vuiOptionsListItem--success:hover {
   color: var(--vui-color-success-shade);
-  background-color: var(--vui-color-success-lighter-shade);
+  background-color: var(--vui-color-success-background);
 }
 .vuiOptionsListItem--success:focus-visible .vuiIcon__inner, .vuiOptionsListItem--success:hover .vuiIcon__inner {
   color: var(--vui-color-success-shade);
@@ -4548,7 +4547,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--danger:focus-visible, .vuiOptionsListItem--danger:hover {
   color: var(--vui-color-danger-shade);
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 .vuiOptionsListItem--danger:focus-visible .vuiIcon__inner, .vuiOptionsListItem--danger:hover .vuiIcon__inner {
   color: var(--vui-color-danger-shade);
@@ -4559,7 +4558,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--warning:focus-visible, .vuiOptionsListItem--warning:hover {
   color: var(--vui-color-warning-shade);
-  background-color: var(--vui-color-warning-lighter-shade);
+  background-color: var(--vui-color-warning-background);
 }
 .vuiOptionsListItem--warning:focus-visible .vuiIcon__inner, .vuiOptionsListItem--warning:hover .vuiIcon__inner {
   color: var(--vui-color-warning-shade);
@@ -4570,7 +4569,7 @@ h2.react-datepicker__current-month {
 }
 .vuiOptionsListItem--neutral:focus-visible, .vuiOptionsListItem--neutral:hover {
   color: var(--vui-color-primary-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiOptionsListItem--neutral:focus-visible .vuiIcon__inner, .vuiOptionsListItem--neutral:hover .vuiIcon__inner {
   color: var(--vui-color-primary-shade);
@@ -4662,6 +4661,31 @@ h2.react-datepicker__current-month {
   justify-content: center;
 }
 
+.vuiPatch--primary {
+  background-color: var(--vui-color-primary-background);
+  color: var(--vui-color-primary-text);
+}
+
+.vuiPatch--accent {
+  background-color: var(--vui-color-accent-background);
+  color: var(--vui-color-accent-text);
+}
+
+.vuiPatch--success {
+  background-color: var(--vui-color-success-background);
+  color: var(--vui-color-success-text);
+}
+
+.vuiPatch--warning {
+  background-color: var(--vui-color-warning-background);
+  color: var(--vui-color-warning-text);
+}
+
+.vuiPatch--danger {
+  background-color: var(--vui-color-danger-background);
+  color: var(--vui-color-danger-text);
+}
+
 .vuiPatch--indigo {
   background-color: var(--vui-color-indigo-background);
   color: var(--vui-color-indigo-text);
@@ -4825,23 +4849,23 @@ h2.react-datepicker__current-month {
 }
 
 .vuiProgressBar--accent .vuiProgressBar__bar {
-  background-image: linear-gradient(to top, var(--vui-color-accent-shade), var(--vui-color-accent-light-shade));
+  background-image: linear-gradient(to top, var(--vui-color-accent-shade), var(--vui-color-accent-border));
 }
 
 .vuiProgressBar--primary .vuiProgressBar__bar {
-  background-image: linear-gradient(to top, var(--vui-color-primary-shade), var(--vui-color-primary-light-shade));
+  background-image: linear-gradient(to top, var(--vui-color-primary-shade), var(--vui-color-primary-border));
 }
 
 .vuiProgressBar--success .vuiProgressBar__bar {
-  background-image: linear-gradient(to top, var(--vui-color-success-shade), var(--vui-color-success-light-shade));
+  background-image: linear-gradient(to top, var(--vui-color-success-shade), var(--vui-color-success-border));
 }
 
 .vuiProgressBar--warning .vuiProgressBar__bar {
-  background-image: linear-gradient(to top, var(--vui-color-warning-shade), var(--vui-color-warning-light-shade));
+  background-image: linear-gradient(to top, var(--vui-color-warning-shade), var(--vui-color-warning-border));
 }
 
 .vuiProgressBar--danger .vuiProgressBar__bar {
-  background-image: linear-gradient(to top, var(--vui-color-danger-shade), var(--vui-color-danger-light-shade));
+  background-image: linear-gradient(to top, var(--vui-color-danger-shade), var(--vui-color-danger-border));
 }
 
 .vuiProgressBar--neutral .vuiProgressBar__bar {
@@ -4874,13 +4898,13 @@ h2.react-datepicker__current-month {
 }
 
 .vuiPrompt--interactive:hover {
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
   color: var(--vui-color-accent-shade);
 }
 
 .vuiPrompt--danger {
   color: var(--vui-color-danger-shade);
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 
 .vuiPrompt--neutral {
@@ -5112,7 +5136,7 @@ h2.react-datepicker__current-month {
 .vuiSearchInputSuggestions__suggestion:focus-visible, .vuiSearchInputSuggestions__suggestion:hover {
   text-decoration: underline;
   color: var(--vui-color-primary-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiSearchInputSuggestions__suggestion:focus-visible {
   outline: none;
@@ -5459,23 +5483,23 @@ h2.react-datepicker__current-month {
 }
 
 .vuiSkeleton__row.vuiSkeleton--accent {
-  background-color: var(--vui-color-accent-lighter-shade);
+  background-color: var(--vui-color-accent-background);
 }
 
 .vuiSkeleton__row.vuiSkeleton--primary {
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 
 .vuiSkeleton__row.vuiSkeleton--success {
-  background-color: var(--vui-color-success-lighter-shade);
+  background-color: var(--vui-color-success-background);
 }
 
 .vuiSkeleton__row.vuiSkeleton--danger {
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 
 .vuiSkeleton__row.vuiSkeleton--warning {
-  background-color: var(--vui-color-warning-lighter-shade);
+  background-color: var(--vui-color-warning-background);
 }
 
 .vuiSkeleton__row.vuiSkeleton--neutral {
@@ -5598,7 +5622,7 @@ h2.react-datepicker__current-month {
   height: calc(var(--step-size) * 0.85);
 }
 .vuiStep__number--complete {
-  background-color: var(--vui-color-success-lighter-shade);
+  background-color: var(--vui-color-success-background);
 }
 .vuiStep__number--current {
   color: var(--vui-color-primary-shade);
@@ -5614,10 +5638,10 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-dark-shade);
 }
 .vuiStep__number--warning {
-  background-color: var(--vui-color-warning-lighter-shade);
+  background-color: var(--vui-color-warning-background);
 }
 .vuiStep__number--danger {
-  background-color: var(--vui-color-danger-lighter-shade);
+  background-color: var(--vui-color-danger-background);
 }
 
 .vuiStep__numberText {
@@ -5672,7 +5696,7 @@ h2.react-datepicker__current-month {
 }
 .vuiSummaryCitation:hover {
   color: var(--vui-color-primary-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
   text-decoration: underline;
 }
 
@@ -5959,7 +5983,7 @@ h2.react-datepicker__current-month {
 }
 .vuiTabs--open .vuiTab:hover .vuiTab__inner {
   color: var(--vui-color-primary-shade);
-  background-color: var(--vui-color-primary-lighter-shade);
+  background-color: var(--vui-color-primary-background);
 }
 .vuiTabs--open .vuiTab:hover .vuiTab__inner .vuiIcon__inner {
   color: var(--vui-color-primary-shade) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "19.6.0",
+  "version": "20.0.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/colorPalette/NeutralColors.tsx

@@ -14,10 +14,7 @@ const neutralSwatches = [
 ];
 
 // Special-purpose accents that sit outside the semantic families.
-const specialSwatches = [
-  { name: "Primary highlight", cssVariable: "--vui-color-primary-highlight-shade", value: "#d9e2ff" },
-  { name: "Subdued", cssVariable: "--vui-color-subdued-shade", value: "#6d7686" }
-];
+const specialSwatches = [{ name: "Subdued", cssVariable: "--vui-color-subdued-shade", value: "#6d7686" }];
 
 export const NeutralColors = () => {
   return (

package/src/docs/pages/colorPalette/SemanticColors.tsx

@@ -9,40 +9,40 @@ const families = [
     name: "Accent",
     swatches: [
       { name: "Shade", cssVariable: "--vui-color-accent-shade", value: "#5f30c3" },
-      { name: "Light shade", cssVariable: "--vui-color-accent-light-shade", value: "50% opacity" },
-      { name: "Lighter shade", cssVariable: "--vui-color-accent-lighter-shade", value: "#eee7ff" }
+      { name: "Border", cssVariable: "--vui-color-accent-border", value: "50% opacity" },
+      { name: "Background", cssVariable: "--vui-color-accent-background", value: "#eee7ff" }
     ]
   },
   {
     name: "Primary",
     swatches: [
       { name: "Shade", cssVariable: "--vui-color-primary-shade", value: "#045dda" },
-      { name: "Light shade", cssVariable: "--vui-color-primary-light-shade", value: "50% opacity" },
-      { name: "Lighter shade", cssVariable: "--vui-color-primary-lighter-shade", value: "#f1f7ff" }
+      { name: "Border", cssVariable: "--vui-color-primary-border", value: "50% opacity" },
+      { name: "Background", cssVariable: "--vui-color-primary-background", value: "#f1f7ff" }
     ]
   },
   {
     name: "Success",
     swatches: [
       { name: "Shade", cssVariable: "--vui-color-success-shade", value: "#249719" },
-      { name: "Light shade", cssVariable: "--vui-color-success-light-shade", value: "50% opacity" },
-      { name: "Lighter shade", cssVariable: "--vui-color-success-lighter-shade", value: "#e2f2e0" }
+      { name: "Border", cssVariable: "--vui-color-success-border", value: "50% opacity" },
+      { name: "Background", cssVariable: "--vui-color-success-background", value: "#e2f2e0" }
     ]
   },
   {
     name: "Warning",
     swatches: [
       { name: "Shade", cssVariable: "--vui-color-warning-shade", value: "#a86f1b" },
-      { name: "Light shade", cssVariable: "--vui-color-warning-light-shade", value: "50% opacity" },
-      { name: "Lighter shade", cssVariable: "--vui-color-warning-lighter-shade", value: "#ffeed4" }
+      { name: "Border", cssVariable: "--vui-color-warning-border", value: "50% opacity" },
+      { name: "Background", cssVariable: "--vui-color-warning-background", value: "#ffeed4" }
     ]
   },
   {
     name: "Danger",
     swatches: [
       { name: "Shade", cssVariable: "--vui-color-danger-shade", value: "#d22d2d" },
-      { name: "Light shade", cssVariable: "--vui-color-danger-light-shade", value: "50% opacity" },
-      { name: "Lighter shade", cssVariable: "--vui-color-danger-lighter-shade", value: "#fff1f1" }
+      { name: "Border", cssVariable: "--vui-color-danger-border", value: "50% opacity" },
+      { name: "Background", cssVariable: "--vui-color-danger-background", value: "#fff1f1" }
     ]
   }
 ];

package/src/docs/pages/patch/Sizes.tsx

@@ -8,7 +8,7 @@ export const Sizes = () => {
     <VuiFlexContainer spacing="m" wrap>
       {sizes.map((size) => (
         <div>
-          <VuiPatch color="indigo" size={size}>
+          <VuiPatch color="primary" size={size}>
             <VuiIcon>
               <BiCompass />
             </VuiIcon>