- creating a dynamic color palette

- implementing actions section

src/styles/colors.css

@@ -1,9 +1,12 @@
 :root {
-  --color-primary: #444;
-  --color-primary-dark: #333;
-  --color-inverse: #fff;
-  --color-inverse-dark: #f5f5f5;
-  --color-secondary-light: #f7fafc;
-  --color-secondary: #e2e8f0;
-  --color-secondary-dark: #a0aec0;
-}
+  --color-primary-50: #FFFFFF;
+  --color-primary-100: #FAFAFA;
+  --color-primary-200: #F1F0F0;
+  --color-primary-300: #D8D2CD;
+  --color-primary-400: #CDC4BA;
+  --color-primary-500: #ABA59D;
+  --color-primary-600: #8A8680;
+  --color-primary-700: #686663;
+  --color-primary-800: #484745;
+  --color-primary-900: #282727;
+}

src/styles/global.css

@@ -1,12 +1,9 @@
-:root {
-  @apply transition-colors duration-200 ease-in-out;
-}
-
 html,
 body {
   font-size: 12px;
   font-family: "Montserrat", sans-serif;
-  @apply text-primary bg-inverse;
+  @apply text-primary-900 bg-primary-50;
+  @apply transition-colors duration-200 ease-in-out;
 }
 
 p {
@@ -22,7 +19,7 @@ a:hover {
 }
 
 hr {
-  @apply w-full border-secondary h-1;
+  @apply w-full border-primary-200 h-1;
 }
 
 section {
@@ -34,15 +31,7 @@ label {
 }
 
 label > span:first-child {
-  @apply mb-1 text-secondary-dark font-semibold tracking-wide text-xs uppercase;
-}
-
-#artboard {
-  color: #444;
-}
-
-#artboard hr {
-  border-color: #eee;
+  @apply mb-1 text-primary-500 font-semibold tracking-wide text-xs uppercase;
 }
 
 .MuiTooltip-tooltip {

src/styles/toastify.css

@@ -5,7 +5,7 @@
 }
 
 .Toastify__toast--default {
-  @apply bg-primary text-inverse;
+  @apply bg-primary-900 text-primary-50;
 }
 
 .Toastify__toast-body {