vue2-comp-lib 1.0.1

package/src/assets/styles/themes/theme-light.css

@@ -0,0 +1,166 @@
+:root[data-theme="light"] {
+    --bg-color: #f4f5f9;
+    --text-color: #382153;
+
+    --color-text-default: var(--main-void-base);
+    --color-text-link: var(--main-skyblue-base);
+    --color-text-warning: var(--main-vivid-raspberry-base);
+    --color-text-subtlest: var(--neutral-silvergray);
+    --color-text-subtle: var(--neutral-darkgray);
+    --color-text-inverse: var(--neutral-white);
+    --color-text-link-presed: var(--main-skyblue-dark);
+    --color-text-accent-skyblue: var(--main-skyblue-base);
+    --color-text-accent-slatepurple: var(--main-slatepurple-base);
+    --color-text-accent-slatepurple-medium: var(--main-slatepurple-medium);
+    --color-text-accent-vividraspberry: var(--main-vivid-raspberry-base);
+    --color-text-accent-tangerine: var(--main-tangerine-base);
+    --color-text-accent-lemon: var(--main-lemon-base);
+    --color-text-accent-limegreen: var(--main-limegreen-base);
+    --color-text-accent-limegreen-medium: var(--main-limegreen-medium);
+    --color-text-accent-andromeda: var(--main-andromeda-base);
+    --color-text-accent-andromeda-medium: var(--main-andromeda-medium);
+    --color-text-accent-begonia: var(--main-begonia-medium);
+    --color-text-accent-eris: var(--main-other-eris);
+    --color-text-accent-shire: var(--main-other-shire);
+    --color-text-accent-mar: var(--main-other-mar);
+    --color-text-accent-dos: var(--main-other-dos);
+    --color-text-accent-void-light: var(--main-void-light);
+
+    --color-background-default: var(--neutral-luna);
+    --color-background-secondary: var(--neutral-white);
+    --color-background-overlay: var(--overlay-overlay);
+    --color-drop-shadow-default: var(--main-void-base);
+
+    --color-border-field-active: var(--neutral-silvergray);
+    --color-border-field-input: var(--main-skyblue-base);
+    --color-border-field-error: var(--main-vivid-raspberry-base);
+    --color-border-field-hover: var(--neutral-darkgray);
+    --color-border-field-focused: var(--main-vivid-raspberry-base);
+
+    --color-border-divider-table: var(--neutral-brightgray);
+    --color-border-divider: var(--neutral-brightgray);
+
+    --color-border-bold: var(--main-void-base);
+
+    --color-border-container-hover: var(--main-skyblue-base);
+
+    --color-border-accent-white: var(--neutral-white);
+    --color-border-accent-ghost: var(--neutral-ghost);
+    --color-border-accent-silvergray: var(--neutral-silvergray);
+    --color-border-accent-skyblue-base: var(--main-skyblue-base);
+    --color-border-accent-vividraspberry: var(--main-vivid-raspberry-base);
+    --color-border-accent-brightgray: var(--neutral-brightgray);
+
+    --color-skeleton-base: var(--neutral-brightgray);
+    --color-skeleton-dark: var(--neutral-silvergray);
+
+    --color-fill-field-active: var(--neutral-phantom);
+    --color-fill-field-hover: var(--neutral-white);
+    --color-fill-field-input: var(--neutral-white);
+
+    --color-fill-cell: var(--neutral-white);
+    --color-fill-cell-hover: var(--main-skyblue-light);
+
+    --color-fill-options-default: var(--neutral-white);
+    --color-fill-options-hover: var(--neutral-brightgray);
+    --color-fill-options-selected: var(--main-skyblue-light);
+
+    --color-fill-accent-limegreen: var(--main-limegreen-base);
+    --color-fill-accent-brightgray: var(--neutral-brightgray);
+    --color-fill-accent-darkgray: var(--neutral-darkgray);
+    --color-fill-accent-vividraspberry: var(--main-vivid-raspberry-base);
+    --color-fill-accent-silvergray: var(--neutral-silvergray);
+    --color-fill-accent-white: var(--neutral-white);
+    --color-fill-accent-skyblue: var(--main-skyblue-base);
+    --color-fill-accent-skyblue-medium: var(--main-skyblue-medium);
+    --color-fill-accent-slatepurple: var(--main-slatepurple-base);
+    --color-fill-accent-slatepurple-light: var(--main-slatepurple-light);
+    --color-fill-accent-ghost: var(--neutral-ghost);
+    --color-fill-accent-slatepurple-medium: var(--main-slatepurple-medium);
+    --color-fill-accent-vividraspberry-medium: var(--main-vivid-raspberry-medium);
+    --color-fill-accent-begonia: var(--main-begonia-base);
+
+    --color-fill-bold: var(--main-void-base);
+
+    --color-fill-topnav: var(--neutral-luna);
+    --color-fill-mainnav: var(--main-void-base);
+
+    --color-icon-default: var(--main-void-base);
+    --color-icon-white: var(--neutral-white);
+    --color-icon-skyblue-base: var(--main-skyblue-base);
+    --color-icon-slatepurple-base: var(--main-slatepurple-base);
+    --color-icon-vividrasbpberry-base: var(--main-vivid-raspberry-base);
+    --color-icon-tangerine-base: var(--main-tangerine-base:);
+    --color-icon-lemon-base: var(--main-lemon-base);
+    --color-icon-limegreen-base: var(--main-limegreen-base);
+    --color-icon-andromeda-base: var(--main-andromeda-base);
+    --color-icon-begonia-base: var(--main-begonia-medium);
+    --color-icon-eris: var(--main-other-eris);
+    --color-icon-shire: var(--main-other-shire);
+    --color-icon-mar: var(--main-other-mar);
+    --color-icon-dos: var(--main-other-dos);
+    --color-icon-phantom: var(--neutral-phantom);
+    --color-icon-brightgray: var(--neutral-brightgray);
+    --color-icon-ghost: var(--neutral-ghost);
+    --color-icon-silvergray: var(--neutral-silvergray);
+    --color-icon-darkgray: var(--neutral-darkgray);
+    --color-icon-void: var(--main-void-base);
+
+
+    /* Created new semantic colors */
+    --color-background-scrollbar: var(--neutral-brightgray);
+    --color-background-button-primary: var(--main-skyblue-base);
+    --color-background-button-primary-hover: var(--main-skyblue-dark);
+    --color-box-shadow-dropdown: var(--main-slatepurple-light);
+    --color-border-button-secondary: var(--main-skyblue-base);
+    --color-text-button-secondary: var(--main-skyblue-base);
+    --color-background-button-secondary-hover: var(--main-skyblue-base);
+    --color-text-button-secondary-hover: var(--neutral-white);
+    --color-border-button-alternate: var(--neutral-silvergray);
+    --color-background-button-close: var(--neutral-sideral);
+    --color-background-button-close-hover: var(--neutral-white);
+    --color-border-button-close: var(--neutral-white);
+    --color-border-button-close-hover: var(--main-vivid-raspberry-base);
+    --color-background-button-alternate-hover: var(--neutral-brightgray);
+    --color-text-accent-tangerine-medium: var(--main-tangerine-medium);
+    --color-fill-accent-tangerine-light: var(--main-tangerine-light);
+    --color-fill-accent-tangerine: var(--main-tangerine-base);
+    --color-fill-accent-tangerine-medium: var(--main-tangerine-medium);
+    --color-icon-tangerine-medium: var(--main-tangerine-medium);
+    --color-fill-accent-lemon: var(--main-lemon-base);
+    --color-fill-accent-other-mar: var(--main-other-mar);
+    --color-text-button-alternate: var(--main-void-base);
+    --color-text-accent-vader: var(--neutral-vader);
+    --color-fill-accent-vividraspberry-light: var(--main-vivid-raspberry-light);
+    --color-background-scrollbar-default: var(--neutral-silvergray);
+    --color-drop-shadow-topnav: var(--main-andromeda-light);
+    --color-border-button-cancel: var(--neutral-darkgray);
+    --color-border-button-cancel-hover: var(--neutral-brightgray);
+    --color-fill-accent-skyblue-special-use: var(--main-skyblue-special-use);
+    --color-fill-accent-skyblue-light: var(--main-skyblue-light);
+    --color-fill-accent-limegreen-light: var(--main-limegreen-light);
+    --color-background-button-row-action: var(--main-void-base);
+    --color-fill-cell-delete-overlay: var(--main-vivid-raspberry-light);
+    --color-fill-cell-delete: var(--main-vivid-raspberry-base);
+    --color-fill-cell-selected: var(--main-lemon-light);
+    --color-text-accent-ghost: var(--neutral-ghost);
+    --color-text-button-remove: var(--main-vivid-raspberry-base);
+    --color-background-button-remove-hover: var(--main-vivid-raspberry-light);
+    --color-text-button-primary: var(--neutral-white);
+    --color-background-button-delete-hover: var(--main-vivid-raspberry-medium);
+    --color-background-button-delete: var(--main-vivid-raspberry-base);
+    --color-border-accent-slatepurple: var(--main-slatepurple-base);
+    --color-background-button-other: var(--neutral-phantom);
+    --color-border-button-other: var(--neutral-ghost);
+    --color-border-button-other-hover: var(--neutral-darkgray);
+    --color-text-button-other: var(--main-skyblue-base);
+    --color-text-accent-andromeda-light: var(--main-andromeda-light);
+    --color-fill-accent-phantom: var(--neutral-phantom);
+    --color-main-skyblue-light: var(--main-skyblue-light);
+    --color-icon-begonia-base: var(--main-begonia-medium);
+    --color-fill-cell-transparent: #f8f5ffed;
+    --color-border-accent-limegreen: var(--main-limegreen-base);
+    --color-fill-accent-lemon-light: var(--main-lemon-light);
+    --color-border-accent-darkgray: var(--neutral-darkgray);
+    --color-background-button-hover: var(--neutral-ghost);
+}

package/src/assets/styles/themes/themes.css

@@ -0,0 +1,2 @@
+@import './primitives.css';
+@import './theme-light.css';

package/src/components/app-button-v2/app-button-v2.vue

@@ -0,0 +1,512 @@
+<template>
+    <button
+        :type="type"
+        :disabled="disabled || loading"
+        class="app-button-v2"
+        :class="[
+            !unstyled ? variantClass : null,
+            !unstyled ? colorClass : null,
+        ]"
+        :style="buttonStyle"
+        v-bind="$attrs"
+        v-on="$listeners"
+    >
+        <span class="app-button-v2-label">
+            <slot />
+            <app-loading-dots
+                v-if="loading"
+                :fill="loadingIconFill"
+                :size="loadingIconSize"
+                :dot-size="loadingIconDotSize"
+                class="app-button-v2-loading-icon"
+            />
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppLoadingDots from '@/components/app-loading-dots/app-loading-dots.vue';
+
+export type AppButtonV2Type = HTMLButtonElement['type'];
+
+export type AppButtonV2Variant = 'primary' | 'secondary';
+
+export type AppButtonV2Color =
+    | 'sky-blue'
+    | 'slate-purple'
+    | 'ghost'
+    | 'vivid-raspberry'
+    | 'neptune'
+    | 'supernova'
+    | 'sea-foam'
+    | 'white'
+    | 'show-more'
+    | 'phantom';
+
+interface Props {
+    type?: AppButtonV2Type;
+    variant?: AppButtonV2Variant;
+    color?: AppButtonV2Color;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingIconFill?: string;
+    loadingIconSize?: string;
+    loadingIconDotSize?: string;
+    gap?: string;
+    unstyled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: 'button',
+    variant: 'primary',
+    color: 'sky-blue',
+    disabled: false,
+    loading: false,
+    loadingIconFill: 'currentColor',
+    loadingIconSize: '16px',
+    loadingIconDotSize: '8px',
+    gap: '8px',
+    unstyled: false,
+});
+
+const variantClass = computed(() => `app-button-${props.variant}`);
+
+const colorClass = computed(() => `app-button-${props.color}`);
+
+const buttonStyle = computed(
+    () =>
+        ({
+            '--app-button-v2-gap': props.gap,
+        }) as Record<string, string>,
+);
+</script>
+
+<style scoped>
+button.app-button-v2 {
+    color: var(--app-button-v2-text-color);
+}
+
+.app-button-v2 {
+    --app-button-v2-background-color: unset;
+    --app-button-v2-text-color: unset;
+    --app-button-v2-outline-color: unset;
+    --app-button-v2-outline-width: 0px;
+    --app-button-v2-border-width: 2px;
+    --app-button-v2-border-color: unset;
+    --app-button-v2-padding-x: 24px;
+    --app-button-v2-padding-y: 10px;
+    --app-button-v2-padding-offset: -2px;
+    --app-button-v2-border-radius: 60px;
+    --app-button-v2-transition: 300ms ease-out;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(
+            var(--app-button-v2-padding-y) + var(--app-button-v2-padding-offset)
+        )
+        calc(
+            var(--app-button-v2-padding-x) + var(--app-button-v2-padding-offset)
+        );
+    border-radius: var(--app-button-v2-border-radius);
+    font-size: 14px;
+    font-weight: 500;
+    border: var(--app-button-v2-border-width) solid
+        var(--app-button-v2-border-color);
+    background: var(--app-button-v2-background-color);
+    outline: var(--app-button-v2-outline-width) solid
+        var(--app-button-v2-outline-color);
+    outline-offset: 1px;
+    opacity: 1;
+    z-index: 0;
+
+    transition:
+        background var(--app-button-v2-transition),
+        color var(--app-button-v2-transition),
+        border var(--app-button-v2-transition),
+        opacity var(--app-button-v2-transition);
+
+    > * {
+        z-index: 1;
+    }
+}
+
+.app-button-v2 .app-button-v2-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--app-button-v2-gap);
+}
+
+.app-button-v2:disabled {
+    opacity: 0.4;
+}
+
+.app-button-v2:focus {
+    /* Currently disabled because no other standard components have focus styles */
+    --app-button-v2-outline-width: 0px;
+}
+
+/* Gradient Buttons Base Styles */
+.app-button-v2.app-button-primary.app-button-neptune,
+.app-button-v2.app-button-primary.app-button-supernova {
+    --app-button-v2-padding-offset: -2px;
+}
+
+.app-button-v2.app-button-primary.app-button-neptune,
+.app-button-v2.app-button-primary.app-button-supernova,
+.app-button-v2.app-button-primary.app-button-sea-foam {
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        opacity: 0;
+        z-index: 0;
+
+        transition: opacity var(--app-button-v2-transition);
+    }
+
+    &:not(:disabled):hover::after {
+        opacity: 1;
+    }
+}
+
+/* Primary */
+
+/* Sky Blue */
+
+.app-button-v2.app-button-primary.app-button-sky-blue {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-sky-blue
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-sky-blue);
+    --app-button-v2-border-color: var(--color-border-button-primary-sky-blue);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-sky-blue
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-sky-blue
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-sky-blue
+        );
+    }
+}
+
+/* Slate Purple */
+
+.app-button-v2.app-button-primary.app-button-slate-purple {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-slate-purple
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-slate-purple);
+    --app-button-v2-border-color: var(
+        --color-border-button-primary-slate-purple
+    );
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-slate-purple
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-slate-purple
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-slate-purple
+        );
+    }
+}
+
+/* Ghost */
+
+.app-button-v2.app-button-primary.app-button-ghost {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-ghost
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-ghost);
+    --app-button-v2-border-color: var(--color-border-button-primary-ghost);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-ghost
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-ghost
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-ghost
+        );
+    }
+}
+
+/* Vivid Raspberry */
+
+.app-button-v2.app-button-primary.app-button-vivid-raspberry {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-vivid-raspberry
+    );
+    --app-button-v2-text-color: var(
+        --color-text-button-primary-vivid-raspberry
+    );
+    --app-button-v2-border-color: var(
+        --color-border-button-primary-vivid-raspberry
+    );
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-vivid-raspberry
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-vivid-raspberry
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-vivid-raspberry
+        );
+    }
+}
+
+/* Neptune */
+
+.app-button-v2.app-button-primary.app-button-neptune {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-neptune
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-neptune);
+    --app-button-v2-border-color: var(--color-border-button-primary-neptune);
+
+    &:not(:disabled):hover {
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-neptune
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-neptune
+        );
+    }
+
+    &::after {
+        background: var(--color-background-button-hover-primary-neptune);
+    }
+}
+
+/* Supernova */
+
+.app-button-v2.app-button-primary.app-button-supernova {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-supernova
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-supernova);
+    --app-button-v2-border-color: var(--color-border-button-primary-supernova);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-supernova
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-supernova
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-supernova
+        );
+    }
+
+    &::after {
+        background: var(--color-background-button-hover-primary-supernova);
+    }
+}
+
+/* Sea Foam */
+
+.app-button-v2.app-button-primary.app-button-sea-foam {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-sea-foam
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-sea-foam);
+    --app-button-v2-border-color: var(--color-border-button-primary-sea-foam);
+
+    --app-button-v2-border-width: 0px;
+    --app-button-v2-padding-offset: 0px;
+
+    &:not(:disabled):hover {
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-sea-foam
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-sea-foam
+        );
+    }
+
+    &::after {
+        background: var(--color-background-button-hover-primary-sea-foam);
+    }
+}
+
+/* White */
+
+.app-button-v2.app-button-primary.app-button-white {
+    --app-button-v2-background-color: var(
+        --color-background-button-primary-white
+    );
+    --app-button-v2-text-color: var(--color-text-button-primary-white);
+    --app-button-v2-border-color: var(--color-border-button-primary-white);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-primary-white
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-primary-white
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-primary-white
+        );
+    }
+}
+
+/* Secondary */
+
+/* Sky Blue */
+
+.app-button-v2.app-button-secondary.app-button-sky-blue {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-sky-blue
+    );
+    --app-button-v2-text-color: var(--color-text-button-secondary-sky-blue);
+    --app-button-v2-border-color: var(--color-border-button-secondary-sky-blue);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-sky-blue
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-sky-blue
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-sky-blue
+        );
+    }
+}
+
+/* White */
+
+.app-button-v2.app-button-secondary.app-button-white {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-white
+    );
+    --app-button-v2-text-color: var(--color-text-button-secondary-white);
+    --app-button-v2-border-color: var(--color-border-button-secondary-white);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-white
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-white
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-white
+        );
+    }
+}
+
+/* Ghost */
+
+.app-button-v2.app-button-secondary.app-button-ghost {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-ghost
+    );
+    --app-button-v2-text-color: var(--color-text-button-secondary-ghost);
+    --app-button-v2-border-color: var(--color-border-button-secondary-ghost);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-ghost
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-ghost
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-ghost
+        );
+    }
+}
+
+/* Show More */
+
+.app-button-v2.app-button-secondary.app-button-show-more {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-show-more
+    );
+    --app-button-v2-text-color: var(--color-text-button-secondary-show-more);
+    --app-button-v2-border-color: var(
+        --color-border-button-secondary-show-more
+    );
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-show-more
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-show-more
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-show-more
+        );
+    }
+}
+
+/* Vivid Raspberry */
+
+.app-button-v2.app-button-secondary.app-button-vivid-raspberry {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-vivid-raspberry
+    );
+    --app-button-v2-text-color: var(
+        --color-text-button-secondary-vivid-raspberry
+    );
+    --app-button-v2-border-color: var(
+        --color-border-button-secondary-vivid-raspberry
+    );
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-vivid-raspberry
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-vivid-raspberry
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-vivid-raspberry
+        );
+    }
+}
+
+/* Phantom */
+
+.app-button-v2.app-button-secondary.app-button-phantom {
+    --app-button-v2-background-color: var(
+        --color-background-button-secondary-phantom
+    );
+    --app-button-v2-text-color: var(--color-text-button-secondary-phantom);
+    --app-button-v2-border-color: var(--color-border-button-secondary-phantom);
+
+    &:not(:disabled):hover {
+        --app-button-v2-background-color: var(
+            --color-background-button-hover-secondary-phantom
+        );
+        --app-button-v2-text-color: var(
+            --color-text-button-hover-secondary-phantom
+        );
+        --app-button-v2-border-color: var(
+            --color-border-button-hover-secondary-phantom
+        );
+    }
+}
+</style>

package/src/components/app-button-v2/index.ts

@@ -0,0 +1 @@
+export { default as AppButtonV2 } from './app-button-v2.vue';