ui-lib(button): size variants

3 files changed, 51 insertions, 20 deletions

diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue
index 988659f..4e9aa1a 100644
--- a/src/ui/c-button/c-button.demo.vue
+++ b/src/ui/c-button/c-button.demo.vue
@@ -2,28 +2,39 @@
   <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
     <h2>{{ _.capitalize(buttonVariant) }}</h2>
 
-    <c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
-      Button
-    </c-button>
+    <div v-for="buttonSize of buttonSizes" :key="buttonSize" mb-2>
+      <c-button
+        v-for="buttonType of buttonTypes"
+        :key="buttonType"
+        :variant="buttonVariant"
+        :type="buttonType"
+        :size="buttonSize"
+        mx-1
+      >
+        Button
+      </c-button>
 
-    <c-button
-      v-for="buttonType of buttonTypes"
-      :key="buttonType"
-      :variant="buttonVariant"
-      :type="buttonType"
-      circle
-      mx-1
-    >
-      A
-    </c-button>
+      <c-button
+        v-for="buttonType of buttonTypes"
+        :key="buttonType"
+        :variant="buttonVariant"
+        :type="buttonType"
+        :size="buttonSize"
+        circle
+        mx-1
+      >
+        A
+      </c-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import _ from 'lodash';
 
-const buttonVariants = ['basic', 'text'];
-const buttonTypes = ['default', 'primary'];
+const buttonVariants = ['basic', 'text'] as const;
+const buttonTypes = ['default', 'primary'] as const;
+const buttonSizes = ['small', 'medium', 'large'] as const;
 </script>
 
 <style lang="less" scoped></style>
diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts
index 87ad89f..e96ac56 100644
--- a/src/ui/c-button/c-button.theme.ts
+++ b/src/ui/c-button/c-button.theme.ts
@@ -27,6 +27,21 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
   const theme = appThemes[style];
 
   return {
+    size: {
+      small: {
+        width: '28px',
+        fontSize: '12px',
+      },
+      medium: {
+        width: '34px',
+        fontSize: '14px',
+      },
+      large: {
+        width: '40px',
+        fontSize: '16px',
+      },
+    },
+
     basic: {
       default: createState({
         textColor: theme.text.baseColor,
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
index 2cbc4fd..c17b078 100644
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -25,6 +25,7 @@ const props = withDefaults(
     circle?: boolean;
     href?: string;
     to?: RouteLocationRaw;
+    size?: 'small' | 'medium' | 'large';
   }>(),
   {
     type: 'default',
@@ -34,9 +35,10 @@ const props = withDefaults(
     circle: false,
     href: undefined,
     to: undefined,
+    size: 'medium',
   },
 );
-const { variant, disabled, round, circle, href, type, to } = toRefs(props);
+const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props);
 
 const emits = defineEmits(['click']);
 
@@ -58,18 +60,20 @@ const tag = computed(() => {
   return 'button';
 });
 const appTheme = useAppTheme();
+
+const size = computed(() => theme.value.size[sizeName.value]);
 </script>
 
 <style lang="less" scoped>
 .c-button {
   line-height: 1;
   font-family: inherit;
-  font-size: inherit;
+  font-size: v-bind('size.fontSize');
   border: none;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
-  height: 34px;
+  height: v-bind('size.width');
   font-weight: 400;
   color: v-bind('variantTheme.textColor');
   padding: 0 14px;
@@ -89,8 +93,9 @@ const appTheme = useAppTheme();
   }
 
   &.circle {
-    border-radius: 40px;
-    width: 34px;
+    border-radius: v-bind('size.width');
+    width: v-bind('size.width');
+    padding: 0;
   }
 
   &:not(.disabled) {