@bildvitta/quasar-ui-asteroid 3.0.0-beta.3 → 3.0.0-beta.6

package/dist/vetur/asteroid-attributes.json

@@ -71,6 +71,10 @@
     "description": "Título que vai ficar no label do select de módulos.",
     "type": "string"
   },
+  "qas-app-menu/brand-menu": {
+    "description": "Imagem para ser usada como logo no menu.",
+    "type": "string"
+  },
   "qas-app-menu/modules": {
     "description": "Lista de módulos que o usuário tem acesso para navegar.",
     "type": "array"
@@ -120,7 +124,7 @@
     "type": "string"
   },
   "qas-btn/hide-label-on-small-screen": {
-    "description": "Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.",
+    "description": "Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o \"rotulo\") for passado via propriedade \"label\".",
     "type": "boolean"
   },
   "qas-btn/label": {

package/dist/vetur/asteroid-tags.json

@@ -39,6 +39,7 @@
       "model-value",
       "items",
       "title",
+      "brand-menu",
       "modules"
     ],
     "description": "Menu lateral."

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.6",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/assets/gear.svg

@@ -0,0 +1,27 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+  <g>
+    <path id="small" fill="#424242" d="m86.6 10.3v-0.1c-1.5-2-3.3-3.7-5.4-5.3v0.1c-1.7 1.3-3.4 2.7-5 4.1-0.7-0.4-1.3-0.7-1.9-1-0.8-0.4-1.6-0.8-2.5-1-0.3-0.1-0.6-0.2-0.9-0.2-0.2-2.2-0.4-4.4-0.7-6.6-1-0.2-2-0.2-3.1-0.3h-1.6c-1 0.1-1.9 0.1-2.8 0.3-0.3 2.1-0.5 4.3-0.6 6.5-0.4 0-0.7 0.1-1.1 0.2-0.1 0-0.2 0-0.3 0.1-0.8 0.2-1.6 0.6-2.4 1-0.7 0.3-1.3 0.6-1.9 1-1.7-1.4-3.3-2.7-5-4.1l-0.1-0.1c-0.4 0.3-0.8 0.6-1.1 0.9-0.7 0.5-1.3 1.1-1.8 1.7-0.9 0.8-1.6 1.8-2.4 2.8h0.1c1.3 1.7 2.7 3.3 4.1 5-0.4 0.6-0.8 1.3-1.1 1.9-0.4 0.8-0.7 1.7-0.9 2.5-0.2 0.4-0.3 0.8-0.3 1.1-2.2 0.2-4.4 0.4-6.5 0.7-0.2 1-0.3 2-0.3 3.1 0 1.5 0.1 3 0.4 4.4 2.1 0.2 4.2 0.4 6.4 0.6 0 0.4 0.1 0.8 0.3 1.1 0.2 0.9 0.5 1.7 0.9 2.6 0.4 0.7 0.7 1.4 1.2 2-1.4 1.7-2.8 3.3-4.1 5 1.5 2.1 3.3 3.9 5.4 5.4v-0.1c1.6-1.3 3.3-2.7 4.9-4.1h0.1c0.5 0.3 1.1 0.6 1.6 0.9 0.9 0.4 1.9 0.8 2.8 1 0.4 0.1 0.7 0.2 1 0.3 0.2 2.1 0.4 4.3 0.7 6.5 0.9 0.1 1.8 0.2 2.8 0.2h1.5c1.1 0 2.2-0.1 3.3-0.3 0.2-2.1 0.4-4.3 0.6-6.5 0.3-0.1 0.6-0.2 0.9-0.3 0.9-0.2 1.7-0.5 2.5-0.9 0.7-0.3 1.4-0.7 2.1-1.2 0 0.1 0 0.1 0.1 0.1 1.6 1.4 3.3 2.8 5 4.1 0.3-0.2 0.6-0.4 1-0.7 0.6-0.5 1.2-1.1 1.7-1.7 0.9-0.9 1.8-1.9 2.6-3-1.4-1.7-2.8-3.4-4.2-5v-0.1c0.3-0.5 0.6-1.1 0.9-1.7 0.3-0.8 0.7-1.6 0.9-2.4 0-0.1 0-0.2 0.1-0.2 0-0.4 0.1-0.7 0.2-0.9 2.2-0.2 4.4-0.4 6.5-0.6 0.2-1 0.2-2 0.3-3v-1.7c-0.1-1-0.1-2-0.3-3-2.1-0.2-4.3-0.4-6.5-0.6-0.1-0.3-0.2-0.6-0.2-0.9-0.3-0.9-0.6-1.8-1-2.7-0.3-0.6-0.7-1.3-1-1.9 1.3-1.6 2.7-3.3 4.1-5zm-26.7 8.3c1.8-1.9 4-2.8 6.5-2.7 2.6-0.1 4.7 0.8 6.6 2.7 1.8 1.8 2.7 4 2.7 6.5 0 2.6-0.9 4.7-2.7 6.6-1.9 1.8-4 2.7-6.6 2.7-2.5 0-4.7-0.9-6.5-2.7-1.8-1.9-2.7-4-2.7-6.6 0-2.5 0.9-4.7 2.7-6.5z"></path>
+    <path fill="#424242" d="m66.5 17.2c-2.2 0-4 0.8-5.6 2.3-1.5 1.6-2.3 3.4-2.3 5.6s0.8 4 2.3 5.6c1.6 1.6 3.4 2.4 5.6 2.4s4-0.8 5.6-2.4 2.3-3.4 2.3-5.6-0.7-4-2.3-5.6c-1.6-1.5-3.4-2.3-5.6-2.3zm-4.2 3.7c1.2-1.1 2.6-1.7 4.2-1.7s3 0.6 4.2 1.7c1.2 1.2 1.7 2.5 1.7 4.2s-0.5 3.1-1.7 4.2c-1.2 1.2-2.6 1.8-4.2 1.8s-3-0.6-4.2-1.8c-1.1-1.1-1.7-2.5-1.7-4.2 0-1.6 0.6-3 1.7-4.2z"/>
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      from="360 66 25.1"
+      to="0 66 25.1"
+      dur="6s"
+      repeatCount="indefinite"/>
+  </g>
+  <g>
+    <path id="big" fill="#424242" d="m40.8 33.6c-0.4-0.2-0.7-0.3-1-0.3-1.2-0.3-2.4-0.5-3.6-0.7-1.1 2.7-2 5.3-2.9 7.9h-1.8c-1.2 0.1-2.3 0.2-3.4 0.4-0.9 0.1-1.8 0.4-2.7 0.7-1.6-2.3-3.3-4.6-4.9-6.8l-0.1-0.1c-0.6 0.2-1.2 0.4-1.7 0.7-1 0.4-1.9 0.9-2.8 1.5-1.4 0.7-2.7 1.6-3.9 2.7v0.1c1.2 2.5 2.3 5 3.5 7.5-0.7 0.7-1.3 1.3-1.9 2.1-0.8 0.8-1.5 1.8-2.1 2.8-0.3 0.4-0.5 0.8-0.7 1.3-2.8-0.5-5.6-1-8.4-1.4-0.5 1.2-1 2.4-1.4 3.7-0.4 2-0.8 3.9-1 5.8l7.8 3v1.4c0 1.1 0.1 2.3 0.4 3.5 0.1 1 0.4 2 0.7 3-2.3 1.6-4.5 3.2-6.8 4.9 1.2 3 2.9 5.8 4.9 8.4h0.1c2.5-1.2 5-2.3 7.6-3.5 0.6 0.6 1.2 1.1 1.8 1.7 0.9 0.8 2 1.5 3.2 2.2 0.3 0.2 0.7 0.4 1.1 0.7-0.5 2.7-0.9 5.5-1.3 8.3 1.1 0.5 2.2 0.9 3.4 1.2 0.3 0.1 0.9 0.3 1.9 0.5 1.4 0.4 2.8 0.6 4.1 0.8 1.1-2.7 2.1-5.3 3-8h1.3c1.2 0 2.3-0.1 3.4-0.3 1-0.2 2-0.5 3-0.8 0 0 0 0.1 0.1 0.1 1.6 2.3 3.3 4.6 4.9 6.9 0.5-0.3 1-0.5 1.4-0.7 1-0.4 1.9-0.9 2.8-1.4 1.5-0.9 2.9-1.9 4.2-3-1.1-2.6-2.3-5.1-3.5-7.7 0.6-0.6 1.1-1.2 1.7-1.8 0.7-0.9 1.4-1.9 2-2.8 0-0.1 0.1-0.2 0.1-0.3 0.2-0.3 0.4-0.7 0.6-1 2.8 0.5 5.6 0.9 8.4 1.4 0.5-1.2 0.9-2.4 1.3-3.7 0.1-0.3 0.2-0.6 0.3-1 0.1-0.3 0.1-0.6 0.3-1 0.2-1.3 0.5-2.6 0.6-3.8-2.6-1.1-5.3-2-7.9-3v-1.2c0-1.2-0.1-2.5-0.4-3.7-0.1-0.9-0.4-1.8-0.6-2.7 2.3-1.6 4.6-3.3 6.8-5h0.1c-1.2-3-2.8-5.8-5-8.4-2.6 1.1-5.1 2.3-7.6 3.5-0.7-0.7-1.4-1.4-2.1-2-0.9-0.7-1.8-1.4-2.8-1.9-0.3-0.3-0.7-0.5-1-0.7 0.4-2.8 0.9-5.6 1.3-8.4-1.2-0.5-2.5-1-3.8-1.4-0.3-0.1-0.7-0.2-1-0.2zm-18.6 37.4c-1.7-2.9-2.1-5.9-1.2-9.1 0.8-3.2 2.7-5.6 5.6-7.3 2.8-1.6 5.9-2 9-1.2 3.2 0.9 5.7 2.7 7.3 5.6 1.7 2.9 2.1 5.9 1.2 9.1-0.8 3.2-2.7 5.6-5.5 7.2-3 1.7-6 2.1-9.1 1.2-3.2-0.8-5.7-2.7-7.3-5.5z"></path>
+    <path fill="#424242" d="m22.8 62.4c-0.8 2.7-0.5 5.3 0.9 7.7h0.1c1.4 2.5 3.5 4 6.2 4.8 2.7 0.7 5.3 0.4 7.8-1 2.5-1.5 4-3.5 4.8-6.2v-0.1c0.7-2.7 0.3-5.3-1.1-7.7-1.4-2.5-3.5-4.1-6.2-4.8-2.7-0.8-5.4-0.4-7.8 1-2.5 1.4-4 3.5-4.7 6.3zm6-4c1.9-1.1 3.8-1.4 5.8-0.8 2 0.5 3.6 1.7 4.7 3.6 1.1 1.8 1.3 3.8 0.8 5.8-0.6 2-1.8 3.6-3.6 4.6v0.1c-1.9 1-3.8 1.3-5.8 0.7-2.1-0.5-3.6-1.7-4.7-3.6-1-1.8-1.3-3.7-0.8-5.8 0.6-2 1.8-3.5 3.6-4.6z" />
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      from="0 32.5 65"
+      to="360 32.5 65"
+      dur="6s"
+      repeatCount="indefinite"/>
+  </g>
+</svg>

package/src/components/actions-menu/QasActionsMenu.vue

@@ -3,7 +3,7 @@
     <q-menu class="qas-actions-menu__menu">
       <q-list class="qas-actions-menu__list" separator>
         <slot v-for="(item, key) in list" :item="item" :name="key">
-          <q-item :key="key" class="text-bold text-primary" clickable v-bind="item.props" @click="onClick(item)">
+          <q-item :key="key" class="text-primary" clickable v-bind="item.props" @click="onClick(item)">
             <q-item-section>
               <div class="flex items-center justify-center q-gutter-x-md">
                 <q-icon :name="item.icon" size="sm" />
@@ -15,7 +15,7 @@
 
         <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item" @success="onDeleteSuccess">
           <q-item-section>
-            <div class="flex items-center justify-center q-gutter-x-sm text-bold">
+            <div class="flex items-center justify-center q-gutter-x-sm">
               <q-icon :name="deleteIcon" size="sm" />
               <div>{{ deleteLabel }}</div>
             </div>

package/src/components/app-bar/QasAppBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-header class="bg-white qas-app-bar shadow-primary" height-hint="70">
+  <q-header class="bg-white qas-app-bar shadow-14" height-hint="70">
     <q-toolbar class="qas-app-bar__toolbar" color="bg-white">
       <q-ajax-bar color="white" position="top" size="2px" />
 
@@ -30,7 +30,7 @@
             <div class="ellipsis text-bold">{{ user.email }}</div>
           </div>
 
-          <q-menu anchor="bottom end" class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
+          <q-menu anchor="bottom end" class="shadow-14" max-height="400px" :offset="[0, 5]" self="top end">
             <div class="qas-app-bar__user-menu">
               <div class="q-pa-lg text-center">
                 <button class="unset" @click="goToProfile">

package/src/components/app-menu/QasAppMenu.vue

@@ -35,9 +35,8 @@
         </q-list>
       </div>
 
-      <div class="q-mx-md">
-        <!-- TODO: O Modular não é o Asteroid, então não podemos manter esse logo aqui. -->
-        <img v-if="!isMini" alt="Modular" class="block q-mb-md q-mx-auto" src="../../assets/logo-modular.svg">
+      <div v-if="brandMenu" class="q-mx-md">
+        <img v-if="!isMini" :alt="title" class="block q-mb-md q-mx-auto" :src="brandMenu">
       </div>
     </div>
   </q-drawer>
@@ -65,6 +64,11 @@ export default {
       type: String
     },
 
+    brandMenu: {
+      default: '',
+      type: String
+    },
+
     modules: {
       default: () => [],
       type: Array

package/src/components/app-menu/QasAppMenu.yml

@@ -18,6 +18,10 @@ props:
     desc: Título que vai ficar no label do select de módulos.
     type: String
 
+  brand-menu:
+    desc: Imagem para ser usada como logo no menu.
+    type: String
+
   modules:
     desc: Lista de módulos que o usuário tem acesso para navegar.
     type: Array

package/src/components/box/QasBox.vue

@@ -22,7 +22,7 @@ export default {
     boxClass () {
       return {
         'border-primary-contrast': this.outlined,
-        'shadow-primary': !this.unelevated
+        'shadow-14': !this.unelevated
       }
     }
   }

package/src/components/btn/QasBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn color="primary" no-caps unelevated v-bind="attributes">
-    <slot v-if="showLabel" />
+    <slot />
 
     <template v-for="(_, name) in slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
@@ -32,7 +32,7 @@ export default {
     },
 
     hasLabel () {
-      return !!(this.label || this.$slots.default)
+      return !!this.label
     },
 
     showLabel () {

package/src/components/btn/QasBtn.yml

@@ -8,7 +8,7 @@ meta:
 
 props:
   hide-label-on-small-screen:
-    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
     type: Boolean
 
   label:

package/src/components/card/QasCard.vue

@@ -71,7 +71,7 @@ export default {
     },
 
     cardClasses () {
-      return this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1'
+      return this.formMode ? 'bg-white border-primary no-shadow' : 'shadow-14'
     },
 
     gutterClass () {

package/src/components/copy/QasCopy.vue

@@ -2,7 +2,7 @@
   <span>
     <slot>{{ text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="grey-5" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
+    <qas-btn class="q-ml-xs" color="grey-7" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>

package/src/components/filters/QasFilters.vue

@@ -41,7 +41,7 @@
     </div>
 
     <div v-if="useChip && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="primary" dense removable size="md" text-color="white" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -150,7 +150,7 @@ export default {
     },
 
     filterButtonColor () {
-      return this.hasActiveFilters ? 'primary' : 'grey-8'
+      return this.hasActiveFilters ? 'primary' : 'grey-9'
     },
 
     filterButtonLabel () {

package/src/components/list-items/QasListItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qas-list-items shadow-primary">
+  <div class="qas-list-items shadow-14">
     <q-list bordered class="rounded-borders" separator>
       <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="!redirectOnIcon" :to="redirect(item)">
         <slot :index="index" :item="item" name="item">

package/src/components/list-view/QasListView.vue

@@ -17,8 +17,8 @@
         <div v-else-if="!mx_isFetching">
           <slot name="empty-results">
             <div class="q-my-xl text-center">
-              <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
-              <div class="text-grey-6">Nenhum item encontrado.</div>
+              <q-icon class="q-mb-sm text-center" color="grey-7" name="o_search" size="38px" />
+              <div class="text-grey-7">Nenhum item encontrado.</div>
             </div>
           </slot>
         </div>

package/src/components/resizer/QasResizer.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-img :ratio="ratio" spinner-color="grey-6" :src="imageSource">
+  <q-img :ratio="ratio" spinner-color="grey-7" :src="imageSource">
     <template #error>
       <div class="absolute-full bg-grey-2 flex flex-center text-grey">⚠︎</div>
     </template>

package/src/components/signature-pad/QasSignaturePad.vue

@@ -116,7 +116,7 @@ export default {
 <style lang="scss">
 .qas-signature-pad {
   &__canvas {
-    border: 1px solid $grey-3;
+    border: 1px solid $separator-color;
   }
 }
 </style>

package/src/components/single-view/QasSingleView.vue

@@ -9,8 +9,8 @@
     </template>
 
     <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
-      <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
-      <div class="text-grey-6">Nenhum item encontrado.</div>
+      <q-icon class="q-mb-sm text-center" color="grey-7" name="o_search" size="38px" />
+      <div class="text-grey-7">Nenhum item encontrado.</div>
     </div>
 
     <footer v-if="mx_hasFooterSlot">

package/src/components/uploader/QasUploader.vue

@@ -28,7 +28,7 @@
         <slot name="list" :scope="scope">
           <div class="col-12 q-col-gutter-md row">
             <div v-for="(file, index) in getFilesList(scope.files, scope)" :key="index" class="row" :class="itemClass">
-              <qas-avatar class="q-mr-sm" color="grey-3" icon="o_attach_file" :image="file.image" rounded :text-color="getColorFileIcon(file)" />
+              <qas-avatar class="q-mr-sm" color="contrast-primary" icon="o_attach_file" :image="file.image" rounded :text-color="getColorFileIcon(file)" />
 
               <div class="col items-center no-wrap row">
                 <div class="column no-wrap" :class="{ col: isMultiple }">
@@ -328,7 +328,7 @@ export default {
     },
 
     getFileNameClass (isFailed) {
-      return isFailed ? 'text-negative' : 'text-grey-8'
+      return isFailed ? 'text-negative' : 'text-grey-9'
     },
 
     isFailed (file) {

package/src/composables/index.js

@@ -1 +1 @@
-export { default as useHistory } from './useHistory.js'
+export { default as useHistory } from './use-history.js'

package/src/css/components/base.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: $background-color;
+}

package/src/css/components/field.scss

@@ -0,0 +1,4 @@
+.q-field--outlined .q-field__inner {
+  background-color: white;
+  border-radius: $generic-border-radius;
+}

package/src/css/components/index.scss

@@ -0,0 +1,4 @@
+@import './base';
+@import './field';
+@import './radio';
+@import './tabs';

package/src/css/components/radio.scss

@@ -0,0 +1,3 @@
+.q-radio__inner::before {
+  color: $primary;
+}

package/src/css/components/tabs.scss

@@ -0,0 +1,3 @@
+.q-tabs__arrow {
+  color: $primary;
+}

package/src/css/mixins/index.scss

@@ -0,0 +1 @@
+@import './set-brand';

package/src/css/utils/index.scss

@@ -0,0 +1,9 @@
+@import './background';
+@import './border';
+@import './border-radius';
+@import './container';
+@import './fonts';
+@import './line-height';
+@import './opacity';
+@import './text';
+@import './unset';

package/src/css/variables/button.scss

@@ -0,0 +1,3 @@
+$button-font-size: 0.875rem;
+$button-line-height: 1.5rem;
+$button-font-weight: 500;

package/src/css/variables/index.scss

@@ -0,0 +1,3 @@
+@import './button';
+@import './shadow';
+@import './typography';

package/src/css/variables/shadow.scss

@@ -0,0 +1,33 @@
+$shadow-color: $accent;
+
+$elevation-umbra: $shadow-color;
+$elevation-penumbra: $shadow-color;
+$elevation-ambient: $shadow-color;
+
+// Embossed
+$shadow-2: (
+  0 1px 5px $elevation-umbra,
+  0 2px 2px $elevation-penumbra,
+  0 3px 1px -2px $elevation-ambient
+);
+
+// Shallow
+$shadow-6: (
+  0 3px 5px -1px $elevation-umbra,
+  0 6px 10px $elevation-penumbra,
+  0 1px 18px $elevation-ambient
+);
+
+// Overhead
+$shadow-14: (
+  0 7px 9px -4px $elevation-umbra,
+  0 14px 21px 2px $elevation-penumbra,
+  0 5px 26px 4px $elevation-ambient
+);
+
+// levite
+$shadow-20: (
+  0 10px 13px -6px $elevation-umbra,
+  0 20px 31px 3px $elevation-penumbra,
+  0 8px 38px 7px $elevation-ambient
+);

package/src/css/variables/typography.scss

@@ -0,0 +1,139 @@
+// Definições seguindo:
+// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
+
+// Quasar:
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/variables.sass
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/core/typography.sass
+
+@use 'sass:map';
+
+// headings
+$h1: (
+  size: 6rem,
+  line-height: 6rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h2: (
+  size: 3.75rem,
+  line-height: 3.75rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h3: (
+  size: 3rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+$h4: (
+  size: 2.125rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h5: (
+  size: 1.5rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h6: (
+  size: 1.25rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+// subtitles
+$subtitle1: (
+  size: 1rem,
+  line-height: 1.75rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$subtitle2: (
+  size: 0.875rem,
+  line-height: 1.375rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+// body
+$body1: (
+  size: 1rem,
+  line-height: 1.5rem,
+  letter-spacing: 0,
+  weight: 500
+);
+
+$body2: (
+  size: 0.875rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 400
+);
+
+// overline
+$overline: (
+  size: 0.75rem,
+  line-height: 2rem,
+  letter-spacing: 0.25rem,
+  weight: 600
+);
+
+// caption
+$caption: (
+  size: 0.75rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$headings: (
+  'h1': $h1,
+  'h2': $h2,
+  'h3': $h3,
+  'h4': $h4,
+  'h5': $h5,
+  'h6': $h6,
+  'subtitle1': $subtitle1,
+  'subtitle2': $subtitle2,
+  'body1': $body1,
+  'body2': $body2,
+  'overline': $overline,
+  'caption': $caption
+);
+
+// adiciona tags com mesmo estilo do css
+$h-tags: (
+  h1: map.get($headings, 'h1'),
+  h2: map.get($headings, 'h2'),
+  h3: map.get($headings, 'h3'),
+  h4: map.get($headings, 'h4'),
+  h5: map.get($headings, 'h5'),
+  h6: map.get($headings, 'h6')
+);
+
+// sobrescreve as tags do html para adicionar "margin"
+@each $heading, $value in $h-tags {
+  #{$heading} {
+    font-size: map.get($value, 'size');
+    font-weight: map.get($value, 'weight');
+    letter-spacing: map.get($value, 'letter-spacing');
+    line-height: map.get($value, 'line-height');
+    margin: map.get($value, 'margin');
+  }
+}

package/src/index.scss

@@ -5,6 +5,7 @@ $primary: var(--q-primary);
 $primary-contrast: var(--q-primary-contrast);
 $secondary: var(--q-secondary);
 $secondary-contrast: var(--q-secondary-contrast);
+$accent: var(--q-accent);
 
 // Asteroid variables
 :root {
@@ -15,17 +16,14 @@ $secondary-contrast: var(--q-secondary-contrast);
 $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
 
-@import './css/background';
-@import './css/border';
-@import './css/border-radius';
-@import './css/container';
-@import './css/fonts';
-@import './css/line-height';
-@import './css/opacity';
-@import './css/shadow';
-@import './css/text';
-@import './css/unset';
+// variables
+@import './css/variables/index';
 
-// Design System
-@import './css/design-system';
-@import './css/design-system/index';
+// components
+@import './css/components/index';
+
+// utils
+@import './css/utils/index';
+
+// mixins
+@import './css/mixins/index'

package/src/pages/ErrorComponent.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="column error-component items-center justify-around q-px-xl">
+    <div class="column full-width items-center justify-center q-gutter-md q-py-md row">
+      <q-img src="../assets/gear.svg" :width="gearSize" />
+      <div class="text-bold text-h1 text-primary">{{ code }}</div>
+      <div class="text-bold text-center text-grey-9 text-h6">{{ title }}</div>
+      <div v-if="subtitle" class="text-bold text-center text-grey-9 text-subtitle2">{{ subtitle }}</div>
+      <qas-btn v-if="hasButtonProps" class="text-bold text-primary" v-bind="buttonProps" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorComponent',
+
+  props: {
+    buttonProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    code: {
+      type: String,
+      required: true
+    },
+
+    subtitle: {
+      type: String,
+      default: ''
+    },
+
+    title: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    gearSize () {
+      return this.$qas.screen.isSmall ? '90px' : '160px'
+    },
+
+    hasButtonProps () {
+      return !!Object.keys(this.buttonProps).length
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-component {
+  background-color: var(--qas-background-color);
+  min-height: 100vh;
+}
+</style>