squircle

commit 4dc83eb86fdfef1317a66c776bfc8d22ef74d8f7
parent 0f0c33a67407e2fff846934e8a1dda1ae3957d7e
Author: George Francis <georgedoescode@gmail.com>
Date:   Fri, 10 Jul 2020 12:40:59 +0100

swatch tweaks, color tweaks

Diffstat:
M
src/components/GeneratorControls.vue
 | 
36
+++++++++++++++++++++---------------
M
src/components/GeneratorExportOptions.vue
 | 
7
+++++++

2 files changed, 28 insertions(+), 15 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -98,22 +98,22 @@ export default {
                 <VSwatches
                     v-model="fill"
                     :swatches="[
-                        '#199473',
-                        '#65D6AD',
-                        '#C6F7E2',
-                        '#EFFCF6',
-                        '#035388',
-                        '#1992D4',
-                        '#5ED0FA',
-                        '#E3F8FF',
-                        '#8A041A',
-                        '#E12D39',
-                        '#F86A6A',
-                        '#FFE3E3',
-                        '#DE911D',
-                        '#F0B429',
+                        '#EF4E4E',
+                        '#F9703E',
                         '#FADB5F',
-                        '#FFF3C4',
+                        '#6CD410',
+                        '#31B237',
+                        '#2DCCA7',
+                        '#1CD4D4',
+                        '#40C3F7',
+                        '#2186EB',
+                        '#3A66DB',
+                        '#9446ED',
+                        '#ED47ED',
+                        '#E8368F',
+                        '#829AB1',
+                        '#7B8794',
+                        '#F5F7FA',
                     ]"
                     :trigger-style="{
                         width: '64px',
@@ -251,4 +251,10 @@ hr {
 .generator-controls__swatch:hover .vue-swatches__trigger__wrapper {
     transform: scaleX(1.125);
 }
+
+.vue-swatches__container {
+    box-shadow: 0 24px 32px rgba(16, 42, 67, 0.075) !important;
+    border: 2px solid var(--grey-100);
+    border-radius: 24px !important;
+}
 </style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -26,6 +26,7 @@ export default {
             this.$toasted.show('Squircle SVG copied to clipboard!', {
                 position: 'bottom-center',
                 duration: 2500,
+                className: 'toast',
             });
         },
     },
@@ -114,3 +115,9 @@ export default {
     stroke: #e6e6ff;
 }
 </style>
+
+<style>
+.toast {
+    background: var(--grey-900) !important;
+}
+</style>