@privyid/persona 0.3.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Privy Identitas Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,3 +10,7 @@ Learn more about this package: https://privy-open-source.github.io/design-system
 
 - Run `npm run dev:prepare` to generate type stubs.
 - Use `npm run dev` to start [playground](./playground) in development mode.
+
+## License
+
+[MIT License](/LICENSE)

package/dist/components/app/App.vue

@@ -15,14 +15,15 @@
   * Hyperlink
   */
   a {
-    @apply underline text-primary-100 hover:text-primary-hovered;
+    --p-color-primary-hover: darken(theme(backgroundColor.accent.emphasis), 5%);
+    @apply underline text-accent hover:bg-[color:var(--p-color-primary-hover)];
   }
 
   /**
   * Caption
   */
   caption {
-    @apply text-xs text-subtext-100;
+    @apply text-xs text-muted;
   }
 
 }

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,3 @@
+import { Directive } from 'vue-demi';
+export declare const pAspectRatio: Directive<HTMLElement, number>;
+export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number>;

package/dist/components/aspect-ratio/index.mjs

@@ -0,0 +1,21 @@
+import { calculateRatio } from "./utils/calculate-ratio.mjs";
+import { getObserver } from "./utils/resize-observer.mjs";
+export const pAspectRatio = {
+  async mounted(el, { value, modifiers }) {
+    const observer = await getObserver();
+    el.dataset.aspectRatio = `${value}`;
+    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
+    calculateRatio(el, value, !!modifiers.fixed);
+    observer.observe(el);
+  },
+  updated(el, { value, modifiers }) {
+    el.dataset.aspectRatio = `${value}`;
+    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
+    calculateRatio(el, value, !!modifiers.fixed);
+  },
+  async beforeUnmount(el) {
+    const observer = await getObserver();
+    observer.unobserve(el);
+  }
+};
+export const vPAspectRatio = pAspectRatio;

package/dist/components/aspect-ratio/utils/calculate-ratio.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calculate and apply ratio to element
+ * @param el HTMLElement
+ * @param ratio aspect ratio
+ * @param fixed enable fixed size
+ */
+export declare function calculateRatio(el: HTMLElement, ratio: number, fixed?: boolean): void;

package/dist/components/aspect-ratio/utils/calculate-ratio.mjs

@@ -0,0 +1,10 @@
+export function calculateRatio(el, ratio, fixed = false) {
+  if (Number.isFinite(ratio)) {
+    const width = el.clientWidth;
+    const height = width / ratio;
+    if (fixed)
+      el.style.height = `${height}px`;
+    else
+      el.style.minHeight = `${height}px`;
+  }
+}

package/dist/components/aspect-ratio/utils/resize-observer.d.ts

@@ -0,0 +1 @@
+export declare function getObserver(): Promise<ResizeObserver>;

package/dist/components/aspect-ratio/utils/resize-observer.mjs

@@ -0,0 +1,22 @@
+import { calculateRatio } from "./calculate-ratio.mjs";
+let observer;
+export async function getObserver() {
+  let Observer = window.ResizeObserver;
+  if (!Observer) {
+    const {
+      ResizeObserver: Polyfill
+    } = await import("@juggle/resize-observer");
+    Observer = Polyfill;
+  }
+  if (!observer) {
+    observer = new Observer((entries) => {
+      for (const entry of entries) {
+        const target = entry.target;
+        const ratio = Number.parseFloat(target.dataset.aspectRatio);
+        const fixed = target.dataset.aspectFixed === "true";
+        calculateRatio(target, ratio, fixed);
+      }
+    });
+  }
+  return observer;
+}

package/dist/components/avatar/Avatar.vue

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

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

@@ -1,6 +1,5 @@
 import { PropType } from 'vue-demi';
-declare type TypeVariant = 'image' | 'alias';
-declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import { TypeVariant, SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;

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

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

package/dist/components/badge/Badge.vue

@@ -15,7 +15,7 @@ export default defineComponent({
   props: {
     color: {
       type: String,
-      default: "primary"
+      default: "default"
     },
     variant: {
       type: String,
@@ -28,7 +28,7 @@ export default defineComponent({
       if (props.color)
         result.push(`badge--${props.color}`);
       if (props.variant)
-        result.push(`badge--${props.variant}`);
+        result.push(`badge--variant-${props.variant}`);
       return result;
     });
     return { classNames };
@@ -48,42 +48,34 @@ export default defineComponent({
   * Set global style
   * of badge
   */
-  @apply inline-block font-bold text-xs px-2 py-0.5 text-white rounded-full;
+  @apply inline-block font-bold text-xs px-2 py-0.5 text-on-emphasis rounded-full;
 
   /**
   * Provide colors variant
-  * 7 colors variant available
-  * primary, secondary, success
-  * info, warning, danger, & gold
+  * 4 colors variant available
+  * primary, success, warning
+  * & danger
   */
-  &--default {
+  &&--variant-default {
     &.badge {
-      &--primary {
-        @apply bg-primary-100;
+      &--default {
+        @apply bg-emphasis-subtle;
       }
 
-      &--secondary {
-        @apply bg-secondary-100;
+      &--primary {
+        @apply bg-accent-emphasis;
       }
 
       &--success {
-        @apply bg-success-100;
-      }
-
-      &--info {
-        @apply bg-info-100;
+        @apply bg-success-emphasis;
       }
 
       &--warning {
-        @apply bg-warning-100;
+        @apply bg-warning-emphasis;
       }
 
       &--danger {
-        @apply bg-danger-100;
-      }
-
-      &--gold {
-        @apply bg-gold-100;
+        @apply bg-danger-emphasis;
       }
     }
   }
@@ -92,35 +84,27 @@ export default defineComponent({
   * Set color of Badge
   * in light and inverse variant
   */
-  &--light,
-  &--inverse {
+  &&--variant-light,
+  &&--variant-inverse {
     &.badge {
-      &--primary {
-        @apply text-primary-100;
+      &--default {
+        @apply text-subtle;
       }
 
-      &--secondary {
-        @apply text-body-75;
+      &--primary {
+        @apply text-accent;
       }
 
       &--success {
-        @apply text-success-100;
-      }
-
-      &--info {
-        @apply text-info-100;
+        @apply text-success;
       }
 
       &--warning {
-        @apply text-warning-100;
+        @apply text-warning;
       }
 
       &--danger {
-        @apply text-danger-100;
-      }
-
-      &--gold {
-        @apply text-gold-100;
+        @apply text-danger;
       }
     }
   }
@@ -129,34 +113,26 @@ export default defineComponent({
   * Set background
   * in light variant
   */
-  &--light {
+  &--variant-light {
     &.badge {
       &--primary {
-        @apply bg-primary-5;
+        @apply bg-accent;
       }
 
-      &--secondary {
-        @apply bg-secondary-5;
+      &--default {
+        @apply bg-base-black/5;
       }
 
       &--success {
-        @apply bg-success-5;
-      }
-
-      &--info {
-        @apply bg-info-5;
+        @apply bg-success;
       }
 
       &--warning {
-        @apply bg-warning-5;
+        @apply bg-warning;
       }
 
       &--danger {
-        @apply bg-danger-5;
-      }
-
-      &--gold {
-        @apply bg-gold-5;
+        @apply bg-danger;
       }
     }
   }
@@ -165,16 +141,15 @@ export default defineComponent({
   * Remove background
   * in inverse and dot variant
   */
-  &--inverse,
-  &--dot {
-    @apply bg-transparent;
+  &:where(.badge--variant-inverse, .badge--dot) {
+    @apply bg-default;
   }
 
   /**
   * Reset box-model of
   * dot variant
   */
-  &--dot {
+  &&--dot {
     @apply p-0 m-0 tracking-[0];
 
     .dot {

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

@@ -1,6 +1,5 @@
 import { PropType } from 'vue-demi';
-declare type ColorVariant = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'gold';
-declare type StyleVariant = 'default' | 'light' | 'inverse';
+import { ColorVariant, StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     color: {
         type: PropType<ColorVariant>;

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

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

package/dist/components/banner/Banner.vue

@@ -78,26 +78,40 @@ export default defineComponent({
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex gap-2 rounded text-body-100;
+  @apply p-4 flex space-x-2 rounded text-subtle;
 
-  &--info {
-    @apply bg-background-100;
+  a {
+    &:not(.btn) {
+      @apply underline decoration-solid text-accent;
+    }
+  }
+
+  .subheading {
+    &:not(&--md) {
+      @apply mb-1;
+    }
+
+    @apply mb-2;
+  }
+
+  &&--info {
+    @apply bg-subtle;
 
     .banner__icon {
-      @apply text-primary-100;
+      @apply text-accent;
     }
   }
 
-  &--danger {
-    @apply bg-danger-5;
+  &&--danger {
+    @apply bg-danger;
 
     .banner__icon {
-      @apply text-danger-100;
+      @apply text-danger;
     }
   }
 
   &__body {
-    @apply flex-grow;
+    @apply flex-grow text-sm;
   }
 
   &__icon,
@@ -106,7 +120,7 @@ export default defineComponent({
   }
 
   &__close {
-    @apply cursor-pointer text-black text-opacity-30 hover:text-opacity-50;
+    @apply cursor-pointer text-default/30 hover:text-default/50;
   }
 }
 </style>

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-declare type StyleVariant = 'info' | 'danger';
+import { StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;

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

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