[#1923] New buttons design implementation

packages/docs/src/components/DocsExample.vue

@@ -5,9 +5,8 @@
       <va-button
         v-if="!exampleOptions.forceShowCode"
         class="mt-2 d-block docs-example__show-code-button"
-        flat
+        preset="plain"
         size="small"
-        color="primary"
         @click="showCode = !showCode"
       >
         {{ showCode ? $t('docsExample.hideCode') : $t('docsExample.showCode') }}

packages/docs/src/components/DocsNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="docs-navigation">
     <va-button
-      flat
+      preset="plain"
       size="small"
       class="docs-navigation__button"
       color="gray"
@@ -12,7 +12,7 @@
     </va-button>
 
     <va-button
-      flat
+      preset="plain"
       size="small"
       class="docs-navigation__button"
       color="gray"
@@ -26,7 +26,7 @@
     <form :action="sandboxDefineUrl" method="POST" target="_blank">
       <input type="hidden" name="parameters" :value="sandboxParams" />
       <va-button
-        flat
+        preset="plain"
         type="submit"
         size="small"
         class="docs-navigation__button"

packages/docs/src/components/header/Header.vue

@@ -22,9 +22,8 @@
         <va-button
           v-for="(link, index) in links"
           :key="index"
-          flat
+          preset="secondary"
           class="header__links__button ml-2"
-          color="primary"
           :to="link.to"
           :href="link.url"
           :target="link.target"

packages/docs/src/components/header/components/ColorDropdown.vue

@@ -2,8 +2,7 @@
   <div class="color-dropdown">
     <va-button-dropdown
       class="color-dropdown__icon"
-      color="primary"
-      flat
+      preset="plain"
       label="Colors"
       :offset="[0, 25]"
     >

packages/docs/src/components/header/components/LanguageDropdown.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="language-dropdown">
     <va-button-dropdown
-      color="primary"
-      flat
+      preset="secondary"
       :label="currentLanguageName"
       :offset="[0, 10]"
     >

packages/docs/src/components/landing/Admin.vue

@@ -8,18 +8,15 @@
           <va-button class="admin__buttons--button"
                      href="https://github.com/epicmaxco/vuestic-admin"
                      target="blank"
-                     :rounded="false"
-                     color="primary"
+                     preset="plain"
           >
             <va-icon class="fa fa-github" style="margin-right: 0.5rem;" />
             {{ $t('landing.admin.buttons.github') }}
           </va-button>
           <va-button class="admin__buttons--button"
                      href="https://vuestic.epicmax.co/admin/dashboard"
                      target="blank"
-                     :rounded="false"
-                     color="primary"
-                     flat
+                     preset="plain"
           >
             {{ $t('landing.admin.buttons.demo') }}
           </va-button>

packages/docs/src/components/landing/ColorTab.vue

@@ -3,9 +3,9 @@
     <va-button-toggle
       class="pb-2"
       v-model="selectedTheme"
-      outline
-      small
-      color="primary"
+      border-color="primary"
+      preset="secondary"
+      size="small"
       :options="themeOptions"
       style="max-width: 100%;"
     />

packages/docs/src/components/landing/Customize.vue

@@ -347,7 +347,6 @@ export default class Customize extends Vue {
               <div class="component">
                 <va-button-toggle
                   v-model="theme"
-                  color="primary"
                   :options="themeToggleOptions"
                   @input="updateTheme"
                 />
@@ -367,7 +366,7 @@ export default class Customize extends Vue {
               </div>
 
               <div class="component">
-                <va-button color="primary">
+                <va-button>
                   Submit
                 </va-button>
               </div>

packages/docs/src/components/landing/Footer.vue

@@ -7,9 +7,7 @@
             class="footer__buttons__button"
             href="https://epicmax.co/about"
             target="blank"
-            :rounded="false"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="button-icon" :component="IconEpicmax" />
             {{ $t("landing.footer.buttons.epicmax") }}
@@ -18,9 +16,7 @@
             class="footer__buttons__button"
             href="https://github.com/epicmaxco/vuestic-admin"
             target="blank"
-            :rounded="false"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="button-icon" :component="IconAdmin" />
             {{ $t("landing.footer.buttons.admin") }}
@@ -29,9 +25,7 @@
             class="footer__buttons__button"
             href="https://github.com/epicmaxco/epic-spinners"
             target="blank"
-            :rounded="false"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="button-icon" :component="IconSpinners" />
             {{ $t("landing.footer.buttons.spinners") }}
@@ -42,35 +36,31 @@
             class="footer__social__item"
             href="https://github.com/epicmaxco/vuestic-ui/"
             target="blank"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="mdi mdi-github" />
           </va-button>
           <va-button
             class="footer__social__item"
             href="https://discord.gg/u7fQdqQt8c"
             target="blank"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="mdi mdi-discord" />
           </va-button>
           <va-button
             class="footer__social__item"
             href="https://www.facebook.com/epicmaxco/"
             target="blank"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="mdi mdi-facebook" />
           </va-button>
           <va-button
             class="footer__social__item"
             href="https://twitter.com/epicmaxco"
             target="blank"
-            color="primary"
-            flat
+            preset="plain"
           >
             <va-icon class="mdi mdi-twitter" />
           </va-button>

packages/docs/src/components/landing/Header.vue

@@ -14,10 +14,10 @@
         </div>
         <nav class="header__links">
           <!-- vuestic buttons -->
-          <va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.overview') }}</va-button>
-          <va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.docs') }}</va-button>
-          <va-button href="https://discord.gg/u7fQdqQt8c" target="blank" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.discord') }}</va-button>
-          <LanguageDropdown />
+          <va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" preset="secondary">{{ $t('landing.header.buttons.overview') }}</va-button>
+          <va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" preset="secondary">{{ $t('landing.header.buttons.docs') }}</va-button>
+          <va-button href="https://discord.gg/u7fQdqQt8c" target="blank" class="header__links--link" preset="secondary">{{ $t('landing.header.buttons.discord') }}</va-button>
+          <language-dropdown class="ml-2" />
           <stars-button class="ml-2" repo="epicmaxco/vuestic-ui" />
         </nav>
         <!-- mobile -->

packages/docs/src/components/landing/Preview.vue

@@ -6,8 +6,6 @@
         <div class="preview__buttons">
           <va-button class="preview__buttons--button"
             :to="`/${$root.$i18n.locale}/getting-started/installation`"
-            :rounded="false"
-            color="primary"
           >
             {{$t('landing.preview.buttons.start')}}
           </va-button>
@@ -19,9 +17,7 @@
           >
             <va-button href="https://github.com/epicmaxco/vuestic-ui"
                        target="_blank"
-                       :rounded="false"
-                       color="primary"
-                       flat
+                       preset="plain"
             >
               <va-icon class="fa fa-github" style="margin-right: 0.5rem;" />
               {{$t('landing.preview.buttons.github')}}

packages/docs/src/components/landing/SeamlessIntegration/SeamlessIntegration.vue

@@ -11,7 +11,7 @@
             <div class="block__components">
 
               <div class="component">
-                <va-button color="primary">Пампуй</va-button>
+                <va-button>Пампуй</va-button>
               </div>
 
               <div class="component">

packages/docs/src/components/landing/StarsButton.vue

@@ -3,7 +3,6 @@
     class="star-button"
     target="blank"
     :href="url"
-    :rounded="false"
     color="dark"
     size="small"
   >