@visualizevalue/mint-app-base 0.0.7 → 0.1.0

package/.env.example

@@ -5,7 +5,7 @@ NITRO_PRESET=node_cluster
 NUXT_SSR=false
 NUXT_DEVTOOLS=true
 NUXT_PUBLIC_DOMAIN=localhost
-NUXT_PUBLIC_TITLE=Mint.VV
+NUXT_PUBLIC_TITLE=Mint
 NUXT_PUBLIC_DESCRIPTION=To mint is a human right.
 
 # =========================

package/app/assets/styles/animation.css

@@ -20,15 +20,6 @@
   max-height: 0;
 }
 
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -48,3 +39,4 @@
     transform: rotate(360deg);
   }
 }
+

package/app/assets/styles/base.css

@@ -1,30 +1,21 @@
 :root {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight);
   font-size: var(--rem);
   font-style: normal;
-  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
-
-  @supports (font-variation-settings: normal) {
-    font-optical-sizing: auto;
-  }
+  letter-spacing: var(--letter-spacing);
 
   background-color: var(--background);
   color: var(--color);
-  color-scheme: dark;
 
   text-transform: var(--text-transform);
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-  letter-spacing: var(--letter-spacing);
-
-  * {
-    font-size: var(--font-base);
-  }
 }
 
 html,

package/app/assets/styles/forms.css

@@ -1,24 +1,21 @@
-.form-item,
 .button,
 button,
 input,
 textarea,
 select {
-  --padding-y: var(--size-3);
-  --padding-x: var(--size-5);
-  --background: var(--button-background);
-  --background-light: var(--button-background-highlight);
-  --border-radius: var(--button-border-radius);
-
   width: 100%;
-  font-family: var(--font-family-ui);
-  font-weight: var(--font-weight);
+  font-family: var(--ui-font-family);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
   transition: all var(--speed);
-  text-transform: var(--text-transform-ui);
+  line-height: var(--ui-line-height);
+  border-radius: var(--button-border-radius);
+  background: var(--background-background);
+  padding: var(--ui-padding-y) var(--ui-padding-x);
   user-select: none;
 
   &::placeholder {
-    text-transform: var(--text-transform-ui);
+    text-transform: var(--ui-text-transform);
   }
 
   &:-internal-autofill-selected {
@@ -28,20 +25,11 @@ select {
 
   &:--highlight {
     outline: none;
+    border-color: var(--button-border-color-highlight);
+    background: var(--button-background-highlight);
   }
 }
 
-.form-item,
-.button,
-.input,
-.textarea,
-.select {
-  min-height: calc(var(--size-7) + var(--size-2));
-  line-height: 1;
-  border-radius: var(--border-radius);
-  background: var(--background);
-}
-
 .input,
 .textarea,
 .select {
@@ -49,7 +37,7 @@ select {
   line-height: 0;
   width: 100%;
   background: var(--background);
-  padding: var(--padding-y) var(--padding-x);
+  padding: var(--ui-padding-y) var(--ui-padding-x);
   text-transform: none;
 
   border: var(--border);
@@ -98,15 +86,13 @@ select {
 
   &:has(.input:hover),
   &:has(.input:focus) {
-    background: var(--background-light);
-  }
-  &:has(.input:focus) {
-    border-color: var(--border-color-light);
+    background: var(--button-background-highlight);
+    border-color: var(--button-border-color-highlight);
   }
 
   .prefix,
   .suffix {
-    padding: 0 var(--padding-x);
+    padding: 0 var(--ui-padding-x);
     color: var(--muted);
     height: 100%;
     display: flex;
@@ -115,32 +101,10 @@ select {
   }
 
   .prefix {
-    border-right: var(--border);
+    border-right: var(--button-border);
   }
   .suffix {
-    border-left: var(--border);
-  }
-
-  /* If the prefix/suffix should look as if it's part of the content */
-  &.fluent {
-    .prefix,
-    .suffix {
-      border: none;
-    }
-    .prefix {
-      padding-right: var(--size-0);
-    }
-    .suffix {
-      padding-left: var(--size-0);
-    }
-
-    &:has(.prefix) {
-      .input,
-      .select,
-      .textarea {
-        padding-left: 0;
-      }
-    }
+    border-left: var(--button-border);
   }
 }
 
@@ -150,7 +114,7 @@ select.select:--highlight {
   line-height: 1;
   background:
     url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+),
-    var(--gray-z-0);
+    var(--button-background);
   background-repeat: no-repeat, no-repeat;
   background-position: calc(100% - var(--size-4)) 50%, 0% 0%;
   background-size: var(--size-4), 100% 100%;
@@ -167,7 +131,7 @@ form {
 
   label {
     display: block;
-    font-family: var(--font-family-ui);
+    font-family: var(--ui-font-family);
     text-transform: var(--text-transform-ui);
     margin: var(--size-2) 0;
     color: var(--gray-z-7);

package/app/assets/styles/index.css

@@ -1,12 +1,30 @@
+/*
+* We import all our variables from here.
+* They are sorted thematically into their own files.
+*/
 @import "./variables.css";
-@import "./theme.css";
+
+/*
+* A cross browser normalizer, slight adjustments on top
+* of the Tailwind normalizer.
+*/
 @import "./normalize.css";
+
+/*
+* Base element and layout styles
+*/
 @import "./base.css";
-@import "./text.css";
-@import "./utils.css";
-@import "./cards.css";
+
+/*
+* These styles are not specific to one particular components
+*/
 @import "./forms.css";
-@import "./scroll.css";
-@import "./animation.css";
+@import "./cards.css";
 @import "./prose.css";
+@import "./animation.css";
+
+/*
+* We don't control these external components,
+* but want to apply some reasonable overrides.
+*/
 @import "./web3-modals.css";

package/app/assets/styles/normalize.css

@@ -420,7 +420,7 @@ body {
 
 hr {
   border-top-width: 1px;
-  border-color: var(--gray-z-2);
+  border-color: var(--border-color);
 }
 
 /**
@@ -433,6 +433,10 @@ hr {
  * https://github.com/tailwindcss/tailwindcss/issues/362
  */
 
+i {
+  font-style: normal;
+}
+
 img {
   border-style: solid;
 }
@@ -443,7 +447,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #9ca3af;
+  color: var(--ui-placeholder-color);
 }
 
 button,
@@ -483,12 +487,13 @@ a {
  * normalize.css.
  */
 
+.button,
 button,
 input,
 optgroup,
 select,
 textarea {
-  padding: 0;
+  padding: var(--ui-padding-y) var(--ui-padding-x);
   line-height: inherit;
   color: inherit;
 }

package/app/assets/styles/prose.css

@@ -1,138 +1,12 @@
-.prose {
-  display: grid;
-  gap: var(--size-5);
-  grid-auto-rows: min-content;
-
-  /* HEADINGS */
-  h1, h2, h3 {
-    line-height: var(--line-height-md);
-  }
-  h1 {
-    font-size: var(--font-xl);
-  }
-  h2 {
-    font-size: var(--font-lg);
-    text-transform: var(--text-transform-ui);
-  }
-  h3 {
-    font-size: var(--font-lg);
-  }
-
-  /* LINKS */
-  a {
-    color: var(--primary);
-    font-weight: bold;
-    border-bottom: 3px solid transparent;
-    transition: all var(--speed);
-
-    &:--highlight {
-      border-color: var(--primary-z-2);
-    }
-  }
-
-  /* QUOTES */
-  blockquote {
-    padding-left: var(--size-5);
-    font-size: var(--font-md);
-    line-height: var(--line-height-lg);
-    border-left: 4px solid var(--gray-z-2);
-    font-style: italic;
-    font-weight: bold;
-    color: var(--gray-z-7);
-    position: relative;
-
-    cite {
-      display: block;
-      font-size: var(--font-sm);
-      line-height: var(--line-height-sm);
-      text-align: right;
-      margin: 1em 0 0;
-
-      &:before {
-        content: "–";
-        margin-right: 0.5em;
-      }
-    }
-  }
-
-  pre {
-    background: var(--gray-z-1);
-    padding: var(--spacer);
-    border: var(--border);
-    color: var(--gray-z-7);
-    border-radius: var(--size-2);
-
-    code {
-      font-family: monospace;
-      font-size: var(--font-sm);
-      line-height: var(--line-height-lg);
-    }
-  }
-
-  /* IMAGES */
-  p:has(> img) {
-    font-size: var(--font-xs);
-    line-height: var(--line-height-xs);
-    color: var(--gray-z-7);
-  }
-  img {
-    border: var(--border);
-    border-radius: var(--border-radius);
-  }
-
-  /* LISTS */
-  ol { list-style: auto; }
-  ul {
-    list-style: none;
-
-    > li {
-      position: relative;
-    }
-
-    > li:before {
-      content: "\2022";
-      position: absolute;
-      color: var(--gray-z-5);
-      font-weight: bold;
-      display: inline-block;
-      width: 1em;
-      margin-left: -1em;
-    }
-  }
-  ul, ol {
-    padding-left: 1em;
-
-    li {
-      margin: 0.25em 0;
-    }
-
-    ul, ol {
-      margin: 0;
-
-      li {
-        margin: 0;
-      }
-    }
-  }
-}
-
 /* MINIMAL PROSE */
-.minimal-prose {
+.prose {
   h1, h2, h3 {
     width: min-content;
     position: relative;
     white-space: nowrap;
     margin: var(--spacer) 0;
     color: var(--color);
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: calc(100% + var(--spacer-xs)*2);
-      left: calc(-1 * var(--spacer-xs));
-      bottom: calc(-1 * var(--spacer-xs));
-      border-bottom: 3px solid var(--border-color);
-    }
+    font-size: var(--font-lg);
   }
 
   > table {

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

@@ -0,0 +1,8 @@
+:root {
+
+  --speed-fast: 0.15s;
+  --speed:      0.3s;
+  --speed-slow: 0.75s;
+
+}
+

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

@@ -0,0 +1,13 @@
+:root {
+
+  --border-color: var(--gray-z-6);
+  --border-color-light: var(--gray-z-4);
+  --border-color-dark: var(--gray-z-1);
+  --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

@@ -0,0 +1,48 @@
+: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);
+
+  /* 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.
+  * 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);
+  --color:      var(--black);
+}
+

package/app/assets/styles/{theme.css → variables/components.css}

@@ -1,12 +1,18 @@
 :root {
+
   --card-border: var(--border);
   --card-border-radius: var(--border-radius);
   --card-background: var(--background);
-  --card-background-highlight: var(--gray-z-2);
+  --card-background-highlight: var(--background);
+  --card-border-color-highlight: var(--primary);
 
   --button-border: var(--border);
   --button-border-radius: var(--border-radius);
   --button-background: var(--background);
-  --button-background-highlight: var(--gray-z-2);
+  --button-background-highlight: var(--background);
+  --button-border-color-highlight: var(--primary);
+
+  --backdrop-background-color: transparent;
+
 }
 

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

@@ -0,0 +1,11 @@
+: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/variables/fonts.css

@@ -0,0 +1,26 @@
+:root {
+
+  --rem: 16px;
+  --font-base: var(--rem);
+  --font-xs: calc(var(--font-base) * 0.8);
+  --font-sm: calc(var(--font-base) * 0.8);
+  --font-lg: calc(var(--font-base) * 1.2);
+  --font-weight-light: 300;
+  --font-weight: normal;
+  --font-weight-bold: bold;
+  --font-family: serif;
+
+  --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;
+
+}
+

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

@@ -0,0 +1,9 @@
+:root {
+
+  --dialog-width: 27rem;
+  --content-width: 40rem;
+  --content-width-lg: 72rem;
+  --navbar-height: calc(var(--size-8) + var(--size-4));
+
+}
+

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

@@ -0,0 +1,23 @@
+:root {
+
+  --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);
+
+}
+

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

@@ -0,0 +1,17 @@
+:root {
+
+  --ui-font-family: var(--font-family);
+  --ui-font-weight: var(--font-weight);
+  --ui-text-transform: var(--text-transform);
+
+  --ui-placeholder-color: var(--muted);
+  --ui-color: var(--primary);
+  --ui-color-visited: var(--primary);
+  --ui-letter-spacing: var(--letter-spacing);
+  --ui-line-height: var(--line-height);
+
+  --ui-padding-y: var(--spacer-sm);
+  --ui-padding-x: var(--spacer-sm);
+
+}
+