tailwind-plugins/buttons.js

@@ -59,6 +59,10 @@ module.exports = function (options) {
           maxWidth: theme('maxWidth.xs'),
           textDecoration: 'none',
         },
+        '.btn[disabled]': {
+          opacity: '0.7',
+          cursor: 'not-allowed',
+        },
         '.btn:hover': {
           textDecoration: 'none',
         },
@@ -106,6 +110,46 @@ module.exports = function (options) {
         '.btn--condensed .btn__body': {
           padding: '.75em 1em',
         },
+        '@keyframes btn-loading-spinner': {
+          'to': {
+            transform: 'rotate(360deg)',
+          }
+        },
+        '.btn--loading': {
+          position: 'relative',
+        },
+        '.btn--loading::before': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '2',
+          backgroundColor: theme('colors.black'),
+          opacity: '0.4',
+        },
+        '.btn--loading::after': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '3',
+          top: '50%',
+          left: '50%',
+          width: '1.5rem',
+          height: '1.5rem',
+          marginTop: '-0.75rem',
+          marginLeft: '-0.75rem',
+          borderRadius: '50%',
+          border: `3px solid ${theme('colors.cyan.200')}`,
+          borderLeftColor: 'transparent',
+          animation: 'btn-loading-spinner 1s linear infinite',
+        }
       },
       ..._.map(options.colors, (colorOptions, name) => {
         const bg = getThemeColor(colorOptions.background, '#000');

tailwind.config.js

@@ -6,7 +6,6 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();
 
 module.exports = {
-  purge: {
   content: [
     "./source/**/*.mustache",
     "./source/**/*.json",
@@ -16,25 +15,57 @@ module.exports = {
   ],
   options: {
     whitelistPatterns: [
+      /^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
       /^((sm|md|lg|xl)\:)?w-\d\d?/,
+      /^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
       /^((sm|md|lg|xl)\:)?h-\d\d?/,
-        /^((sm|md|lg|xl)\:)?m.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?h-screen/,
+      /^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?-?m.?-auto?/,
       /^((sm|md|lg|xl)\:)?p.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?hidden/,
+      /^((sm|md|lg|xl)\:)?block/,
+      /^((sm|md|lg|xl)\:)?inline-block/,
+      /^((sm|md|lg|xl)\:)?flex/,
+      /^((sm|md|lg|xl)\:)?inline-flex/,
+      /^((sm|md|lg|xl)\:)?grid/,
+      /^((sm|md|lg|xl)\:)?gap-\d\d?/,
+      /^((sm|md|lg|xl)\:)?static/,
+      /^((sm|md|lg|xl)\:)?flex-row-*/,
+      /^((sm|md|lg|xl)\:)?flex-col-*/,
       /^((sm|md|lg|xl)\:)?grid-cols-*/,
       /^((sm|md|lg|xl)\:)?col-span-*/,
       /^((sm|md|lg|xl)\:)?row-span-*/,
-        /^((sm|md|lg|xl)\:)?grid-flow-*/, // grid flow
-        /^text-*/,
-        /^max-w-*/, // maximum width
-        /ico--*/, // icons
+      /^((sm|md|lg|xl)\:)?order-*/,
+      /^((sm|md|lg|xl)\:)?items-*/,
+      /^((sm|md|lg|xl)\:)?float-*/,
+      /^((sm|md|lg|xl|hover)\:)?text-*/,
+      /^((sm|md|lg|xl)\:)?grid-flow-*/,
+      /^((sm|md|lg|xl)\:)?head-*/,
+      /^((sm|md|lg|xl)\:)?clearfix/,
+      /^((sm|md|lg|xl|hover)\:)?elevation-*/,
+      /^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
+      /^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
+      /whitespace-*/,
+      /opacity-*/,
+      /^truncate/,
+      /^break-*/,
+      /^overflow-*/,
+      /^duration-*/,
+      /^max-w-*/,
+      /^max-h-*/,
+      /ico--*/,
     ],
-    }
   },
   theme: {
     extend: {
       maxWidth: {
         'xxs': '16rem',
       },
+      height: {
+        '120': '30rem',
+      },
       opacity: {
         '85': '0.85',
       },
@@ -43,12 +74,17 @@ module.exports = {
       },
       spacing: {
         '0/5': '0.125rem',
+        '14': '3.5rem',
         '28': '7rem',
         '36': '9rem',
         '44': '11rem',
         '52': '13rem',
-        '80': '20rem'
-      }
+        '80': '20rem',
+      },
+      // flip-x
+      scale: {
+        '-1': '-1',
+      },
     },
     // Breakpoints
     screens,
@@ -96,10 +132,19 @@ module.exports = {
         '700': '#202020',
         '800': '#1f1f1f',
       },
+      'olive': {
+        '100': '#d6e8b3'
+      },
       'green': {
-        '100': '#d6e8b3',
         '200': '#92c6ab',
-        '300': darken('#92c6ab', 0.1),
+        '300': '#76cc9f',
+        '400': '#4ca971',
+      },
+      'yellow': {
+        '100': '#fff7bf',
+        '200': '#f7f38a',
+        '300': '#ffea5a',
+        '400': '#fde119',
       },
       'red': {
         '600': '#d60d53'
@@ -134,6 +179,9 @@ module.exports = {
         '400': '#840048',
         '500': '#670047',
       },
+      'pirati': {
+        'yellow': '#fec934'
+      },
     },
     container: {
       center: true,
@@ -165,7 +213,7 @@ module.exports = {
         // options
       }
     ),
-    require('tailwindcss-typography')({
+    require('@tailwindcss/typography')({
       // all these options default to the values specified here
       ellipsis: false,         // whether to generate ellipsis utilities
       hyphens: false,          // whether to generate hyphenation utilities
@@ -207,11 +255,13 @@ module.exports = {
         'grey-125': {
           text: 'black',
           background: 'grey.125',
+          hoverText: 'black',
         },
         'white': {
           text: 'black',
           background: 'white',
           iconBorder: 'grey.100',
+          hoverText: 'black',
         },
         'blue-300': {
           text: 'white',
@@ -221,9 +271,13 @@ module.exports = {
           text: 'white',
           background: 'cyan.200',
         },
-        'green-200': {
+        'green-300': {
+          text: 'white',
+          background: 'green.300',
+        },
+        'green-400': {
           text: 'white',
-          background: 'green.200',
+          background: 'green.400',
         },
         'orange-300': {
           text: 'white',
@@ -237,6 +291,10 @@ module.exports = {
           text: 'white',
           background: 'violet.500',
         },
+        'red-600': {
+          text: 'white',
+          background: 'red.600',
+        },
         'brands-facebook': {
           text: 'white',
           background: 'brands.facebook',