style: fix button merged themes colors

rezozero · Jun 11, 2024 · ab183a4 · ab183a4
1 parent d51d24a
commit ab183a4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/components/molecules/VButton/Default.stories.vue b/components/molecules/VButton/Default.stories.vue
@@ -36,7 +36,20 @@ import { vButtonSizes as sizes } from '~/components/molecules/VButton/VButton.vu
         </NuxtStoryVariant>
 
         <NuxtStoryVariant title="Sizes">
-            <VButton v-for="size in sizes" :key="`${size}-size`" :label="`Button ${size}`" outlined :size="size" />
+            <VStoryThemeProvider>
+                <VButton
+                    v-for="size in sizes"
+                    :key="`${size}-size-theme-default`"
+                    :label="`Button ${size}`"
+                    outlined
+                    :size="size"
+                />
+            </VStoryThemeProvider>
+        </NuxtStoryVariant>
+
+        <NuxtStoryVariant title="Theme prop">
+            <VButton :label="`Button Dark`" theme="dark" outlined />
+            <VButton :label="`Button Dark`" theme="light" outlined />
         </NuxtStoryVariant>
     </NuxtStory>
 </template>
diff --git a/components/molecules/VButton/VButton.vue b/components/molecules/VButton/VButton.vue
@@ -113,7 +113,7 @@ export default defineComponent({
 @use 'sass:map';
 
 @if global-variable-exists('themes') {
-    $themes: map-merge(
+    $themes: map.deep-merge(
             $themes,
             (
                 dark: (

diff --git a/components/molecules/VLink/ScopedSlot.stories.vue b/components/molecules/VLink/ScopedSlot.stories.vue
@@ -19,8 +19,19 @@
             <VLink v-slot="{ href, target, rel }" url="https://google.com" custom>
                 <VButton :href="href" :target="target" :rel="rel" theme="dark" filled icon-name="check" label="Label" />
             </VLink>
+            <VLink v-slot="{ href, target, rel }" url="https://google.com" custom>
+                <VButton
+                    :href="href"
+                    :target="target"
+                    :rel="rel"
+                    theme="light"
+                    filled
+                    icon-name="check"
+                    label="Label"
+                />
+            </VLink>
             <VLink v-slot="linkProps" url="https://google.com" custom>
-                <VButton v-bind="linkProps" filled theme="light">
+                <VButton v-bind="linkProps">
                     Slot button label
                     <template #icon>
                         <VIcon name="check" />