@bildvitta/quasar-ui-asteroid 3.13.0-beta.15 → 3.13.0-beta.17

package/package.json

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

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

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="hasActions" class="qas-actions-menu">
+  <div v-if="hasActions" class="qas-actions-menu" data-cy="actions-menu">
     <component :is="component.is" v-bind="component.props" variant="tertiary" @click.stop.prevent>
-      <q-list v-if="isBtnDropdown">
+      <q-list v-if="isBtnDropdown" data-cy="actions-menu-list">
         <slot v-for="(item, key) in actions" :item="item" :name="key">
-          <q-item v-bind="item.props" :key="key" clickable @click="onClick(item)">
+          <q-item v-bind="item.props" :key="key" clickable data-cy="actions-menu-list-item" @click="onClick(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -196,7 +196,7 @@ function useDelete () {
   if (hasDelete.value) {
     Object.assign(deleteBtnProps, {
       delete: {
-        color: 'grey-9',
+        color: 'grey-10',
         icon: props.deleteIcon,
         label: props.deleteLabel,
         handler: () => qas.delete(props.deleteProps)

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

@@ -70,3 +70,16 @@ slots:
             }
           "
         ]
+
+selectors:
+  'actions-menu':
+    desc: Seletor do componente.
+    examples: ['data-cy="actions-menu"']
+
+  'actions-menu-list':
+    desc: Seletor da lista de ações.
+    examples: ['data-cy="actions-menu-list"']
+
+  'actions-menu-list-item':
+    desc: Seletor para cada item da lista de ações.
+    examples: ['data-cy="actions-menu-list-item"']

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

@@ -1,7 +1,7 @@
 <template>
   <q-header class="qas-app-bar shadow-2" height-hint="56">
-    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-9">
-      <qas-btn color="grey-9" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
+    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-10">
+      <qas-btn color="grey-10" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
 
       <q-toolbar-title>
         <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
@@ -108,7 +108,7 @@ function toggleMenuDrawer () {
   }
 
   &__brand {
-    max-width: 164px;
+    max-width: 115px;
   }
 }
 </style>

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

@@ -5,12 +5,12 @@
         <div class="full-width">
           <!-- Brand -->
           <div v-if="!screen.untilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="classes.spacedItem">
-            <router-link class="flex relative-position text-no-decoration" :class="classes.brandPosition" :to="rootRoute">
-              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" :class="classes.brand" height="40px" no-spinner :src="normalizedBrand" />
+            <router-link class="flex justify-center relative-position text-no-decoration" :to="rootRoute">
+              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" :class="classes.brand" fit="contain" height="27px" no-spinner :src="normalizedBrand" />
 
               <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ title }}</span>
 
-              <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
+              <q-badge v-if="hasDevelopmentBadge" class="q-mt-sm" color="red" :label="developmentBadgeLabel" />
             </router-link>
           </div>
 
@@ -19,7 +19,7 @@
           </div>
 
           <div v-if="screen.untilLarge" class="q-pr-xl q-pt-md text-right">
-            <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
+            <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
           </div>
 
           <!-- Module -->
@@ -30,11 +30,11 @@
           </div>
 
           <!-- List -->
-          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
+          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
             <template v-for="(menuItem, index) in items">
               <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="classes.content">
                 <q-item class="ellipsis items-center q-py-none qas-app-menu__item qas-app-menu__item--label-mini text-weight-bold">
-                  <div class="ellipsis qas-app-menu__label text-grey-9 text-subtitle2" :class="classes.spacedItem">
+                  <div class="ellipsis qas-app-menu__label text-grey-10 text-subtitle2" :class="classes.spacedItem">
                     {{ menuItem.label }}
                   </div>
                 </q-item>
@@ -193,10 +193,6 @@ const classes = computed(() => {
 
     spacedItem: {
       'qas-app-menu__label--spaced': !isMiniMode.value
-    },
-
-    brandPosition: {
-      'justify-center': isMiniMode.value
     }
   }
 })

package/src/components/app-user/QasAppUser.vue

@@ -9,7 +9,7 @@
     </div>
 
     <div class="ellipsis qas-app-user__data">
-      <div class="ellipsis qas-app-user__name text-grey-9">
+      <div class="ellipsis qas-app-user__name text-grey-10">
         {{ userName }}
       </div>
 
@@ -18,9 +18,9 @@
       </div>
     </div>
 
-    <q-menu class="shadow-2 text-grey-9" max-height="400px" v-bind="menuProps">
+    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="menuProps">
       <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
-        <qas-avatar class="q-mb-md" :image="user.photo" size="96px" :title="userName" />
+        <qas-avatar class="q-mb-md" :image="user.photo" size="64px" :title="userName" />
 
         <div class="ellipsis qas-app-user__menu-name">
           {{ userName }}
@@ -85,7 +85,7 @@ defineOptions({ name: 'QasAppUser' })
 
 const props = defineProps({
   avatarSize: {
-    default: '36px',
+    default: '40px',
     type: String
   },
 

package/src/components/badge/QasBadge.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 
   textColor: {
     type: String,
-    default: 'grey-9'
+    default: 'black'
   }
 })
 </script>

package/src/components/badge/QasBadge.yml

@@ -20,7 +20,7 @@ props:
 
   text-color:
     desc: Cor do texto.
-    default: grey-9
+    default: black
     type: String
 
 slots:

package/src/components/btn/QasBtn.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   color: {
     default: 'primary',
     type: String,
-    validator: value => ['grey-9', 'primary', 'white'].includes(value)
+    validator: value => ['grey-10', 'primary', 'white'].includes(value)
   },
 
   icon: {

package/src/components/btn/QasBtn.yml

@@ -8,10 +8,10 @@ meta:
 
 props:
   color:
-    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-9" ou "white".
+    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-10" ou "white".
     default: primary
     type: String
-    examples: ['grey-9', 'primary', 'white']
+    examples: ['grey-10', 'primary', 'white']
 
   icon:
     desc: Ícone a esquerda.
@@ -45,4 +45,4 @@ props:
     desc: Variantes do botão, que define para qual comportamento o botão será usado, podendo ser "primary", "secondary" ou "tertiary".
     default: tertiary
     type: String
-    examples: ['primary', 'secondary', 'tertiary']
+    examples: ['primary', 'secondary', 'tertiary']

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -15,7 +15,7 @@
     <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
 
     <div v-if="useSplit">
-      <qas-btn color="grey-9" :icon="dropdownIcon" variant="tertiary">
+      <qas-btn color="grey-10" :icon="dropdownIcon" variant="tertiary">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="menuContentClasses">
             <slot />
@@ -106,7 +106,7 @@ export default {
 
         ...defaultProps,
 
-        color: color || (!this.useSplit ? 'grey-9' : 'primary'),
+        color: color || (!this.useSplit ? 'grey-10' : 'primary'),
         ...(!this.useSplit && { iconRight: defaultIconRight }),
         ...(this.useSplit && { icon })
       }

package/src/components/chart-view/QasChartView.vue

@@ -1,9 +1,9 @@
 <template>
   <qas-header-actions v-if="hasHeaderActions" align-columns="end">
     <template #left>
-      <div v-if="title" class="text-grey-9 text-h3">
+      <h3 v-if="title" class="text-h3">
         {{ title }}
-      </div>
+      </h3>
 
       <div v-if="subtitle" class="text-body1 text-grey-8">
         {{ subtitle }}

package/src/components/date/QasDate.vue

@@ -559,7 +559,7 @@ export default {
       justify-content: space-between;
 
       .q-btn {
-        @include set-button(tertiary, false, false, grey-9);
+        @include set-button(tertiary, false, false, grey-10);
         @include set-typography($subtitle2);
 
         .q-icon {
@@ -592,7 +592,7 @@ export default {
           color: $primary !important;
         }
 
-        @include set-button(tertiary, false, false, grey-9);
+        @include set-button(tertiary, false, false, grey-10);
       }
     }
 
@@ -601,7 +601,7 @@ export default {
     }
 
     &__calendar-days-container {
-      color: $grey-9;
+      color: $grey-10;
       min-height: auto;
 
       .q-btn {

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,13 +1,13 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!useTimeOnly" color="grey-9" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
+      <qas-btn v-if="!useTimeOnly" color="grey-10" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
-      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" :disable="$attrs.readonly" icon="sym_r_access_time">
+      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-10" :disable="$attrs.readonly" icon="sym_r_access_time">
         <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>

package/src/components/delete/QasDelete.vue

@@ -69,7 +69,7 @@ export default {
     attributes () {
       return {
         ...this.$attrs,
-        color: this.isButton ? 'grey-9' : this.$attrs.color
+        color: this.isButton ? 'grey-10' : this.$attrs.color
       }
     },
 

package/src/components/dialog/QasDialog.vue

@@ -4,9 +4,9 @@
       <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-grey-9 text-h5" data-cy="dialog-title">{{ card.title }}</h5>
+            <h5 class="text-h5" data-cy="dialog-title">{{ card.title }}</h5>
 
-            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>
         </slot>
       </header>

package/src/components/filters/QasFilters.vue

@@ -177,7 +177,7 @@ export default {
     },
 
     filterButtonColor () {
-      return this.hasActiveFilters ? 'primary' : 'grey-9'
+      return this.hasActiveFilters ? 'primary' : 'grey-10'
     },
 
     filterButtonProps () {

package/src/components/filters/private/PvFiltersButton.vue

@@ -44,8 +44,8 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'grey-9',
-      validator: value => ['grey-9', 'primary', 'white'].includes(value)
+      default: 'grey-10',
+      validator: value => ['grey-10', 'primary', 'white'].includes(value)
     },
 
     error: {

package/src/components/gallery/QasGallery.vue

@@ -198,7 +198,7 @@ export default {
         list: {
           destroy: {
             label: 'Excluir',
-            color: 'grey-9',
+            color: 'grey-10',
             icon: 'sym_r_delete',
 
             handler: () => this.onDestroy(image, index)

package/src/components/gallery/private/PvGalleryCarouselDialog.vue

@@ -3,7 +3,7 @@
     <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
       <template #header>
         <div class="text-right">
-          <qas-btn v-close-popup color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+          <qas-btn v-close-popup color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
         </div>
       </template>
 
@@ -11,7 +11,7 @@
         <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" class="pv-gallery-carousel-dialog__carousel" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
           <q-carousel-slide v-for="(image, index) in images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
             <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-              <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+              <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
             </div>
           </q-carousel-slide>
         </q-carousel>

package/src/components/gallery-card/QasGalleryCard.vue

@@ -129,7 +129,7 @@ export default {
       return {
         'justify-between': this.card.name,
         'justify-right': !this.card.name,
-        'text-grey-9': !this.disable,
+        'text-grey-10': !this.disable,
         'q-mb-md': this.hasActions || this.card.name
       }
     },
@@ -142,7 +142,7 @@ export default {
         'full-width',
         'items-center',
         'justify-center',
-        'text-grey-9',
+        'text-grey-10',
         'text-subtitle2'
       ]
     }

package/src/components/label/QasLabel.vue

@@ -14,7 +14,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'grey-9'
+      default: 'grey-10'
     },
 
     count: {

package/src/components/label/QasLabel.yml

@@ -6,7 +6,7 @@ meta:
 props:
   color:
     desc: Cor do texto.
-    default: grey-9
+    default: grey-10
     type: String
 
   count:

package/src/components/nested-fields/QasNestedFields.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="fieldName" class="qas-nested-fields">
+  <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
     <div v-if="useSingleLabel" class="text-left">
       <qas-label :label="fieldLabel" typography="h5" />
     </div>
@@ -7,7 +7,7 @@
     <div ref="inputContent">
       <component :is="componentTag" v-bind="componentProps">
         <template v-for="(row, index) in nested" :key="`row-${index}`">
-          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item">
+          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
             <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
               <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
               <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" />
@@ -37,10 +37,10 @@
       <div v-if="useAdd">
         <slot :add="add" name="add-input">
           <div v-if="showAddFirstInputButton" class="text-left">
-            <qas-btn class="q-px-sm" color="primary" variant="tertiary" @click="add()">{{ addFirstInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
           </div>
 
-          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
+          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
             <div class="col">
               <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
             </div>
@@ -51,7 +51,7 @@
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="primary" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
+            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
           </div>
         </slot>
       </div>
@@ -108,7 +108,7 @@ export default {
       type: Object,
       default: () => {
         return {
-          color: 'grey-9',
+          color: 'grey-10',
           icon: 'sym_r_delete',
           label: 'Excluir',
           variant: 'tertiary'

package/src/components/nested-fields/QasNestedFields.yml

@@ -246,7 +246,6 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
-
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
@@ -254,3 +253,16 @@ events:
       value:
         desc: Novo valor do v-model
         type: String
+
+selectors:
+  'nested-fields-[fieldName]':
+    desc: Seletor criado a partir da propriedade "name" do campo.
+    examples: ['data-cy="nested-fields-companies"']
+
+  'nested-fields-item':
+    desc: Seletor para cada item do nested.
+    examples: ['data-cy="nested-fields-item"']
+
+  'nested-fields-add-btn':
+    desc: Seletor para os botões de adicionar itens ao nested.
+    examples: ['data-cy="nested-fields-add-btn"']

package/src/components/page-header/QasPageHeader.vue

@@ -2,7 +2,7 @@
   <div>
     <q-toolbar class="justify-between q-mb-lg q-px-none qas-page-header">
       <div class="ellipsis">
-        <q-toolbar-title v-if="title" class="text-grey-9 text-h3">
+        <q-toolbar-title v-if="title" class="text-h3">
           {{ title }}
         </q-toolbar-title>
 

package/src/components/pagination/QasPagination.vue

@@ -38,7 +38,7 @@ export default {
       tertiary,
       false,
       false,
-      grey-9
+      grey-10
     );
 
     min-width: 24px !important;

package/src/components/search-input/QasSearchInput.vue

@@ -3,11 +3,11 @@
     <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-        <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
+        <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
       </template>
 
       <template #append>
-        <qas-btn v-if="hasSearch" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clear" />
+        <qas-btn v-if="hasSearch" color="grey-10" icon="sym_r_clear" variant="tertiary" @click="clear" />
 
         <slot name="after-clear" />
       </template>

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -20,7 +20,7 @@
       v-if="hasBox"
       class="q-mt-md relative-position"
     >
-      <span class="text-grey-9 text-subtitle1">
+      <span class="text-grey-10 text-subtitle1">
         {{ props.listLabel }}
       </span>
 
@@ -184,7 +184,7 @@ const labelProps = computed(() => {
   return {
     label: props.label,
     margin: 'none',
-    color: hasError.value ? 'negative' : 'grey-9'
+    color: hasError.value ? 'negative' : 'grey-10'
   }
 })
 
@@ -268,7 +268,7 @@ function useList () {
 
   function getRemoveButtonProps ({ option }) {
     return {
-      color: 'grey-9',
+      color: 'grey-10',
       icon: 'sym_r_delete',
       variant: 'tertiary',
       disable: props.disable || !!option.disable,

package/src/components/table-generator/QasTableGenerator.vue

@@ -149,7 +149,7 @@ export default {
           field: name,
           label,
           name,
-          headerClasses: 'text-grey-9'
+          headerClasses: 'text-grey-10'
         })
       }
 

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -186,7 +186,7 @@ export default {
     }
 
     &__arrow:not(&--faded) {
-      color: $grey-9;
+      color: $grey-10;
       transition: color var(--qas-generic-transition);
 
       &:hover {

package/src/components/timeline/QasTimeline.vue

@@ -21,7 +21,7 @@
             </slot>
 
             <slot :item="item" name="description">
-              <div class="text-body1 text-grey-9">
+              <div class="text-body1 text-grey-10">
                 {{ item[descriptionKey] }}
               </div>
             </slot>
@@ -89,7 +89,7 @@ function getFormattedValue (item, mask) {
   }
 
   .q-timeline__subtitle {
-    color: $dark;
+    color: $grey-10;
     opacity: initial;
     padding-right: 0;
     position: relative;

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -9,7 +9,7 @@
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
             <!-- TODO: rever para o uso QasActionsMenu -->
-            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop.prevent>
+            <qas-btn color="grey-10" icon="sym_r_more_vert" variant="tertiary" @click.stop.prevent>
               <q-menu auto-close>
                 <q-list separator>
                   <q-item v-if="useAddButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node, true, tree)">

package/src/components/uploader/QasUploader.vue

@@ -621,7 +621,7 @@ export default {
 
     &__header {
       background-color: transparent;
-      color: $grey-9;
+      color: $grey-10;
     }
 
     &__list {

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -208,7 +208,7 @@ export default {
 
             destroy: {
               label: 'Excluir',
-              color: 'grey-9',
+              color: 'grey-10',
               icon: 'sym_r_delete',
 
               // callback

package/src/components/welcome/QasWelcome.vue

@@ -2,11 +2,11 @@
   <div class="q-mb-xl qas-welcome text-left">
     <div class="items-center justify-between row">
       <div>
-        <h3 class="text-grey-9 text-h3">
+        <h3 class="text-h3">
           {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
         </h3>
 
-        <div class="text-caption text-grey-8">{{ currentDay }}</div>
+        <div class="text-caption">{{ currentDay }}</div>
       </div>
 
       <slot name="actions">

package/src/css/components/base.scss

@@ -1,5 +1,6 @@
 body {
   background-color: $background-color;
+  color: $grey-8;
 }
 
 .material-symbols-rounded {

package/src/css/components/button.scss

@@ -61,8 +61,8 @@
       color: $grey-6 !important;
     }
 
-    &-grey-9 {
-      color: $grey-9 !important;
+    &-grey-10 {
+      color: $grey-10 !important;
     }
 
     &-primary {

package/src/css/components/checkbox.scss

@@ -0,0 +1,12 @@
+.q-checkbox {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &.disabled {
+    .q-checkbox__label,
+    .q-checkbox__inner {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/components/editor.scss

@@ -0,0 +1,7 @@
+.q-editor {
+  &__content {
+    @include set-typography($body1);
+
+    color: $grey-10;
+  }
+}

package/src/css/components/field.scss

@@ -1,4 +1,24 @@
-.q-field--outlined .q-field__control {
-  background-color: white;
-  border-radius: $generic-border-radius;
+.q-field {
+  &__label,
+  &--dense &__label {
+    @include set-typography($body1);
+  }
+
+  &__native,
+  &__input,
+  &--dense &__native,
+  &--dense &__input {
+    @include set-typography($body1);
+
+    color: $grey-10;
+
+    &::placeholder {
+      color: $grey-6;
+    }
+  }
+
+  &--outlined .q-field__control {
+    background-color: white;
+    border-radius: $generic-border-radius;
+  }
 }

package/src/css/components/index.scss

@@ -1,7 +1,10 @@
 @import './base';
 @import './button';
+@import './checkbox';
+@import './editor';
 @import './field';
 @import './item';
 @import './radio';
 @import './scrollbar';
 @import './tabs';
+@import './toggle';

package/src/css/components/item.scss

@@ -26,7 +26,7 @@
   }
 
   &--clickable:not(&--active) {
-    color: $grey-9;
+    color: $grey-10;
     transition: color 300ms;
 
     &:not(&.q-router-link--active):hover {

package/src/css/components/radio.scss

@@ -1,3 +1,16 @@
-.q-radio__inner::before {
-  color: $primary;
+.q-radio {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &__inner::before {
+    color: $primary;
+  }
+
+  &.disabled {
+    .q-radio__label,
+    .q-radio__inner {
+      color: $grey-6;
+    }
+  }
 }

package/src/css/components/toggle.scss

@@ -0,0 +1,11 @@
+.q-toggle {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &.disabled {
+    .q-toggle__label {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/variables/typography.scss

@@ -33,7 +33,7 @@ $h3: (
 );
 
 $h4: (
-  size: 1.125rem,
+  size: 1.25rem,
   line-height: 140%,
   letter-spacing: 0,
   weight: 600,
@@ -137,3 +137,13 @@ $h-tags: (
     margin: map.get($value, 'margin');
   }
 }
+
+// Defini as cores para os headings
+h1, .text-h1,
+h2, .text-h2,
+h3, .text-h3,
+h4, .text-h4,
+h5, .text-h5,
+h6, .text-h6 {
+  color: $grey-10;
+}

package/src/index.scss

@@ -9,7 +9,7 @@ $accent: var(--q-accent);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #fbfbfb;
+  --qas-background-color: rgba(15, 83, 175, 0.03);
   --qas-border-grey: #{$grey-4};
   --qas-generic-border-radius: 4px;
   --qas-generic-transition: 300ms;
@@ -25,6 +25,9 @@ $border-grey: var(--qas-border-grey);
 // variables
 @import './css/variables/index';
 
+// mixins
+@import './css/mixins/index';
+
 // components
 @import './css/components/index';
 
@@ -33,6 +36,3 @@ $border-grey: var(--qas-border-grey);
 
 // utils
 @import './css/utils/index';
-
-// mixins
-@import './css/mixins/index';

package/src/pages/ErrorComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container error-component flex">
     <div class="column full-width items-center justify-center row">
-      <h2 :aria-label="ariaLabelCode" class="q-mb-sm text-grey-9 text-h2" role="heading">
+      <h2 :aria-label="ariaLabelCode" class="q-mb-sm text-h2" role="heading">
         {{ code }}
       </h2>
 

package/src/shared/notify-config.js

@@ -1,5 +1,5 @@
 export default {
-  color: 'grey-9',
+  color: 'grey-10',
   progress: true,
   closeBtn: 'x',
   position: 'top',