Add new variants for cart buttons

src/components/organisms/Shop.svelte

@@ -29,7 +29,7 @@
             <h3 class="title-medium">{shop.module_title}</h3>
             <p class="text-small">{shop.module_text}</p>
             {#if shop.enabled}
-                <Button url="/shop" text="Shop" color="pink" />
+                <Button url="/shop" text="Shop" color="lightpink" />
             {/if}
             <p class="detail">
                 Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.

src/routes/[country]/[location]/index.svelte

@@ -143,7 +143,7 @@
                     <Button url="/locations" text="Change location" class="shadow-small">
                         <IconEarth />
                     </Button>
-                    <Button url="/shop" text="Buy the poster" color="pink" class="shadow-small">
+                    <Button url="/shop" text="Buy the poster" color="lightpink" class="shadow-small">
                         <!-- <IconEarth /> -->
                     </Button>
                 </div>

src/routes/shop/__layout.svelte

@@ -3,6 +3,7 @@
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import Image from '$components/atoms/Image.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'

src/style/atoms/_button-circle.scss

@@ -88,4 +88,9 @@
             background-color: darken($color-secondary, 7);
         }
     }
+
+    // Purple color
+    &--purple {
+        background-color: $color-primary-tertiary20;
+    }
 }

src/style/atoms/_button.scss

@@ -79,7 +79,7 @@
     /*
     ** Color Variants
     */
-    // Pink
+    // Pink Light
     &--pink {
         color: $color-text;
         background: $color-secondary-light;
@@ -96,6 +96,24 @@
         }
     }
 
+    // Pink
+    &--pink {
+        color: #fff;
+        background: $color-secondary;
+
+        // Hover
+        &:hover {
+            color: $color-text;
+            background: $color-secondary;
+        }
+        .text-split__line {
+            &:last-child {
+                color: $color-text;
+                // color: #fff;
+            }
+        }
+    }
+
     // Beige
     &--beige {
         $color-button: #F2D3B8;