feat(Button): add new soft variant

gitsindonesia · Jun 15, 2023 · 3ec2ba5 · 3ec2ba5
1 parent 71cefbc
commit 3ec2ba5
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 3 deletions.
diff --git a/packages/button/src/VBtn.stories.ts b/packages/button/src/VBtn.stories.ts
@@ -83,6 +83,16 @@ Text.parameters = {
   },
 };
 
+export const Soft = Template.bind({});
+Soft.args = {color: 'primary', soft: true};
+Soft.parameters = {
+  docs: {
+    source: {
+      code: '<v-btn color="primary" soft>Button</v-btn>',
+    },
+  },
+};
+
 export const Rounded = Template.bind({});
 Rounded.args = {color: 'primary', rounded: true};
 Rounded.parameters = {
@@ -394,9 +404,35 @@ export const ButtonGroup: Story<VBtnProps> = () => ({
 
 export const DarkMode: Story<VBtnProps> = () => ({
   components: {VBtnGroup, VBtnToolbar, VBtn},
+  setup() {
+    return {
+      colors,
+      variants: ['default', 'outlined', 'text', 'soft'],
+    };
+  },
   template: `
   <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
-    <h3 class="font-semibold">Default</h3>
+    <h3 class="font-semibold my-2">Colors</h3>
+    <div class="flex flex-row gap-2">
+      <VBtn v-for="color in colors" :key="color" :color="color">
+        {{ color }}
+      </VBtn>
+    </div>
+    <h3 class="font-semibold mt-4 mb-3">Variants</h3>
+    <div
+      v-for="variant in variants"
+      :key="variant"
+    >
+      <p>{{ variant }}</p>
+      <div class="flex flex-row gap-2 mt-2">
+        <VBtn v-for="color in colors" :key="color" :color="color"
+          v-bind:[variant]="variant"
+        >
+        {{ color }}
+        </VBtn>
+      </div>
+    </div>
+    <h3 class="font-semibold mt-4">Default</h3>
     <VBtnGroup class="w-full mt-2">
       <VBtn>Button</VBtn>
       <VBtn>Button</VBtn>

diff --git a/packages/button/src/VBtn.vue b/packages/button/src/VBtn.vue
@@ -13,6 +13,7 @@ export interface Props {
   href?: string;
   text?: boolean;
   outlined?: boolean;
+  soft?: boolean;
   rounded?: boolean;
   disabled?: boolean;
   noRing?: boolean;
@@ -100,6 +101,7 @@ const classes = computed(() => {
       'btn--block': props.block,
       'btn--loading': props.loading,
       'btn--text': props.text,
+      'btn--soft': props.soft,
       'btn--flush': props.flush,
       shadow: props.shadow,
     },

diff --git a/packages/themes/src/morpheme/_button.dark.scss b/packages/themes/src/morpheme/_button.dark.scss
@@ -1,5 +1,3 @@
-
-
 .dark {
   .btn {
     // disabled
@@ -53,6 +51,17 @@
           --btn-text-color: var(--color-gray-true-300);
         }
       }
+
+      // soft
+      &.btn--soft {
+        --btn-bg-color: var(--color-gray-true-50);
+        --btn-border-color: var(--color-gray-true-50);
+        --btn-text-color: var(--color-gray-true-600);
+
+        &:hover {
+          --btn-text-color: var(--color-gray-true-700);
+        }
+      }
     }
 
     &-dark {
@@ -88,6 +97,17 @@
           --btn-text-color: var(--color-gray-300);
         }
       }
+
+      // soft
+      &.btn--soft {
+        --btn-bg-color: var(--color-gray-true-50);
+        --btn-border-color: var(--color-gray-true-50);
+        --btn-text-color: var(--color-gray-true-600);
+
+        &:hover {
+          --btn-text-color: var(--color-gray-true-700);
+        }
+      }
     }
   }
 }
diff --git a/packages/themes/src/morpheme/_button.scss b/packages/themes/src/morpheme/_button.scss
@@ -102,6 +102,17 @@
         --btn-text-color: var(--color-primary-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-primary-50);
+      --btn-border-color: var(--color-primary-50);
+      --btn-text-color: var(--color-primary-600);
+
+      &:hover {
+        --btn-text-color: var(--color-primary-700);
+      }
+    }
   }
 
   &-secondary {
@@ -137,6 +148,17 @@
         --btn-text-color: var(--color-secondary-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-secondary-50);
+      --btn-border-color: var(--color-secondary-50);
+      --btn-text-color: var(--color-secondary-600);
+
+      &:hover {
+        --btn-text-color: var(--color-secondary-700);
+      }
+    }
   }
 
   &-default {
@@ -171,6 +193,17 @@
         --btn-text-color: var(--color-gray-900);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-gray-50);
+      --btn-border-color: var(--color-gray-50);
+      --btn-text-color: var(--color-gray-600);
+
+      &:hover {
+        --btn-text-color: var(--color-gray-700);
+      }
+    }
   }
 
   &-info {
@@ -206,6 +239,17 @@
         --btn-text-color: var(--color-info-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-info-50);
+      --btn-border-color: var(--color-info-50);
+      --btn-text-color: var(--color-info-600);
+
+      &:hover {
+        --btn-text-color: var(--color-info-700);
+      }
+    }
   }
 
   &-warning {
@@ -241,6 +285,17 @@
         --btn-text-color: var(--color-warning-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-warning-50);
+      --btn-border-color: var(--color-warning-50);
+      --btn-text-color: var(--color-warning-600);
+
+      &:hover {
+        --btn-text-color: var(--color-warning-700);
+      }
+    }
   }
 
   &-success {
@@ -276,6 +331,17 @@
         --btn-text-color: var(--color-success-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-success-50);
+      --btn-border-color: var(--color-success-50);
+      --btn-text-color: var(--color-success-600);
+
+      &:hover {
+        --btn-text-color: var(--color-success-700);
+      }
+    }
   }
 
   &-error {
@@ -311,6 +377,17 @@
         --btn-text-color: var(--color-error-700);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-error-50);
+      --btn-border-color: var(--color-error-50);
+      --btn-text-color: var(--color-error-600);
+
+      &:hover {
+        --btn-text-color: var(--color-error-700);
+      }
+    }
   }
 
   &-dark {
@@ -346,6 +423,17 @@
         --btn-text-color: var(--color-gray-900);
       }
     }
+
+    // soft
+    &.btn--soft {
+      --btn-bg-color: var(--color-gray-true-50);
+      --btn-border-color: var(--color-gray-true-50);
+      --btn-text-color: var(--color-gray-true-600);
+
+      &:hover {
+        --btn-text-color: var(--color-gray-true-700);
+      }
+    }
   }
 
   &:not(.btn--flush) {