@privyid/persona 0.9.0 → 0.11.0

package/dist/components/label/Label.vue

@@ -81,13 +81,17 @@ export default defineComponent({
 */
 
 .label {
+  --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
+
   @apply inline-flex items-center border border-transparent;
 
   /**
   * Add dismiss button
   */
   &__dismiss {
-    @apply border-l ml-3 pl-1.5 hover:cursor-pointer border-base-black/10 text-default/30 hover:text-default/50;
+    @apply border-l ml-3 pl-1.5 hover:cursor-pointer border-subtle-alpha text-default/30 hover:text-default/50;
+    @apply dark:border-dark-subtle-alpha dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 
   /**
@@ -116,31 +120,43 @@ export default defineComponent({
   * color variant
   */
   &--variant-default {
-    @apply text-on-emphasis;
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
 
     &.label {
       &--default {
-        @apply bg-emphasis-subtle;
+        @apply bg-inverse;
+        @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
         .label__dismiss {
-          @apply border-base-white/10 text-on-emphasis/30 hover:text-on-emphasis/50;
+          @apply border-default/30 text-on-emphasis/30 hover:text-on-emphasis/50;
+          @apply dark:border-dark-default/30 dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
         }
       }
 
       &--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;
       }
     }
   }
@@ -152,23 +168,33 @@ export default defineComponent({
   &--variant-light {
     &.label {
       &--default {
-        @apply bg-base-black/5 text-subtle;
+        @apply bg-subtle-alpha text-subtle;
+        @apply dark:bg-dark-subtle-alpha dark:text-dark-subtle;
       }
 
       &--primary {
-        @apply bg-accent text-accent;
+        @apply bg-[color:var(--p-color-primary-light)] text-brand-accent;
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)] dark:text-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info text-info;
+        @apply dark:bg-dark-info dark:text-dark-info;
       }
 
       &--success {
         @apply bg-success text-success;
+        @apply dark:bg-dark-success dark:text-dark-success;
       }
 
       &--warning {
         @apply bg-warning text-warning;
+        @apply dark:bg-dark-warning dark:text-dark-warning;
       }
 
       &--danger {
         @apply bg-danger text-danger;
+        @apply dark:bg-dark-danger dark:text-dark-danger;
       }
     }
   }
@@ -183,6 +209,7 @@ export default defineComponent({
     * white background and bordered
     */
     @apply bg-default text-default border-default;
+    @apply dark:bg-dark-default dark:text-dark-default dark:border-dark-default;
 
     &.label {
       &--lg,

package/dist/components/label/Label.vue.d.ts

@@ -1,7 +1,6 @@
 import { PropType } from 'vue-demi';
-declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-declare type StyleVariant = 'default' | 'light' | 'dot';
-declare type SizeVariant = 'lg' | 'md' | 'sm' | 'xs';
+import { StyleVariant } from '.';
+import { ColorVariant, SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     color: {
         type: PropType<ColorVariant>;
@@ -41,7 +40,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onDismissed?: (...args: any[]) => any;
+    onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     size: SizeVariant;

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

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'light' | 'dot';

package/dist/components/main/Main.vue

@@ -10,15 +10,18 @@
   * Permalink
   */
   a {
-    --p-color-primary-hover: darken(theme(backgroundColor.accent.emphasis), 5%);
-    @apply underline text-accent hover:bg-[color:var(--p-color-primary-hover)];
+    --p-color-link-hover: darken(theme(textColor.link), 5%);
+    --p-color-dark-link-hover: darken(theme(textColor.link), 5%);
+    @apply underline text-link hover:text-[color:var(--p-color-info-hover)];
+    @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-info-hover)];
   }
 
   /**
   * Paragraph
   */
   p {
-    @apply text-base;
+    @apply text-base text-default;
+    @apply dark:text-dark-default;
   }
 
   /**
@@ -40,6 +43,7 @@
   */
   caption {
     @apply text-xs text-muted;
+    @apply dark:text-dark-muted;
   }
 }
 </style>

package/dist/components/modal/Modal.vue

@@ -169,10 +169,21 @@ export default defineComponent({
 * Last Update   : June 24, 2022
 */
 .modal {
+  /**
+  * modal sizing variables
+  */
+  --p-modal-size-xl: 960px;
+  --p-modal-size-lg: 800px;
+  --p-modal-size-md: 600px;
+  --p-modal-size-sm: 400px;
+  --p-modal-z-index: 1060;
+  --p-modal-dismiss-z-index: calc(var(--p-modal-z-index) + 1);
+
   /**
   * Set modal backdrop
   */
-  @apply w-full h-full overflow-y-auto fixed left-0 top-0 bg-emphasis bg-opacity-30 z-[1060] overscroll-contain;
+  @apply z-[var(--p-modal-z-index)] w-full h-full overflow-y-auto fixed left-0 top-0 bg-inverse/30 text-default overscroll-contain;
+  @apply dark:bg-dark-inverse/30 dark:text-dark-default;
 
   &--banner {
     .modal {
@@ -196,9 +207,11 @@ export default defineComponent({
   */
   &__content {
     @apply my-8 bg-default rounded relative shadow-2xl;
+    @apply dark:bg-dark-default;
 
     .modal__dismiss {
-      @apply absolute top-6 right-6 mt-1.5 hover:cursor-pointer z-[1061] text-default/30 hover:text-default/50;
+      @apply absolute top-6 right-6 mt-1.5 hover:cursor-pointer z-[var(--p-modal-dismiss-z-index)] text-default/30 hover:text-default/50;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
   }
 
@@ -247,25 +260,25 @@ export default defineComponent({
   */
   &&--xl {
     .modal__content {
-      @apply w-[960px];
+      @apply w-[var(--p-modal-size-xl)];
     }
   }
 
   &&--lg {
     .modal__content {
-      @apply w-[800px];
+      @apply w-[var(--p-modal-size-lg)];
     }
   }
 
   &&--md {
     .modal__content {
-      @apply w-[600px];
+      @apply w-[var(--p-modal-size-md)];
     }
   }
 
   &&--sm {
     .modal__content {
-      @apply w-[400px];
+      @apply w-[var(--p-modal-size-sm)];
     }
   }
 

package/dist/components/modal/Modal.vue.d.ts

@@ -1,13 +1,13 @@
 import { PropType } from 'vue-demi';
-export declare type SizeVariant = 'sm' | 'md' | 'lg' | 'xl';
+export type SizeVariant = 'sm' | 'md' | 'lg' | 'xl';
 declare const _default: import("vue-demi").DefineComponent<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     modelValue: {
         type: BooleanConstructor;
@@ -49,11 +49,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     modelValue: {
         type: BooleanConstructor;
@@ -88,15 +88,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onClose?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    banner: boolean;
     size: SizeVariant;
     dismissable: boolean;
+    banner: boolean;
+    text: string;
     modelValue: boolean;
     title: string;
-    text: string;
     centered: boolean;
     noCloseOnEsc: boolean;
     noCloseOnBackdrop: boolean;

package/dist/components/nav/Nav.vue

@@ -97,15 +97,18 @@ export default defineComponent({
 
   & > &__item {
     .nav__link {
-      @apply text-subtle dark:text-muted;
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
 
       &:hover,
       &--active {
-        @apply text-default dark:text-on-emphasis;
+        @apply text-default;
+        @apply dark:text-dark-default;
       }
 
       &--disabled {
         @apply text-muted hover:text-muted focus:text-muted active:text-muted;
+        @apply dark:text-dark-muted hover:dark:text-dark-muted focus:dark:text-dark-muted active:dark:text-dark-muted;
       }
     }
   }
@@ -129,7 +132,8 @@ export default defineComponent({
     .nav__link {
       &--active {
         &:not(.nav__link--disabled) {
-          @apply border-b-on-emphasis dark:border-b-default;
+          @apply border-b-inverse;
+          @apply dark:border-b-dark-inverse;
         }
       }
     }
@@ -144,7 +148,8 @@ export default defineComponent({
 
         &--active {
           &:not(.nav__link--disabled) {
-            @apply border-r border-r-on-emphasis rounded-tr-none;
+            @apply border-r border-r-inverse rounded-tr-none;
+            @apply dark:border-r-dark-inverse;
           }
         }
       }
@@ -155,7 +160,8 @@ export default defineComponent({
 
           &--active {
             &:not(.nav__link--disabled) {
-              @apply border-l border-l-on-emphasis rounded-tl-none;
+              @apply border-l border-l-inverse rounded-tl-none;
+              @apply dark:border-l-dark-inverse;
             }
           }
         }
@@ -176,7 +182,8 @@ export default defineComponent({
     .nav__link {
       &--active {
         &:not(.nav__link--disabled) {
-          @apply border-t-default border-x-default bg-subtle;
+          @apply border-t-default border-x-default bg-base;
+          @apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-dark-base;
         }
       }
     }
@@ -189,7 +196,8 @@ export default defineComponent({
       .nav__link {
         &--active {
           &:not(.nav__link--disabled) {
-            @apply border-l-default border-y-default border-r-transparent bg-subtle rounded-l rounded-r-none;
+            @apply border-l-default border-y-default border-r-transparent bg-base rounded-l rounded-r-none;
+            @apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-dark-base;
           }
         }
       }
@@ -199,6 +207,7 @@ export default defineComponent({
           &--active {
             &:not(.nav__link--disabled) {
               @apply border-r-default border-y-default border-l-transparent rounded-r rounded-l-none;
+              @apply dark:border-r-dark-default dark:border-y-dark-default dark:border-l-transparent;
             }
           }
         }
@@ -220,7 +229,8 @@ export default defineComponent({
     .nav__link {
       &--active {
         &:not(.nav__link--disabled) {
-          @apply bg-subtle dark:bg-emphasis-alpha rounded-b;
+          @apply bg-base rounded-b;
+          @apply dark:bg-dark-base;
         }
       }
     }
@@ -234,6 +244,7 @@ export default defineComponent({
       .nav__link {
         &--active {
           @apply bg-transparent;
+          @apply dark:bg-transparent;
         }
       }
     }
@@ -303,6 +314,10 @@ export default defineComponent({
     .nav {
       @apply flex-col;
 
+      .nav__item {
+        @apply first:mx-0;
+      }
+
       &__link {
         @apply mb-0 -mr-[1px];
       }
@@ -335,6 +350,7 @@ export default defineComponent({
 
     .caption {
       @apply text-subtle;
+      @apply dark:text-dark-subtle;
     }
   }
 }

package/dist/components/nav/Nav.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     condensed: {
         type: BooleanConstructor;
@@ -54,7 +54,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     condensed: {
         type: BooleanConstructor;

package/dist/components/nav/NavForm.vue

@@ -9,7 +9,7 @@
 <style lang="postcss">
 .nav {
   &__form {
-    @apply flex items-center ml-3 flex-wrap gap-2 h-[45px];
+    @apply flex items-center ml-3 flex-wrap gap-2;
 
     input {
       @apply inline-block align-middle w-auto;

package/dist/components/nav/NavItem.vue

@@ -105,9 +105,11 @@ export default defineComponent({
 
   &__link {
     @apply block py-[10px] px-3 -mb-[1px] border border-transparent rounded-t text-base font-normal cursor-pointer hover:no-underline text-subtle hover:text-default;
+    @apply dark:text-dark-subtle hover:dark:text-dark-default;
 
     &&--active {
       @apply text-default cursor-default;
+      @apply dark:text-dark-default;
     }
 
     &&--disabled {

package/dist/components/nav/NavItem.vue.d.ts

@@ -10,16 +10,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     target: {
-        type: PropType<string>;
+        type: PropType<string | undefined>;
         default: string;
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     navItemClass: import("vue-demi").ComputedRef<string[]>;
-    link: import("vue-demi").ComputedRef<string>;
+    link: 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<{
     active: {
         type: BooleanConstructor;
@@ -31,16 +31,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     target: {
-        type: PropType<string>;
+        type: PropType<string | undefined>;
         default: string;
     };
 }>>, {
-    target: string;
-    disabled: boolean;
-    active: boolean;
     href: string;
+    active: boolean;
+    disabled: boolean;
+    target: string | undefined;
 }>;
 export default _default;

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -43,9 +43,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    icon: boolean;
     variant: StyleVariant;
     size: SizeVariant;
+    icon: boolean;
     text: string;
     noCaret: boolean;
 }>;

package/dist/components/nav/NavSubItem.vue

@@ -77,6 +77,7 @@ export default defineComponent({
     * will disabled too
     */
     @apply block text-base text-muted;
+    @apply dark:text-dark-muted;
 
     &&--collapsible {
       /**
@@ -86,6 +87,7 @@ export default defineComponent({
       */
       .nav__subitem__parent {
         @apply cursor-pointer text-default relative;
+        @apply dark:text-dark-default;
       }
 
       .nav__link__caret {
@@ -143,6 +145,7 @@ export default defineComponent({
     &:has(ul > li:not(.nav__item--disabled)) {
       .nav__subitem__parent {
         @apply text-default;
+        @apply dark:text-dark-default;
       }
     }
 
@@ -154,6 +157,7 @@ export default defineComponent({
     &:is(&--collapsible&--collapsed):has(ul > li:not(.nav__item--disabled)) {
       .nav__subitem__parent {
         @apply text-subtle hover:text-default;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
     }
   }

package/dist/components/nav/NavSubItem.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue-demi").DefineComponent<{
     text: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     collapsible: {
         type: BooleanConstructor;
@@ -13,7 +13,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, 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<{
     text: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     collapsible: {
         type: BooleanConstructor;

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

@@ -1,2 +1,2 @@
-export declare type StyleVariant = 'tabs' | 'pills' | 'lines';
-export declare type AlignVariant = 'left' | 'right' | 'center';
+export type StyleVariant = 'tabs' | 'pills' | 'lines';
+export type AlignVariant = 'left' | 'right' | 'center';

package/dist/components/navbar/Navbar.vue

@@ -81,14 +81,17 @@ export default defineComponent({
 
 <style lang="postcss">
 .navbar {
-  @apply bg-default dark:bg-emphasis-subtle relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  --p-navbar-z-index: 1030;
+
+  @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  @apply dark:bg-dark-default;
 
   &&--fixed {
-    @apply fixed left-0 top-0 w-full z-[1030];
+    @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
   }
 
   &&--shadow {
-    @apply shadow-sm transition-shadow duration-150 ease-in-out;
+    @apply shadow-lg transition-shadow duration-150 ease-in-out;
   }
 
   &&--expand {

package/dist/components/navbar/Navbar.vue.d.ts

@@ -7,8 +7,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     toggleable: {
-        type: PropType<ToggleableVariant>;
-        default: any;
+        type: PropType<ToggleableVariant | undefined>;
+        default: undefined;
     };
     fixed: {
         type: BooleanConstructor;
@@ -28,8 +28,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     toggleable: {
-        type: PropType<ToggleableVariant>;
-        default: any;
+        type: PropType<ToggleableVariant | undefined>;
+        default: undefined;
     };
     fixed: {
         type: BooleanConstructor;
@@ -42,7 +42,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     fixed: boolean;
     variant: StyleVariant;
+    toggleable: ToggleableVariant | undefined;
     condensed: boolean;
-    toggleable: ToggleableVariant;
 }>;
 export default _default;

package/dist/components/navbar/NavbarBrand.vue

@@ -22,7 +22,8 @@ export default defineComponent({
 <style lang="postcss">
   .navbar {
     &__brand {
-      @apply inline-block mr-4 text-xl py-1 font-medium;
+      @apply inline-block mr-4 text-xl py-1 font-medium text-default;
+      @apply dark:text-dark-default;
 
       img {
         @apply h-7 w-auto inline-block;

package/dist/components/navbar/NavbarBrand.vue.d.ts

@@ -1,12 +1,12 @@
 declare const _default: import("vue-demi").DefineComponent<{
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
 }, unknown, 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;
-        default: any;
+        default: undefined;
     };
 }>>, {
     href: string;