remove button size=lg and tag size=lg

Author: nemanjam

src/components/Button.astro

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import type { HTMLAttributes } from 'astro/types';
 import type { VariantProps } from 'class-variance-authority';
 
-const linkVariants = cva('button-default', {
+const buttonVariants = cva('button', {
   variants: {
     variant: {
       outline: 'button-outline',
@@ -14,7 +14,7 @@ const linkVariants = cva('button-default', {
       primary: 'button-primary',
       default: 'button-default',
     },
-    size: { sm: 'button-sm', md: 'button-md', lg: 'button-lg' },
+    size: { sm: 'button-sm', md: 'button-md' },
     disabled: { true: 'button-disabled' },
   },
   compoundVariants: [
@@ -25,7 +25,7 @@ const linkVariants = cva('button-default', {
   ],
 });
 
-export interface Props extends HTMLAttributes<'a'>, VariantProps<typeof linkVariants> {}
+export interface Props extends HTMLAttributes<'a'>, VariantProps<typeof buttonVariants> {}
 
 const {
   class: className,
@@ -39,7 +39,7 @@ const {
 const Element = disabled ? 'span' : 'a';
 ---
 
-<Element {...props} class={linkVariants({ variant, colors, size, disabled, className })}>
+<Element {...props} class={buttonVariants({ variant, colors, size, disabled, className })}>
   <slot name="before-icon" />
   <span class="inline-block">
     <slot />

src/components/Tag.astro

@@ -14,12 +14,11 @@ const tagVariants = cva('tag', {
       default: '',
       primary: 'tag-primary',
     },
-    size: { sm: 'tag-sm', md: 'tag-md', lg: 'tag-lg' },
+    size: { sm: 'tag-sm', md: 'tag-md' },
   },
   compoundVariants: [
     { variant: 'solid', size: 'sm', class: 'tag-solid-sm' },
     { variant: 'solid', size: 'md', class: 'tag-solid-md' },
-    { variant: 'solid', size: 'lg', class: 'tag-solid-lg' },
     { variant: 'solid', colors: 'primary', class: 'tag-solid-primary' },
   ],
 });

src/pages/design/buttons.mdx

@@ -2,6 +2,7 @@
 layout: '../../layouts/Page.astro'
 title: Buttons, Links, Tags
 ---
+import { Icon } from 'astro-icon/components';
 
 import Button from '../../components/Button.astro';
 import Link from '../../components/Link.astro';
@@ -17,7 +18,7 @@ export const buttons = {
     { variant: 'solid', colors: 'default' },
   ],
   colors: [{ colors: 'primary' }, { colors: 'default' }],
-  size: [{ size: 'lg' }, { size: 'md' }, { size: 'sm' }],
+  size: [{ size: 'md' }, { size: 'sm' }],
   disabled: [{ disabled: true }, { disabled: false }],
 };
 
@@ -32,11 +33,28 @@ export const buttons = {
 
       return <Button {...props}>{text}</Button>;
     })}
-
   </div>
 </>
 ))}
 
+#### slot="before-icon"
+
+<div class="not-prose">
+  <Button colors="primary" size="sm">
+    <Icon name="mdi:fish" slot="before-icon" />
+    My Button
+  </Button>
+</div>
+
+#### slot="after-icon"
+
+<div class="not-prose">
+  <Button colors="primary">
+    <Icon name="mdi:fish" slot="after-icon" />
+    My Button
+  </Button>
+</div>
+
 export const links = {
   variant: [
     { variant: 'link' },
@@ -74,7 +92,12 @@ export const tags = {
     { variant: 'text', colors: 'primary' },
     { variant: 'text', colors: 'default' },
   ],
-  size: [{ size: 'lg' }, { size: 'md' }, { size: 'sm' }],
+  size: [
+    { size: 'md', variant: 'solid' }, 
+    { size: 'md', variant: 'text' }, 
+    { size: 'sm', variant: 'solid' },
+    { size: 'sm', variant: 'text' }, 
+  ],
 };
 
 ## Tags

src/styles/components/button.css

@@ -1,7 +1,7 @@
 @layer components {
-  .button-default {
+  .button {
     @apply inline-flex items-center gap-2 no-underline;
-    @apply rounded-button;
+    @apply rounded-button text-base;
   }
 
   .button-outline {
@@ -33,26 +33,18 @@
   }
 
   .button-sm {
-    @apply px-4 py-1;
+    @apply px-3 py-0.5;
 
     [data-icon] {
       @apply w-6 h-6;
     }
   }
 
   .button-md {
-    @apply text-lg px-5 py-2;
+    @apply text-lg px-5 py-1.5;
 
     [data-icon] {
       @apply w-8 h-8;
     }
   }
-
-  .button-lg {
-    @apply text-lg px-6 py-3;
-
-    [data-icon] {
-      @apply w-10 h-10;
-    }
-  }
 }

src/styles/components/tag.css

@@ -21,23 +21,15 @@
   }
 
   .tag-solid-sm {
-    @apply px-2 pb-0.5;
+    @apply px-2 py-0.5;
   }
 
   .tag-md {
     @apply text-base;
   }
 
   .tag-solid-md {
-    @apply px-3 pt-0.5 pb-1;
-  }
-
-  .tag-lg {
-    @apply text-lg;
-  }
-
-  .tag-solid-lg {
-    @apply px-4 pt-1.5 pb-2;
+    @apply px-3 py-1;
   }
 
   .tag-solid-primary {