@visualizevalue/mint-app-base 0.1.0 → 0.1.1

package/app/assets/styles/base.css

@@ -1,16 +1,20 @@
-:root {
+html {
+  /*
+  * Color settings
+  */
+  background-color: var(--background);
+  color: var(--color);
+
+  /*
+  * Font settings
+  */
   font-family: var(--font-family);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight);
   font-size: var(--rem);
   font-style: normal;
   letter-spacing: var(--letter-spacing);
-
-  background-color: var(--background);
-  color: var(--color);
-
   text-transform: var(--text-transform);
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -18,8 +22,8 @@
   -webkit-text-size-adjust: 100%;
 }
 
-html,
 body {
   overflow-x: hidden;
 }
 
+

package/app/assets/styles/forms.css

@@ -134,7 +134,7 @@ form {
     font-family: var(--ui-font-family);
     text-transform: var(--text-transform-ui);
     margin: var(--size-2) 0;
-    color: var(--gray-z-7);
+    color: var(--muted);
     transition: all var(--speed);
 
     > span:first-child {

package/app/assets/styles/prose.css

@@ -20,7 +20,7 @@
 
   > * {
     margin: var(--spacer-sm) 0;
-    color: var(--gray-z-7);
+    color: var(--muted);
 
     &:first-child {
       margin-top: 0;

package/app/assets/styles/variables/borders.css

@@ -1,12 +1,13 @@
 :root {
 
-  --border-color: var(--gray-z-6);
-  --border-color-light: var(--gray-z-4);
-  --border-color-dark: var(--gray-z-1);
+  --border-color: var(--color);
   --border-width: 1px;
+
   --border: var(--border-width) solid var(--border-color);
   --border-dark: var(--border-width) solid var(--border-color-dark);
+
   --border-shadow: 0 0 0 var(--border-width) var(--border-color);
+
   --border-radius: 0;
 
 }

package/app/assets/styles/variables/colors.css

@@ -1,48 +1,20 @@
 :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);
+  --white:    white;
+  --gray:     gray;
   --black:    rgb(0, 0, 0);
 
   /* COLORS */
-  --red:   #EF4444;
-  --green: #94E337;
   --blue:  #3263D0;
-
-  /* THEME COLORS */
-  --muted:     var(--gray-z-6);
-  --error:     var(--red);
-  --success:   var(--green);
   --primary:   var(--blue);
-  --secondary: var(--blue);
 
   /*
   * Z-COLORS
-  * This makes migrating to dark/light modes much easier later.
+  * This makes migrating to dark/light modes much easier.
   * We're not thinking about color per se, but about the viewers perspective.
   */
   --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);
+  --muted:      var(--gray);
   --color:      var(--black);
 }
 

package/app/assets/styles/variables/effects.css

@@ -1,10 +1,5 @@
 :root {
-  /* 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));
 
 }

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

@@ -1,6 +1,6 @@
 wcm-modal {
   --wcm-z-index: 9999;
-  --wcm-overlay-background-color: var(--gray-z-1-semi);
+  --wcm-overlay-background-color: var(--backdrop-background-color);
   --wcm-overlay-backdrop-filter: var(--blur);
 }
 

package/app/components/Collection/OverviewCard.vue

@@ -11,7 +11,7 @@
         <p v-if="collection.description">{{ shortDescription }}</p>
       </div>
 
-      <div>
+      <div class="details">
         <p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
       </div>
     </div>
@@ -67,8 +67,8 @@ article.collection-overview-card {
       gap: var(--spacer-sm);
     }
 
-    > div:last-child {
-      color: var(--);
+    > .details {
+      color: var(--muted);
     }
 
     h1 {

package/app/components/Image.client.vue

@@ -61,7 +61,7 @@ const imageLoaded = () => {
 <style scoped>
 article.image {
   overflow: hidden;
-  background-color: var(--gray-z-2);
+  background-color: var(--background);
   overflow: hidden;
   position: relative;
   height: 0;
@@ -106,10 +106,10 @@ article.image {
 
 @keyframes imageLoading {
   from {
-    background-color: var(--gray-z-1);
+    background-color: var(--background);
   }
   to {
-    background-color: var(--gray-z-2);
+    background-color: var(--muted);
   }
 }
 </style>

package/app/components/ImagePreview.vue

@@ -1,8 +1,8 @@
 <template>
   <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="64" height="64" fill="var(--gray-z-0)"/>
-    <path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M41 35L36 30L25 41" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect width="64" height="64" fill="var(--background)"/>
+    <path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M41 35L36 30L25 41" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 </template>

package/app/components/MintTokenBar.vue

@@ -68,6 +68,7 @@ fieldset {
 
   .price {
     width: 100%;
+    color: var(--color) !important;
   }
 
   .mint {

package/app/components/TransactionFlow.vue

@@ -7,8 +7,9 @@
     :x-close="false"
     class="transaction-flow"
   >
+    <slot name="before" />
+
     <div class="text">
-      <CheckSpinner class="spinner" />
       <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
       <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
       <p v-if="error">{{ error }}</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/app/components/Page/FrameSM.vue

@@ -1,33 +0,0 @@
-<template>
-  <section class="frame-sm">
-    <slot />
-  </section>
-</template>
-
-<style scoped>
-.frame-sm {
-  width: 100%;
-  max-width: var(--dialog-width);
-  min-height: 100dvh;
-  padding: var(--spacer);
-  margin: 0 auto;
-  display: flex;
-  height: fit-content;
-  align-self: center;
-  flex-direction: column;
-  gap: var(--spacer-lg);
-  justify-content: center;
-  align-items: center;
-  background: var(--gray-z-1);
-
-  :deep(> div) {
-    width: 100%;
-  }
-
-  @media (--sm) {
-    min-height: 0;
-    margin: 0 auto 10vh;
-    border: var(--border);
-  }
-}
-</style>