feat(Button): customizable button shadow

gitsindonesia · May 21, 2024 · d6f0be5 · d6f0be5
1 parent 6d4b8c1
commit d6f0be5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/button/src/VBtn.vue b/packages/button/src/VBtn.vue
@@ -103,7 +103,7 @@ const classes = computed(() => {
       'btn--text': props.text,
       'btn--soft': props.soft,
       'btn--flush': props.flush,
-      shadow: props.shadow,
+      'btn--shadow': props.shadow,
     },
   ];
 });

diff --git a/packages/themes/src/morpheme/_button.scss b/packages/themes/src/morpheme/_button.scss
@@ -7,7 +7,7 @@
   --btn-font-size: var(--size-font-sm);
   --btn-line-height: 20px;
   --btn-font-weight: 600;
-  --btn-shadow: none;
+  --btn-shadow: var(--effect-shadow-xs);
   --btn-icon-width: 20px;
   --btn-icon-height: 20px;
   --btn-line-height: 20px;
@@ -474,6 +474,11 @@
     --btn-height: auto;
   }
 
+  // shadow
+  &--shadow {
+    box-shadow: var(--btn-shadow);
+  }
+
   // sizes
   &--sm {
     --btn-font-size: var(--size-font-sm);