@veritone-ce/design-system 2.1.5 → 2.2.1

package/dist/esm/TablePagination/index.js

@@ -26,11 +26,12 @@ function TablePagination({
         {
           defaultValue: rowsPerPage,
           clearable: false,
-          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) - 1 : 3,
+          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
           options: rowsPerPageOptions.map((option) => ({
             label: option.toLocaleString(),
             value: option
           })),
+          onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
           className: modules_efc4e723["rows-per-page-select"]
         }
       )

package/dist/esm/Tooltip/index.js

@@ -14,14 +14,15 @@ function Tooltip({
   placement = "bottom",
   showArrow = true,
   strategy = "absolute",
+  disabled = false,
   ...props
 }) {
-  const [_isOpen, setIsOpen] = React__default.useState(false);
-  const isOpen = props.isOpen ?? _isOpen;
+  const [_open, setOpen] = React__default.useState(false);
+  const open = !disabled && (props.open ?? _open);
   const arrowRef = React__default.useRef(null);
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
+    open,
+    onOpenChange: setOpen,
     placement,
     strategy,
     middleware: [
@@ -60,7 +61,7 @@ function Tooltip({
         children: props.children
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs(
       "div",
       {
         ref: refs.setFloating,

package/dist/esm/Tooltip/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__767b0a12","tooltip-body":"vt_ce_Tooltip_tooltipBody__767b0a12"};
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__4170edb1","tooltip-body":"vt_ce_Tooltip_tooltipBody__4170edb1"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Typography/variants.module.scss.js

@@ -1,3 +1,3 @@
-var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__8a6d644d","t-h1":"vt_ce_Typography_tH1__8a6d644d","t-h2":"vt_ce_Typography_tH2__8a6d644d","t-h3":"vt_ce_Typography_tH3__8a6d644d","t-h4":"vt_ce_Typography_tH4__8a6d644d","t-label":"vt_ce_Typography_tLabel__8a6d644d","t-paragraph1":"vt_ce_Typography_tParagraph1__8a6d644d","t-paragraph2":"vt_ce_Typography_tParagraph2__8a6d644d","t-paragraph3":"vt_ce_Typography_tParagraph3__8a6d644d","t-button":"vt_ce_Typography_tButton__8a6d644d","t-buttonSmall":"vt_ce_Typography_tButtonSmall__8a6d644d","c-primary":"vt_ce_Typography_cPrimary__8a6d644d","c-secondary":"vt_ce_Typography_cSecondary__8a6d644d","c-tertiary":"vt_ce_Typography_cTertiary__8a6d644d","c-disabled":"vt_ce_Typography_cDisabled__8a6d644d"};
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__56e154f0","t-h1":"vt_ce_Typography_tH1__56e154f0","t-h2":"vt_ce_Typography_tH2__56e154f0","t-h3":"vt_ce_Typography_tH3__56e154f0","t-h4":"vt_ce_Typography_tH4__56e154f0","t-label":"vt_ce_Typography_tLabel__56e154f0","t-paragraph1":"vt_ce_Typography_tParagraph1__56e154f0","t-paragraph2":"vt_ce_Typography_tParagraph2__56e154f0","t-paragraph3":"vt_ce_Typography_tParagraph3__56e154f0","t-button":"vt_ce_Typography_tButton__56e154f0","t-buttonSmall":"vt_ce_Typography_tButtonSmall__56e154f0","c-primary":"vt_ce_Typography_cPrimary__56e154f0","c-secondary":"vt_ce_Typography_cSecondary__56e154f0","c-tertiary":"vt_ce_Typography_cTertiary__56e154f0","c-disabled":"vt_ce_Typography_cDisabled__56e154f0","c-inherit":"vt_ce_Typography_cInherit__56e154f0"};
 
 export { modules_b5c3b63b as default };

package/dist/esm/index.js

@@ -5,7 +5,8 @@ export { createThemeCssVariableDefinitions, themeCSSVariableNames } from './styl
 export { cx } from './styles/cx.js';
 export { defaultThemeCssVariableUsages as ThemeVars, defaultDarkTheme, default as defaultTheme } from './styles/defaultTheme.js';
 export { default as useTheme } from './styles/useTheme.js';
-export { createPalette } from './styles/palette.js';
+export { resolvePaletteValue } from './styles/palette.js';
+export { createPalette } from './styles/createPalette.js';
 export { default as experimentalStyled, default as styled } from './styles/styled.js';
 export { ThemeContextProvider } from './styles/provider.client.js';
 export { ThemeCssVarsProvider } from './styles/provider.css-vars.js';

package/dist/esm/styles/createPalette.js

@@ -0,0 +1,217 @@
+'use strict';
+import { readableColor, toHex, darken, lighten, desaturate } from 'color2k';
+
+function isPaletteColorOptions(obj) {
+  return typeof obj === "string";
+}
+function createPaletteColor(options) {
+  return options;
+}
+function contrastColor(surface) {
+  return readableColor(surface);
+}
+function isPaletteSurfaceColorsOptions(obj) {
+  return typeof obj === "string" || obj["surface"] !== void 0;
+}
+function createPaletteSurfaceColors(options) {
+  if (typeof options === "string") {
+    const surface = createPaletteColor(options);
+    return {
+      surface,
+      on: contrastColor(surface)
+    };
+  } else {
+    const surface = createPaletteColor(options.surface);
+    return {
+      surface,
+      on: options.on ? createPaletteColor(options.on) : contrastColor(surface)
+    };
+  }
+}
+function isPaletteActionVariantsColorsOptions(obj) {
+  return isPaletteSurfaceColorsOptions(obj) || obj["base"] !== void 0;
+}
+function createPaletteActionVariantsColors(options, disabled) {
+  const hoverFromBase = (b) => ({
+    surface: toHex(desaturate(darken(b.surface, 1 / 10), 1 / 4)),
+    on: b.on
+  });
+  if (isPaletteSurfaceColorsOptions(options)) {
+    const resolved = createPaletteSurfaceColors(options);
+    return {
+      base: resolved,
+      hover: hoverFromBase(resolved),
+      disabled
+    };
+  } else {
+    const base = createPaletteSurfaceColors(options.base);
+    return {
+      base,
+      hover: options.hover ? createPaletteSurfaceColors(options.hover) : hoverFromBase(base),
+      disabled
+    };
+  }
+}
+function createPaletteBrand(options, disabled) {
+  const brandColorStepFromBase = (b, step) => createPaletteActionVariantsColors(
+    step >= 1 ? toHex(darken(b.base.surface, step / 20)) : toHex(lighten(b.base.surface, step / 2)),
+    disabled
+  );
+  if (isPaletteActionVariantsColorsOptions(options)) {
+    const resolved = createPaletteActionVariantsColors(options, disabled);
+    return {
+      1: resolved,
+      2: brandColorStepFromBase(resolved, 1),
+      3: brandColorStepFromBase(resolved, 2),
+      4: brandColorStepFromBase(resolved, 0.5),
+      5: brandColorStepFromBase(resolved, 0.25)
+    };
+  } else {
+    const base = createPaletteActionVariantsColors(options[1], disabled);
+    return {
+      1: base,
+      2: options[2] ? createPaletteActionVariantsColors(options[2], disabled) : brandColorStepFromBase(base, 1),
+      3: options[3] ? createPaletteActionVariantsColors(options[3], disabled) : brandColorStepFromBase(base, 2),
+      4: options[4] ? createPaletteActionVariantsColors(options[4], disabled) : brandColorStepFromBase(base, 0.5),
+      5: options[5] ? createPaletteActionVariantsColors(options[5], disabled) : brandColorStepFromBase(base, 0.25)
+    };
+  }
+}
+function createPaletteText(options) {
+  const textColorStepFromBase = (b, _step) => {
+    return b;
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: textColorStepFromBase(resolved),
+      tertiary: textColorStepFromBase(resolved)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : textColorStepFromBase(base),
+      tertiary: options.tertiary ? createPaletteColor(options.tertiary) : textColorStepFromBase(base)
+    };
+  }
+}
+function createPaletteAction(options, disabled, text) {
+  const destructiveDefault = createPaletteActionVariantsColors(
+    {
+      base: {
+        surface: "#EB0000",
+        on: "#FFFFFF"
+      },
+      hover: {
+        surface: "#a63737",
+        on: "#FFFFFF"
+      }
+    },
+    disabled
+  );
+  const primary = createPaletteActionVariantsColors(options.primary, disabled);
+  return {
+    primary,
+    destructive: options.destructive ? createPaletteActionVariantsColors(options.destructive, disabled) : destructiveDefault,
+    text: options.text ? createPaletteActionVariantsColors(options.text, disabled) : createPaletteActionVariantsColors(
+      {
+        ...primary,
+        base: {
+          surface: text,
+          on: contrastColor(text)
+        }
+      },
+      disabled
+    )
+  };
+}
+function createPaletteIndicator(options, disabled) {
+  return {
+    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors("#28BA3F", disabled),
+    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors("#335B89", disabled),
+    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors("#FFBB0A", disabled),
+    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors("#EB0000", disabled)
+  };
+}
+function createPaletteTable(options, disabled) {
+  return createPaletteActionVariantsColors(options, disabled);
+}
+function createPaletteBackground(options) {
+  const backgroundStepFromBase = (b, step) => {
+    return toHex(darken(b, step / 20));
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: backgroundStepFromBase(resolved, 1)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : backgroundStepFromBase(base, 1)
+    };
+  }
+}
+function createPalette(options = {}) {
+  const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors({
+    surface: "#FAFAFA",
+    on: "#7C848D"
+  });
+  const text = createPaletteText(
+    options.text ?? {
+      primary: "#2A323C",
+      secondary: "#5C6269",
+      tertiary: "#465364"
+    }
+  );
+  return {
+    brand: createPaletteBrand(
+      options.brand ?? {
+        1: "#214167",
+        2: "#335B89"
+      },
+      disabled
+    ),
+    text,
+    action: createPaletteAction(
+      options.action ?? {
+        primary: {
+          base: {
+            surface: "#1871E8",
+            on: "#FFFFFF"
+          },
+          hover: {
+            surface: "#335B89",
+            on: "#FFFFFF"
+          }
+        }
+      },
+      disabled,
+      text.tertiary
+    ),
+    indicator: createPaletteIndicator(options.indicator ?? {}, disabled),
+    disabled,
+    background: createPaletteBackground(
+      options.background ?? {
+        primary: "#FFFFFF",
+        secondary: "#E0E8F0"
+      }
+    ),
+    table: createPaletteTable(
+      options.table ?? {
+        base: {
+          surface: "#FFFFFF",
+          on: "#2A323C"
+        },
+        hover: "#EAF1FA"
+      },
+      disabled
+    )
+  };
+}
+
+export { createPalette };

package/dist/esm/styles/createTheme.js

@@ -1,6 +1,6 @@
 'use strict';
-import { createPalette } from './palette.js';
 import { createTypography } from './typography.js';
+import { createPalette } from './createPalette.js';
 
 const defaultThemeOptions = {};
 function createTheme(options = defaultThemeOptions) {

package/dist/esm/styles/palette.js

@@ -1,202 +1,19 @@
 'use strict';
-import { readableColor, toHex, darken, lighten, desaturate } from 'color2k';
+import { deepGetValue } from '../utils/recursive.js';
+import 'color2k';
+import './css-vars.js';
+import { defaultThemeCssVariableUsages } from './defaultTheme.js';
+import 'react';
+import '@mui/system';
+import './styled.js';
+import 'react/jsx-runtime';
 
-function isPaletteColorOptions(obj) {
-  return typeof obj === "string";
-}
-function createPaletteColor(options) {
-  return options;
-}
-function contrastColor(surface) {
-  return readableColor(surface);
-}
-function isPaletteSurfaceColorsOptions(obj) {
-  return typeof obj === "string" || obj["surface"] !== void 0;
-}
-function createPaletteSurfaceColors(options) {
-  if (typeof options === "string") {
-    const surface = createPaletteColor(options);
-    return {
-      surface,
-      on: contrastColor(surface)
-    };
-  } else {
-    const surface = createPaletteColor(options.surface);
-    return {
-      surface,
-      on: options.on ? createPaletteColor(options.on) : contrastColor(surface)
-    };
-  }
-}
-function createPaletteActionVariantsColors(options, disabled) {
-  const hoverFromBase = (b) => ({
-    surface: toHex(desaturate(darken(b.surface, 1 / 10), 1 / 4)),
-    on: b.on
-  });
-  if (isPaletteSurfaceColorsOptions(options)) {
-    const resolved = createPaletteSurfaceColors(options);
-    return {
-      base: resolved,
-      hover: hoverFromBase(resolved),
-      disabled
-    };
-  } else {
-    const base = createPaletteSurfaceColors(options.base);
-    return {
-      base,
-      hover: options.hover ? createPaletteSurfaceColors(options.hover) : hoverFromBase(base),
-      disabled
-    };
-  }
-}
-function createPaletteBrand(options) {
-  const brandColorStepFromBase = (b, step) => {
-    return {
-      surface: step >= 1 ? toHex(darken(b.surface, step / 20)) : toHex(lighten(b.surface, step / 2)),
-      on: b.on
-    };
-  };
-  if (isPaletteSurfaceColorsOptions(options)) {
-    const resolved = createPaletteSurfaceColors(options);
-    return {
-      1: resolved,
-      2: brandColorStepFromBase(resolved, 1),
-      3: brandColorStepFromBase(resolved, 2),
-      4: brandColorStepFromBase(resolved, 0.5),
-      5: brandColorStepFromBase(resolved, 0.25)
-    };
+function resolvePaletteValue(input, palette = defaultThemeCssVariableUsages.palette) {
+  if (typeof input === "string") {
+    return deepGetValue(palette, input);
   } else {
-    const base = createPaletteSurfaceColors(options[1]);
-    return {
-      1: base,
-      2: options[2] ? createPaletteSurfaceColors(options[2]) : brandColorStepFromBase(base, 1),
-      3: options[3] ? createPaletteSurfaceColors(options[3]) : brandColorStepFromBase(base, 2),
-      4: options[4] ? createPaletteSurfaceColors(options[4]) : brandColorStepFromBase(base, 0.5),
-      5: options[5] ? createPaletteSurfaceColors(options[5]) : brandColorStepFromBase(base, 0.25)
-    };
+    return input;
   }
 }
-function createPaletteText(options) {
-  const textColorStepFromBase = (b, _step) => {
-    return b;
-  };
-  if (isPaletteColorOptions(options)) {
-    const resolved = createPaletteColor(options);
-    return {
-      primary: resolved,
-      secondary: textColorStepFromBase(resolved),
-      tertiary: textColorStepFromBase(resolved)
-    };
-  } else {
-    const base = createPaletteColor(options.primary);
-    return {
-      primary: base,
-      secondary: options.secondary ? createPaletteColor(options.secondary) : textColorStepFromBase(base),
-      tertiary: options.tertiary ? createPaletteColor(options.tertiary) : textColorStepFromBase(base)
-    };
-  }
-}
-function createPaletteAction(options, disabled) {
-  const destructiveDefault = createPaletteActionVariantsColors(
-    {
-      base: {
-        surface: "#EB0000",
-        on: "#FFFFFF"
-      },
-      hover: {
-        surface: "#a63737",
-        on: "#FFFFFF"
-      }
-    },
-    disabled
-  );
-  return {
-    primary: createPaletteActionVariantsColors(options.primary, disabled),
-    destructive: options.destructive ? createPaletteActionVariantsColors(options.destructive, disabled) : destructiveDefault
-  };
-}
-function createPaletteIndicator(options, disabled) {
-  return {
-    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors("#28BA3F", disabled),
-    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors("#335B89", disabled),
-    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors("#FFBB0A", disabled),
-    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors("#EB0000", disabled)
-  };
-}
-function createPaletteTable(options, disabled) {
-  return createPaletteActionVariantsColors(options, disabled);
-}
-function createPaletteBackground(options) {
-  const backgroundStepFromBase = (b, step) => {
-    return toHex(darken(b, step / 20));
-  };
-  if (isPaletteColorOptions(options)) {
-    const resolved = createPaletteColor(options);
-    return {
-      primary: resolved,
-      secondary: backgroundStepFromBase(resolved, 1)
-    };
-  } else {
-    const base = createPaletteColor(options.primary);
-    return {
-      primary: base,
-      secondary: options.secondary ? createPaletteColor(options.secondary) : backgroundStepFromBase(base, 1)
-    };
-  }
-}
-function createPalette(options = {}) {
-  const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors({
-    surface: "#FAFAFA",
-    on: "#7C848D"
-  });
-  return {
-    brand: createPaletteBrand(
-      options.brand ?? {
-        1: "#214167",
-        2: "#335B89"
-      }
-    ),
-    text: createPaletteText(
-      options.text ?? {
-        primary: "#2A323C",
-        secondary: "#5C6269",
-        tertiary: "#465364"
-      }
-    ),
-    action: createPaletteAction(
-      options.action ?? {
-        primary: {
-          base: {
-            surface: "#1871E8",
-            on: "#FFFFFF"
-          },
-          hover: {
-            surface: "#335B89",
-            on: "#FFFFFF"
-          }
-        }
-      },
-      disabled
-    ),
-    indicator: createPaletteIndicator(options.indicator ?? {}, disabled),
-    disabled,
-    background: createPaletteBackground(
-      options.background ?? {
-        primary: "#FFFFFF",
-        secondary: "#E0E8F0"
-      }
-    ),
-    table: createPaletteTable(
-      options.table ?? {
-        base: {
-          surface: "#FFFFFF",
-          on: "#2A323C"
-        },
-        hover: "#EAF1FA"
-      },
-      disabled
-    )
-  };
-}
 
-export { createPalette };
+export { resolvePaletteValue };

package/dist/esm/styles/scss/theme.generated.scss

@@ -2,16 +2,36 @@
 @use "sass:map";
 
 $default-theme: (
-  "palette-brand-1-surface": (#214167),
-  "palette-brand-1-on": (#fff),
-  "palette-brand-2-surface": (#335B89),
-  "palette-brand-2-on": (#fff),
-  "palette-brand-3-surface": (#152941),
-  "palette-brand-3-on": (#fff),
-  "palette-brand-4-surface": (#467ec3),
-  "palette-brand-4-on": (#fff),
-  "palette-brand-5-surface": (#315e96),
-  "palette-brand-5-on": (#fff),
+  "palette-brand-1-base-surface": (#214167),
+  "palette-brand-1-base-on": (#fff),
+  "palette-brand-1-hover-surface": (#202a37),
+  "palette-brand-1-hover-on": (#fff),
+  "palette-brand-1-disabled-surface": (#FAFAFA),
+  "palette-brand-1-disabled-on": (#7C848D),
+  "palette-brand-2-base-surface": (#335B89),
+  "palette-brand-2-base-on": (#fff),
+  "palette-brand-2-hover-surface": (#364453),
+  "palette-brand-2-hover-on": (#fff),
+  "palette-brand-2-disabled-surface": (#FAFAFA),
+  "palette-brand-2-disabled-on": (#7C848D),
+  "palette-brand-3-base-surface": (#152941),
+  "palette-brand-3-base-on": (#fff),
+  "palette-brand-3-hover-surface": (#0d1116),
+  "palette-brand-3-hover-on": (#fff),
+  "palette-brand-3-disabled-surface": (#FAFAFA),
+  "palette-brand-3-disabled-on": (#7C848D),
+  "palette-brand-4-base-surface": (#467ec3),
+  "palette-brand-4-base-on": (#000),
+  "palette-brand-4-hover-surface": (#4f6887),
+  "palette-brand-4-hover-on": (#000),
+  "palette-brand-4-disabled-surface": (#FAFAFA),
+  "palette-brand-4-disabled-on": (#7C848D),
+  "palette-brand-5-base-surface": (#315e96),
+  "palette-brand-5-base-on": (#fff),
+  "palette-brand-5-hover-surface": (#37485d),
+  "palette-brand-5-hover-on": (#fff),
+  "palette-brand-5-disabled-surface": (#FAFAFA),
+  "palette-brand-5-disabled-on": (#7C848D),
   "palette-text-primary": (#2A323C),
   "palette-text-secondary": (#5C6269),
   "palette-text-tertiary": (#465364),
@@ -27,6 +47,12 @@ $default-theme: (
   "palette-action-destructive-hover-on": (#FFFFFF),
   "palette-action-destructive-disabled-surface": (#FAFAFA),
   "palette-action-destructive-disabled-on": (#7C848D),
+  "palette-action-text-base-surface": (#465364),
+  "palette-action-text-base-on": (#fff),
+  "palette-action-text-hover-surface": (#335B89),
+  "palette-action-text-hover-on": (#FFFFFF),
+  "palette-action-text-disabled-surface": (#FAFAFA),
+  "palette-action-text-disabled-on": (#7C848D),
   "palette-indicator-success-base-surface": (#28BA3F),
   "palette-indicator-success-base-on": (#000),
   "palette-indicator-success-hover-surface": (#34793e),
@@ -144,16 +170,36 @@ $default-theme: (
   "typography-buttonSmall-lineHeight": (18px)
 );
 
-$theme-palette-brand-1-surface: var(--vt-ce-theme-palette-brand-1-surface, (#214167));
-$theme-palette-brand-1-on: var(--vt-ce-theme-palette-brand-1-on, (#fff));
-$theme-palette-brand-2-surface: var(--vt-ce-theme-palette-brand-2-surface, (#335B89));
-$theme-palette-brand-2-on: var(--vt-ce-theme-palette-brand-2-on, (#fff));
-$theme-palette-brand-3-surface: var(--vt-ce-theme-palette-brand-3-surface, (#152941));
-$theme-palette-brand-3-on: var(--vt-ce-theme-palette-brand-3-on, (#fff));
-$theme-palette-brand-4-surface: var(--vt-ce-theme-palette-brand-4-surface, (#467ec3));
-$theme-palette-brand-4-on: var(--vt-ce-theme-palette-brand-4-on, (#fff));
-$theme-palette-brand-5-surface: var(--vt-ce-theme-palette-brand-5-surface, (#315e96));
-$theme-palette-brand-5-on: var(--vt-ce-theme-palette-brand-5-on, (#fff));
+$theme-palette-brand-1-base-surface: var(--vt-ce-theme-palette-brand-1-base-surface, (#214167));
+$theme-palette-brand-1-base-on: var(--vt-ce-theme-palette-brand-1-base-on, (#fff));
+$theme-palette-brand-1-hover-surface: var(--vt-ce-theme-palette-brand-1-hover-surface, (#202a37));
+$theme-palette-brand-1-hover-on: var(--vt-ce-theme-palette-brand-1-hover-on, (#fff));
+$theme-palette-brand-1-disabled-surface: var(--vt-ce-theme-palette-brand-1-disabled-surface, (#FAFAFA));
+$theme-palette-brand-1-disabled-on: var(--vt-ce-theme-palette-brand-1-disabled-on, (#7C848D));
+$theme-palette-brand-2-base-surface: var(--vt-ce-theme-palette-brand-2-base-surface, (#335B89));
+$theme-palette-brand-2-base-on: var(--vt-ce-theme-palette-brand-2-base-on, (#fff));
+$theme-palette-brand-2-hover-surface: var(--vt-ce-theme-palette-brand-2-hover-surface, (#364453));
+$theme-palette-brand-2-hover-on: var(--vt-ce-theme-palette-brand-2-hover-on, (#fff));
+$theme-palette-brand-2-disabled-surface: var(--vt-ce-theme-palette-brand-2-disabled-surface, (#FAFAFA));
+$theme-palette-brand-2-disabled-on: var(--vt-ce-theme-palette-brand-2-disabled-on, (#7C848D));
+$theme-palette-brand-3-base-surface: var(--vt-ce-theme-palette-brand-3-base-surface, (#152941));
+$theme-palette-brand-3-base-on: var(--vt-ce-theme-palette-brand-3-base-on, (#fff));
+$theme-palette-brand-3-hover-surface: var(--vt-ce-theme-palette-brand-3-hover-surface, (#0d1116));
+$theme-palette-brand-3-hover-on: var(--vt-ce-theme-palette-brand-3-hover-on, (#fff));
+$theme-palette-brand-3-disabled-surface: var(--vt-ce-theme-palette-brand-3-disabled-surface, (#FAFAFA));
+$theme-palette-brand-3-disabled-on: var(--vt-ce-theme-palette-brand-3-disabled-on, (#7C848D));
+$theme-palette-brand-4-base-surface: var(--vt-ce-theme-palette-brand-4-base-surface, (#467ec3));
+$theme-palette-brand-4-base-on: var(--vt-ce-theme-palette-brand-4-base-on, (#000));
+$theme-palette-brand-4-hover-surface: var(--vt-ce-theme-palette-brand-4-hover-surface, (#4f6887));
+$theme-palette-brand-4-hover-on: var(--vt-ce-theme-palette-brand-4-hover-on, (#000));
+$theme-palette-brand-4-disabled-surface: var(--vt-ce-theme-palette-brand-4-disabled-surface, (#FAFAFA));
+$theme-palette-brand-4-disabled-on: var(--vt-ce-theme-palette-brand-4-disabled-on, (#7C848D));
+$theme-palette-brand-5-base-surface: var(--vt-ce-theme-palette-brand-5-base-surface, (#315e96));
+$theme-palette-brand-5-base-on: var(--vt-ce-theme-palette-brand-5-base-on, (#fff));
+$theme-palette-brand-5-hover-surface: var(--vt-ce-theme-palette-brand-5-hover-surface, (#37485d));
+$theme-palette-brand-5-hover-on: var(--vt-ce-theme-palette-brand-5-hover-on, (#fff));
+$theme-palette-brand-5-disabled-surface: var(--vt-ce-theme-palette-brand-5-disabled-surface, (#FAFAFA));
+$theme-palette-brand-5-disabled-on: var(--vt-ce-theme-palette-brand-5-disabled-on, (#7C848D));
 $theme-palette-text-primary: var(--vt-ce-theme-palette-text-primary, (#2A323C));
 $theme-palette-text-secondary: var(--vt-ce-theme-palette-text-secondary, (#5C6269));
 $theme-palette-text-tertiary: var(--vt-ce-theme-palette-text-tertiary, (#465364));
@@ -169,6 +215,12 @@ $theme-palette-action-destructive-hover-surface: var(--vt-ce-theme-palette-actio
 $theme-palette-action-destructive-hover-on: var(--vt-ce-theme-palette-action-destructive-hover-on, (#FFFFFF));
 $theme-palette-action-destructive-disabled-surface: var(--vt-ce-theme-palette-action-destructive-disabled-surface, (#FAFAFA));
 $theme-palette-action-destructive-disabled-on: var(--vt-ce-theme-palette-action-destructive-disabled-on, (#7C848D));
+$theme-palette-action-text-base-surface: var(--vt-ce-theme-palette-action-text-base-surface, (#465364));
+$theme-palette-action-text-base-on: var(--vt-ce-theme-palette-action-text-base-on, (#fff));
+$theme-palette-action-text-hover-surface: var(--vt-ce-theme-palette-action-text-hover-surface, (#335B89));
+$theme-palette-action-text-hover-on: var(--vt-ce-theme-palette-action-text-hover-on, (#FFFFFF));
+$theme-palette-action-text-disabled-surface: var(--vt-ce-theme-palette-action-text-disabled-surface, (#FAFAFA));
+$theme-palette-action-text-disabled-on: var(--vt-ce-theme-palette-action-text-disabled-on, (#7C848D));
 $theme-palette-indicator-success-base-surface: var(--vt-ce-theme-palette-indicator-success-base-surface, (#28BA3F));
 $theme-palette-indicator-success-base-on: var(--vt-ce-theme-palette-indicator-success-base-on, (#000));
 $theme-palette-indicator-success-hover-surface: var(--vt-ce-theme-palette-indicator-success-hover-surface, (#34793e));