refactor: improve button component styles (#7517)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

1. Add ghost variant
2. Improve icon style
3. Refactoring css using scss functions

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue

@@ -85,7 +85,7 @@ const handleOpenPreview = (theme: Theme) => {
               @click="activeTabId = 'local-upload'"
             >
               <template #icon>
-                <IconAddCircle class="h-full w-full" />
+                <IconAddCircle />
               </template>
               {{ $t("core.theme.common.buttons.install") }}
             </VButton>

ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -210,13 +210,13 @@ onMounted(() => {
           </VButton>
           <VButton type="default" size="sm" @click="previewModal = true">
             <template #icon>
-              <IconEye class="h-full w-full" />
+              <IconEye />
             </template>
             {{ $t("core.common.buttons.preview") }}
           </VButton>
           <VButton type="secondary" @click="themesModal = true">
             <template #icon>
-              <IconListSettings class="h-full w-full" />
+              <IconListSettings />
             </template>
             {{ $t("core.theme.actions.management") }}
           </VButton>
@@ -237,7 +237,7 @@ onMounted(() => {
             </VButton>
             <VButton type="secondary" @click="themesModal = true">
               <template #icon>
-                <IconExchange class="h-full w-full" />
+                <IconExchange />
               </template>
               {{ $t("core.theme.empty.actions.switch") }}
             </VButton>