@visualizevalue/mint-app-base 0.0.6 → 0.1.0

package/app/assets/styles/variables.css

@@ -1,193 +1,17 @@
-:root {
-  /* GRAYS */
-  --white:    rgb(255,255,255);
-  --gray-50:  rgb(250,250,250);
-  --gray-100: rgb(245,245,245);
-  --gray-200: rgb(229,229,229);
-  --gray-300: rgb(212,212,212);
-  --gray-400: rgb(163,163,163);
-  --gray-500: rgb(115,115,115);
-  --gray-600: rgb(82,82,82);
-  --gray-700: rgb(64,64,64);
-  --gray-800: rgb(38,38,38);
-  --gray-900: rgb(19,19,19);
-  --gray-950: rgb(10,10,10);
-  --black:    rgb(0, 0, 0);
-
-  /* SEMI */
-  --white-semi:    rgba(255,255,255, 0.7);
-  --gray-50-semi:  rgba(250,250,250, 0.7);
-  --gray-100-semi: rgba(245,245,245, 0.7);
-  --gray-200-semi: rgba(229,229,229, 0.7);
-  --gray-300-semi: rgba(212,212,212, 0.7);
-  --gray-400-semi: rgba(163,163,163, 0.7);
-  --gray-500-semi: rgba(115,115,115, 0.7);
-  --gray-600-semi: rgba(82,82,82, 0.7);
-  --gray-700-semi: rgba(64,64,64, 0.7);
-  --gray-800-semi: rgba(38,38,38, 0.7);
-  --gray-900-semi: rgba(23,23,23, 0.7);
-  --gray-950-semi: rgba(10,10,10, 0.7);
-  --black-semi:    rgba(0, 0, 0, 0.7);
-
-  /* COLORS */
-  --red:   #EF4444;
-  --green: #94E337;
-
-  /* PRESET COLORS */
-  --error:   var(--red);
-  --success: var(--green);
-
-  /* SIZES */
-  --100vh:   100dvh;
-  --size-0:  0.125rem;
-  --size-1:  0.25rem;
-  --size-2:  0.5rem;
-  --size-3:  0.75rem;
-  --size-4:  1rem;
-  --size-5:  1.25rem;
-  --size-6:  1.5rem;
-  --size-7:  2rem;
-  --size-8:  3rem;
-  --size-9:  4.5rem;
-  --size-10: 6rem;
-
-  --spacer-xs: var(--size-0);
-  --spacer-sm: var(--size-2);
-  --spacer: var(--size-4);
-  --spacer-lg: var(--size-7);
-  --spacer-xl: var(--size-9);
-
-  --border-radius: var(--size-1);
-
-  /* FONTS */
-  --font-family-main: serif;
-  --font-family-prose: var(--font-family-main);
-  --font-family-ui:    var(--font-family-main);
-
-  --font-base: 13px;
-  --font-base: 15px;
-  --font-xs: calc(var(--font-base) * 0.8);
-  --font-sm: calc(var(--font-base) * 0.8);
-  --font-lg: min(calc(var(--font-base) + 1vw * 2), calc(var(--font-base) * 1.25));
-  --font-xl: min(calc(var(--font-lg) + 1vw * 2), calc(var(--font-lg) * 1.25));
-  --font-title: min(calc(var(--size-4) + 1vw * 2), var(--size-7));
-  --font-display: min(calc(var(--size-6) + 1vw * 2), var(--size-8));
-  --font-weight-light: 300;
-  --font-weight: normal;
-  --font-weight-bold: bold;
-  --rem: 16px;
-
-  --letter-spacing-sm: -0.025em;
-  --letter-spacing: 0.025em;
-  --letter-spacing-md: 0.05em;
-  --letter-spacing-lg: 0.1em;
-
-  --line-height-sm: 105%;
-  --line-height:    100%;
-  --line-height-md: 120%;
-  --line-height-lg: 160%;
-
-  --text-transform: none;
-
-  /* ANIMATION */
-  --speed-fast: 0.15s;
-  --speed:      0.3s;
-  --speed-slow: 0.75s;
-
-  /* COMPONENTS */
-  --dialog-width: 27rem;
-  --content-width: 40rem;
-  --content-width-lg: 72rem;
-  --navbar-height: calc(var(--size-8) + var(--size-4));
-  --navbar-width: calc(var(--size-8) + var(--size-4));
-
-  /* BORDERS */
-  --border-color: var(--gray-z-2);
-  --border-color-light: var(--gray-z-4);
-  --border-color-dark: var(--gray-z-1);
-  --border: 1px solid var(--border-color);
-  --border-dark: 1px solid var(--border-color-dark);
-  --border-shadow: 0 0 0 1px var(--border-color);
-
-  /* SHADOWS */
-  --shadow:
-    0 var(--size-0) var(--size-2) var(--gray-z-1-semi),
-    0 var(--size-2) var(--size-7) calc(-1 * var(--size-5)) var(--gray-z-3-semi);
-
-  /* BACKGROUNDS */
-  --blur: blur(var(--size-1));
-}
-
-/* DARK */
-:root {
-  --background: var(--black);
-  --gray-z-0: var(--gray-950);
-  --gray-z-1: var(--gray-900);
-  --gray-z-2: var(--gray-800);
-  --gray-z-3: var(--gray-700);
-  --gray-z-4: var(--gray-600);
-  --gray-z-5: var(--gray-500);
-  --gray-z-6: var(--gray-400);
-  --gray-z-7: var(--gray-300);
-  --gray-z-8: var(--gray-200);
-  --gray-z-9: var(--gray-100);
-  --gray-z-10: var(--gray-50);
-  --color: var(--white);
-  --muted: var(--gray-z-6);
-  --muted-light: var(--gray-z-4);
-
-  --background-0: rgba(0, 0, 0, 0);
-  --background-semi: var(--black-semi);
-  --gray-z-0-semi: var(--gray-950-semi);
-  --gray-z-1-semi: var(--gray-900-semi);
-  --gray-z-2-semi: var(--gray-800-semi);
-  --gray-z-3-semi: var(--gray-700-semi);
-  --gray-z-4-semi: var(--gray-600-semi);
-  --gray-z-5-semi: var(--gray-500-semi);
-  --gray-z-6-semi: var(--gray-400-semi);
-  --gray-z-7-semi: var(--gray-300-semi);
-  --gray-z-8-semi: var(--gray-200-semi);
-  --gray-z-9-semi: var(--gray-100-semi);
-  --gray-z-10-semi: var(--gray-50-semi);
-  --color-semi: var(--white-semi);
-}
-
-/* LIGHT */
-.lightmode {
-  --background: var(--white);
-  --gray-z-0: var(--gray-50);
-  --gray-z-1: var(--gray-100);
-  --gray-z-2: var(--gray-200);
-  --gray-z-3: var(--gray-300);
-  --gray-z-4: var(--gray-400);
-  --gray-z-5: var(--gray-500);
-  --gray-z-6: var(--gray-600);
-  --gray-z-7: var(--gray-700);
-  --gray-z-8: var(--gray-800);
-  --gray-z-9: var(--gray-900);
-  --gray-z-10: var(--gray-950);
-  --color: var(--black);
-
-  --background-0: rgba(255, 255, 255, 0);
-  --background-semi: var(--white-semi);
-  --gray-z-0-semi: var(--gray-50-semi);
-  --gray-z-1-semi: var(--gray-100-semi);
-  --gray-z-2-semi: var(--gray-200-semi);
-  --gray-z-3-semi: var(--gray-300-semi);
-  --gray-z-4-semi: var(--gray-400-semi);
-  --gray-z-5-semi: var(--gray-500-semi);
-  --gray-z-6-semi: var(--gray-600-semi);
-  --gray-z-7-semi: var(--gray-700-semi);
-  --gray-z-8-semi: var(--gray-800-semi);
-  --gray-z-9-semi: var(--gray-900-semi);
-  --gray-z-10-semi: var(--gray-950-semi);
-  --color-semi: var(--black-semi);
-}
-
-/* SCALING */
-@media (--md) {
-  :root {
-    --font-sm: calc(var(--size-3) + var(--size-0));
-  }
-}
+/*
+* Here we import the individual variable files.
+* They are thematically grouped. Note that the order matters,
+* since some files depend on others.
+*/
+
+@import "./variables/colors.css";
+@import "./variables/sizes.css";
+@import "./variables/fonts.css";
+@import "./variables/borders.css";
+@import "./variables/effects.css";
+@import "./variables/animations.css";
+
+@import "./variables/ui.css";
+@import "./variables/components.css";
+@import "./variables/layout.css";
 

package/app/assets/styles/web3-modals.css

@@ -12,15 +12,10 @@ wcm-modal {
 }
 
 /* Metamask */
-.select-modal {
+.install-model {
   > div:first-child {
     opacity: 1 !important;
-    background: linear-gradient(
-      45deg,
-      var(--gray-z-0-semi),
-      var(--gray-z-1-semi),
-      var(--gray-z-2-semi)
-    ) !important;
+    background: var(--backdrop-background-color) !important;
     backdrop-filter: var(--blur) !important;
   }
 }

package/app/components/Account.client.vue

@@ -11,7 +11,7 @@ const props = defineProps(['address'])
 
 const address = computed(() => props.address?.value || props.address)
 
-const { data: ens } = await useEnsName({
+const { data: ens } = useEnsName({
   address,
   chainId: 1,
 })

package/app/components/Actions.vue

@@ -6,13 +6,12 @@
 
 <style scoped>
 menu {
-  width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   display: flex;
-  gap: var(--spacer);
-  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacer-sm);
 
   &:empty {
     display: none;

package/app/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header :style="{ borderColor: y > 10 ? 'var(--border-color)' : 'transparent' }">
+  <header>
     <ClientOnly>
       <Breadcrumbs :items="breadcrumbs" />
 
@@ -15,7 +15,6 @@
 
 <script setup>
 import { useAccount } from '@wagmi/vue'
-import { useWindowScroll } from '@vueuse/core'
 
 const { isConnected, address } = useAccount()
 const appBreadcumbs = useAppBreadcrumb()
@@ -34,18 +33,11 @@ const breadcrumbs = computed(() => {
 
   return all
 })
-
-const { y } = useWindowScroll()
 </script>
 
 <style scoped>
 header {
   height: var(--navbar-height);
-  position: fixed;
-  z-index: 999;
-  top: 0;
-  left: 0;
-  right: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -79,21 +71,6 @@ header {
       display: block;
     }
   }
-
-  :deep(> .button:last-child) {
-    margin-right: calc(-1 * var(--size-3));
-  }
-
-  &:has(+ main > .frame.full) {
-    border-color: var(--border-color) !important;
-  }
-}
-
-/* COLORS */
-header {
-  background: var(--background-semi);
-  backdrop-filter: blur(var(--size-1));
-  border-bottom: var(--border);
-  border-color: transparent;
 }
 </style>
+

package/app/components/Breadcrumbs.vue

@@ -33,7 +33,7 @@ defineProps({
   }
 
   > span > a {
-    color: var(--gray-z-5);
+    color: var(--muted);
     transition: all var(--speed);
 
     &.router-link-active-exact,
@@ -44,7 +44,7 @@ defineProps({
 
   > span:not(:last-child):after {
     content: '/';
-    color: var(--gray-z-3);
+    color: var(--);
     margin-left: var(--spacer-sm);
   }
 }

package/app/components/Button/AddCollection.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button :to="{ name: `id-create`, params: { id } }" class="small">
+    <Icon type="add"/>
+    <span>Collection</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['id'])
+</script>

package/app/components/Button/EditProfile.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button :to="`https://app.ens.domains/${address}`" class="small">
+    <Icon type="edit" />
+    <span>Edit Profile</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['address'])
+</script>

package/app/components/Button/Profile/Discord.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
+    <Icon type="website" />
+    {{ getMainDomain(profile.url) }}
+  </Button>
+</template>
+
+<script setup>
+defineProps(['profile'])
+</script>

package/app/components/Button/Profile/Email.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button v-if="profile.email" :to="`mailto:${profile.email}`" class="small">
+    <Icon type="email" />
+    <span>{{ profile.email }}</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['profile'])
+</script>

package/app/components/Button/Profile/Github.vue

@@ -0,0 +1,11 @@
+<template>
+  <Button v-if="profile.github" :to="`https://github.com/${profile.github}`" class="small">
+    <Icon type="github" />
+    <span>{{ profile.github }}</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['profile'])
+</script>
+

package/app/components/Button/Profile/Twitter.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`" class="small">
+    <Icon type="twitter" />
+    <span>{{ profile.twitter }}</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['profile'])
+</script>

package/app/components/Button/Profile/Website.vue

@@ -0,0 +1,10 @@
+<template>
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
+    <Icon type="website" />
+    <span>{{ getMainDomain(profile.url) }}</span>
+  </Button>
+</template>
+
+<script setup>
+defineProps(['profile'])
+</script>

package/app/components/Button.vue

@@ -16,17 +16,21 @@ defineProps({
 
 <style>
 .button {
+  position: relative;
   min-width: fit-content;
   width: fit-content;
-  padding: var(--size-2) var(--size-4);
-  background: var(--background);
-  border: var(--border);
-  position: relative;
+
   display: inline-flex;
-  gap: var(--size-2);
   justify-content: center;
   align-items: center;
-  letter-spacing: var(--letter-spacing);
+  gap: var(--ui-padding-x);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+
+  background: var(--button-background);
+  padding: var(--ui-padding-y) var(--ui-padding-x);
+  border: var(--button-border);
+  border-radius: var(--button-border-radius);
 
   &.non-interactive,
   &[disabled]:not([disabled="false"]) {
@@ -37,58 +41,36 @@ defineProps({
   }
 
   &:--highlight {
-    background: var(--border-color);
+    background: var(--button-background-highlight);
   }
 
   > span {
     display: flex;
-    gap: var(--size-2);
+    gap: var(--ui-padding-x);
+    line-height: var(--ui-line-height);
     justify-content: center;
     text-align: center;
     align-items: center;
     width: 100%;
     height: 100%;
-
-    .icon {
-      width: var(--size-4);
-      height: var(--size-4);
-    }
   }
 
-  &.left {
-    justify-content: flex-start;
-    text-align: left;
-  }
-
-  &.block {
-    width: 100%;
-  }
-
-  &.small {
-    padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
+  &.small,
+  &.small > * {
     font-size: var(--font-sm);
     min-height: 0;
-
-    > span {
-      .icon {
-        width: var(--size-3);
-        height: var(--size-3);
-      }
-    }
+    gap: calc(var(--ui-padding-x) / 2);
   }
 
   &.link {
     display: inline-flex;
     align-self: baseline;
     align-items: baseline;
-    gap: var(--size-0);
     height: inherit;
-    min-height: 0;
-    /* margin: 0 var(--spacer-sm) !important; */
     margin: 0 !important;
-    padding: 0 var(--size-0) !important;
+    padding-top: 0;
+    padding-bottom: 0;
     line-height: inherit;
-    border: 0;
 
     .icon {
       align-self: center;

package/app/components/CheckSpinner.vue

@@ -5,15 +5,6 @@
   </svg>
 </template>
 
-<script setup>
-const { fill } = defineProps({
-  fill: {
-    type: String,
-    default: 'currentColor',
-  },
-})
-</script>
-
 <style scoped>
 svg {
   height: var(--size-5);
@@ -27,13 +18,4 @@ svg {
     transform-origin: center;
   }
 }
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>

package/app/components/Collection/Intro.vue

@@ -5,14 +5,14 @@
     </figure>
     <div class="text">
       <div>
-        <h1>{{ collection.name }} <small>({{ collection.symbol }})</small></h1>
-        <p v-if="collection.description" class="muted-light">
+        <h1>{{ collection.name || 'Unnamed Collection' }} <small v-if="collection.symbol">({{ collection.symbol }})</small></h1>
+        <p v-if="collection.description">
           <ExpandableText :text="collection.description" />
         </p>
       </div>
 
-      <div>
-        <p v-if="id" class="muted-light">
+      <div v-if="id">
+        <p>
           <span>
             By <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
           </span>
@@ -31,7 +31,10 @@
           :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
           id="mint-new"
           class="small"
-        >Mint New</Button>
+        >
+          <Icon type="add" />
+          <span>Mint New</span>
+        </Button>
       </menu>
     </div>
   </header>
@@ -87,7 +90,7 @@ header.collection-intro {
 
     h1 {
       small {
-        color: var(--muted-light);
+        color: var(--);
         font-size: var(--font-base);
       }
     }

package/app/components/Collection/OverviewCard.vue

@@ -1,16 +1,21 @@
 <template>
   <article class="collection-overview-card">
     <Image v-if="collection.image" :src="collection.image" :alt="collection.name" />
+
     <div class="text">
-      <div>
-        <h1>{{ collection.name }} <small>({{ collection.symbol }})</small></h1>
-        <p v-if="collection.description" class="muted-light">{{ shortDescription }}</p>
+      <div v-if="collection.name || collection.symbol || collection.description">
+        <h1 v-if="collection.name || collection.symbol">
+          <span>{{ collection.name }}</span>
+          <small v-if="collection.symbol">({{ collection.symbol }})</small>
+        </h1>
+        <p v-if="collection.description">{{ shortDescription }}</p>
       </div>
 
       <div>
         <p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
       </div>
     </div>
+
     <CardLink
       :to="{ name: 'id-collection', params: { id: collection.owner, collection: collection.address } }"
       :title="`View ${collection.name}`"
@@ -32,10 +37,13 @@ article.collection-overview-card {
   padding: var(--spacer);
   gap: var(--spacer);
   transition: all var(--speed);
+  border-radius: var(--card-border-radius);
+  background: var(--card-background);
   border: var(--card-border);
 
   &:has(> a:--highlight) {
-    background: var(--gray-z-0);
+    background: var(--card-background-highlight);
+    border-color: var(--card-border-color-highlight);
   }
 
   @media (--sm) {
@@ -60,12 +68,12 @@ article.collection-overview-card {
     }
 
     > div:last-child {
-      color: var(--muted-light);
+      color: var(--);
     }
 
     h1 {
       small {
-        color: var(--muted-light);
+        color: var(--);
         font-size: var(--font-base);
       }
     }

package/app/components/Collection/Withdraw.client.vue

@@ -20,7 +20,8 @@
   }" skip-confirmation auto-close-success @complete="onComplete">
     <template #start="{ start }">
       <Button @click="start" class="small">
-        Withdraw ({{ balance.value }} {{ balance.format }})
+        <Icon type="withdraw" />
+        <span>Withdraw ({{ balance.value }} {{ balance.format }})</span>
       </Button>
     </template>
   </TransactionFlow>

package/app/components/DialogFrame.vue

@@ -1,10 +1,14 @@
 <template>
-  <dialog ref="dialog">
-    <slot />
-  </dialog>
+  <Teleport to="body">
+    <dialog ref="dialog" :class="class">
+      <slot />
+    </dialog>
+  </Teleport>
 </template>
 
 <script setup>
+defineProps({ class: 'String' })
+
 const dialog = ref()
 
 const close = () => {
@@ -56,12 +60,7 @@ dialog {
   }
 
   &::backdrop {
-    background-image: linear-gradient(
-      45deg,
-      var(--gray-z-0-semi),
-      var(--gray-z-1-semi),
-      var(--gray-z-2-semi)
-    );
+    background: var(--dialog-background-color);
     backdrop-filter: var(--blur);
     pointer-events: none;
   }