vira 30.6.0 → 31.0.0

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -77,7 +77,7 @@ export const ViraPopUpTrigger = defineViraElement()({
             box-sizing: border-box;
 
             ${createFocusStyles({
-        elementBorderSize: 1,
+        elementBorderSize: '1px',
     })}
         }
 

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

@@ -1,18 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/index.js';
-/**
- * Button styles available for {@link ViraButton}.
- *
- * @category Button
- */
-export declare enum ViraButtonStyle {
-    Default = "vira-button-default",
-    Outline = "vira-button-outline",
-    Danger = "vira-button-danger",
-    DangerOutline = "vira-button-danger-outline",
-    Ghost = "vira-button-ghost",
-    Plain = "vira-button-plain"
-}
+import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/index.js';
 /**
  * A custom button with default styling.
  *
@@ -22,20 +10,33 @@ export declare enum ViraButtonStyle {
  */
 export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
     text: string;
-    icon: Pick<ViraIconSvg, "svgTemplate">;
-    disabled: boolean;
-    buttonStyle: ViraButtonStyle;
+    icon: Readonly<ViraIconSvg>;
+    /** @default false */
+    isDisabled: boolean;
     /**
-     * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
-     * increasing the button's size.
+     * Set a predefined emphasis variant. Set to `ViraEmphasis.None` for maximum customization.
      *
-     * @default false
+     * @default ViraEmphasis.Standard
+     */
+    buttonEmphasis: ViraEmphasis;
+    /**
+     * Set a predefined size variant. Set to `ViraSize.None` for maximum customization. In that
+     * case, you will need to set a `height`.
+     *
+     * @default ViraSize.Medium
+     */
+    buttonSize: ViraSize;
+    /**
+     * Set a predefined color variant. Set to `ViraColorVariant.None` for maximum customization.
+     * In that case, you will need to use this element's CSS vars to customize the colors.
+     *
+     * @default ViraColorVariant.Accent,
      */
-    expandToFitIcon: boolean;
+    colorVariant: ViraColorVariant;
     /**
-     * If `true`, a menu trigger caret (like in ViraDropdown or ViraSelect) is rendered.
+     * Set to `true`
      *
      * @default false
      */
     showMenuCaret: boolean;
-}>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-plain-style" | "vira-button-default-style" | "vira-button-with-menu-caret", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color" | "vira-button-border-color", 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-accent" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-danger" | "vira-button-color-warning" | "vira-button-color-positive" | "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,27 +1,234 @@
-import { css, html, nothing } from 'element-vir';
+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 { viraDisabledStyles } from '../styles/disabled.js';
-import { viraAnimationDurations } from '../styles/durations.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { noUserSelect } from '../styles/index.js';
+import { viraColorVariants, 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 { defineViraElement } from '../util/define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
-/**
- * Button styles available for {@link ViraButton}.
- *
- * @category Button
- */
-export var ViraButtonStyle;
-(function (ViraButtonStyle) {
-    ViraButtonStyle["Default"] = "vira-button-default";
-    ViraButtonStyle["Outline"] = "vira-button-outline";
-    ViraButtonStyle["Danger"] = "vira-button-danger";
-    ViraButtonStyle["DangerOutline"] = "vira-button-danger-outline";
-    ViraButtonStyle["Ghost"] = "vira-button-ghost";
-    ViraButtonStyle["Plain"] = "vira-button-plain";
-})(ViraButtonStyle || (ViraButtonStyle = {}));
+const transparentColor = {
+    value: css `transparent`,
+};
+const colorVariantColors = {
+    [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,
+            },
+        },
+        [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,
+            },
+        },
+    },
+    [ViraColorVariant.Accent]: {
+        [ViraEmphasis.Standard]: {
+            idle: {
+                backgroundColor: viraTheme.colors['vira-accent-behind-bg-non-body'].background,
+                textColor: viraTheme.colors['vira-accent-behind-bg-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-accent-behind-bg-header'].background,
+                textColor: viraTheme.colors['vira-accent-behind-bg-header'].foreground,
+                borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-accent-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
+            },
+        },
+        [ViraEmphasis.Subtle]: {
+            idle: {
+                backgroundColor: transparentColor,
+                textColor: viraTheme.colors['vira-accent-foreground-non-body'].foreground,
+                borderColor: transparentColor,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-accent-on-self-body'].background,
+                textColor: viraTheme.colors['vira-accent-on-self-body'].foreground,
+                borderColor: viraTheme.colors['vira-accent-on-self-body'].foreground,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-accent-on-self-non-body'].background,
+                textColor: viraTheme.colors['vira-accent-on-self-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-accent-on-self-non-body'].foreground,
+            },
+        },
+    },
+    [ViraColorVariant.Neutral]: {
+        [ViraEmphasis.Standard]: {
+            idle: {
+                backgroundColor: viraTheme.colors[themeDefaultKey].background,
+                textColor: viraTheme.colors[themeDefaultKey].foreground,
+                borderColor: viraTheme.colors[themeDefaultKey].foreground,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
+                textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
+                borderColor: viraTheme.colors[themeDefaultKey].foreground,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
+                textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
+                borderColor: viraTheme.colors[themeDefaultKey].foreground,
+            },
+        },
+        [ViraEmphasis.Subtle]: {
+            idle: {
+                backgroundColor: transparentColor,
+                textColor: viraTheme.colors['vira-grey-foreground-non-body'].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,
+            },
+        },
+    },
+    [ViraColorVariant.Danger]: {
+        [ViraEmphasis.Standard]: {
+            idle: {
+                backgroundColor: viraTheme.colors['vira-red-behind-bg-non-body'].background,
+                textColor: viraTheme.colors['vira-red-behind-bg-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-red-behind-bg-header'].background,
+                textColor: viraTheme.colors['vira-red-behind-bg-header'].foreground,
+                borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-red-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-red-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
+            },
+        },
+        [ViraEmphasis.Subtle]: {
+            idle: {
+                backgroundColor: transparentColor,
+                textColor: viraTheme.colors['vira-red-foreground-non-body'].foreground,
+                borderColor: transparentColor,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-red-on-self-body'].background,
+                textColor: viraTheme.colors['vira-red-on-self-body'].foreground,
+                borderColor: viraTheme.colors['vira-red-on-self-body'].foreground,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-red-on-self-non-body'].background,
+                textColor: viraTheme.colors['vira-red-on-self-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-red-on-self-non-body'].foreground,
+            },
+        },
+    },
+    [ViraColorVariant.Warning]: {
+        [ViraEmphasis.Standard]: {
+            idle: {
+                backgroundColor: viraTheme.colors['vira-orange-behind-bg-non-body'].background,
+                textColor: viraTheme.colors['vira-orange-behind-bg-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-orange-behind-bg-header'].background,
+                textColor: viraTheme.colors['vira-orange-behind-bg-header'].foreground,
+                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-orange-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+            },
+        },
+        [ViraEmphasis.Subtle]: {
+            idle: {
+                backgroundColor: transparentColor,
+                textColor: viraTheme.colors['vira-orange-foreground-non-body'].foreground,
+                borderColor: transparentColor,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-orange-on-self-body'].background,
+                textColor: viraTheme.colors['vira-orange-on-self-body'].foreground,
+                borderColor: viraTheme.colors['vira-orange-on-self-body'].foreground,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-orange-on-self-non-body'].background,
+                textColor: viraTheme.colors['vira-orange-on-self-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-orange-on-self-non-body'].foreground,
+            },
+        },
+    },
+    [ViraColorVariant.Positive]: {
+        [ViraEmphasis.Standard]: {
+            idle: {
+                backgroundColor: viraTheme.colors['vira-green-behind-bg-non-body'].background,
+                textColor: viraTheme.colors['vira-green-behind-bg-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-green-behind-bg-header'].background,
+                textColor: viraTheme.colors['vira-green-behind-bg-header'].foreground,
+                borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-green-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-green-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
+            },
+        },
+        [ViraEmphasis.Subtle]: {
+            idle: {
+                backgroundColor: transparentColor,
+                textColor: viraTheme.colors['vira-green-foreground-non-body'].foreground,
+                borderColor: transparentColor,
+            },
+            hover: {
+                backgroundColor: viraTheme.colors['vira-green-on-self-body'].background,
+                textColor: viraTheme.colors['vira-green-on-self-body'].foreground,
+                borderColor: viraTheme.colors['vira-green-on-self-body'].foreground,
+            },
+            active: {
+                backgroundColor: viraTheme.colors['vira-green-on-self-non-body'].background,
+                textColor: viraTheme.colors['vira-green-on-self-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-green-on-self-non-body'].foreground,
+            },
+        },
+    },
+};
 /**
  * A custom button with default styling.
  *
@@ -32,164 +239,187 @@ export var ViraButtonStyle;
 export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
-        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline ||
-            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
-        'vira-button-danger-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Danger ||
-            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
-        'vira-button-ghost-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Ghost,
-        'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
-        'vira-button-icon-only': ({ inputs }) => !!inputs.icon && !inputs.text,
-        'vira-button-plain-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Plain,
-        'vira-button-default-style': ({ inputs }) => !inputs.buttonStyle || inputs.buttonStyle === ViraButtonStyle.Default,
         'vira-button-with-menu-caret': ({ inputs }) => !!inputs.showMenuCaret,
+        'vira-button-size-large': ({ inputs }) => inputs.buttonSize === ViraSize.Large,
+        'vira-button-size-medium': ({ inputs }) => !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium,
+        '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,
+        'vira-button-color-accent': ({ inputs }) => !inputs.colorVariant || inputs.colorVariant === ViraColorVariant.Accent,
+        'vira-button-color-plain': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Plain,
+        'vira-button-color-neutral': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Neutral,
+        'vira-button-color-danger': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Danger,
+        'vira-button-color-warning': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Warning,
+        'vira-button-color-positive': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Positive,
+        'vira-button-disabled': ({ inputs }) => !!inputs.isDisabled,
+        'vira-button-icon-only': ({ inputs }) => !inputs.text && !!inputs.icon,
     },
     cssVars: {
-        'vira-button-padding': '5px 10px',
-        'vira-button-internal-foreground-color': viraFormCssVars['vira-form-background-color'].value,
-        'vira-button-internal-background-color': viraFormCssVars['vira-form-accent-primary-color'].value,
+        'vira-button-text-color': 'transparent',
+        'vira-button-background-color': 'transparent',
         'vira-button-border-color': 'transparent',
+        'vira-button-hover-text-color': 'transparent',
+        'vira-button-hover-background-color': 'transparent',
+        'vira-button-hover-border-color': 'transparent',
+        'vira-button-active-text-color': 'transparent',
+        'vira-button-active-background-color': 'transparent',
+        'vira-button-active-border-color': 'transparent',
+        'vira-button-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
+        'vira-button-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
+        'vira-button-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
+        'vira-button-border-width': '1px',
+        'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
-    styles: ({ hostClasses, cssVars }) => css `
-        :host {
-            height: 32px;
-            font-weight: bold;
-            display: inline-flex;
-            position: relative;
-            vertical-align: middle;
-            align-items: center;
-            box-sizing: border-box;
-            ${noUserSelect};
-            ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].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};
 
-        ${hostClasses['vira-button-icon-only'].selector} {
-            ${cssVars['vira-button-padding'].name}: 5px;
-        }
+                            ${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};
 
-        ${hostClasses['vira-button-disabled'].selector} {
-            ${viraDisabledStyles};
+                            ${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};
+                        }
+                    `;
+                });
+            });
+            return unsafeCSS(allStyles.join('\n'));
         }
+        function generateSizeVariantCss() {
+            const styles = viraSizeVariants.map((sizeVariant) => {
+                return css `
+                    ${hostClasses[`vira-button-size-${sizeVariant}`].selector} {
+                        height: ${viraSizeHeights[sizeVariant]}px;
+                        font-size: ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
 
-        :host(:hover) button,
-        button:hover {
-            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value};
+                        button {
+                            padding: 0
+                                ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
+                        }
+                    }
+                `;
+            });
+            return unsafeCSS(styles.join('\n'));
         }
+        return css `
+            :host {
+                cursor: pointer;
+                display: inline-flex;
+                position: relative;
+                vertical-align: middle;
+                align-items: center;
+                box-sizing: border-box;
+                ${noUserSelect};
+                ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
+            }
 
-        :host(:active) button,
-        button:active {
-            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
-        }
+            ${generateSizeVariantCss()}
+            ${generateVariantCss()}
 
-        ${hostClasses['vira-button-danger-style'].selector} {
-            & button {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-color'].value};
-            }
+            button {
+                ${noNativeFormStyles};
+                flex-shrink: 0;
+                position: relative;
+                cursor: pointer;
 
-            &:hover button,
-            & button:hover {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-hover-color'].value};
-            }
+                width: 100%;
+                height: 100%;
 
-            &:active button,
-            & button:active {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-active-color'].value};
-            }
-        }
+                border-width: ${cssVars['vira-button-border-width'].value};
+                border-style: solid;
+                border-color: ${cssVars['vira-button-border-color'].value};
 
-        ${hostClasses['vira-button-ghost-style'].selector} {
-            & button {
-                ${cssVars['vira-button-internal-background-color'].name}: transparent;
-                ${cssVars['vira-button-internal-foreground-color'].name}: currentColor;
-            }
+                box-sizing: border-box;
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
 
-            &:hover button,
-            & button:hover {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-background-color'].value};
-            }
+                border-radius: ${cssVars['vira-button-border-radius'].value};
 
-            &:active button,
-            & button:active {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-active-background-color'].value};
-            }
-        }
+                background-color: ${cssVars['vira-button-background-color'].value};
+                color: ${cssVars['vira-button-text-color'].value};
 
-        ${hostClasses['vira-button-plain-style'].selector} {
-            & button {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-color'].value};
-                color: currentColor;
-                ${cssVars['vira-button-border-color'].name}: ${viraFormCssVars['vira-form-plain-active-color'].value};
-                border-width: 1px;
+                ${createFocusStyles({
+            elementBorderSize: cssVars['vira-button-border-width'],
+        })}
             }
-            &:hover button,
+
+            :host(:hover) button,
             & button:hover {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-hover-color'].value};
+                background-color: ${cssVars['vira-button-hover-background-color'].value};
+                color: ${cssVars['vira-button-hover-text-color'].value};
+                border-color: ${cssVars['vira-button-hover-border-color'].value};
             }
 
-            &:active button,
+            :host(:active) button,
             & button:active {
-                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-active-color'].value};
+                background-color: ${cssVars['vira-button-active-background-color'].value};
+                color: ${cssVars['vira-button-active-text-color'].value};
+                border-color: ${cssVars['vira-button-active-border-color'].value};
             }
-        }
-
-        ${hostClasses['vira-button-outline-style'].selector} button {
-            color: ${cssVars['vira-button-internal-background-color'].value};
-            background-color: ${cssVars['vira-button-internal-foreground-color'].value};
-            ${cssVars['vira-button-border-color'].name}: currentColor;
-        }
 
-        button {
-            ${noNativeFormStyles};
-            cursor: pointer;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border: 2px solid ${cssVars['vira-button-border-color'].value};
-            box-sizing: border-box;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-            background-color: ${cssVars['vira-button-internal-background-color'].value};
-            color: ${cssVars['vira-button-internal-foreground-color'].value};
-            padding: ${cssVars['vira-button-padding'].value};
-            transition:
-                color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
-                background-color
-                    ${viraAnimationDurations['vira-interaction-animation-duration'].value},
-                border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
-
-            ${createFocusStyles({
-        elementBorderSize: 2,
-    })}
-        }
-
-        .empty-text {
-            width: 0;
-        }
+            .empty-text {
+                width: 0;
+            }
 
-        button ${ViraIcon} + .text-template {
-            margin-left: 8px;
-        }
+            button ${ViraIcon} + .text-template {
+                margin-left: 8px;
+            }
 
-        :host(:not(.${hostClasses['vira-button-expand-to-fit-icon'].name})) {
-            & ${ViraIcon} {
+            ${ViraIcon} {
                 height: 0;
                 display: flex;
                 align-items: center;
             }
-        }
 
-        .caret-icon {
-            margin-left: 8px;
-        }
+            .caret-icon {
+                margin-left: 8px;
+            }
 
-        ${hostClasses['vira-button-with-menu-caret'].selector} {
-            button {
-                padding-right: 6px;
+            ${hostClasses['vira-button-with-menu-caret'].selector} {
+                button {
+                    padding-right: 6px;
+                }
             }
-        }
-    `,
+
+            ${hostClasses['vira-button-disabled'].selector} {
+                cursor: not-allowed;
+
+                & button {
+                    pointer-events: none;
+                    color: ${cssVars['vira-button-disabled-text-color'].value};
+                    background-color: ${cssVars['vira-button-disabled-background-color'].value};
+                    border-color: ${cssVars['vira-button-disabled-border-color'].value};
+                }
+            }
+
+            ${hostClasses['vira-button-icon-only'].selector} {
+                button {
+                    aspect-ratio: 1;
+                }
+            }
+        `;
+    },
     render: ({ inputs }) => {
         const iconTemplate = inputs.icon
             ? html `
@@ -215,7 +445,7 @@ export const ViraButton = defineViraElement()({
               `
             : nothing;
         return html `
-            <button ?disabled=${inputs.disabled}>
+            <button ?disabled=${inputs.isDisabled}>
                 ${iconTemplate}${textTemplate}${caretIconTemplate}
             </button>
         `;

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

@@ -107,7 +107,7 @@ export const ViraCheckbox = defineViraElement()({
             cursor: pointer;
 
             ${createFocusStyles({
-        elementBorderSize: 1,
+        elementBorderSize: '1px',
     })}
 
             &.checked {