vira 31.13.2 → 31.14.0

package/dist/styles/form-variants.js

@@ -11,7 +11,7 @@ export var ViraColorVariant;
      *
      * @default blue colored
      */
-    ViraColorVariant["Accent"] = "accent";
+    ViraColorVariant["Info"] = "info";
     /** @default black colored */
     ViraColorVariant["Plain"] = "plain";
     /** @default grey colored */
@@ -22,6 +22,8 @@ export var ViraColorVariant;
     ViraColorVariant["Warning"] = "warning";
     /** @default green colored */
     ViraColorVariant["Positive"] = "positive";
+    /** @default purple colored */
+    ViraColorVariant["Special"] = "special";
     /**
      * No color variant styles will be applied at all. All related CSS vars are free to customize to
      * your wishes.
@@ -35,11 +37,14 @@ export var ViraColorVariant;
  * @category Internal
  */
 export const viraColorVariantToColorName = {
-    [ViraColorVariant.Accent]: ViraThemeColorName.accent,
+    [ViraColorVariant.Info]: ViraThemeColorName.blue,
     [ViraColorVariant.Neutral]: ViraThemeColorName.grey,
     [ViraColorVariant.Danger]: ViraThemeColorName.red,
     [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
     [ViraColorVariant.Positive]: ViraThemeColorName.green,
+    [ViraColorVariant.Special]: ViraThemeColorName.purple,
+    [ViraColorVariant.Plain]: ViraThemeColorName.grey,
+    [ViraColorVariant.None]: ViraThemeColorName.grey,
 };
 /**
  * All defined color variants starting with the default.
@@ -47,12 +52,13 @@ export const viraColorVariantToColorName = {
  * @category Internal
  */
 export const viraColorVariants = [
-    ViraColorVariant.Accent,
+    ViraColorVariant.Info,
     ViraColorVariant.Plain,
     ViraColorVariant.Neutral,
     ViraColorVariant.Danger,
     ViraColorVariant.Warning,
     ViraColorVariant.Positive,
+    ViraColorVariant.Special,
 ];
 /**
  * All available variants for controlling vira form sizes.

package/dist/styles/vira-color-palette.d.ts

@@ -99,25 +99,6 @@ export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<
     readonly 'vira-blue-900': "#1B345D";
     readonly 'vira-blue-950': "#172C4F";
     readonly 'vira-blue-1000': "#142540";
-    readonly 'vira-accent-100': "#F5F9FF";
-    readonly 'vira-accent-150': "#EAF3FF";
-    readonly 'vira-accent-200': "#E0EDFF";
-    readonly 'vira-accent-250': "#D6E7FF";
-    readonly 'vira-accent-300': "#CBDFFF";
-    readonly 'vira-accent-350': "#B9D4FF";
-    readonly 'vira-accent-400': "#9EC3FF";
-    readonly 'vira-accent-450': "#7AADFF";
-    readonly 'vira-accent-500': "#5697FF";
-    readonly 'vira-accent-550': "#4988ED";
-    readonly 'vira-accent-600': "#427DDC";
-    readonly 'vira-accent-650': "#3B72CA";
-    readonly 'vira-accent-700': "#3365B6";
-    readonly 'vira-accent-750': "#2D569A";
-    readonly 'vira-accent-800': "#27487E";
-    readonly 'vira-accent-850': "#203D6C";
-    readonly 'vira-accent-900': "#1B345D";
-    readonly 'vira-accent-950': "#172C4F";
-    readonly 'vira-accent-1000': "#142540";
     readonly 'vira-purple-100': "#F9F7FF";
     readonly 'vira-purple-150': "#F3EFFF";
     readonly 'vira-purple-200': "#EDE8FF";

package/dist/styles/vira-color-palette.js

@@ -100,25 +100,6 @@ export const viraColorPalette = defineCssVars({
     'vira-blue-900': '#1B345D',
     'vira-blue-950': '#172C4F',
     'vira-blue-1000': '#142540',
-    'vira-accent-100': '#F5F9FF',
-    'vira-accent-150': '#EAF3FF',
-    'vira-accent-200': '#E0EDFF',
-    'vira-accent-250': '#D6E7FF',
-    'vira-accent-300': '#CBDFFF',
-    'vira-accent-350': '#B9D4FF',
-    'vira-accent-400': '#9EC3FF',
-    'vira-accent-450': '#7AADFF',
-    'vira-accent-500': '#5697FF',
-    'vira-accent-550': '#4988ED',
-    'vira-accent-600': '#427DDC',
-    'vira-accent-650': '#3B72CA',
-    'vira-accent-700': '#3365B6',
-    'vira-accent-750': '#2D569A',
-    'vira-accent-800': '#27487E',
-    'vira-accent-850': '#203D6C',
-    'vira-accent-900': '#1B345D',
-    'vira-accent-950': '#172C4F',
-    'vira-accent-1000': '#142540',
     'vira-purple-100': '#F9F7FF',
     'vira-purple-150': '#F3EFFF',
     'vira-purple-200': '#EDE8FF',

package/dist/styles/vira-color-theme-object.d.ts

@@ -38,7 +38,7 @@ export type AllViraThemeKeys = keyof typeof viraTheme.colors;
  *
  * @category Internal
  */
-export declare const allViraThemeKeys: ("vira-red-foreground-highest-contrast" | "vira-red-foreground-small-body" | "vira-red-foreground-body" | "vira-red-foreground-non-body" | "vira-red-foreground-header" | "vira-red-foreground-placeholder" | "vira-red-foreground-decoration" | "vira-red-foreground-invisible" | "vira-red-foreground-lowest-contrast" | "vira-red-behind-bg-highest-contrast" | "vira-red-behind-bg-small-body" | "vira-red-behind-bg-body" | "vira-red-behind-bg-non-body" | "vira-red-behind-bg-header" | "vira-red-behind-bg-placeholder" | "vira-red-behind-bg-decoration" | "vira-red-behind-bg-invisible" | "vira-red-behind-bg-lowest-contrast" | "vira-red-behind-fg-highest-contrast" | "vira-red-behind-fg-small-body" | "vira-red-behind-fg-body" | "vira-red-behind-fg-non-body" | "vira-red-behind-fg-header" | "vira-red-behind-fg-placeholder" | "vira-red-behind-fg-decoration" | "vira-red-behind-fg-invisible" | "vira-red-behind-fg-lowest-contrast" | "vira-red-on-self-highest-contrast" | "vira-red-on-self-small-body" | "vira-red-on-self-body" | "vira-red-on-self-non-body" | "vira-red-on-self-header" | "vira-red-on-self-placeholder" | "vira-red-on-self-decoration" | "vira-red-on-self-invisible" | "vira-red-on-self-lowest-contrast" | "vira-yellow-foreground-highest-contrast" | "vira-yellow-foreground-small-body" | "vira-yellow-foreground-body" | "vira-yellow-foreground-non-body" | "vira-yellow-foreground-header" | "vira-yellow-foreground-placeholder" | "vira-yellow-foreground-decoration" | "vira-yellow-foreground-invisible" | "vira-yellow-foreground-lowest-contrast" | "vira-yellow-behind-bg-highest-contrast" | "vira-yellow-behind-bg-small-body" | "vira-yellow-behind-bg-body" | "vira-yellow-behind-bg-non-body" | "vira-yellow-behind-bg-header" | "vira-yellow-behind-bg-placeholder" | "vira-yellow-behind-bg-decoration" | "vira-yellow-behind-bg-invisible" | "vira-yellow-behind-bg-lowest-contrast" | "vira-yellow-behind-fg-highest-contrast" | "vira-yellow-behind-fg-small-body" | "vira-yellow-behind-fg-body" | "vira-yellow-behind-fg-non-body" | "vira-yellow-behind-fg-header" | "vira-yellow-behind-fg-placeholder" | "vira-yellow-behind-fg-decoration" | "vira-yellow-behind-fg-invisible" | "vira-yellow-behind-fg-lowest-contrast" | "vira-yellow-on-self-highest-contrast" | "vira-yellow-on-self-small-body" | "vira-yellow-on-self-body" | "vira-yellow-on-self-non-body" | "vira-yellow-on-self-header" | "vira-yellow-on-self-placeholder" | "vira-yellow-on-self-decoration" | "vira-yellow-on-self-invisible" | "vira-yellow-on-self-lowest-contrast" | "vira-green-foreground-highest-contrast" | "vira-green-foreground-small-body" | "vira-green-foreground-body" | "vira-green-foreground-non-body" | "vira-green-foreground-header" | "vira-green-foreground-placeholder" | "vira-green-foreground-decoration" | "vira-green-foreground-invisible" | "vira-green-foreground-lowest-contrast" | "vira-green-behind-bg-highest-contrast" | "vira-green-behind-bg-small-body" | "vira-green-behind-bg-body" | "vira-green-behind-bg-non-body" | "vira-green-behind-bg-header" | "vira-green-behind-bg-placeholder" | "vira-green-behind-bg-decoration" | "vira-green-behind-bg-invisible" | "vira-green-behind-bg-lowest-contrast" | "vira-green-behind-fg-highest-contrast" | "vira-green-behind-fg-small-body" | "vira-green-behind-fg-body" | "vira-green-behind-fg-non-body" | "vira-green-behind-fg-header" | "vira-green-behind-fg-placeholder" | "vira-green-behind-fg-decoration" | "vira-green-behind-fg-invisible" | "vira-green-behind-fg-lowest-contrast" | "vira-green-on-self-highest-contrast" | "vira-green-on-self-small-body" | "vira-green-on-self-body" | "vira-green-on-self-non-body" | "vira-green-on-self-header" | "vira-green-on-self-placeholder" | "vira-green-on-self-decoration" | "vira-green-on-self-invisible" | "vira-green-on-self-lowest-contrast" | "vira-teal-foreground-highest-contrast" | "vira-teal-foreground-small-body" | "vira-teal-foreground-body" | "vira-teal-foreground-non-body" | "vira-teal-foreground-header" | "vira-teal-foreground-placeholder" | "vira-teal-foreground-decoration" | "vira-teal-foreground-invisible" | "vira-teal-foreground-lowest-contrast" | "vira-teal-behind-bg-highest-contrast" | "vira-teal-behind-bg-small-body" | "vira-teal-behind-bg-body" | "vira-teal-behind-bg-non-body" | "vira-teal-behind-bg-header" | "vira-teal-behind-bg-placeholder" | "vira-teal-behind-bg-decoration" | "vira-teal-behind-bg-invisible" | "vira-teal-behind-bg-lowest-contrast" | "vira-teal-behind-fg-highest-contrast" | "vira-teal-behind-fg-small-body" | "vira-teal-behind-fg-body" | "vira-teal-behind-fg-non-body" | "vira-teal-behind-fg-header" | "vira-teal-behind-fg-placeholder" | "vira-teal-behind-fg-decoration" | "vira-teal-behind-fg-invisible" | "vira-teal-behind-fg-lowest-contrast" | "vira-teal-on-self-highest-contrast" | "vira-teal-on-self-small-body" | "vira-teal-on-self-body" | "vira-teal-on-self-non-body" | "vira-teal-on-self-header" | "vira-teal-on-self-placeholder" | "vira-teal-on-self-decoration" | "vira-teal-on-self-invisible" | "vira-teal-on-self-lowest-contrast" | "vira-blue-foreground-highest-contrast" | "vira-blue-foreground-small-body" | "vira-blue-foreground-body" | "vira-blue-foreground-non-body" | "vira-blue-foreground-header" | "vira-blue-foreground-placeholder" | "vira-blue-foreground-decoration" | "vira-blue-foreground-invisible" | "vira-blue-foreground-lowest-contrast" | "vira-blue-behind-bg-highest-contrast" | "vira-blue-behind-bg-small-body" | "vira-blue-behind-bg-body" | "vira-blue-behind-bg-non-body" | "vira-blue-behind-bg-header" | "vira-blue-behind-bg-placeholder" | "vira-blue-behind-bg-decoration" | "vira-blue-behind-bg-invisible" | "vira-blue-behind-bg-lowest-contrast" | "vira-blue-behind-fg-highest-contrast" | "vira-blue-behind-fg-small-body" | "vira-blue-behind-fg-body" | "vira-blue-behind-fg-non-body" | "vira-blue-behind-fg-header" | "vira-blue-behind-fg-placeholder" | "vira-blue-behind-fg-decoration" | "vira-blue-behind-fg-invisible" | "vira-blue-behind-fg-lowest-contrast" | "vira-blue-on-self-highest-contrast" | "vira-blue-on-self-small-body" | "vira-blue-on-self-body" | "vira-blue-on-self-non-body" | "vira-blue-on-self-header" | "vira-blue-on-self-placeholder" | "vira-blue-on-self-decoration" | "vira-blue-on-self-invisible" | "vira-blue-on-self-lowest-contrast" | "vira-accent-foreground-highest-contrast" | "vira-accent-foreground-small-body" | "vira-accent-foreground-body" | "vira-accent-foreground-non-body" | "vira-accent-foreground-header" | "vira-accent-foreground-placeholder" | "vira-accent-foreground-decoration" | "vira-accent-foreground-invisible" | "vira-accent-foreground-lowest-contrast" | "vira-accent-behind-bg-highest-contrast" | "vira-accent-behind-bg-small-body" | "vira-accent-behind-bg-body" | "vira-accent-behind-bg-non-body" | "vira-accent-behind-bg-header" | "vira-accent-behind-bg-placeholder" | "vira-accent-behind-bg-decoration" | "vira-accent-behind-bg-invisible" | "vira-accent-behind-bg-lowest-contrast" | "vira-accent-behind-fg-highest-contrast" | "vira-accent-behind-fg-small-body" | "vira-accent-behind-fg-body" | "vira-accent-behind-fg-non-body" | "vira-accent-behind-fg-header" | "vira-accent-behind-fg-placeholder" | "vira-accent-behind-fg-decoration" | "vira-accent-behind-fg-invisible" | "vira-accent-behind-fg-lowest-contrast" | "vira-accent-on-self-highest-contrast" | "vira-accent-on-self-small-body" | "vira-accent-on-self-body" | "vira-accent-on-self-non-body" | "vira-accent-on-self-header" | "vira-accent-on-self-placeholder" | "vira-accent-on-self-decoration" | "vira-accent-on-self-invisible" | "vira-accent-on-self-lowest-contrast" | "vira-purple-foreground-highest-contrast" | "vira-purple-foreground-small-body" | "vira-purple-foreground-body" | "vira-purple-foreground-non-body" | "vira-purple-foreground-header" | "vira-purple-foreground-placeholder" | "vira-purple-foreground-decoration" | "vira-purple-foreground-invisible" | "vira-purple-foreground-lowest-contrast" | "vira-purple-behind-bg-highest-contrast" | "vira-purple-behind-bg-small-body" | "vira-purple-behind-bg-body" | "vira-purple-behind-bg-non-body" | "vira-purple-behind-bg-header" | "vira-purple-behind-bg-placeholder" | "vira-purple-behind-bg-decoration" | "vira-purple-behind-bg-invisible" | "vira-purple-behind-bg-lowest-contrast" | "vira-purple-behind-fg-highest-contrast" | "vira-purple-behind-fg-small-body" | "vira-purple-behind-fg-body" | "vira-purple-behind-fg-non-body" | "vira-purple-behind-fg-header" | "vira-purple-behind-fg-placeholder" | "vira-purple-behind-fg-decoration" | "vira-purple-behind-fg-invisible" | "vira-purple-behind-fg-lowest-contrast" | "vira-purple-on-self-highest-contrast" | "vira-purple-on-self-small-body" | "vira-purple-on-self-body" | "vira-purple-on-self-non-body" | "vira-purple-on-self-header" | "vira-purple-on-self-placeholder" | "vira-purple-on-self-decoration" | "vira-purple-on-self-invisible" | "vira-purple-on-self-lowest-contrast" | "vira-pink-foreground-highest-contrast" | "vira-pink-foreground-small-body" | "vira-pink-foreground-body" | "vira-pink-foreground-non-body" | "vira-pink-foreground-header" | "vira-pink-foreground-placeholder" | "vira-pink-foreground-decoration" | "vira-pink-foreground-invisible" | "vira-pink-foreground-lowest-contrast" | "vira-pink-behind-bg-highest-contrast" | "vira-pink-behind-bg-small-body" | "vira-pink-behind-bg-body" | "vira-pink-behind-bg-non-body" | "vira-pink-behind-bg-header" | "vira-pink-behind-bg-placeholder" | "vira-pink-behind-bg-decoration" | "vira-pink-behind-bg-invisible" | "vira-pink-behind-bg-lowest-contrast" | "vira-pink-behind-fg-highest-contrast" | "vira-pink-behind-fg-small-body" | "vira-pink-behind-fg-body" | "vira-pink-behind-fg-non-body" | "vira-pink-behind-fg-header" | "vira-pink-behind-fg-placeholder" | "vira-pink-behind-fg-decoration" | "vira-pink-behind-fg-invisible" | "vira-pink-behind-fg-lowest-contrast" | "vira-pink-on-self-highest-contrast" | "vira-pink-on-self-small-body" | "vira-pink-on-self-body" | "vira-pink-on-self-non-body" | "vira-pink-on-self-header" | "vira-pink-on-self-placeholder" | "vira-pink-on-self-decoration" | "vira-pink-on-self-invisible" | "vira-pink-on-self-lowest-contrast" | "vira-grey-foreground-highest-contrast" | "vira-grey-foreground-small-body" | "vira-grey-foreground-body" | "vira-grey-foreground-non-body" | "vira-grey-foreground-header" | "vira-grey-foreground-placeholder" | "vira-grey-foreground-decoration" | "vira-grey-foreground-invisible" | "vira-grey-foreground-lowest-contrast" | "vira-grey-behind-bg-highest-contrast" | "vira-grey-behind-bg-small-body" | "vira-grey-behind-bg-body" | "vira-grey-behind-bg-non-body" | "vira-grey-behind-bg-header" | "vira-grey-behind-bg-placeholder" | "vira-grey-behind-bg-decoration" | "vira-grey-behind-bg-invisible" | "vira-grey-behind-bg-lowest-contrast" | "vira-grey-behind-fg-highest-contrast" | "vira-grey-behind-fg-small-body" | "vira-grey-behind-fg-body" | "vira-grey-behind-fg-non-body" | "vira-grey-behind-fg-header" | "vira-grey-behind-fg-placeholder" | "vira-grey-behind-fg-decoration" | "vira-grey-behind-fg-invisible" | "vira-grey-behind-fg-lowest-contrast" | "vira-grey-on-self-highest-contrast" | "vira-grey-on-self-small-body" | "vira-grey-on-self-body" | "vira-grey-on-self-non-body" | "vira-grey-on-self-header" | "vira-grey-on-self-placeholder" | "vira-grey-on-self-decoration" | "vira-grey-on-self-invisible" | "vira-grey-on-self-lowest-contrast" | "theme-default")[];
+export declare const allViraThemeKeys: ("vira-red-foreground-highest-contrast" | "vira-red-foreground-small-body" | "vira-red-foreground-body" | "vira-red-foreground-non-body" | "vira-red-foreground-header" | "vira-red-foreground-placeholder" | "vira-red-foreground-decoration" | "vira-red-foreground-invisible" | "vira-red-foreground-lowest-contrast" | "vira-red-behind-bg-highest-contrast" | "vira-red-behind-bg-small-body" | "vira-red-behind-bg-body" | "vira-red-behind-bg-non-body" | "vira-red-behind-bg-header" | "vira-red-behind-bg-placeholder" | "vira-red-behind-bg-decoration" | "vira-red-behind-bg-invisible" | "vira-red-behind-bg-lowest-contrast" | "vira-red-behind-fg-highest-contrast" | "vira-red-behind-fg-small-body" | "vira-red-behind-fg-body" | "vira-red-behind-fg-non-body" | "vira-red-behind-fg-header" | "vira-red-behind-fg-placeholder" | "vira-red-behind-fg-decoration" | "vira-red-behind-fg-invisible" | "vira-red-behind-fg-lowest-contrast" | "vira-red-on-self-highest-contrast" | "vira-red-on-self-small-body" | "vira-red-on-self-body" | "vira-red-on-self-non-body" | "vira-red-on-self-header" | "vira-red-on-self-placeholder" | "vira-red-on-self-decoration" | "vira-red-on-self-invisible" | "vira-red-on-self-lowest-contrast" | "vira-yellow-foreground-highest-contrast" | "vira-yellow-foreground-small-body" | "vira-yellow-foreground-body" | "vira-yellow-foreground-non-body" | "vira-yellow-foreground-header" | "vira-yellow-foreground-placeholder" | "vira-yellow-foreground-decoration" | "vira-yellow-foreground-invisible" | "vira-yellow-foreground-lowest-contrast" | "vira-yellow-behind-bg-highest-contrast" | "vira-yellow-behind-bg-small-body" | "vira-yellow-behind-bg-body" | "vira-yellow-behind-bg-non-body" | "vira-yellow-behind-bg-header" | "vira-yellow-behind-bg-placeholder" | "vira-yellow-behind-bg-decoration" | "vira-yellow-behind-bg-invisible" | "vira-yellow-behind-bg-lowest-contrast" | "vira-yellow-behind-fg-highest-contrast" | "vira-yellow-behind-fg-small-body" | "vira-yellow-behind-fg-body" | "vira-yellow-behind-fg-non-body" | "vira-yellow-behind-fg-header" | "vira-yellow-behind-fg-placeholder" | "vira-yellow-behind-fg-decoration" | "vira-yellow-behind-fg-invisible" | "vira-yellow-behind-fg-lowest-contrast" | "vira-yellow-on-self-highest-contrast" | "vira-yellow-on-self-small-body" | "vira-yellow-on-self-body" | "vira-yellow-on-self-non-body" | "vira-yellow-on-self-header" | "vira-yellow-on-self-placeholder" | "vira-yellow-on-self-decoration" | "vira-yellow-on-self-invisible" | "vira-yellow-on-self-lowest-contrast" | "vira-green-foreground-highest-contrast" | "vira-green-foreground-small-body" | "vira-green-foreground-body" | "vira-green-foreground-non-body" | "vira-green-foreground-header" | "vira-green-foreground-placeholder" | "vira-green-foreground-decoration" | "vira-green-foreground-invisible" | "vira-green-foreground-lowest-contrast" | "vira-green-behind-bg-highest-contrast" | "vira-green-behind-bg-small-body" | "vira-green-behind-bg-body" | "vira-green-behind-bg-non-body" | "vira-green-behind-bg-header" | "vira-green-behind-bg-placeholder" | "vira-green-behind-bg-decoration" | "vira-green-behind-bg-invisible" | "vira-green-behind-bg-lowest-contrast" | "vira-green-behind-fg-highest-contrast" | "vira-green-behind-fg-small-body" | "vira-green-behind-fg-body" | "vira-green-behind-fg-non-body" | "vira-green-behind-fg-header" | "vira-green-behind-fg-placeholder" | "vira-green-behind-fg-decoration" | "vira-green-behind-fg-invisible" | "vira-green-behind-fg-lowest-contrast" | "vira-green-on-self-highest-contrast" | "vira-green-on-self-small-body" | "vira-green-on-self-body" | "vira-green-on-self-non-body" | "vira-green-on-self-header" | "vira-green-on-self-placeholder" | "vira-green-on-self-decoration" | "vira-green-on-self-invisible" | "vira-green-on-self-lowest-contrast" | "vira-teal-foreground-highest-contrast" | "vira-teal-foreground-small-body" | "vira-teal-foreground-body" | "vira-teal-foreground-non-body" | "vira-teal-foreground-header" | "vira-teal-foreground-placeholder" | "vira-teal-foreground-decoration" | "vira-teal-foreground-invisible" | "vira-teal-foreground-lowest-contrast" | "vira-teal-behind-bg-highest-contrast" | "vira-teal-behind-bg-small-body" | "vira-teal-behind-bg-body" | "vira-teal-behind-bg-non-body" | "vira-teal-behind-bg-header" | "vira-teal-behind-bg-placeholder" | "vira-teal-behind-bg-decoration" | "vira-teal-behind-bg-invisible" | "vira-teal-behind-bg-lowest-contrast" | "vira-teal-behind-fg-highest-contrast" | "vira-teal-behind-fg-small-body" | "vira-teal-behind-fg-body" | "vira-teal-behind-fg-non-body" | "vira-teal-behind-fg-header" | "vira-teal-behind-fg-placeholder" | "vira-teal-behind-fg-decoration" | "vira-teal-behind-fg-invisible" | "vira-teal-behind-fg-lowest-contrast" | "vira-teal-on-self-highest-contrast" | "vira-teal-on-self-small-body" | "vira-teal-on-self-body" | "vira-teal-on-self-non-body" | "vira-teal-on-self-header" | "vira-teal-on-self-placeholder" | "vira-teal-on-self-decoration" | "vira-teal-on-self-invisible" | "vira-teal-on-self-lowest-contrast" | "vira-blue-foreground-highest-contrast" | "vira-blue-foreground-small-body" | "vira-blue-foreground-body" | "vira-blue-foreground-non-body" | "vira-blue-foreground-header" | "vira-blue-foreground-placeholder" | "vira-blue-foreground-decoration" | "vira-blue-foreground-invisible" | "vira-blue-foreground-lowest-contrast" | "vira-blue-behind-bg-highest-contrast" | "vira-blue-behind-bg-small-body" | "vira-blue-behind-bg-body" | "vira-blue-behind-bg-non-body" | "vira-blue-behind-bg-header" | "vira-blue-behind-bg-placeholder" | "vira-blue-behind-bg-decoration" | "vira-blue-behind-bg-invisible" | "vira-blue-behind-bg-lowest-contrast" | "vira-blue-behind-fg-highest-contrast" | "vira-blue-behind-fg-small-body" | "vira-blue-behind-fg-body" | "vira-blue-behind-fg-non-body" | "vira-blue-behind-fg-header" | "vira-blue-behind-fg-placeholder" | "vira-blue-behind-fg-decoration" | "vira-blue-behind-fg-invisible" | "vira-blue-behind-fg-lowest-contrast" | "vira-blue-on-self-highest-contrast" | "vira-blue-on-self-small-body" | "vira-blue-on-self-body" | "vira-blue-on-self-non-body" | "vira-blue-on-self-header" | "vira-blue-on-self-placeholder" | "vira-blue-on-self-decoration" | "vira-blue-on-self-invisible" | "vira-blue-on-self-lowest-contrast" | "vira-purple-foreground-highest-contrast" | "vira-purple-foreground-small-body" | "vira-purple-foreground-body" | "vira-purple-foreground-non-body" | "vira-purple-foreground-header" | "vira-purple-foreground-placeholder" | "vira-purple-foreground-decoration" | "vira-purple-foreground-invisible" | "vira-purple-foreground-lowest-contrast" | "vira-purple-behind-bg-highest-contrast" | "vira-purple-behind-bg-small-body" | "vira-purple-behind-bg-body" | "vira-purple-behind-bg-non-body" | "vira-purple-behind-bg-header" | "vira-purple-behind-bg-placeholder" | "vira-purple-behind-bg-decoration" | "vira-purple-behind-bg-invisible" | "vira-purple-behind-bg-lowest-contrast" | "vira-purple-behind-fg-highest-contrast" | "vira-purple-behind-fg-small-body" | "vira-purple-behind-fg-body" | "vira-purple-behind-fg-non-body" | "vira-purple-behind-fg-header" | "vira-purple-behind-fg-placeholder" | "vira-purple-behind-fg-decoration" | "vira-purple-behind-fg-invisible" | "vira-purple-behind-fg-lowest-contrast" | "vira-purple-on-self-highest-contrast" | "vira-purple-on-self-small-body" | "vira-purple-on-self-body" | "vira-purple-on-self-non-body" | "vira-purple-on-self-header" | "vira-purple-on-self-placeholder" | "vira-purple-on-self-decoration" | "vira-purple-on-self-invisible" | "vira-purple-on-self-lowest-contrast" | "vira-pink-foreground-highest-contrast" | "vira-pink-foreground-small-body" | "vira-pink-foreground-body" | "vira-pink-foreground-non-body" | "vira-pink-foreground-header" | "vira-pink-foreground-placeholder" | "vira-pink-foreground-decoration" | "vira-pink-foreground-invisible" | "vira-pink-foreground-lowest-contrast" | "vira-pink-behind-bg-highest-contrast" | "vira-pink-behind-bg-small-body" | "vira-pink-behind-bg-body" | "vira-pink-behind-bg-non-body" | "vira-pink-behind-bg-header" | "vira-pink-behind-bg-placeholder" | "vira-pink-behind-bg-decoration" | "vira-pink-behind-bg-invisible" | "vira-pink-behind-bg-lowest-contrast" | "vira-pink-behind-fg-highest-contrast" | "vira-pink-behind-fg-small-body" | "vira-pink-behind-fg-body" | "vira-pink-behind-fg-non-body" | "vira-pink-behind-fg-header" | "vira-pink-behind-fg-placeholder" | "vira-pink-behind-fg-decoration" | "vira-pink-behind-fg-invisible" | "vira-pink-behind-fg-lowest-contrast" | "vira-pink-on-self-highest-contrast" | "vira-pink-on-self-small-body" | "vira-pink-on-self-body" | "vira-pink-on-self-non-body" | "vira-pink-on-self-header" | "vira-pink-on-self-placeholder" | "vira-pink-on-self-decoration" | "vira-pink-on-self-invisible" | "vira-pink-on-self-lowest-contrast" | "vira-grey-foreground-highest-contrast" | "vira-grey-foreground-small-body" | "vira-grey-foreground-body" | "vira-grey-foreground-non-body" | "vira-grey-foreground-header" | "vira-grey-foreground-placeholder" | "vira-grey-foreground-decoration" | "vira-grey-foreground-invisible" | "vira-grey-foreground-lowest-contrast" | "vira-grey-behind-bg-highest-contrast" | "vira-grey-behind-bg-small-body" | "vira-grey-behind-bg-body" | "vira-grey-behind-bg-non-body" | "vira-grey-behind-bg-header" | "vira-grey-behind-bg-placeholder" | "vira-grey-behind-bg-decoration" | "vira-grey-behind-bg-invisible" | "vira-grey-behind-bg-lowest-contrast" | "vira-grey-behind-fg-highest-contrast" | "vira-grey-behind-fg-small-body" | "vira-grey-behind-fg-body" | "vira-grey-behind-fg-non-body" | "vira-grey-behind-fg-header" | "vira-grey-behind-fg-placeholder" | "vira-grey-behind-fg-decoration" | "vira-grey-behind-fg-invisible" | "vira-grey-behind-fg-lowest-contrast" | "vira-grey-on-self-highest-contrast" | "vira-grey-on-self-small-body" | "vira-grey-on-self-body" | "vira-grey-on-self-non-body" | "vira-grey-on-self-header" | "vira-grey-on-self-placeholder" | "vira-grey-on-self-decoration" | "vira-grey-on-self-invisible" | "vira-grey-on-self-lowest-contrast" | "theme-default")[];
 /**
  * All {@link viraTheme} color pair keys with the contrast level suffix removed.
  *

package/dist/styles/vira-color-theme.d.ts

@@ -2,6 +2,10 @@
  * A color theme designed for straightforward accessible foreground and background color choices.
  * All color pairs can be seen here: https://electrovir.github.io/vira/book/styles/vira-theme.
  *
+ * Consider using [`colorCss` from
+ * @electrovir/color](https://electrovir.github.io/color/docs/functions/colorCss.html) for applying
+ * a foreground and background color at the same time in CSS.
+ *
  * ## Color Pairs
  *
  * Each color choice is stored in a color pair. Each color pair includes a foreground and a
@@ -47,10 +51,10 @@
  *         - Example: `viraTheme.colors['vira-blue-foreground-body']`
  *    - `behind-fg`: "Color behind foreground". In this color pair, the chosen color is the background
  *         and the page default foreground (black in light mode, white in dark mode) is the
- *         background. The lightness level of the background, the chosen color, varies based on the
+ *         foreground. The lightness level of the background, the chosen color, varies based on the
  *         selected contrast level (in the next step).
  *
- *         - Foreground: the page default background (black in light mode, white in dark mode).
+ *         - Foreground: the page default foreground (black in light mode, white in dark mode).
  *         - Background: the chosen color (red, blue, etc.)
  *         - Example: `viraTheme.colors['vira-red-behind-fg-body']`
  *         - Example: `viraTheme.colors['vira-blue-behind-fg-body']`
@@ -74,18 +78,14 @@
  *         - Example: `viraTheme.colors['vira-red-on-self-body']`
  *         - Example: `viraTheme.colors['vira-blue-on-self-body']`
  * 3. **Choose a contrast level.** Choose a level of contrast based on what you are applying color to.
- *    In general, the `header` level of contrast gives a color shade that is not considered "light"
- *    or "dark". Any contrast level intended for smaller text elements (non-body, body, small-body)
- *    is a darker variant of that color. Any contrast level allowed on larger text elements
- *    (placeholder, decoration, invisible) is a lighter variant of that color. Also see
- *    https://electrovir.github.io/color/docs/variables/contrastLevels.html for more details on each
- *    contrast level.
+ *    See https://electrovir.github.io/color/docs/variables/contrastLevels.html for more details on
+ *    each contrast level as defined by APCA color contrast standards.
  *
  *    - `small-body`: Choose this for text or page elements that should be legible but are small in size
  *         (< 14px font size, similarly sized icons, etc.).
  *
- *         - The color pair is chosen to ensure about Lc 90 contrast between the foreground and the
- *                   background.
+ *         - The color pair is chosen to ensure about Lc 90 contrast (very high) between the foreground and
+ *                   the background.
  *         - Example: `viraTheme.colors['vira-red-foreground-small-body']`: In light mode, this has a very
  *                   dark red foreground.
  *         - Example: `viraTheme.colors['vira-blue-on-self-small-body']`: In light mode, a very light blue is
@@ -101,15 +101,15 @@
  *                   used (but darker than the small-body contrast level). (The foreground is a very
  *                   dark blue.)
  *    - `non-body`: Chose this for text or page elements that should be legible but are larger in size
- *         (>= 24px font size with normal font weight).
+ *         (>= 24px font size with normal font weight) or are not a part of normal body text.
  *
  *         - The color pair is chosen to ensure about Lc 60 contrast between the foreground and the
  *                   background.
  *         - Example: `viraTheme.colors['vira-red-foreground-non-body']`: In light mode, this has slightly
  *                   dark red foreground.
  *         - Example: `viraTheme.colors['vira-blue-on-self-non-body']`: In light mode, a light blue background
- *                   is used (but darker than the small-body contrast level). (The foreground is a
- *                   very dark blue.)
+ *                   is used (but darker than the body contrast level). (The foreground is a very
+ *                   dark blue.)
  *    - `header`: Chose this for text or page elements that are heading or heading sized elements (>=24px
  *         bolded text or >=36px normal weight text).
  *
@@ -117,8 +117,8 @@
  *                   background.
  *         - Example: `viraTheme.colors['vira-red-foreground-header']`: In light mode, this has a very vibrant
  *                   red foreground.
- *         - Example: `viraTheme.colors['vira-blue-on-self-header']`: In light mode, a plain blue (not very
- *                   dark or light) background is used.
+ *         - Example: `viraTheme.colors['vira-blue-on-self-header']`: In light mode, a plain blue (not dark or
+ *                   light) background is used. (The foreground is a very dark blue.)
  *    - `placeholder`: Chose this for text or page elements that are placeholders or disabled.
  *
  *         - The color pair is chosen to ensure about Lc 30 contrast between the foreground and the
@@ -162,20 +162,22 @@
  *
  * To style an error message (red body text):
  *
- * ```ts
- * viraTheme.colors['vira-red-foreground-body'].foreground.value;
+ * ```css
+ * color: ${viraTheme.colors['vira-red-foreground-body'].foreground.value};
  * ```
  *
- * To style a green banner with white text:
+ * To style a green banner with white text (in light mode) and black text (in dark mode):
  *
- * ```ts
- * viraTheme.colors['vira-green-behind-bg-body'].background.value;
+ * ```css
+ * .banner {
+ *     ${colorCss(viraTheme.colors['vira-green-behind-bg-body'])};
+ * }
  * ```
  *
  * `viraThemeByKeys` for structured access:
  *
- * ```ts
- * viraThemeByKeys.red.foreground.body;
+ * ```css
+ * color: ${viraThemeByKeys.red.foreground.body.foreground.value};
  * ```
  *
  * @category Color
@@ -901,150 +903,6 @@ export declare const viraTheme: import("theme-vir/dist/color-theme/color-theme.j
         readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
         readonly background: import("lit-css-vars").SingleCssVarDefinition;
     };
-    readonly 'vira-accent-foreground-highest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-small-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-non-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-header': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-placeholder': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-decoration': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-invisible': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-lowest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-highest-contrast': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-small-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-non-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-header': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-placeholder': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-decoration': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-invisible': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-lowest-contrast': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-highest-contrast': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-small-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-non-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-header': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-placeholder': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-decoration': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-invisible': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-lowest-contrast': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-highest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-small-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-non-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-header': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-placeholder': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-decoration': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-invisible': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-lowest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
     readonly 'vira-purple-foreground-highest-contrast': {
         readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
     };
@@ -2204,150 +2062,6 @@ export declare const viraThemeDarkOverride: import("theme-vir").ColorThemeOverri
         readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
         readonly background: import("lit-css-vars").SingleCssVarDefinition;
     };
-    readonly 'vira-accent-foreground-highest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-small-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-non-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-header': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-placeholder': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-decoration': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-invisible': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-foreground-lowest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-highest-contrast': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-small-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-non-body': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-header': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-placeholder': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-decoration': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-invisible': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-bg-lowest-contrast': {
-        readonly foreground: {
-            readonly refDefaultBackground: true;
-        };
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-highest-contrast': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-small-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-non-body': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-header': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-placeholder': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-decoration': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-invisible': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-behind-fg-lowest-contrast': {
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-highest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-small-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-non-body': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-header': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-placeholder': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-decoration': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-invisible': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
-    readonly 'vira-accent-on-self-lowest-contrast': {
-        readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
-        readonly background: import("lit-css-vars").SingleCssVarDefinition;
-    };
     readonly 'vira-purple-foreground-highest-contrast': {
         readonly foreground: import("lit-css-vars").SingleCssVarDefinition;
     };