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/attachments/AttachmentList.vue

@@ -260,7 +260,7 @@ watch(
           @click="policyVisible = true"
         >
           <template #icon>
-            <IconDatabase2Line class="h-full w-full" />
+            <IconDatabase2Line />
           </template>
           {{ $t("core.attachment.actions.storage_policies") }}
         </VButton>
@@ -270,7 +270,7 @@ watch(
           @click="uploadVisible = true"
         >
           <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
           </template>
           {{ $t("core.common.buttons.upload") }}
         </VButton>
@@ -475,7 +475,7 @@ watch(
                     @click="uploadVisible = true"
                   >
                     <template #icon>
-                      <IconUpload class="h-full w-full" />
+                      <IconUpload />
                     </template>
                     {{ $t("core.attachment.empty.actions.upload") }}
                   </VButton>

ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue

@@ -141,7 +141,7 @@ function getPolicyTemplateDisplayName(templateName: string) {
           <VDropdown>
             <VButton type="secondary">
               <template #icon>
-                <IconAddCircle class="h-full w-full" />
+                <IconAddCircle />
               </template>
               {{ $t("core.common.buttons.new") }}
             </VButton>

ui/console-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue

@@ -265,7 +265,7 @@ const viewType = useLocalStorage("attachment-selector-view-type", "grid");
     <div class="mb-5">
       <VButton @click="uploadVisible = true">
         <template #icon>
-          <IconUpload class="h-full w-full" />
+          <IconUpload />
         </template>
         {{ $t("core.common.buttons.upload") }}
       </VButton>
@@ -286,7 +286,7 @@ const viewType = useLocalStorage("attachment-selector-view-type", "grid");
         </VButton>
         <VButton type="secondary" @click="uploadVisible = true">
           <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
           </template>
           {{ $t("core.attachment.empty.actions.upload") }}
         </VButton>

ui/console-src/modules/contents/comments/components/CommentListItem.vue

@@ -382,7 +382,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
                 </VButton>
                 <VButton type="secondary" @click="replyModal = true">
                   <template #icon>
-                    <IconAddCircle class="h-full w-full" />
+                    <IconAddCircle />
                   </template>
                   {{ $t("core.comment.reply_empty.new") }}
                 </VButton>

ui/console-src/modules/contents/pages/DeletedSinglePageList.vue

@@ -217,7 +217,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/pages/SinglePageEditor.vue

@@ -486,7 +486,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
           "
         >
           <template #icon>
-            <IconHistoryLine class="h-full w-full" />
+            <IconHistoryLine />
           </template>
           {{ $t("core.page_editor.actions.snapshots") }}
         </VButton>
@@ -497,13 +497,13 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
           @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>
@@ -514,7 +514,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
           @click="handleOpenSettingModal"
         >
           <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
           </template>
           {{ $t("core.common.buttons.setting") }}
         </VButton>
@@ -524,7 +524,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
           @click="handlePublishClick"
         >
           <template #icon>
-            <IconSendPlaneFill class="h-full w-full" />
+            <IconSendPlaneFill />
           </template>
           {{ $t("core.common.buttons.publish") }}
         </VButton>

ui/console-src/modules/contents/pages/SinglePageList.vue

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

ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue

@@ -468,6 +468,7 @@ const { handleGenerateSlug } = useSlugify(
           "
           :loading="publishCanceling"
           type="danger"
+          ghost
           @click="handleUnpublish()"
         >
           {{ $t("core.common.buttons.cancel_publish") }}

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>

ui/console-src/modules/dashboard/Dashboard.vue

@@ -43,7 +43,7 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
         @click="$router.push({ name: 'DashboardDesigner' })"
       >
         <template #icon>
-          <IconSettings class="h-full w-full" />
+          <IconSettings />
         </template>
         {{ $t("core.dashboard.actions.setting") }}
       </VButton>

ui/console-src/modules/dashboard/DashboardDesigner.vue

@@ -37,7 +37,6 @@ import {
 import type { GridLayout } from "vue-grid-layout";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
-import RiArrowGoBackLine from "~icons/ri/arrow-go-back-line";
 import RiBox3Line from "~icons/ri/box-3-line";
 import RiFileCopyLine from "~icons/ri/file-copy-line";
 import WidgetEditableItem from "./components/WidgetEditableItem.vue";
@@ -339,16 +338,13 @@ function handleCopyFromLayout(breakpoint: string) {
       ></VTabbar>
     </div>
     <VSpace>
-      <VButton @click="handleBack">
+      <VButton ghost @click="handleBack">
-        <template #icon>
-          <RiArrowGoBackLine class="h-full w-full" />
-        </template>
         {{ $t("core.common.buttons.back") }}
       </VButton>
       <VDropdown>
         <VButton>
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.dashboard_designer.actions.add_widget") }}
         </VButton>
@@ -396,7 +392,7 @@ function handleCopyFromLayout(breakpoint: string) {
         @click="handleSave"
       >
         <template #icon>
-          <IconSave class="h-full w-full" />
+          <IconSave />
         </template>
         {{ $t("core.common.buttons.save") }}
       </VButton>

ui/console-src/modules/interface/menus/Menus.vue

@@ -298,7 +298,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                     @click="menuItemEditingModal = true"
                   >
                     <template #icon>
-                      <IconAddCircle class="h-full w-full" />
+                      <IconAddCircle />
                     </template>
                     {{ $t("core.common.buttons.new") }}
                   </VButton>

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>

ui/console-src/modules/system/backup/Backups.vue

@@ -68,7 +68,7 @@ onMounted(async () => {
     <template #actions>
       <VButton type="secondary" @click="handleCreate">
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.backup.operations.create.button") }}
       </VButton>

ui/console-src/modules/system/overview/Overview.vue

@@ -200,7 +200,7 @@ const handleDownloadLogfile = () => {
     <template #actions>
       <VButton size="sm" @click="handleCopy">
         <template #icon>
-          <IconClipboardLine class="h-full w-full" />
+          <IconClipboardLine />
         </template>
         {{ $t("core.common.buttons.copy") }}
       </VButton>

ui/console-src/modules/system/plugins/PluginList.vue

@@ -169,7 +169,7 @@ onMounted(() => {
             @click="$router.push({ name: 'PluginExtensionPointSettings' })"
           >
             <template #icon>
-              <IconSettings class="h-full w-full" />
+              <IconSettings />
             </template>
             {{ $t("core.plugin.actions.extension-point-settings") }}
           </VButton>
@@ -181,7 +181,7 @@ onMounted(() => {
           @click="pluginInstallationModalVisible = true"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.install") }}
         </VButton>
@@ -314,7 +314,7 @@ onMounted(() => {
                 @click="pluginInstallationModalVisible = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.plugin.empty.actions.install") }}
               </VButton>

ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue

@@ -38,7 +38,7 @@ function handleReloadWindow() {
 <template>
   <VButton v-if="needsReloadWindow" size="xs" @click="handleReloadWindow">
     <template #icon>
-      <IconInformation class="h-full w-full" />
+      <IconInformation />
     </template>
     {{ $t("core.plugin.operations.reload_window.button") }}
   </VButton>

ui/console-src/modules/system/roles/RoleList.vue

@@ -216,7 +216,7 @@ const handleDelete = async (role: Role) => {
         @click="editingModal = true"
       >
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.common.buttons.new") }}
       </VButton>

ui/console-src/modules/system/users/UserList.vue

@@ -198,14 +198,14 @@ function onCreationModalClose() {
           type="default"
         >
           <template #icon>
-            <IconShieldUser class="h-full w-full" />
+            <IconShieldUser />
           </template>
           {{ $t("core.user.actions.roles") }}
         </VButton>
         <HasPermission :permissions="['*']">
           <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
             <template #icon>
-              <IconLockPasswordLine class="h-full w-full" />
+              <IconLockPasswordLine />
             </template>
             {{ $t("core.user.actions.identity_authentication") }}
           </VButton>
@@ -216,7 +216,7 @@ function onCreationModalClose() {
           @click="creationModal = true"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.new") }}
         </VButton>
@@ -326,7 +326,7 @@ function onCreationModalClose() {
                 @click="creationModal = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>

ui/packages/components/src/components/button/Button.vue

@@ -35,6 +35,7 @@
     </span>
   </button>
 </template>
+
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
@@ -50,6 +51,7 @@ const props = withDefaults(
     disabled?: boolean;
     loading?: boolean;
     route?: RouteLocationRaw | undefined;
+    ghost?: boolean;
   }>(),
   {
     type: "default",
@@ -59,6 +61,7 @@ const props = withDefaults(
     disabled: false,
     loading: false,
     route: undefined,
+    ghost: false,
   }
 );
 
@@ -74,6 +77,7 @@ const classes = computed(() => {
     { "btn-circle": props.circle },
     { "btn-block": props.block },
     { "btn-loading": props.loading },
+    { "btn-ghost": props.ghost },
   ];
 });
 
@@ -85,128 +89,199 @@ function handleClick() {
   emit("click");
 }
 </script>
+
 <style lang="scss">
+@use "sass:map";
+$btn-sizes: (
+  xs: (
+    height: theme("spacing.6"),
+    padding-x: theme("spacing.2"),
+    font-size: theme("fontSize.xs"),
+    icon-size: theme("spacing.3"),
+    icon-margin: theme("spacing.2"),
+  ),
+  sm: (
+    height: theme("spacing.7"),
+    padding-x: theme("spacing.3"),
+    font-size: theme("fontSize.xs"),
+    icon-size: theme("spacing.3"),
+    icon-margin: theme("spacing.2"),
+  ),
+  md: (
+    height: theme("spacing.9"),
+    padding-x: theme("spacing.4"),
+    font-size: theme("fontSize.sm"),
+    icon-size: theme("spacing.5"),
+    icon-margin: theme("spacing.3"),
+  ),
+  lg: (
+    height: theme("spacing.11"),
+    padding-x: theme("spacing.5"),
+    font-size: theme("fontSize.lg"),
+    icon-size: theme("spacing.5"),
+    icon-margin: theme("spacing.3"),
+  ),
+);
+
+$btn-themes: (
+  default: (
+    bg: transparent,
+    color: inherit,
+    border: 1px solid #d9d9d9,
+    hover-bg: theme("colors.gray.100"),
+    icon-color: theme("colors.secondary"),
+    ghost-color: inherit,
+    ghost-hover-bg: theme("colors.gray.100"),
+    ghost-icon-color: theme("colors.secondary"),
+  ),
+  primary: (
+    bg: theme("colors.primary"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.primary"),
+    icon-color: #fff,
+    ghost-color: theme("colors.primary"),
+    ghost-hover-bg: theme("colors.primary / 10%"),
+    ghost-icon-color: theme("colors.primary"),
+  ),
+  secondary: (
+    bg: theme("colors.secondary"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.secondary"),
+    icon-color: #fff,
+    ghost-color: theme("colors.secondary"),
+    ghost-hover-bg: theme("colors.secondary / 10%"),
+    ghost-icon-color: theme("colors.secondary"),
+  ),
+  danger: (
+    bg: theme("colors.danger"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.danger"),
+    icon-color: #fff,
+    ghost-color: theme("colors.danger"),
+    ghost-hover-bg: theme("colors.danger / 10%"),
+    ghost-icon-color: theme("colors.danger"),
+  ),
+);
+
 .btn {
-  @apply rounded-base
+  display: inline-flex;
-  inline-flex
+  align-items: center;
-  flex-shrink-0
+  justify-content: center;
-  cursor-pointer
+  flex-shrink: 0;
-  select-none
+  flex-wrap: wrap;
-  flex-wrap
+  cursor: pointer;
-  items-center
+  user-select: none;
-  justify-center
+  appearance: none;
-  transition-all
+  border-radius: theme("borderRadius.base");
-  text-center
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  text-sm
+  text-align: center;
-  no-underline
+  text-decoration: none;
-  h-9
+  vertical-align: middle;
-  px-4
+  outline-width: 0;
-  outline-0
+  border-style: none;
-  border-none
+  $md-config: map.get($btn-sizes, md);
-  appearance-none
+  height: map.get($md-config, height);
-  align-middle;
+  padding-left: map.get($md-config, padding-x);
+  padding-right: map.get($md-config, padding-x);
+  font-size: map.get($md-config, font-size);
 
   &:hover {
-    @apply opacity-90;
+    opacity: 0.9;
   }
 
   &:active {
-    @apply opacity-100;
+    opacity: 1;
   }
 
   &:disabled {
-    @apply opacity-50
+    opacity: 0.5;
-    cursor-not-allowed;
+    cursor: not-allowed;
-  }
   }
 
-.btn-default {
+  &.btn-loading {
-  border: 1px solid #d9d9d9;
+    cursor: not-allowed;
 
     &:hover {
-    @apply bg-gray-100;
+      opacity: 1;
+    }
+  }
+
+  &.btn-block {
+    width: 100%;
   }
 
   .btn-icon {
-    @apply text-secondary;
+    height: map.get($md-config, icon-size);
+    width: map.get($md-config, icon-size);
+    margin-right: map.get($md-config, icon-margin);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    > * {
+      height: 100%;
+      width: 100%;
+    }
   }
 }
 
-.btn-primary {
+@each $size, $config in $btn-sizes {
-  @apply text-white bg-primary #{!important};
+  .btn-#{$size} {
-}
+    height: map.get($config, height);
-
+    padding-left: map.get($config, padding-x);
-.btn-secondary {
+    padding-right: map.get($config, padding-x);
-  @apply text-white bg-secondary #{!important};
+    font-size: map.get($config, font-size);
-}
-
-.btn-danger {
-  background-color: #d71d1d !important;
-  @apply text-white;
-}
-
-.btn-block {
-  @apply w-full;
-}
 
     .btn-icon {
-  @apply h-5 w-5
+      height: map.get($config, icon-size);
-  text-white
+      width: map.get($config, icon-size);
-  mr-3;
+      margin-right: map.get($config, icon-margin);
     }
 
-.btn-loading {
+    &.btn-circle {
-  @apply cursor-not-allowed;
+      width: map.get($config, height);
+      padding: 0;
+      border-radius: 9999px;
+    }
+  }
+}
+
+@each $theme, $config in $btn-themes {
+  .btn-#{$theme} {
+    background-color: map.get($config, bg) !important;
+    color: map.get($config, color);
+    border: map.get($config, border);
+
     &:hover {
-    @apply opacity-100;
+      background-color: map.get($config, hover-bg) !important;
     }
-}
-
-.btn-lg {
-  @apply h-11
-  px-5
-  text-lg;
-}
-
-.btn-sm {
-  @apply h-7
-  px-3
-  text-xs;
 
     .btn-icon {
-    @apply h-3
+      color: map.get($config, icon-color);
-    w-3
+    }
-    mr-2;
   }
 }
 
-.btn-xs {
+.btn-ghost {
-  @apply h-6
+  background-color: transparent !important;
-  px-2
+
-  text-xs;
+  @each $theme, $config in $btn-themes {
+    &.btn-#{$theme} {
+      color: map.get($config, ghost-color);
+      border: none;
+
+      &:hover {
+        background-color: map.get($config, ghost-hover-bg) !important;
+      }
 
       .btn-icon {
-    @apply h-3
+        color: map.get($config, ghost-icon-color);
-    w-3
-    mr-2;
       }
     }
-
-.btn-circle {
-  @apply w-9
-  p-0
-  rounded-full;
   }
-
-.btn-lg.btn-circle {
-  @apply w-11;
-}
-
-.btn-sm.btn-circle {
-  @apply w-7;
-}
-
-.btn-xs.btn-circle {
-  @apply w-6;
 }
 </style>

ui/src/formkit/inputs/list/AddButton.vue

@@ -29,7 +29,7 @@ const handleAppendClick = () => {
   <div :class="context.classes.add" @click="handleAppendClick">
     <VButton :disabled="disabled" type="secondary">
       <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
       </template>
       {{ context.addLabel || $t("core.common.buttons.add") }}
     </VButton>

ui/src/formkit/inputs/repeater/AddButton.vue

@@ -29,7 +29,7 @@ const handleAppendClick = () => {
   <div :class="context.classes.add" @click="handleAppendClick">
     <VButton :disabled="disabled" type="secondary">
       <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
       </template>
       {{ context.addLabel || $t("core.common.buttons.add") }}
     </VButton>

ui/tailwind.config.cjs

@@ -31,6 +31,7 @@ module.exports = {
           colors: {
             primary: "#4CCBA0",
             secondary: "#0E1731",
+            danger: "#D71D1D",
           },
           borderRadius: {
             base: "4px",

ui/uc-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue

@@ -307,7 +307,7 @@ const handleSelectNext = async () => {
   <div v-if="data?.total" class="mb-5">
     <VButton @click="uploadVisible = true">
       <template #icon>
-        <IconUpload class="h-full w-full" />
+        <IconUpload />
       </template>
       {{ $t("core.common.buttons.upload") }}
     </VButton>
@@ -327,7 +327,7 @@ const handleSelectNext = async () => {
         </VButton>
         <VButton type="secondary" @click="uploadVisible = true">
           <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
           </template>
           {{ $t("core.uc_attachment.empty.actions.upload") }}
         </VButton>

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

@@ -484,7 +484,7 @@ useSlugify(
           @click="handleSaveClick"
         >
           <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
           </template>
           {{ $t("core.common.buttons.save") }}
         </VButton>
@@ -495,7 +495,7 @@ useSlugify(
           @click="handleOpenPostSettingEditModal"
         >
           <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
           </template>
           {{ $t("core.common.buttons.setting") }}
         </VButton>
@@ -506,7 +506,7 @@ useSlugify(
             @click="handlePublishClick"
           >
             <template #icon>
-              <IconSendPlaneFill class="h-full w-full" />
+              <IconSendPlaneFill />
             </template>
             {{ $t("core.common.buttons.publish") }}
           </VButton>

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

@@ -109,7 +109,7 @@ const {
     <template #actions>
       <VButton :route="{ name: 'PostEditor' }" type="secondary">
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.common.buttons.new") }}
       </VButton>
@@ -179,7 +179,7 @@ const {
                 type="secondary"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>

ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue

@@ -39,7 +39,7 @@ const creationModal = ref(false);
   <div v-if="pats?.length" class="my-5 flex justify-end">
     <VButton type="secondary" @click="creationModal = true">
       <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
       </template>
       {{ $t("core.common.buttons.new") }}
     </VButton>
@@ -59,7 +59,7 @@ const creationModal = ref(false);
           </VButton>
           <VButton type="secondary" @click="creationModal = true">
             <template #icon>
-              <IconAddCircle class="h-full w-full" />
+              <IconAddCircle />
             </template>
             {{ $t("core.common.buttons.new") }}
           </VButton>