vira 28.19.7 → 29.1.0

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

@@ -2,6 +2,7 @@ import { assertWrap } from '@augment-vir/assert';
 import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
 import { listenToGlobal } from 'typed-event-target';
 import { X24Icon } from '../icons/icon-svgs/x-24.icon.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
 import { viraShadows } from '../styles/shadows.js';
 import { defineViraElement } from './define-vira-element.js';
@@ -39,11 +40,7 @@ export const ViraModal = defineViraElement()({
     },
     slotNames: ['modalTitle'],
     cssVars: {
-        'vira-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
         'vira-modal-backdrop-filter': 'blur(3px)',
-        'vira-modal-subtitle-color': '#7E7E7E',
-        'vira-modal-close-button-hover-radius': '8px',
-        'vira-modal-close-button-hover-background-color': '#E4E4E4',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
@@ -72,7 +69,7 @@ export const ViraModal = defineViraElement()({
                 display: flex;
             }
             &::backdrop {
-                background: ${cssVars['vira-modal-backdrop-color'].value};
+                background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
                 backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
             }
 
@@ -100,7 +97,7 @@ export const ViraModal = defineViraElement()({
 
                         & sub {
                             font-size: 16px;
-                            color: ${cssVars['vira-modal-subtitle-color'].value};
+                            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
                         }
                     }
 
@@ -108,10 +105,11 @@ export const ViraModal = defineViraElement()({
                         ${noNativeFormStyles};
                         cursor: pointer;
                         padding: 4px;
-                        border-radius: ${cssVars['vira-modal-close-button-hover-radius'].value};
+                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
 
                         &:hover {
-                            background-color: ${cssVars['vira-modal-close-button-hover-background-color'].value};
+                            background-color: ${viraFormCssVars['vira-form-selection-hover-color']
+        .value};
                         }
 
                         & ${ViraIcon} {
@@ -171,7 +169,7 @@ export const ViraModal = defineViraElement()({
                 ${listen('close', () => {
             close();
         })}
-                ${listen('click', (event) => {
+                ${listen('mousedown', (event) => {
             if (state.contentElement &&
                 !event.composedPath().includes(state.contentElement) &&
                 !inputs.blockLightDismissal) {

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

@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
     min: number;
     /** @default 100 */
     max: number;
-}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly [], readonly []>;
+}>>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;

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

@@ -1,6 +1,7 @@
 import { clamp } from '@augment-vir/common';
 import { applyAttributes } from 'device-navigation';
 import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
@@ -19,8 +20,6 @@ export const ViraProgress = defineViraElement()({
          * dimension which creates a perfect pill border radius.
          */
         'vira-progress-border-radius': '99999999px',
-        'vira-progress-background-color': '#eee',
-        'vira-progress-foreground-color': 'dodgerblue',
     },
     styles: ({ cssVars }) => css `
         :host {
@@ -31,7 +30,7 @@ export const ViraProgress = defineViraElement()({
             display: inline-flex;
             align-items: center;
             border-radius: ${cssVars['vira-progress-border-radius'].value};
-            color: ${cssVars['vira-progress-foreground-color'].value};
+            color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
             overflow: hidden;
         }
 
@@ -41,7 +40,7 @@ export const ViraProgress = defineViraElement()({
         }
 
         .background-bar {
-            background-color: ${cssVars['vira-progress-background-color'].value};
+            background-color: ${viraFormCssVars['vira-form-filled-background-color'].value};
             height: 100%;
             flex-grow: 1;
         }

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

@@ -5,7 +5,7 @@ import { ChevronUp24Icon } from '../icons/index.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraAnimationDurations, viraBorders } from '../styles/index.js';
+import { viraAnimationDurations } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -56,7 +56,8 @@ export const ViraSelect = defineViraElement()({
             box-sizing: border-box;
             align-items: center;
             position: relative;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             /*
                 Border colors are actually applied via the .wrapper-border class. However, we must
@@ -118,7 +119,7 @@ export const ViraSelect = defineViraElement()({
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -165,7 +166,7 @@ export const ViraSelect = defineViraElement()({
 
         ${hostClasses['vira-select-error'].selector} {
             & .wrapper-border {
-                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
             }
         }
     `,

package/dist/styles/focus.d.ts

@@ -1,17 +1,4 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-/**
- * CSS vars for Vira focus colors.
- *
- * @category CSS Vars
- * @category Styles
- */
-export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-focus-outline-color': "#59b1ff";
-    readonly 'vira-focus-outline-border-radius': {
-        readonly initialValue: "10px";
-        readonly default: import("element-vir").CSSResult;
-    };
-}>;
 /**
  * Create styles that look like an outline for the given selector.
  *

package/dist/styles/focus.js

@@ -1,20 +1,6 @@
 import { addPx } from '@augment-vir/common';
 import { css, unsafeCSS } from 'element-vir';
-import { defineCssVars } from 'lit-css-vars';
-import { viraBorders } from './border.js';
-/**
- * CSS vars for Vira focus colors.
- *
- * @category CSS Vars
- * @category Styles
- */
-export const viraFocusCssVars = defineCssVars({
-    'vira-focus-outline-color': '#59b1ff',
-    'vira-focus-outline-border-radius': {
-        initialValue: '10px',
-        default: css `calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
-    },
-});
+import { viraFormCssVars } from './form-styles.js';
 /**
  * Create styles that look like an outline for the given selector.
  *
@@ -34,8 +20,8 @@ export function createFocusStyles({ elementBorderSize, outlineGap = 2, outlineWi
         height: calc(100% + calc(${outlineSpacing} * 2));
         box-sizing: border-box;
         pointer-events: none;
-        border: ${outlineWidth}px solid ${viraFocusCssVars['vira-focus-outline-color'].value};
-        border-radius: ${viraFocusCssVars['vira-focus-outline-border-radius'].value};
+        border: ${outlineWidth}px solid ${viraFormCssVars['vira-form-focus-outline-color'].value};
+        border-radius: ${viraFormCssVars['vira-form-focus-outline-border-radius'].value};
         z-index: 100;
     `;
     if (noNesting) {

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

@@ -1,3 +1,4 @@
+import { CssVarSyntaxName } from 'lit-css-vars';
 /**
  * CSS vars for vira form elements.
  *
@@ -5,16 +6,118 @@
  * @category Styles
  */
 export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-form-border-color': "#cccccc";
-    readonly 'vira-form-placeholder-color': "#cccccc";
-    readonly 'vira-form-background-color': "white";
-    readonly 'vira-form-foreground-color': "black";
-    readonly 'vira-form-text-selection-color': "#cfe9ff";
-    readonly 'vira-form-selection-hover-background-color': "#e6f9fe";
-    readonly 'vira-form-selection-hover-foreground-color': "black";
-    readonly 'vira-form-selection-active-background-color': "#e6f9fe";
-    readonly 'vira-form-selection-active-foreground-color': "black";
-    readonly 'vira-form-error-foreground-color': "red";
-    readonly 'vira-form-success-foreground-color': "green";
+    readonly 'vira-form-border-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-placeholder-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-foreground-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-modal-backdrop-color': "rgba(0, 0, 0, 0.35)";
+    readonly 'vira-form-secondary-body-foreground': {
+        readonly syntax: CssVarSyntaxName.Color;
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+    };
+    readonly 'vira-form-text-selection-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-selection-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-selection-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-success-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
     readonly 'vira-form-label-font-weight': "bold";
+    readonly 'vira-form-radius': "8px";
+    readonly 'vira-form-wrapper-radius': "16px";
+    readonly 'vira-form-focus-outline-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-focus-outline-border-radius': {
+        readonly initialValue: "10px";
+        readonly default: import("element-vir").CSSResult;
+        readonly syntax: CssVarSyntaxName.Length;
+    };
+    readonly 'vira-form-accent-primary-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-accent-primary-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-accent-primary-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-filled-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-filled-active-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
 }>;

package/dist/styles/form-styles.js

@@ -1,4 +1,7 @@
-import { defineCssVars } from 'lit-css-vars';
+import { css } from 'element-vir';
+import { CssVarSyntaxName, defineCssVars } from 'lit-css-vars';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { viraTheme } from './vira-color-theme.js';
 /**
  * CSS vars for vira form elements.
  *
@@ -6,16 +9,118 @@ import { defineCssVars } from 'lit-css-vars';
  * @category Styles
  */
 export const viraFormCssVars = defineCssVars({
-    'vira-form-border-color': '#cccccc',
-    'vira-form-placeholder-color': '#cccccc',
-    'vira-form-background-color': 'white',
-    'vira-form-foreground-color': 'black',
-    'vira-form-text-selection-color': '#cfe9ff',
-    'vira-form-selection-hover-background-color': '#e6f9fe',
-    'vira-form-selection-hover-foreground-color': 'black',
-    'vira-form-selection-active-background-color': '#e6f9fe',
-    'vira-form-selection-active-foreground-color': 'black',
-    'vira-form-error-foreground-color': 'red',
-    'vira-form-success-foreground-color': 'green',
+    'vira-form-border-color': {
+        default: viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-placeholder-color': {
+        default: viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-background-color': {
+        default: viraTheme.colors[themeDefaultKey].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-foreground-color': {
+        default: viraTheme.colors[themeDefaultKey].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
+    'vira-form-secondary-body-foreground': {
+        syntax: CssVarSyntaxName.Color,
+        default: viraTheme.colors['vira-grey-foreground-header'].foreground.value,
+        initialValue: 'transparent',
+    },
+    'vira-form-text-selection-color': {
+        default: viraTheme.colors['vira-blue-background-decoration'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-selection-hover-color': {
+        default: viraTheme.colors['vira-blue-background-invisible'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-selection-active-color': {
+        default: viraTheme.colors['vira-blue-background-decoration'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-color': {
+        default: viraTheme.colors['vira-red-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-hover-color': {
+        default: viraTheme.colors['vira-red-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-active-color': {
+        default: viraTheme.colors['vira-red-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-success-color': {
+        default: viraTheme.colors['vira-green-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
     'vira-form-label-font-weight': 'bold',
+    'vira-form-radius': '8px',
+    'vira-form-wrapper-radius': '16px',
+    'vira-form-focus-outline-color': {
+        default: viraTheme.colors['vira-blue-foreground-header'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-focus-outline-border-radius': {
+        initialValue: '10px',
+        default: css `calc(var(--vira-form-input-radius) + 2px)`,
+        syntax: CssVarSyntaxName.Length,
+    },
+    'vira-form-accent-primary-color': {
+        default: viraTheme.colors['vira-blue-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-accent-primary-hover-color': {
+        default: viraTheme.colors['vira-blue-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-accent-primary-active-color': {
+        default: viraTheme.colors['vira-blue-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-color': {
+        default: viraTheme.colors['vira-red-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-hover-color': {
+        default: viraTheme.colors['vira-red-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-active-color': {
+        default: viraTheme.colors['vira-red-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-filled-background-color': {
+        default: viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-filled-active-background-color': {
+        default: viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
 });

package/dist/styles/index.d.ts

@@ -1,5 +1,4 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './border.js';
 export * from './disabled.js';
 export * from './durations.js';
 export * from './focus.js';

package/dist/styles/index.js

@@ -1,5 +1,4 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './border.js';
 export * from './disabled.js';
 export * from './durations.js';
 export * from './focus.js';

package/dist/styles/native-styles.js

@@ -16,7 +16,6 @@ export const noNativeSpacing = css `
  */
 export const noNativeFormStyles = css `
     ${noNativeSpacing};
-    cursor: unset;
     background: none;
     border: none;
     font: inherit;