vira 31.15.1 → 31.16.0

package/dist/elements/vira-button.element.d.ts

@@ -1,6 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/index.js';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/index.js';
+import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 /**
  * A custom button with default styling.
  *
@@ -27,16 +28,17 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      */
     buttonSize: ViraSize;
     /**
-     * Set a predefined color variant. Set to `ViraColorVariant.None` for maximum customization.
+     * Set a predefined color variant or a raw {@link ViraThemeColorName} (e.g.,
+     * `ViraThemeColorName.blue`). Set to `ViraColorVariant.Custom` for maximum customization.
      * In that case, you will need to use this element's CSS vars to customize the colors.
      *
-     * @default ViraColorVariant.Info,
+     * @default ViraColorVariant.Plain
      */
-    colorVariant: ViraColorVariant;
+    color: ViraColorVariant | ViraThemeColorName;
     /**
      * Set to `true`
      *
      * @default false
      */
     showMenuCaret: boolean;
-}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-info" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-danger" | "vira-button-color-warning" | "vira-button-color-positive" | "vira-button-color-brand" | "vira-button-color-special" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;
+}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;

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

@@ -1,21 +1,20 @@
-import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
+import { arrayToObject, getObjectTypedKeys } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { css, html, nothing, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { ChevronDown16Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraColorVariants, viraColorVariantToColorName, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
+import { standaloneThemeColorNames, viraColorVariantToHostClassKey, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
 import { noUserSelect, ViraColorVariant, ViraEmphasis, ViraSize, viraTheme, } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
-import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
 const transparentColor = {
     value: css `transparent`,
 };
-function buildThemedButtonColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedButtonColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const foreground = viraThemeByKeys[colorName].foreground;
     const onSelf = viraThemeByKeys[colorName]['on-self'];
@@ -56,66 +55,61 @@ function buildThemedButtonColors(colorVariant) {
         },
     };
 }
-const colorVariantColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedButtonColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.inverse[themeDefaultKey].background,
-                textColor: viraTheme.inverse[themeDefaultKey].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
+const plainButtonColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.inverse[themeDefaultKey].background,
+            textColor: viraTheme.inverse[themeDefaultKey].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
         },
-        [ViraEmphasis.Subtle]: {
-            idle: {
-                backgroundColor: transparentColor,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: transparentColor,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
-                textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
-                textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
-            },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
         },
     },
-    [ViraColorVariant.Neutral]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].background,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
+    [ViraEmphasis.Subtle]: {
+        idle: {
+            backgroundColor: transparentColor,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: transparentColor,
+        },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
+            textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
+        },
+    },
+};
+const neutralButtonColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].background,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
+        },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
         },
-        [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraColorVariant.Neutral)[ViraEmphasis.Subtle],
     },
+    [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraThemeColorName.grey)[ViraEmphasis.Subtle],
 };
 /**
  * A custom button with default styling.
@@ -133,13 +127,24 @@ export const ViraButton = defineViraElement()({
         'vira-button-size-small': ({ inputs }) => inputs.buttonSize === ViraSize.Small,
         'vira-button-emphasis-standard': ({ inputs }) => !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard,
         'vira-button-emphasis-subtle': ({ inputs }) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
-                key: `vira-button-color-${colorVariant}`,
+                key: `vira-button-color-${colorKey}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-button-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-button-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-button-color-${colorName}`,
+                value: ({ inputs, }) => {
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -165,37 +170,52 @@ export const ViraButton = defineViraElement()({
         'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
     styles: ({ hostClasses, cssVars }) => {
-        function generateVariantCss() {
-            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
-                return viraColorVariants.map((colorVariant) => {
-                    const colors = colorVariantColors[colorVariant][emphasis];
-                    const variantSelector = hostClasses[`vira-button-color-${colorVariant}`].selector;
-                    const emphasisSelector = hostClasses[`vira-button-emphasis-${emphasis}`].selector;
-                    return css `
-                        ${variantSelector}${emphasisSelector} {
-                            ${cssVars['vira-button-background-color'].name}: ${colors.idle
-                        .backgroundColor.value};
-                            ${cssVars['vira-button-text-color'].name}: ${colors.idle.textColor
-                        .value};
-                            ${cssVars['vira-button-border-color'].name}: ${colors.idle.borderColor
-                        .value};
+        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+            return css `
+                ${variantSelector}${emphasisSelector} {
+                    ${cssVars['vira-button-background-color'].name}: ${colors.idle.backgroundColor
+                .value};
+                    ${cssVars['vira-button-text-color'].name}: ${colors.idle.textColor.value};
+                    ${cssVars['vira-button-border-color'].name}: ${colors.idle.borderColor.value};
 
-                            ${cssVars['vira-button-hover-background-color'].name}: ${colors.hover
-                        .backgroundColor.value};
-                            ${cssVars['vira-button-hover-text-color'].name}: ${colors.hover
-                        .textColor.value};
-                            ${cssVars['vira-button-hover-border-color'].name}: ${colors.hover
-                        .borderColor.value};
+                    ${cssVars['vira-button-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-button-hover-text-color'].name}: ${colors.hover.textColor
+                .value};
+                    ${cssVars['vira-button-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                            ${cssVars['vira-button-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
-                            ${cssVars['vira-button-active-text-color'].name}: ${colors.active
-                        .textColor.value};
-                            ${cssVars['vira-button-active-border-color'].name}: ${colors.active
-                        .borderColor.value};
-                        }
-                    `;
+                    ${cssVars['vira-button-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-button-active-text-color'].name}: ${colors.active.textColor
+                .value};
+                    ${cssVars['vira-button-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        function generateVariantCss() {
+            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
+                const emphasisSelector = hostClasses[`vira-button-emphasis-${emphasis}`].selector;
+                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                    const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                    const colors = buildThemedButtonColors(colorKey)[emphasis];
+                    const variantSelector = hostClasses[`vira-button-color-${colorKey}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                });
+                const plainStyle = buildVariantCssRule(hostClasses['vira-button-color-plain'].selector, emphasisSelector, plainButtonColors[emphasis]);
+                const neutralStyle = buildVariantCssRule(hostClasses['vira-button-color-neutral'].selector, emphasisSelector, neutralButtonColors[emphasis]);
+                const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                    const colors = buildThemedButtonColors(colorName)[emphasis];
+                    const variantSelector = hostClasses[`vira-button-color-${colorName}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
                 });
+                return [
+                    ...themedStyles,
+                    plainStyle,
+                    neutralStyle,
+                    ...standaloneStyles,
+                ];
             });
             return unsafeCSS(allStyles.join('\n'));
         }

package/dist/elements/vira-tabs.element.d.ts

@@ -2,6 +2,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
 import { type FullSpaRoute, type GenericTreePaths, type SpaRouter } from 'spa-router-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { ViraColorVariant } from '../styles/form-variants.js';
+import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { type HorizontalAnchor, type PopUpOffset } from './pop-up/vira-pop-up-trigger.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
@@ -55,11 +56,13 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
      */
     barDirection: ViraTabsBarDirection;
     /**
-     * Color variant for the tab selection indicator and active tab text.
+     * Color variant for the tab selection indicator and active tab text. Accepts any
+     * {@link ViraColorVariant} or a {@link ViraThemeColorName} (e.g.,
+     * `ViraThemeColorName.blue`).
      *
-     * @default ViraColorVariant.Info
+     * @default ViraColorVariant.Plain
      */
-    colorVariant: ViraColorVariant;
+    color: ViraColorVariant | ViraThemeColorName;
     /**
      * Layout direction for icons relative to their label text.
      *
@@ -85,4 +88,4 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
 }, {
     /** Fires when a tab is clicked with the corresponding tab entry. */
     tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
-}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-info" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-danger" | "vira-tabs-color-warning" | "vira-tabs-color-positive" | "vira-tabs-color-brand" | "vira-tabs-color-special" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
+}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;

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

@@ -1,13 +1,13 @@
 import { check } from '@augment-vir/assert';
-import { arrayToObject, filterMap } from '@augment-vir/common';
+import { arrayToObject, filterMap, getObjectTypedKeys, } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
 import { routeHasPaths, } from 'spa-router-vir';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { ViraColorVariant, viraColorVariantToColorName, viraColorVariants, } from '../styles/form-variants.js';
+import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClassKey, } from '../styles/form-variants.js';
 import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from '../styles/index.js';
-import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { createOverflowObserver } from '../util/overflow-observer.js';
 import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
@@ -63,13 +63,24 @@ export const ViraTabs = defineViraElement()({
         'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
         'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
         'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
-                key: `vira-tabs-color-${colorVariant}`,
+                key: `vira-tabs-color-${colorKey}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-tabs-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-tabs-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-tabs-color-${colorName}`,
+                value: ({ inputs, }) => {
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -81,36 +92,52 @@ export const ViraTabs = defineViraElement()({
         'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
     },
     cssVars: {
-        'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
-        'vira-tabs-active-hover-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.Header].background.value,
+        'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToHostClassKey[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
+        'vira-tabs-active-hover-color': viraThemeByKeys[viraColorVariantToHostClassKey[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.Header].background.value,
         'vira-tabs-inactive-color': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
         'vira-tabs-inactive-hover-color': viraTheme.colors['vira-grey-foreground-non-body'].foreground.value,
         'vira-tabs-bar-thickness': '3px',
     },
     styles: ({ hostClasses, cssVars }) => {
+        function buildThemedTabsColors(colorName) {
+            return {
+                active: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.NonBodyText]
+                    .background,
+                hover: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Header].background,
+            };
+        }
+        function buildVariantCssRule(variantSelector, colors) {
+            return css `
+                ${variantSelector} {
+                    ${cssVars['vira-tabs-active-color'].name}: ${colors.active.value};
+                    ${cssVars['vira-tabs-active-hover-color'].name}: ${colors.hover.value};
+                }
+            `;
+        }
         function generateVariantCss() {
             const plainColors = {
                 active: viraTheme.colors['vira-grey-foreground-small-body'].foreground,
                 hover: viraTheme.colors['vira-grey-foreground-body'].foreground,
             };
-            const allStyles = viraColorVariants
-                .map((colorVariant) => {
-                const variantSelector = hostClasses[`vira-tabs-color-${colorVariant}`].selector;
-                const colors = colorVariant === ViraColorVariant.Plain
-                    ? plainColors
-                    : {
-                        active: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.NonBodyText].background,
-                        hover: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.Header].background,
-                    };
-                return css `
-                        ${variantSelector} {
-                            ${cssVars['vira-tabs-active-color'].name}: ${colors.active.value};
-                            ${cssVars['vira-tabs-active-hover-color'].name}: ${colors.hover.value};
-                        }
-                    `;
-            })
-                .join('\n');
-            return unsafeCSS(allStyles);
+            const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                const variantSelector = hostClasses[`vira-tabs-color-${colorKey}`].selector;
+                const colors = buildThemedTabsColors(colorKey);
+                return buildVariantCssRule(variantSelector, colors);
+            });
+            const plainStyle = buildVariantCssRule(hostClasses['vira-tabs-color-plain'].selector, plainColors);
+            const neutralStyle = buildVariantCssRule(hostClasses['vira-tabs-color-neutral'].selector, buildThemedTabsColors(ViraThemeColorName.grey));
+            const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                const variantSelector = hostClasses[`vira-tabs-color-${colorName}`].selector;
+                const colors = buildThemedTabsColors(colorName);
+                return buildVariantCssRule(variantSelector, colors);
+            });
+            return unsafeCSS([
+                ...themedStyles,
+                plainStyle,
+                neutralStyle,
+                ...standaloneStyles,
+            ].join('\n'));
         }
         return css `
             :host {
@@ -406,7 +433,7 @@ export const ViraTabs = defineViraElement()({
                 <${ViraButton.assign({
             text: selectedTab?.label || '',
             showMenuCaret: true,
-            colorVariant: ViraColorVariant.Neutral,
+            color: ViraColorVariant.Neutral,
         })}
                     slot=${ViraMenuTrigger.slotNames.trigger}
                 ></${ViraButton}>

package/dist/elements/vira-tag.element.d.ts

@@ -1,6 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type Primitive, type RequireExactlyOne } from 'type-fest';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
+import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 /**
  * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
  * selectable, and cancellable variations.
@@ -26,10 +27,15 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
     size: ViraSize;
     /** @default ViraEmphasis.Standard */
     emphasis: ViraEmphasis;
-    /** @default ViraColorVariant.Info */
-    colorVariant: ViraColorVariant;
+    /**
+     * Color scheme. Accepts any {@link ViraColorVariant} or a {@link ViraThemeColorName} (e.g.,
+     * `ViraThemeColorName.blue`).
+     *
+     * @default ViraColorVariant.Plain
+     */
+    color: ViraColorVariant | ViraThemeColorName;
     disabled: boolean;
 }>, {}, {
     toggle: import("element-vir").DefineEvent<boolean>;
     cancel: import("element-vir").DefineEvent<void>;
-}, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-info" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive" | "vira-tag-color-brand" | "vira-tag-color-special", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;
+}, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-red" | "vira-tag-color-yellow" | "vira-tag-color-green" | "vira-tag-color-blue" | "vira-tag-color-brand" | "vira-tag-color-purple" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-teal" | "vira-tag-color-pink" | "vira-tag-color-grey", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;

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

@@ -1,23 +1,22 @@
 import { check } from '@augment-vir/assert';
-import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
+import { arrayToObject, getObjectTypedKeys } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { Check16Icon } from '../icons/icon-svgs/16/check-16.icon.js';
 import { X16Icon } from '../icons/icon-svgs/16/x-16.icon.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { ViraColorVariant, viraColorVariants, viraColorVariantToColorName, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
+import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClassKey, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { noUserSelect } from '../styles/user-select.js';
-import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
 const transparentColor = {
     value: css `transparent`,
 };
-function buildThemedTagColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedTagColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const onSelf = viraThemeByKeys[colorName]['on-self'];
     return {
@@ -57,8 +56,7 @@ function buildThemedTagColors(colorVariant) {
         },
     };
 }
-function buildThemedNotCheckedColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedNotCheckedColors(colorName) {
     const onSelfBodyText = viraThemeByKeys[colorName]['on-self'][ContrastLevelName.BodyText];
     return {
         idle: {
@@ -78,69 +76,59 @@ function buildThemedNotCheckedColors(colorVariant) {
         },
     };
 }
-const tagColorVariantColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedTagColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
-                textColor: viraTheme.colors[themeDefaultKey].background,
-                borderColor: viraTheme.colors[themeDefaultKey].foreground,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
-                textColor: viraTheme.colors[themeDefaultKey].background,
-                borderColor: viraTheme.colors[themeDefaultKey].foreground,
-            },
+const plainTagColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+            textColor: viraTheme.colors[themeDefaultKey].background,
+            borderColor: viraTheme.colors[themeDefaultKey].foreground,
         },
-        [ViraEmphasis.Subtle]: {
-            idle: {
-                backgroundColor: transparentColor,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: transparentColor,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-            },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+        },
+        active: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+            textColor: viraTheme.colors[themeDefaultKey].background,
+            borderColor: viraTheme.colors[themeDefaultKey].foreground,
         },
     },
-};
-const tagNotCheckedColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedNotCheckedColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
+    [ViraEmphasis.Subtle]: {
         idle: {
-            textColor: viraTheme.colors[themeDefaultKey].foreground,
             backgroundColor: transparentColor,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: transparentColor,
         },
         hover: {
             backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
             textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
         },
         active: {
             backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
             textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
         },
     },
 };
+const plainNotCheckedColors = {
+    idle: {
+        textColor: viraTheme.colors[themeDefaultKey].foreground,
+        backgroundColor: transparentColor,
+        borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+    },
+    hover: {
+        backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
+        textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
+        borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+    },
+    active: {
+        backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
+        textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
+        borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+    },
+};
 /**
  * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
  * selectable, and cancellable variations.
@@ -184,13 +172,24 @@ export const ViraTag = defineViraElement()({
         'vira-tag-size-small': ({ inputs }) => inputs.size === ViraSize.Small,
         'vira-tag-emphasis-standard': ({ inputs }) => !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard,
         'vira-tag-emphasis-subtle': ({ inputs }) => inputs.emphasis === ViraEmphasis.Subtle,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
+            return {
+                key: `vira-tag-color-${colorKey}`,
+                value: ({ inputs, }) => {
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-tag-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-tag-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
             return {
-                key: `vira-tag-color-${colorVariant}`,
+                key: `vira-tag-color-${colorName}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -198,68 +197,96 @@ export const ViraTag = defineViraElement()({
         }),
     },
     styles: ({ cssVars, hostClasses }) => {
-        function generateVariantCss() {
-            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
-                return viraColorVariants.map((colorVariant) => {
-                    const colors = tagColorVariantColors[colorVariant][emphasis];
-                    const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
-                    const emphasisSelector = hostClasses[`vira-tag-emphasis-${emphasis}`].selector;
-                    return css `
-                        ${variantSelector}${emphasisSelector} {
-                            ${cssVars['vira-tag-background-color'].name}: ${colors.idle
-                        .backgroundColor.value};
-                            ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
-                            ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor
-                        .value};
+        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+            return css `
+                ${variantSelector}${emphasisSelector} {
+                    ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
+                .value};
+                    ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
+                    ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
 
-                            ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
-                        .backgroundColor.value};
-                            ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
-                        .value};
-                            ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover
-                        .borderColor.value};
+                    ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
+                    ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                            ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
-                            ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
-                        .value};
-                            ${cssVars['vira-tag-active-border-color'].name}: ${colors.active
-                        .borderColor.value};
-                        }
-                    `;
+                    ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
+                    ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        function generateVariantCss() {
+            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
+                const emphasisSelector = hostClasses[`vira-tag-emphasis-${emphasis}`].selector;
+                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                    const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                    const colors = buildThemedTagColors(colorKey)[emphasis];
+                    const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                });
+                const plainStyle = buildVariantCssRule(hostClasses['vira-tag-color-plain'].selector, emphasisSelector, plainTagColors[emphasis]);
+                const neutralStyle = buildVariantCssRule(hostClasses['vira-tag-color-neutral'].selector, emphasisSelector, buildThemedTagColors(ViraThemeColorName.grey)[emphasis]);
+                const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                    const colors = buildThemedTagColors(colorName)[emphasis];
+                    const variantSelector = hostClasses[`vira-tag-color-${colorName}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
                 });
+                return [
+                    ...themedStyles,
+                    plainStyle,
+                    neutralStyle,
+                    ...standaloneStyles,
+                ];
             });
             return unsafeCSS(allStyles.join('\n'));
         }
-        function generateNotCheckedCss() {
-            const allStyles = viraColorVariants.map((colorVariant) => {
-                const colors = tagNotCheckedColors[colorVariant];
-                const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
-                const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
-                return css `
-                    ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
-                        ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
-                    .value};
-                        ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
-                        ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
+        function buildNotCheckedCssRule(variantSelector, colors) {
+            const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
+            return css `
+                ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
+                    ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
+                .value};
+                    ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
+                    ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
 
-                        ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
-                    .backgroundColor.value};
-                        ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
-                    .value};
-                        ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
-                    .value};
+                    ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
+                    ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                        ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                    .backgroundColor.value};
-                        ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
-                    .value};
-                        ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
-                    .value};
-                    }
-                `;
+                    ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
+                    ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        function generateNotCheckedCss() {
+            const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                const colors = buildThemedNotCheckedColors(colorKey);
+                const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
+                return buildNotCheckedCssRule(variantSelector, colors);
             });
-            return unsafeCSS(allStyles.join('\n'));
+            const plainStyle = buildNotCheckedCssRule(hostClasses['vira-tag-color-plain'].selector, plainNotCheckedColors);
+            const neutralStyle = buildNotCheckedCssRule(hostClasses['vira-tag-color-neutral'].selector, buildThemedNotCheckedColors(ViraThemeColorName.grey));
+            const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                const colors = buildThemedNotCheckedColors(colorName);
+                const variantSelector = hostClasses[`vira-tag-color-${colorName}`].selector;
+                return buildNotCheckedCssRule(variantSelector, colors);
+            });
+            return unsafeCSS([
+                ...themedStyles,
+                plainStyle,
+                neutralStyle,
+                ...standaloneStyles,
+            ].join('\n'));
         }
         function generateSizeVariantCss() {
             const styles = viraSizeVariants.map((sizeVariant) => {

package/dist/styles/form-styles.js

@@ -17,9 +17,9 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
     'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
     'vira-form-secondary-body-foreground': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
-    'vira-form-text-selection-color': viraTheme.colors['vira-blue-behind-bg-decoration'].background.value,
-    'vira-form-selection-hover-color': viraTheme.colors['vira-blue-behind-bg-invisible'].background.value,
-    'vira-form-selection-active-color': viraTheme.colors['vira-blue-behind-bg-decoration'].background.value,
+    'vira-form-text-selection-color': viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
+    'vira-form-selection-hover-color': viraTheme.colors['vira-brand-behind-bg-invisible'].background.value,
+    'vira-form-selection-active-color': viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
     'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
     'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
     'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
@@ -36,14 +36,14 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-large-text-size': '22px',
     'vira-form-radius': defaultViraFormRadius,
     'vira-form-wrapper-radius': '16px',
-    'vira-form-focus-outline-color': viraTheme.colors['vira-blue-foreground-header'].foreground.value,
+    'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,
     'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
     'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
     'vira-form-plain-hover-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
     'vira-form-plain-active-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
-    'vira-form-accent-primary-color': viraTheme.colors['vira-blue-behind-bg-non-body'].background.value,
-    'vira-form-accent-primary-hover-color': viraTheme.colors['vira-blue-behind-bg-header'].background.value,
-    'vira-form-accent-primary-active-color': viraTheme.colors['vira-blue-behind-bg-body'].background.value,
+    'vira-form-accent-primary-color': viraTheme.colors['vira-brand-behind-bg-non-body'].background.value,
+    'vira-form-accent-primary-hover-color': viraTheme.colors['vira-brand-behind-bg-header'].background.value,
+    'vira-form-accent-primary-active-color': viraTheme.colors['vira-brand-behind-bg-body'].background.value,
     'vira-form-danger-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
     'vira-form-danger-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
     'vira-form-danger-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,

package/dist/styles/form-variants.d.ts

@@ -1,17 +1,16 @@
-import { ViraThemeColorName } from './vira-color-theme-object.js';
 /**
  * All available variants for controlling vira form colors.
  *
  * @category Internal
  */
 export declare enum ViraColorVariant {
+    /** @default blue colored */
+    Info = "info",
     /**
-     * This is the default.
+     * Applied when no `color` input is set on a color-aware element.
      *
-     * @default blue colored
+     * @default black colored
      */
-    Info = "info",
-    /** @default black colored */
     Plain = "plain",
     /** @default grey colored */
     Neutral = "neutral",
@@ -26,24 +25,41 @@ export declare enum ViraColorVariant {
     /** @default purple colored */
     Special = "special",
     /**
-     * No color variant styles will be applied at all. All related CSS vars are free to customize to
-     * your wishes.
+     * No color variant styles will be applied at all, allowing the element's colors to be fully
+     * customized via its CSS vars.
      */
-    None = "none"
+    Custom = "custom"
 }
 /**
- * Maps {@link ViraColorVariant} values that support colors to their respective vira theme color
- * keys.
+ * All defined color variants starting with the default.
+ *
+ * @category Internal
+ */
+export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Brand, ViraColorVariant.Special];
+/**
+ * Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
+ * class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
+ * intentionally omitted: they are always special-cased by each element so their host classes stay
+ * distinct from any theme color class (including `grey`).
  *
  * @category Internal
  */
-export declare const viraColorVariantToColorName: Record<ViraColorVariant, ViraThemeColorName>;
+export declare const viraColorVariantToHostClassKey: {
+    readonly info: "blue";
+    readonly danger: "red";
+    readonly warning: "yellow";
+    readonly positive: "green";
+    readonly brand: "brand";
+    readonly special: "purple";
+};
 /**
- * All defined color variants starting with the default.
+ * {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
+ * {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
+ * each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
  *
  * @category Internal
  */
-export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Brand, ViraColorVariant.Special];
+export declare const standaloneThemeColorNames: ("red" | "yellow" | "green" | "teal" | "blue" | "brand" | "purple" | "pink" | "grey")[];
 /**
  * All available variants for controlling vira form sizes.
  *

package/dist/styles/form-variants.js

@@ -1,3 +1,5 @@
+import { check } from '@augment-vir/assert';
+import { getObjectTypedValues } from '@augment-vir/common';
 import { ViraThemeColorName } from './vira-color-theme-object.js';
 /**
  * All available variants for controlling vira form colors.
@@ -6,13 +8,13 @@ import { ViraThemeColorName } from './vira-color-theme-object.js';
  */
 export var ViraColorVariant;
 (function (ViraColorVariant) {
+    /** @default blue colored */
+    ViraColorVariant["Info"] = "info";
     /**
-     * This is the default.
+     * Applied when no `color` input is set on a color-aware element.
      *
-     * @default blue colored
+     * @default black colored
      */
-    ViraColorVariant["Info"] = "info";
-    /** @default black colored */
     ViraColorVariant["Plain"] = "plain";
     /** @default grey colored */
     ViraColorVariant["Neutral"] = "neutral";
@@ -27,28 +29,11 @@ export var ViraColorVariant;
     /** @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.
+     * No color variant styles will be applied at all, allowing the element's colors to be fully
+     * customized via its CSS vars.
      */
-    ViraColorVariant["None"] = "none";
+    ViraColorVariant["Custom"] = "custom";
 })(ViraColorVariant || (ViraColorVariant = {}));
-/**
- * Maps {@link ViraColorVariant} values that support colors to their respective vira theme color
- * keys.
- *
- * @category Internal
- */
-export const viraColorVariantToColorName = {
-    [ViraColorVariant.Info]: ViraThemeColorName.blue,
-    [ViraColorVariant.Neutral]: ViraThemeColorName.grey,
-    [ViraColorVariant.Danger]: ViraThemeColorName.red,
-    [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
-    [ViraColorVariant.Positive]: ViraThemeColorName.green,
-    [ViraColorVariant.Brand]: ViraThemeColorName.brand,
-    [ViraColorVariant.Special]: ViraThemeColorName.purple,
-    [ViraColorVariant.Plain]: ViraThemeColorName.grey,
-    [ViraColorVariant.None]: ViraThemeColorName.grey,
-};
 /**
  * All defined color variants starting with the default.
  *
@@ -64,6 +49,30 @@ export const viraColorVariants = [
     ViraColorVariant.Brand,
     ViraColorVariant.Special,
 ];
+/**
+ * Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
+ * class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
+ * intentionally omitted: they are always special-cased by each element so their host classes stay
+ * distinct from any theme color class (including `grey`).
+ *
+ * @category Internal
+ */
+export const viraColorVariantToHostClassKey = {
+    [ViraColorVariant.Info]: ViraThemeColorName.blue,
+    [ViraColorVariant.Danger]: ViraThemeColorName.red,
+    [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
+    [ViraColorVariant.Positive]: ViraThemeColorName.green,
+    [ViraColorVariant.Brand]: ViraThemeColorName.brand,
+    [ViraColorVariant.Special]: ViraThemeColorName.purple,
+};
+/**
+ * {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
+ * {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
+ * each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
+ *
+ * @category Internal
+ */
+export const standaloneThemeColorNames = getObjectTypedValues(ViraThemeColorName).filter((colorName) => !check.hasValue(getObjectTypedValues(viraColorVariantToHostClassKey), colorName));
 /**
  * All available variants for controlling vira form sizes.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.15.1",
+    "version": "31.16.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",