@privyid/persona 0.10.0 → 0.12.0

package/dist/components/avatar/Avatar.vue

@@ -116,6 +116,7 @@ export default defineComponent({
 <style lang="postcss">
 .avatar {
   @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
+  @apply dark:text-dark-subtle dark:bg-dark-subtle;
 
   &__image {
     @apply w-full h-full object-cover;

package/dist/components/avatar/Avatar.vue.d.ts

@@ -3,11 +3,11 @@ import { TypeVariant, SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;
-        default: any;
+        default: undefined;
     };
     src: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     fallbackSrc: {
         type: StringConstructor;
@@ -15,15 +15,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     name: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     imgClass: {
-        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-        default: any;
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -32,11 +32,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("imgloaded" | "imgerror")[], "imgloaded" | "imgerror", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<TypeVariant>;
-        default: any;
+        default: undefined;
     };
     src: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     fallbackSrc: {
         type: StringConstructor;
@@ -44,23 +44,23 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     name: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     imgClass: {
-        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-        default: any;
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
 }>> & {
-    onImgloaded?: (...args: any[]) => any;
-    onImgerror?: (...args: any[]) => any;
+    onImgloaded?: ((...args: any[]) => any) | undefined;
+    onImgerror?: ((...args: any[]) => any) | undefined;
 }, {
-    src: string;
     name: string;
     variant: TypeVariant;
+    src: string;
     fallbackSrc: string;
     size: SizeVariant;
     imgClass: string | unknown[] | Record<string, any>;

package/dist/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
-export declare type TypeVariant = 'image' | 'alias';
-export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TypeVariant = 'image' | 'alias';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/badge/Badge.vue

@@ -48,7 +48,10 @@ export default defineComponent({
   * Set global style
   * of badge
   */
-  @apply inline-block font-bold text-xs px-2 py-0.5 text-on-emphasis rounded-full;
+  --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
+
+  @apply inline-block font-bold text-xs px-2 py-0.5 text-state-emphasis dark:text-dark-state-emphasis rounded-full;
 
   /**
   * Provide colors variant
@@ -59,23 +62,35 @@ export default defineComponent({
   &&--variant-default {
     &.badge {
       &--default {
-        @apply bg-emphasis-subtle;
+        --p-bg-variant-default: theme(backgroundColor.inverse);
+        --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
+        @apply bg-[color:var(--p-bg-variant-default)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-default)] dark:text-dark-on-emphasis;
       }
 
       &--primary {
-        @apply bg-accent-emphasis;
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
       }
 
       &--success {
         @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
       }
 
       &--warning {
         @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
       }
 
       &--danger {
         @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
       }
     }
   }
@@ -88,23 +103,35 @@ export default defineComponent({
   &&--variant-inverse {
     &.badge {
       &--default {
-        @apply text-subtle;
+        --p-color-variant-inverse: theme(textColor.subtle);
+        --p-color-dark-variant-inverse: theme(textColor.dark.subtle);
+        @apply text-[color:var(--p-color-variant-inverse)];
+        @apply dark:text-[color:var(--p-color-dark-variant-inverse)];
       }
 
       &--primary {
-        @apply text-accent;
+        @apply text-brand-accent;
+        @apply dark:text-dark-brand-accent;
+      }
+
+      &--info {
+        @apply text-info;
+        @apply dark:text-dark-info;
       }
 
       &--success {
         @apply text-success;
+        @apply dark:text-dark-success;
       }
 
       &--warning {
         @apply text-warning;
+        @apply dark:text-dark-warning;
       }
 
       &--danger {
         @apply text-danger;
+        @apply dark:text-dark-danger;
       }
     }
   }
@@ -115,24 +142,36 @@ export default defineComponent({
   */
   &--variant-light {
     &.badge {
+      &--default {
+        --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
+        --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
+        @apply bg-[color:var(--p-bg-variant-light)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
+      }
+
       &--primary {
-        @apply bg-accent;
+        @apply bg-[color:var(--p-color-primary-light)];
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)];
       }
 
-      &--default {
-        @apply bg-base-black/5;
+      &--info {
+        @apply bg-info;
+        @apply dark:bg-dark-info;
       }
 
       &--success {
         @apply bg-success;
+        @apply dark:bg-dark-success;
       }
 
       &--warning {
         @apply bg-warning;
+        @apply dark:bg-dark-warning;
       }
 
       &--danger {
         @apply bg-danger;
+        @apply dark:bg-dark-danger;
       }
     }
   }
@@ -143,6 +182,7 @@ export default defineComponent({
   */
   &:where(.badge--variant-inverse, .badge--dot) {
     @apply bg-default;
+    @apply dark:bg-dark-default;
   }
 
   /**

package/dist/components/badge/Badge.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
-import { ColorVariant, StyleVariant } from '.';
+import { StyleVariant } from '.';
+import { ColorVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     color: {
         type: PropType<ColorVariant>;
@@ -21,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    variant: StyleVariant;
     color: ColorVariant;
+    variant: StyleVariant;
 }>;
 export default _default;

package/dist/components/badge/index.d.ts

@@ -1,2 +1 @@
-export declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-export declare type StyleVariant = 'default' | 'light' | 'inverse';
+export type StyleVariant = 'default' | 'light' | 'inverse';

package/dist/components/banner/Banner.vue

@@ -3,10 +3,15 @@
     v-if="show"
     data-testid="banner"
     :class="classNames">
-    <div class="banner__icon">
-      <component
-        :is="icon"
-        v-if="icon" />
+    <div
+      class="banner__icon"
+      data-testid="banner-icon"
+      :class="{ 'banner__icon--custom' : $slots.icon }">
+      <slot name="icon">
+        <component
+          :is="icon"
+          v-if="icon" />
+      </slot>
     </div>
     <div class="banner__body">
       <slot :close="close" />
@@ -79,10 +84,12 @@ export default defineComponent({
 <style lang="postcss">
 .banner {
   @apply p-4 flex space-x-2 rounded text-subtle;
+  @apply dark:text-dark-subtle;
 
   a {
     &:not(.btn) {
-      @apply underline decoration-solid text-accent;
+      @apply underline decoration-solid text-info;
+      @apply dark:text-dark-info;
     }
   }
 
@@ -95,18 +102,22 @@ export default defineComponent({
   }
 
   &&--info {
-    @apply bg-subtle;
+    @apply bg-base;
+    @apply dark:bg-dark-base;
 
     .banner__icon {
-      @apply text-accent;
+      @apply text-info;
+      @apply dark:text-dark-info;
     }
   }
 
   &&--danger {
     @apply bg-danger;
+    @apply dark:bg-dark-danger;
 
     .banner__icon {
       @apply text-danger;
+      @apply dark:text-dark-danger;
     }
   }
 
@@ -121,6 +132,7 @@ export default defineComponent({
 
   &__close {
     @apply cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 }
 </style>

package/dist/components/banner/Banner.vue.d.ts

@@ -24,7 +24,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onDismissed?: (...args: any[]) => any;
+    onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     dismissable: boolean;

package/dist/components/banner/index.d.ts

@@ -1 +1 @@
-export declare type StyleVariant = 'info' | 'danger';
+export type StyleVariant = 'info' | 'danger';

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -76,6 +76,7 @@ export default defineComponent({
 
     & > a {
       @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply dark:text-dark-subtle;
     }
 
     & > span {

package/dist/components/breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     tagName: import("vue-demi").ComputedRef<TagVariant>;
-    permalink: import("vue-demi").ComputedRef<string>;
+    permalink: import("vue-demi").ComputedRef<string | undefined>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     href: {
         type: StringConstructor;

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -49,15 +49,18 @@ export default defineComponent({
   &&--dropdown {
     .dropdown__activator {
       @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
     }
   }
 
   &&--active {
     .dropdown__activator {
       @apply text-default;
+      @apply dark:text-dark-default;
 
       & > .dropdown__caret {
         @apply text-subtle;
+        @apply dark:text-dark-subtle;
       }
     }
   }

package/dist/components/breadcrumbs/index.d.ts

@@ -6,6 +6,6 @@ interface Breadcrumb {
 export interface BreadcrumbItems extends Breadcrumb {
     subitem?: Breadcrumb[];
 }
-export declare type TagVariant = 'a' | 'span';
+export type TagVariant = 'a' | 'span';
 export declare function defineNavigation(navigation: BreadcrumbItems[]): BreadcrumbItems[];
 export {};

package/dist/components/button/Button.vue

@@ -11,8 +11,11 @@
 <script>
 import {
   computed,
-  defineComponent
+  defineComponent,
+  inject
 } from "vue-demi";
+import { BUTTONGROUP_SETTING } from "../button-group";
+import { INPUTGROUP_SETTING } from "../input-group";
 export default defineComponent({
   props: {
     variant: {
@@ -41,13 +44,19 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const inputSetting = inject(INPUTGROUP_SETTING, void 0, false);
+    const buttonSetting = inject(BUTTONGROUP_SETTING, void 0, false);
     const classNames = computed(() => {
       const result = ["btn"];
       if (props.color)
         result.push(`btn--${props.color}`);
       if (props.variant)
         result.push(`btn--variant-${props.variant}`);
-      if (props.size)
+      if (inputSetting?.size.value)
+        result.push(`btn--${inputSetting?.size.value}`);
+      else if (buttonSetting?.size.value)
+        result.push(`btn--${buttonSetting?.size.value}`);
+      else if (props.size)
         result.push(`btn--${props.size}`);
       if (props.icon)
         result.push("btn--icon");
@@ -74,14 +83,26 @@ export default defineComponent({
 * Last Update   : Nov 21, 2022
 */
 .btn {
-  --p-color-primary-hover: darken(theme(backgroundColor.accent.emphasis), 5%);
-  --p-color-primary-focus: darken(theme(backgroundColor.accent.emphasis), 10%);
+  --p-color-primary-hover: darken(theme(colors.brand.accent), 5%);
+  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.accent), 5%);
+  --p-color-primary-focus: darken(theme(colors.brand.accent), 10%);
+  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.accent), 10%);
+  --p-color-info-hover: darken(theme(backgroundColor.info.emphasis), 5%);
+  --p-color-dark-info-hover: darken(theme(backgroundColor.dark.info.emphasis), 5%);
+  --p-color-info-focus: darken(theme(backgroundColor.info.emphasis), 10%);
+  --p-color-dark-info-focus: darken(theme(backgroundColor.dark.info.emphasis), 10%);
   --p-color-success-hover: darken(theme(backgroundColor.success.emphasis), 5%);
+  --p-color-dark-success-hover: darken(theme(backgroundColor.dark.success.emphasis), 5%);
   --p-color-success-focus: darken(theme(backgroundColor.success.emphasis), 10%);
+  --p-color-dark-success-focus: darken(theme(backgroundColor.dark.success.emphasis), 10%);
   --p-color-warning-hover: darken(theme(backgroundColor.warning.emphasis), 5%);
+  --p-color-dark-warning-hover: darken(theme(backgroundColor.dark.warning.emphasis), 5%);
   --p-color-warning-focus: darken(theme(backgroundColor.warning.emphasis), 10%);
+  --p-color-dark-warning-focus: darken(theme(backgroundColor.dark.warning.emphasis), 10%);
   --p-color-danger-hover: darken(theme(backgroundColor.danger.emphasis), 5%);
+  --p-color-dark-danger-hover: darken(theme(backgroundColor.dark.danger.emphasis), 5%);
   --p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
+  --p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
 
   @apply inline-flex align-middle font-medium disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
@@ -118,27 +139,38 @@ export default defineComponent({
   * default style variant
   */
   &&--variant-solid {
-    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-on-emphasis;
+    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
 
     &.btn {
       &--default {
         @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       &--primary {
-        @apply bg-accent-emphasis hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply bg-brand-accent hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply dark:bg-dark-brand-accent hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply bg-info-emphasis hover:bg-[color:var(--p-color-info-hover)] focus:bg-[color:var(--p-color-info-focus)] active:bg-[color:var(--p-color-info-focus)];
+        @apply dark:bg-dark-info-emphasis hover:dark:bg-[color:var(--p-color-dark-info-hover)] focus:dark:bg-[color:var(--p-color-dark-info-focus)] active:dark:bg-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply bg-success-emphasis hover:bg-[color:var(--p-color-success-hover)] focus:bg-[color:var(--p-color-success-focus)] active:bg-[color:var(--p-color-success-focus)];
+        @apply dark:bg-dark-success-emphasis hover:dark:bg-[color:var(--p-color-dark-success-hover)] focus:dark:bg-[color:var(--p-color-dark-success-focus)] active:dark:bg-[color:var(--p-color-dark-success-focus)]
       }
 
       &--warning {
         @apply bg-warning-emphasis hover:bg-[color:var(--p-color-warning-hover)] focus:bg-[color:var(--p-color-warning-focus)] active:bg-[color:var(--p-color-warning-focus)];
+        @apply dark:bg-dark-warning-emphasis hover:dark:bg-[color:var(--p-color-dark-warning-hover)] focus:dark:bg-[color:var(--p-color-dark-warning-focus)] active:dark:bg-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
         @apply bg-danger-emphasis hover:bg-[color:var(--p-color-danger-hover)] focus:bg-[color:var(--p-color-danger-focus)] active:bg-[color:var(--p-color-danger-focus)];
+        @apply dark:bg-dark-danger-emphasis hover:dark:bg-[color:var(--p-color-dark-danger-hover)] focus:dark:bg-[color:var(--p-color-dark-danger-focus)] active:dark:bg-[color:var(--p-color-dark-danger-focus)]
       }
     }
   }
@@ -146,6 +178,7 @@ export default defineComponent({
   &&--variant-outline,
   &&--variant-ghost {
     @apply border border-solid text-subtle hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
+    @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
   }
 
   /**
@@ -159,22 +192,32 @@ export default defineComponent({
     &.btn {
       &--default {
         @apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
+        @apply dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
       }
 
       &--primary {
-        @apply border-accent-emphasis hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply border-brand-accent hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply dark:border-dark-brand-accent hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply border-info-emphasis hover:border-[color:var(--p-color-info-hover)] focus:border-[color:var(--p-color-info-focus)] active:border-[color:var(--p-color-info-focus)];
+        @apply dark:border-dark-info-emphasis hover:dark:border-[color:var(--p-color-dark-info-hover)] focus:dark:border-[color:var(--p-color-dark-info-focus)] active:dark:border-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply border-success-emphasis hover:border-[color:var(--p-color-success-hover)] focus:border-[color:var(--p-color-success-focus)] active:border-[color:var(--p-color-success-focus)];
+        @apply dark:border-dark-success-emphasis hover:dark:border-[color:var(--p-color-dark-success-hover)] focus:dark:border-[color:var(--p-color-dark-success-focus)] active:dark:border-[color:var(--p-color-dark-success-fucus)];
       }
 
       &--warning {
         @apply border-warning-emphasis hover:border-[color:var(--p-color-warning-hover)] focus:border-[color:var(--p-color-warning-focus)] active:border-[color:var(--p-color-warning-focus)];
+        @apply dark:border-dark-warning-emphasis hover:dark:border-[color:var(--p-color-dark-warning-hover)] focus:dark:border-[color:var(--p-color-dark-warning-focus)] active:dark:border-[color:var(--p-color-dark-warning-focus)]
       }
 
       &--danger {
         @apply border-danger-emphasis hover:border-[color:var(--p-color-danger-hover)] focus:border-[color:var(--p-color-danger-focus)] active:border-[color:var(--p-color-danger-focus)];
+        @apply dark:border-dark-danger-emphasis hover:dark:border-[color:var(--p-color-dark-danger-hover)] focus:dark:border-[color:var(--p-color-dark-danger-focus)] active:dark:border-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
@@ -183,7 +226,8 @@ export default defineComponent({
   * Button ghost variant
   */
   &&--variant-ghost {
-    @apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha;
+    @apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha ;
+    @apply dark:border-transparent dark:bg-transparent hover:dark:border-dark-default-alpha hover:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:border-dark-default-alpha focus:dark:border-dark-default-alpha;
   }
 
   /**
@@ -195,39 +239,53 @@ export default defineComponent({
 
     &.btn {
       &--default {
-        @apply text-subtle hover:text-default focus:text-default active:text-default;
+        @apply text-subtle hover:text-default focus:text-default active:text-default ;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
       }
 
       &--primary {
-        @apply text-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply text-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply dark:text-dark-brand-accent hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply text-info hover:text-[color:var(--p-color-info-hover)] focus:text-[color:var(--p-color-info-focus)] active:text-[color:var(--p-color-info-focus)];
+        @apply dark:text-dark-info hover:dark:text-[color:var(--p-color-dark-info-hover)] focus:dark:text-[color:var(--p-color-dark-info-focus)] active:dark:text-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply text-success hover:text-[color:var(--p-color-success-hover)] focus:text-[color:var(--p-color-success-focus)] active:text-[color:var(--p-color-success-focus)];
+        @apply dark:text-dark-success hover:dark:text-[color:var(--p-color-dark-success-hover)] focus:dark:text-[color:var(--p-color-dark-success-focus)] active:dark:text-[color:var(--p-color-dark-success-focus)];
       }
 
       &--warning {
         @apply text-warning hover:text-[color:var(--p-color-warning-hover)] focus:text-[color:var(--p-color-warning-focus)] active:text-[color:var(--p-color-warning-focus)];
+        @apply dark:text-dark-warning hover:dark:text-[color:var(--p-color-dark-warning-hover)] focus:dark:text-[color:var(--p-color-dark-warning-focus)] active:dark:text-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
         @apply text-danger hover:text-[color:var(--p-color-danger-hover)] focus:text-[color:var(--p-color-danger-focus)] active:text-[color:var(--p-color-danger-focus)];
+        @apply dark:text-dark-danger hover:dark:text-[color:var(--p-color-dark-danger-hover)] focus:dark:text-[color:var(--p-color-dark-danger-focus)] active:dark:text-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
 
   &&--variant-input {
     @apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
+    @apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
 
     .state--disabled & {
-      @apply bg-muted border-muted pointer-events-none text-muted;
+      @apply bg-subtle border-muted pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
     }
 
     .state--error & {
       @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
 
       &:focus {
         @apply ring-danger border-danger-emphasis;
+        @apply dark:ring-dark-danger dark:border-dark-danger-emphasis;
       }
     }
   }

package/dist/components/button/Button.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -51,14 +51,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
 }>>, {
-    icon: boolean;
+    color: ColorVariant;
     variant: StyleVariant;
     size: SizeVariant;
-    color: ColorVariant;
     href: string;
+    icon: boolean;
     pill: boolean;
 }>;
 export default _default;

package/dist/components/button/index.d.ts

@@ -1,4 +1,4 @@
-export declare type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
-export declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
-export declare type TagVariant = 'a' | 'button';
+export type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
+export type ColorVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+export type TagVariant = 'a' | 'button';