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/contents/posts/DeletedPostList.vue

@@ -227,7 +227,7 @@ watch(
           type="secondary"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.new") }}
         </VButton>

ui/console-src/modules/contents/posts/PostEditor.vue

@@ -522,7 +522,7 @@ useSlugify(
           "
         >
           <template #icon>
-            <IconHistoryLine class="h-full w-full" />
+            <IconHistoryLine />
           </template>
           {{ $t("core.post_editor.actions.snapshots") }}
         </VButton>
@@ -533,13 +533,13 @@ useSlugify(
           @click="handlePreview"
         >
           <template #icon>
-            <IconEye class="h-full w-full" />
+            <IconEye />
           </template>
           {{ $t("core.common.buttons.preview") }}
         </VButton>
         <VButton :loading="saving" size="sm" type="default" @click="handleSave">
           <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
           </template>
           {{ $t("core.common.buttons.save") }}
         </VButton>
@@ -550,7 +550,7 @@ useSlugify(
           @click="handleOpenSettingModal"
         >
           <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
           </template>
           {{ $t("core.common.buttons.setting") }}
         </VButton>
@@ -560,7 +560,7 @@ useSlugify(
           @click="handlePublishClick"
         >
           <template #icon>
-            <IconSendPlaneFill class="h-full w-full" />
+            <IconSendPlaneFill />
           </template>
           {{ $t("core.common.buttons.publish") }}
         </VButton>

ui/console-src/modules/contents/posts/PostList.vue

@@ -404,7 +404,7 @@ watch(
           type="secondary"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.new") }}
         </VButton>
@@ -583,7 +583,7 @@ watch(
                 type="secondary"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>

ui/console-src/modules/contents/posts/categories/CategoryList.vue

@@ -74,7 +74,7 @@ async function handleUpdateInBatch() {
         @click="creationModal = true"
       >
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.common.buttons.new") }}
       </VButton>
@@ -116,7 +116,7 @@ async function handleUpdateInBatch() {
                 @click="creationModal = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>

ui/console-src/modules/contents/posts/components/PostSettingModal.vue

@@ -498,6 +498,7 @@ const showCancelPublishButton = computed(() => {
           v-if="showCancelPublishButton"
           :loading="publishCanceling"
           type="danger"
+          ghost
           @click="handleUnpublish()"
         >
           {{ $t("core.common.buttons.cancel_publish") }}

ui/console-src/modules/contents/posts/tags/TagList.vue

@@ -173,7 +173,7 @@ watch(selectedTagNames, (newVal) => {
         @click="editingModal = true"
       >
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.common.buttons.new") }}
       </VButton>
@@ -274,7 +274,7 @@ watch(selectedTagNames, (newVal) => {
               </VButton>
               <VButton type="secondary" @click="editingModal = true">
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>