@bildvitta/quasar-ui-asteroid 3.6.0-beta.0 → 3.6.0-beta.2

package/src/components/filters/QasFilters.vue

@@ -8,13 +8,13 @@
               <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
                 <template #prepend>
                   <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-                  <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
+                  <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="filter()" />
                 </template>
 
                 <template #append>
-                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
+                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clearSearch" />
 
-                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
+                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
                     <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
                       <div v-if="isFetching" class="q-pa-xl text-center">
                         <q-spinner color="grey" size="2em" />
@@ -31,11 +31,11 @@
 
                         <div class="q-col-gutter-x-md q-mt-xl row">
                           <div class="col-6">
-                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="clearFilters" />
                           </div>
 
                           <div class="col-6">
-                            <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                            <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
                           </div>
                         </div>
                       </q-form>

package/src/components/form-view/QasFormView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag" :class="mx_componentClass">
+  <component :is="mx_componentTag" class="qas-form-view" :class="mx_componentClass">
     <header v-if="mx_hasHeaderSlot">
       <slot name="header" />
     </header>
@@ -8,15 +8,15 @@
       <slot />
 
       <slot v-if="useActions" name="actions">
-        <div class="justify-end q-col-gutter-md q-my-lg row">
-          <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" outline type="button" @click="cancel" />
-          </div>
-
-          <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" />
-          </div>
-        </div>
+        <qas-actions>
+          <template #primary>
+            <qas-btn class="qas-form-view__btn" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
+          </template>
+
+          <template #secondary>
+            <qas-btn v-close-popup class="qas-form-view__btn" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" type="button" variant="secondary" @click="cancel" />
+          </template>
+        </qas-actions>
       </slot>
     </q-form>
 
@@ -161,10 +161,6 @@ export default {
   },
 
   computed: {
-    cancelButtonClass () {
-      return this.$qas.screen.isSmall && 'order-last'
-    },
-
     fetchURL () {
       return this.url ? (`${this.url}/${this.isCreateMode ? 'new' : 'edit'}`) : ''
     },
@@ -189,13 +185,9 @@ export default {
       return this.$route
     },
 
-    submitButtonClass () {
-      return this.$qas.screen.isSmall && 'order-first'
-    },
-
     defaultNotifyMessages () {
       return {
-        validationError: 'Existem campos no formulário que ainda não foram preenchidos. Complete todas as informações para avançar.',
+        validationError: 'Não conseguimos salvar as informações. Por favor, revise os campos e tente novamente.',
         error: 'Não conseguimos salvar as informações. Por favor, tente novamente em alguns minutos.',
         success: 'Informações salvas com sucesso.'
       }
@@ -434,8 +426,9 @@ export default {
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text
+        const hasFieldError = !!Object.keys(errors || {})?.length
 
-        const defaultMessage = error
+        const defaultMessage = hasFieldError
           ? this.defaultNotifyMessages.validationError
           : this.defaultNotifyMessages.error
 
@@ -462,3 +455,12 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-form-view {
+  &__btn {
+    min-width: 132px;
+    width: 100%;
+  }
+}
+</style>

package/src/components/gallery/QasGallery.vue

@@ -13,9 +13,7 @@
 
             <div v-if="useDestroy">
               <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
-                <qas-btn color="grey-9" dense :disabled="isDestroyDisabled(image)" flat round size="sm" @click="onDestroy(image, index)">
-                  <q-icon name="sym_r_delete" size="xs" />
-                </qas-btn>
+                <qas-btn color="grey-9" :disabled="isDestroyDisabled(image)" icon="sym_r_delete" variant="tertiary" @click="onDestroy(image, index)" />
               </slot>
             </div>
           </div>
@@ -26,7 +24,7 @@
 
       <slot>
         <div v-if="!hideShowMore" class="full-width text-center">
-          <qas-btn color="primary" data-cy="gallery-btn-show-more" flat :label="showMoreLabel" @click="showMore" />
+          <qas-btn color="primary" data-cy="gallery-btn-show-more" :label="showMoreLabel" variant="tertiary" @click="showMore" />
         </div>
       </slot>
 

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

@@ -1,21 +1,23 @@
 <template>
-  <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 dense flat icon="sym_r_close" rounded @click="close" />
-      </div>
-    </template>
+  <div class="pv-gallery-carousel-dialog">
+    <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" />
+        </div>
+      </template>
 
-    <template #description>
-      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" 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 dense flat icon="sym_r_close" @click="close" />
-          </div>
-        </q-carousel-slide>
-      </q-carousel>
-    </template>
-  </qas-dialog>
+      <template #description>
+        <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" />
+            </div>
+          </q-carousel-slide>
+        </q-carousel>
+      </template>
+    </qas-dialog>
+  </div>
 </template>
 
 <script>
@@ -80,3 +82,18 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.pv-gallery-carousel-dialog {
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  &__carousel .q-carousel__control .q-btn {
+    @include set-button(
+      tertiary,
+      true,
+      false,
+      primary
+    );
+  }
+}
+</style>

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

@@ -9,9 +9,7 @@
 
           <q-item-section v-if="useSectionActions" side>
             <slot :index="index" :item="item" name="item-section-side">
-              <qas-btn flat round @click="onClick({ item, index })">
-                <q-icon v-bind="iconProps" />
-              </qas-btn>
+              <qas-btn color="primary" :icon="icon" variant="tertiary" @click="onClick({ item, index })" />
             </slot>
           </q-item-section>
         </slot>
@@ -33,9 +31,9 @@ export default {
   },
 
   props: {
-    iconProps: {
-      default: () => ({ color: 'primary', name: 'sym_r_chevron_right' }),
-      type: Object
+    icon: {
+      type: String,
+      default: 'sym_r_chevron_right'
     },
 
     list: {

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

@@ -4,10 +4,10 @@ meta:
   desc: Componente para listagem.
 
 props:
-  icon-props:
-    desc: Props do [QIcon](https://quasar.dev/vue-components/icon#introduction)
-    default: { color: 'primary', name: 'sym_r_chevron_right' }
-    type: Object
+  icon:
+    desc: Nome do ícone
+    default: sym_r_chevron_right
+    type: String
 
   list:
     desc: Lista para ser selecionada.

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

@@ -26,7 +26,7 @@
           <q-spinner color="grey" size="3em" />
         </div>
 
-        <div v-if="hasPages" class="flex items-center q-mt-sm" :class="paginationClasses">
+        <div v-if="hasPages" class="flex items-center q-mt-md" :class="paginationClasses">
           <qas-pagination v-model="page" :max="totalPages" @click="changePage" />
         </div>
 

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

@@ -9,7 +9,7 @@
         <div v-for="(row, index) in nested" :id="`row-${index}`" :key="`row-${index}`" class="full-width">
           <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
             <div>
-              <div class="flex items-center justify-between q-py-xs">
+              <div class="flex items-center justify-between q-py-md">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
                 <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
               </div>
@@ -39,7 +39,7 @@
       <div v-if="useAdd" class="q-mt-md">
         <slot :add="add" name="add-input">
           <div v-if="showAddFirstInputButton" class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat @click="add()">{{ addFirstInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" variant="tertiary" @click="add()">{{ addFirstInputLabel }}</qas-btn>
           </div>
 
           <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
@@ -48,12 +48,12 @@
             </div>
 
             <div class="col-auto">
-              <qas-btn color="dark" flat icon="sym_r_add_circle_outline" round />
+              <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
             </div>
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat icon="sym_r_add" @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
           </div>
         </slot>
       </div>
@@ -106,10 +106,10 @@ export default {
       type: Object,
       default: () => {
         return {
-          label: 'Excluir',
+          color: 'grey-9',
           icon: 'sym_r_delete',
-          flat: true,
-          dense: true
+          label: 'Excluir',
+          variant: 'tertiary'
         }
       }
     },
@@ -118,11 +118,10 @@ export default {
       type: Object,
       default: () => {
         return {
-          label: 'Duplicar',
           icon: 'sym_r_content_copy',
-          flat: true,
+          label: 'Duplicar',
           useLabelOnSmallScreen: false,
-          dense: true
+          variant: 'tertiary'
         }
       }
     },

package/src/components/pagination/QasPagination.vue

@@ -19,7 +19,7 @@ export default {
         directionLinks: true,
         iconNext: 'sym_r_chevron_right',
         iconPrev: 'sym_r_chevron_left',
-        maxPages: modelValue < 3 ? 3 : 6,
+        maxPages: 3,
         modelValue,
 
         ...attributes
@@ -31,8 +31,41 @@ export default {
 
 <style lang="scss">
 .qas-pagination {
-  .q-icon {
-    color: $grey-9;
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  .q-pagination__content .q-btn {
+    @include set-button(
+      tertiary,
+      true,
+      false,
+      grey-9
+    );
+
+    min-width: max-content !important;
+
+    &.text-primary {
+      color: var(--q-primary) !important;
+    }
+  }
+
+  .q-pagination__middle + .q-btn,
+  .q-btn + .q-pagination__middle,
+  .q-btn + .q-btn {
+    margin-left: var(--qas-spacing-md) !important;
+  }
+
+  .q-pagination__content > .q-btn,
+  .q-pagination__middle > .q-btn {
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    .q-pagination__middle + .q-btn,
+    .q-btn + .q-pagination__middle,
+    .q-btn + .q-btn {
+      margin-left: var(--qas-spacing-sm) !important;
+    }
   }
 }
 </style>

package/src/components/search-box/QasSearchBox.vue

@@ -1,8 +1,8 @@
 <template>
   <qas-box>
     <qas-input v-bind="attributes" ref="search" v-model="mx_search">
-      <template #append>
-        <q-icon color="primary" name="sym_r_search" />
+      <template #prepend>
+        <q-icon color="grey-8" name="sym_r_search" />
       </template>
     </qas-input>
 

package/src/components/select-list/QasSelectList.vue

@@ -128,12 +128,9 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
-        dense: this.$qas.screen.isSmall,
-        useLabelOnSmallScreen: false,
-        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'sym_r_close' : 'sym_r_add',
-        label: isSelected ? 'Remover' : 'Adicionar',
-        outline: isSelected,
-        size: 'sm'
+        variant: 'tertiary',
+        color: isSelected ? 'grey-9' : 'primary',
+        icon: isSelected ? 'sym_r_remove' : 'sym_r_add'
       }
     },
 

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

@@ -1,7 +1,7 @@
 <template>
   <div ref="signatureContainer" class="qas-signature-pad relative-position">
     <canvas :id="canvasId" :ref="$attrs.ref" class="qas-signature-pad__canvas rounded-borders vertical-bottom" :height="height" />
-    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="sym_r_delete" round @click="clearSignature" />
+    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" icon="sym_r_delete" variant="primary" @click="clearSignature" />
   </div>
 
   <div>

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -7,7 +7,7 @@
             <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
-          <qas-btn v-if="!readonly" color="white" dense flat icon="sym_r_add" round @click="openDialog" />
+          <qas-btn v-if="!readonly" color="white" icon="sym_r_add" :use-hover-on-white-color="false" variant="tertiary" @click="openDialog" />
 
           <qas-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
           <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />

package/src/components/text-truncate/QasTextTruncate.vue

@@ -58,11 +58,16 @@ export default {
       maxPossibleWidth: '',
       showDialog: false,
       textWidth: '',
+      textContent: '',
       observer: null
     }
   },
 
   computed: {
+    description () {
+      return this.text || this.textContent
+    },
+
     truncateTextClass () {
       return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
@@ -82,7 +87,7 @@ export default {
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,
-          description: this.text
+          description: this.description
         }
       }
     }
@@ -107,6 +112,8 @@ export default {
     truncateText () {
       this.$refs.parent.style.maxWidth = '100%'
       this.textWidth = this.$refs.truncate.clientWidth
+      this.textContent = this.$refs.truncate?.innerHTML
+
       this.maxPossibleWidth = this.maxWidth || this.$refs.truncate.parentElement.clientWidth * 0.90
       this.$refs.parent.style.maxWidth = `${this.maxPossibleWidth}px`
     },

package/src/components/transfer/QasTransfer.vue

@@ -19,12 +19,12 @@
 
     <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
       <div>
-        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="sym_r_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
+        <qas-btn :class="iconClass" color="primary" :disabled="!firstQueue.length" icon="sym_r_arrow_circle_down" variant="tertiary" @click="setSelectedFromClick(true)" />
         <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
       </div>
       <div>
         <div>
-          <qas-btn :class="iconClass" dense :disabled="!secondQueue.length" flat icon="sym_r_arrow_circle_up" rounded @click="setSelectedFromClick()" />
+          <qas-btn :class="iconClass" color="primary" :disabled="!secondQueue.length" icon="sym_r_arrow_circle_up" variant="tertiary" @click="setSelectedFromClick()" />
           <q-tooltip anchor="bottom middle" self="center middle">Remover</q-tooltip>
         </div>
       </div>

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

@@ -8,7 +8,8 @@
           </span>
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
-            <qas-btn dense flat icon="sym_r_more_vert" round @click.stop>
+            <!-- TODO: rever para o uso QasActionsMenu -->
+            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop>
               <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

@@ -13,13 +13,15 @@
               </div>
             </div>
 
-            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="sym_r_add" round @click="$refs.hiddenInput.click()" />
+            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" icon="sym_r_add" :use-hover-on-white-color="false" variant="tertiary" @click="$refs.hiddenInput.click()" />
 
             <input ref="hiddenInput" :accept="attributes.accept" class="qas-uploader__input" :multiple="isMultiple" type="file">
 
-            <qas-btn ref="buttonCleanFiles" class="hidden" color="white" @click="scope.removeUploadedFiles" />
-            <qas-btn v-if="scope.canUpload" color="white" dense flat icon="sym_r_cloud_upload" round @click="scope.upload" />
-            <qas-btn v-if="scope.isUploading" color="white" dense flat icon="sym_r_clear" round @click="scope.abort" />
+            <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
+
+            <qas-btn v-if="scope.canUpload" color="white" icon="sym_r_cloud_upload" :use-hover-on-white-color="false" variant="tertiary" @click="scope.upload" />
+
+            <qas-btn v-if="scope.isUploading" color="white" icon="sym_r_clear" :use-hover-on-white-color="false" variant="tertiary" @click="scope.abort" />
           </div>
         </slot>
       </template>
@@ -37,7 +39,7 @@
                 </div>
                 <div class="items-center q-ml-sm row">
                   <q-icon v-if="file.isFailed" color="negative" name="sym_r_warning" size="20px" />
-                  <qas-btn v-if="!scope.readonly" dense flat icon="sym_r_delete" round @click="removeItem(index, scope, file)" />
+                  <qas-btn v-if="!scope.readonly" color="grey-9" icon="sym_r_delete" variant="tertiary" @click="removeItem(index, scope, file)" />
                 </div>
               </div>
             </div>

package/src/components/welcome/QasWelcome.vue

@@ -53,12 +53,12 @@ export default {
     },
 
     currentDay () {
-      const timeStamp = Date.now()
+      const timestamp = Date.now()
       const { daysList, monthsList } = dateConfig
 
       // exemplo: Quarta-feira, 11 de janeiro de 2023
       return date.formatDate(
-        timeStamp, 'dddd, DDD [de] MMMM [de] YYYY', { days: daysList, months: monthsList }
+        timestamp, 'dddd, D [de] MMMM [de] YYYY', { days: daysList, months: monthsList }
       )
     },
 

package/src/css/components/button.scss

@@ -0,0 +1,101 @@
+.qas-btn {
+  $root: &;
+
+  min-height: 48px !important;
+  padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
+  text-transform: initial !important;
+  transition: color var(--qas-generic-transition), background-color var(--qas-generic-transition);
+
+  .q-icon {
+    font-size: 24px !important;
+  }
+
+  &:disabled {
+    opacity: 1 !important;
+  }
+
+  &:not(&--primary):not(:disabled):not(&--no-hover-on-white.qas-btn--tertiary-white):hover {
+    color: var(--q-primary-contrast) !important;
+  }
+
+  &--primary {
+    background-color: var(--q-primary) !important;
+    color: white !important;
+
+    &:disabled {
+      background-color: $grey-4 !important;
+      color: $grey-8 !important;
+    }
+
+    &:not(:disabled):hover {
+      background-color: var(--q-primary-contrast) !important;
+    }
+  }
+
+  &--secondary {
+    border: 1px solid currentColor !important;
+    color: var(--q-primary) !important;
+    position: relative;
+
+    &:disabled {
+      color: $grey-8 !important;
+    }
+  }
+
+  &--primary,
+  &--secondary {
+    &-icon-only {
+      height: 48px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 48px !important;
+    }
+  }
+
+  &--tertiary {
+    min-height: 24px !important;
+    padding: 0 !important;
+
+    &:disabled {
+      color: $grey-8 !important;
+    }
+
+    &-grey-9 {
+      color: $grey-9 !important;
+    }
+
+    &-primary {
+      color: var(--q-primary) !important;
+    }
+
+    &-white {
+      color: white !important;
+    }
+
+    &-icon-only {
+      height: 24px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 24px !important;
+    }
+  }
+
+  &.q-btn {
+    &::before {
+      display: none;
+    }
+  }
+
+  .q-icon.on-left {
+    margin-right: var(--qas-spacing-xs);
+  }
+
+  .q-icon.on-right {
+    margin-left: var(--qas-spacing-xs);
+  }
+
+  .q-ripple,
+  .q-focus-helper {
+    display: none;
+  }
+}

package/src/css/components/index.scss

@@ -1,4 +1,5 @@
 @import './base';
+@import './button';
 @import './field';
 @import './item';
 @import './radio';

package/src/css/mixins/index.scss

@@ -1,2 +1,3 @@
+@import './set-button';
 @import './set-brand';
 @import './set-typography';

package/src/css/mixins/set-button.scss

@@ -0,0 +1,16 @@
+@mixin set-button($variant, $icon-only: false, $no-hover-on-white: false, $color: false) {
+  @extend .qas-btn;
+  @extend .qas-btn--#{$variant};
+
+  @if $variant == tertiary and $color {
+    @extend .qas-btn--tertiary-#{$color};
+  }
+
+  @if $icon-only {
+    @extend .qas-btn--#{$variant}-icon-only;
+  }
+
+  @if $no-hover-on-white {
+    @extend .qas-btn--no-hover-on-white;
+  }
+}