vira 31.12.0 → 31.13.1

package/dist/elements/vira-button.element.js

@@ -415,6 +415,12 @@ export const ViraButton = defineViraElement()({
                     background-color: ${cssVars['vira-button-disabled-background-color'].value};
                     border-color: ${cssVars['vira-button-disabled-border-color'].value};
                 }
+
+                &${hostClasses['vira-button-emphasis-subtle'].selector} button {
+                    color: ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
+                    background-color: transparent;
+                    border-color: transparent;
+                }
             }
 
             ${hostClasses['vira-button-icon-only'].selector} {

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

@@ -10,6 +10,8 @@ import { viraTheme } from './vira-color-theme.js';
  * @category Internal
  */
 export type SortedContrastLevelName = [
+    'highest-contrast',
+    'lowest-contrast',
     ...UnionToTuple<Extract<ContrastLevelName, `${string}-${string}`>>,
     ...UnionToTuple<Exclude<ContrastLevelName, `${string}-${string}`>>
 ];
@@ -36,7 +38,7 @@ export type AllViraThemeKeys = keyof typeof viraTheme.colors;
  *
  * @category Internal
  */
-export declare const allViraThemeKeys: ("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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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" | "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-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")[];
 /**
  * All {@link viraTheme} color pair keys with the contrast level suffix removed.
  *

package/dist/styles/vira-color-theme-object.js

@@ -2,7 +2,11 @@ import { check } from '@augment-vir/assert';
 import { arrayToObject, filterMap, getEnumValues, getObjectTypedKeys, mapEnumToObject, removeDuplicates, removePrefix, removeSuffix, } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { viraTheme } from './vira-color-theme.js';
-const sortedContrastLevelNames = getEnumValues(ContrastLevelName).sort((a, b) => Number(b.includes('-')) - Number(a.includes('-')));
+const sortedContrastLevelNames = [
+    'highest-contrast',
+    'lowest-contrast',
+    ...getEnumValues(ContrastLevelName).sort((a, b) => Number(b.includes('-')) - Number(a.includes('-'))),
+];
 const viraThemeColorNames = removeDuplicates(filterMap(Object.keys(viraTheme.colors), (key) => key.split('-')[1], (mappedKey) => mappedKey !== 'default')).filter(check.isTruthy);
 /**
  * An enum of {@link ViraThemeColorName}.
@@ -45,7 +49,7 @@ export const viraThemeByKeys = mapEnumToObject(ViraThemeColorName, (colorName) =
     return arrayToObject(colorPairKeys, (colorPairKey) => {
         return {
             key: colorPairKey,
-            value: arrayToObject(getEnumValues(ContrastLevelName), (contrastLevel) => {
+            value: arrayToObject(sortedContrastLevelNames, (contrastLevel) => {
                 const finalKey = `vira-${colorName}-${colorPairKey}-${contrastLevel}`;
                 if (!check.hasKey(viraTheme.colors, finalKey)) {
                     return undefined;