Revamp color scheme

source/css/atoms/table.pcss

@@ -27,7 +27,7 @@
   }
 
   td {
-    @apply border border-grey-150;
+    @apply border border-grey-125;
   }
 }
 

source/css/molecules/calendar.pcss

 .calendar-table-row {
-  @apply border-b border-grey-150;
+  @apply border-b border-grey-125;
 
   &:first-of-type {
     @apply border-t;
@@ -11,7 +11,7 @@
 }
 
 .calendar-table-row__col {
-  @apply h-full border-r border-grey-150 p-2 flex justify-center items-center;
+  @apply h-full border-r border-grey-125 p-2 flex justify-center items-center;
 
   &:first-child {
     @apply border-l;

source/css/molecules/candidate-card.pcss

@@ -23,13 +23,13 @@
 }
 
 .candidate-card__affiliation {
-  @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;
+  @apply text-sm bg-grey-50 flex border-t border-b border-grey-125;
 
   > div {
     @apply py-2 px-4 flex items-center;
 
     &:not(:first-child) {
-      @apply border-l border-grey-150;
+      @apply border-l border-grey-125;
     }
 
     &:last-child {

source/css/molecules/candidate-table-row.pcss

@@ -64,7 +64,7 @@
   }
 
   .candidate-table-row__bio {
-    @apply border-l border-grey-150 py-0 px-8;
+    @apply border-l border-grey-125 py-0 px-8;
   }
 
   .candidate-table-row__affiliation {

source/css/molecules/switch.pcss

@@ -11,6 +11,6 @@
 
   &.switch__item--active,
   &.switch__item--active:hover {
-    @apply bg-green-100;
+    @apply bg-cyan-300;
   }
 }

source/css/organisms/region-map.pcss

@@ -12,5 +12,5 @@
 }
 
 .region-map__region--current {
-  fill: theme('colors.black');
+  fill: theme('colors.violet.400');
 }

tailwind-plugins/buttons.js

@@ -157,41 +157,27 @@ module.exports = function (options) {
         },
       },
       ..._.map(options.colors, (colorOptions, name) => {
+        const bg = getThemeColor(colorOptions.background, '#000');
         return {
           // Standard colorized variant
           [`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
             backgroundColor: getThemeColor(colorOptions.background),
             color: getThemeColor(colorOptions.text),
-            // '&:focus': {
-            //   outline: 0,
-            //   boxShadow: `0 0 0 .2em ${Color(colorOptions.background).alpha(.5).rgb().toString()}`,
-            // },
-            // '&:hover': {
-            //   backgroundColor: _.get(colorOptions, 'hoverBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
-            //   color: _.get(colorOptions, 'hoverText', colorOptions.text),
-            // },
-            // '&:active': {
-            //   backgroundColor: _.get(colorOptions, 'activeBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
-            //   color: _.get(colorOptions, 'activeText', colorOptions.text),
-            // }
           },
           [`.btn--${e(name)} .btn__icon`]: {
-            borderColor: getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1)),
-            backgroundColor: getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000')),
+            borderColor: getThemeColor(colorOptions.iconBorder, darken(bg, 0.1)),
+            backgroundColor: getThemeColor(colorOptions.iconBackground, bg),
           },
           // Hover state unless set with --to-* variant.
           [`.btn--${e(name)}.btn--hoveractive:not([class^="btn--to-"]):hover`]: {
             '.btn__body, .btn__icon': {
-              backgroundColor: getThemeColor(colorOptions.hoverBackground, '#000'),
+              backgroundColor: getThemeColor(colorOptions.hoverBackground, darken(bg, 0.2)),
               color:  getThemeColor(colorOptions.hoverText, '#fff'),
             },
             '.btn__icon': {
               borderColor: getThemeColor(
                 colorOptions.hoverIconBorder,
-                lighten(
-                  getThemeColor(colorOptions.hoverBackground, '#000'),
-                  0.1
-                )
+                darken(bg, 0.3)
               ),
             },
             '.btn__icon svg, .btn__icon i': {

tailwind.config.js

@@ -66,7 +66,6 @@ module.exports = {
         '50': '#f7f7f7',
         '100': '#f3f3f3',
         '125': '#f0f0f0',
-        '150': '#00000012',
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
@@ -75,21 +74,41 @@ module.exports = {
         '700': '#202020',
         '800': '#1f1f1f',
       },
-      'red': {
-        '100': '#d6151b',
-        '200': darken('#d6151b', 0.1),
-      },
       'green': {
-        '100': '#29bc51',
-        '200': darken('#29bc51', 0.1),
-        '300': darken('#29bc51', 0.18),
+        '100': '#d6e8b3',
+        '200': '#92c6ab',
+        '300': darken('#92c6ab', 0.1),
       },
       'brands': {
         'facebook': '#067ceb',
         'twitter': '#00c9ff',
         'gmail': '#ec230e',
         'linkedin': '#0066a9',
-      }
+      },
+      'blue': {
+        '100': '#abcdef',
+        '200': '#76b4cf',
+        '300': '#027da8',
+      },
+      'cyan': {
+        '100': '#a7d4d1',
+        '200': '#57b3bd',
+        '300': '#3e8793',
+        '400': '#497280',
+        '500': '#004958',
+      },
+      'orange': {
+        '100': '#f2d29f',
+        '200': '#f1ae7b',
+        '300': '#ed9654',
+      },
+      'violet': {
+        '100': '#edc8bd',
+        '200': '#d28c94',
+        '300': '#8d415f',
+        '400': '#840048',
+        '500': '#670047',
+      },
     },
     container: {
       center: true,
@@ -139,56 +158,54 @@ module.exports = {
           text: 'white',
           background: 'black',
           iconBorder: 'grey.400',
-          iconBackground: 'grey.800',
-          hoverIconBorder: 'grey.600',
-        },
-        'grey-800': {
-          text: 'white',
-          background: 'grey.800',
-          iconBorder: 'grey.500',
           hoverIconBorder: 'grey.600',
         },
         'grey-700': {
           text: 'white',
           background: 'grey.700',
-          iconBorder: 'grey.800',
+          iconBorder: 'grey.500',
+          hoverBackground: 'grey.400',
           hoverIconBorder: 'grey.600',
         },
         'grey-500': {
           text: 'white',
           background: 'grey.500',
           iconBorder: 'grey.300',
-          hoverIconBorder: 'grey.600',
-        },
-        'grey-300': {
-          text: 'white',
-          background: 'grey.300',
-          iconBorder: 'grey.150',
-          hoverIconBorder: 'grey.600',
+          hoverBackground: 'grey.300',
+          hoverIconBorder: 'grey.400',
         },
         'grey-125': {
           text: 'black',
           background: 'grey.125',
-          iconBorder: 'grey.150',
-          hoverIconBorder: 'grey.600',
         },
         'white': {
           text: 'black',
           background: 'white',
           iconBorder: 'grey.100',
-          hoverIconBorder: 'grey.600',
         },
-        'green-100': {
+        'blue-300': {
           text: 'white',
-          background: 'green.100',
-          iconBorder: 'green.200',
-          hoverIconBorder: 'grey.600',
+          background: 'blue.300',
         },
-        'red-100': {
+        'cyan-200': {
           text: 'white',
-          background: 'red.100',
-          iconBorder: 'red.200',
-          hoverIconBorder: 'grey.600',
+          background: 'cyan.200',
+        },
+        'green-200': {
+          text: 'white',
+          background: 'green.200',
+        },
+        'orange-300': {
+          text: 'white',
+          background: 'orange.300',
+        },
+        'violet-400': {
+          text: 'white',
+          background: 'violet.400',
+        },
+        'violet-500': {
+          text: 'white',
+          background: 'violet.500',
         },
         'brands-facebook': {
           text: 'white',