testio-tailwind 0.1.0 → 0.2.1

package/src/assets/stylesheets/tailwind.config.js

@@ -1,331 +1,331 @@
-module.exports = {
-  future: {},
-  purge: [],
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-
-      black: '#1d1d1d',
-      white: '#fff',
-
-      gray: {
-        100: '#f2f2f2',
-        200: '#e6e6e6',
-        300: '#bfc1c5',
-        400: '#9fa2a8',
-        500: '#7c8188',
-        600: '#5f656d',
-        700: '#343A40',
-        800: '#262626',
-        900: '#222222',
-        'lightest': '#f2f2f2',
-        'lighter': '#e6e6e6',
-        'light': '#bfc1c5',
-        DEFAULT: '#9fa2a8',
-        'dark': '#7c8188',
-        'darker': '#5f656d',
-        'darkest': '#262626',
-      },
-      red: {
-        200: '#FF3131',
-        500: '#ec0404'
-      },
-      orange: {
-        500: '#f48d21'
-      },
-      green: {
-        500: '#8cbd24',
-      },
-      yellow: {
-        500: '#d8ce0d'
-      },
-      blue: {
-        200: '#21bef4',
-        500: '#326dd1'
-      },
-      petrol: {
-        500: '#236a84',
-        DEFAULT: '#236a84',
-        800: '#263340',
-        'dark': '#263340',
-      },
-      teal: {
-        300: '#78eac1',
-        400: '#6ddeba',
-        500: '#33ba9e'
-      },
-      pink: {
-        500: '#e83e8c'
-      },
-      purple: {
-        200: '#8988eb',
-        500: '#7954ff'
-      },
-    },
-    fontFamily: {
-      'sans': ['Source Sans Pro', 'sans-serif'],
-      'serif': ['Source Sans Pro', 'sans-serif'],
-      'mono': ['Source Code Pro', 'monospace'],
-      'display': ['Source Sans Pro', 'sans-serif'],
-      'body': ['Source Sans Pro', 'sans-serif']
-    },
-    borderWidth: {
-      DEFAULT: '1px',
-      '0': '0px',
-      '1': '1px',
-      '2': '2px',
-      '4': '4px',
-      '6': '6px',
-      '10': '10px',
-    },
-    extend: {
-      colors: {
-        'appbody': '#FFFFFF',
-        'black': '#1d1d1d',
-        'primary': '#236a84',
-        'link': '#236a84',
-        'link-hover': '#21bef4',
-        'header': '#1d1d1d',
-        'actionbar': '#236a84',
-        'bordercolor': '#e6e6e6',
-        'bordercolor-dark': '#D4D6DC',
-        'success': '#8cbd24',
-        'danger': '#ec0404',
-        'disabled': '#bfc1c5',
-        'disabled-dark': '#5f656d',
-        'placeholder': '#bfc1c5',
-        'info': '#326dd1',
-        'label-color': '#5f656d',
-        'label-inverted-color': '#bfc1c5',
-        'dark': '#222222',
-        'card': '#e6e6e6',
-        'critical': '#ec0404',
-        'high': '#d8ce0d',
-        'low': '#9fa2a8',
-        'visual': '#f48d21',
-        'content': '#326dd1',
-        'usability': '#263340',
-        'color-product-website': '#236a84',
-        'color-product-apple': '#326dd1',
-        'color-product-android': '#8cbd24',
-        'color-product-streaming': '#FF3131',
-        'color-product-gaming': '#f48d21',
-        'color-product-windows': '#d8ce0d',
-        'navigation-customer-color': '#262626',
-        'navlink-customer-hover-color': '#78eac1',
-        'navlink-customer-hover-bg': '#343A40',
-        'navlink-customer-active-bg': '#78eac1',
-        'navigation-tester-color': '#1d1d1d',
-        'navlink-tester-hover-color': '#7954ff',
-        'navlink-tester-hover-bg': '#343A40',
-        'navlink-tester-active-bg': '#7954ff',
-        'navigation-manager-color': '#ffffff',
-        'navlink-manager-hover-color': '#222222',
-        'navlink-manager-hover-bg': '#e6e6e6',
-        'navlink-manager-active-bg': '#6ddeba'
-      },
-      fontSize: {
-        'heading-1': ['2.25rem', '2.25rem'],
-        'heading-2': ['1.875rem', '1.875rem'],
-        'heading-3': ['1.563rem', '1.563rem'],
-        'heading-4': ['1.375rem', '1.375rem'],
-        'heading-5': ['1.125rem', '1.125rem'],
-        'heading-6': ['1rem', '1rem'],
-        'navlinks': ['14px', '16px'],
-        'base': ['14px', '18px'],
-        'buttons': ['14px', '16px'],
-        'label': ['13px', '13px'],
-        'label-sm': ['12px', '12px'],
-        'icon': '20px',
-        'icon-lg': '40px',
-        'icon-xl': '60px',
-        'icon-sm': '18px',
-        'icon-xs': '16px',
-        'icon-xxs': '14px',
-        'icon-xxxs': '10px',
-        'xl': ['4.25rem', '4.25rem'],
-        'lg': ['1.25rem', '1.25rem'],
-        'sm': ['0.813rem', '0.813rem'],
-        'xs': ['11px', '11px'],
-        'xxs': ['10px', '10px'],
-        'display-1': ['3.25rem','3.25rem'],
-        'display-2': ['3rem','3rem'],
-        'display-3': ['2.75rem','2.75rem'],
-        'display-4': ['2.5rem','2.5rem'],
-        'hidden': ['0rem','0rem'],
-      },
-      fontWeight: {
-        'headings': ['300'],
-        'navlinks': ['600'],
-        'display': ['300']
-      },
-      borderRadius: {
-        DEFAULT: '5px',
-        'default': '0.3rem'
-      },
-      spacing: {
-        'spacing': '30px',
-        'xxs': '5px',
-        'xs': '10px',
-        'sm': '15px',
-        'md': '20px',
-        'lg': '50px',
-        'xl': '60px',
-        'xxl': '90px',
-        'spacing-3xl': '180px',
-        'spacing-4xl': '240px',
-        'spacing-5xl': '300px',
-        'spacing-6xl': '360px',
-        'spacing-7xl': '420px',
-        'spacing-8xl': '480px',
-        'btn': '40px',
-        'btn-xs': '20px',
-        'btn-sm': '30px',
-        'btn-lg': '90px',
-        'btn-xl': '150px',
-        'header' : '50px',
-        'icon' : '20px',
-        'icon-lg' : '40px',
-        'icon-xl' : '60px',
-        'icon-sm' : '18px',
-        'icon-xs' : '16px',
-        'icon-xxs' : '14px',
-        'icon-spacing' : '8px',
-        'heading' : '1rem',
-        'heading-lg' : '2rem',
-        'section-margin' : '30px',
-        'actionbar' : '70px',
-        'aside' : '20rem',
-        'sidebar' : '200px',
-        'grid-gutter' : '20px',
-        '13': '3.25rem',
-        '30': '7.25rem',
-        '144': '36rem',
-        '192': '48rem',
-        '240': '60rem',
-        'body-padding-mobile': '15px',
-        'body-padding-tablet': '30px',
-        'body-padding-desktop': '50px',
-        'card-lg': '380px',
-        'card-md': '280px',
-        'card-sm': '180px',
-        'card-xs': '80px',
-        '1px': '1px',
-        'modal-lg': '1200px',
-        'modal-md': '700px',
-        'modal-sm': '400px',
-        'progress-bar-thin-height': '2px',
-        'progress-bar-thick-height': '10px',
-        'meta-sidebar-width': '350px',
-        'popover-width': '15rem'
-      },
-      minWidth: {
-        'auto': 'auto',
-        'btn': '40px',
-        'btn-sm': '30px',
-        'cell': '10rem',
-        '6': '1.5rem',
-        '9': '2.25rem',
-        '11': '2.75rem',
-        '12': '3rem',
-        '24': '6rem',
-        '30': '7.25rem',
-        '36': '9rem',
-        '56': '14rem',
-        'spacing': '30px',
-      },
-      minHeight: {
-        'auto': 'auto',
-        'btn': '40px',
-        'btn-sm': '30px',
-        '8': '2rem',
-        '11': '2.75rem',
-        '12': '3rem',
-        '16': '4rem',
-        '22': '5.5rem',
-        '24': '6rem',
-        '30': '7.25rem',
-        '32': '8rem',
-        '48': '12rem',
-        '96': '24rem',
-        '144': '36rem',
-        'spacing': '30px',
-        'xxs': '5px',
-        'xs': '10px',
-        'sm': '15px',
-        'md': '20px',
-        'lg': '50px',
-        'xl': '60px',
-        'xxl': '90px',
-      },
-      maxWidth: {
-        '1/2': '50%',
-        '2/3': '66%',
-        '8': '2rem',
-        '32': '8rem',
-        '44': '11rem',
-        '48': '12rem',
-        '96': '24rem',
-        '144': '36rem',
-        '192': '48rem',
-        'xxl': '90px',
-        'card-lg': '380px',
-        'card-md': '280px',
-        'card-sm': '180px',
-        'card-xs': '80px',
-        'capped': '700px',
-      },
-      boxShadow: {
-        DEFAULT: '0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05)',
-      }, 
-      backgroundImage: theme => ({
-        'pattern-disabled-bright': "url('/assets/images/pattern-striped-bright.png')",
-        'pattern-disabled-dark': "url('/assets/images/pattern-striped-dark.png')"
-       }),
-       gridTemplateColumns: {
-        '3-1': '3fr 1fr',
-        '1-3': '1fr 3fr',
-        'max-auto': 'max-content auto',
-        '4-auto': 'auto auto auto auto',
-        '3-auto': 'auto auto auto',
-        '2-auto': 'auto auto',
-        'auto-fr-auto': 'auto 1fr auto',
-        'auto-fr-2-auto': 'auto 1fr auto auto',
-        'auto-fr': 'auto 1fr',
-        'auto': 'auto',
-        '14': 'repeat(14, minmax(0, 1fr))',
-       },
-       gridTemplateRows: {
-        'auto': 'auto',
-        'auto-auto': 'auto auto',
-       },
-       screens: {
-        '3xl': '1930px',
-      },
-      lineHeight: {
-        'ultratight': '0.5',
-      },
-      outline: {
-        'link-hover': '2px solid #21bef4',
-      }
-    }
-  },
-  variants: {
-    extend: {
-      margin: ['first', 'last'],
-      padding: ['first', 'last'],
-      borderRadius: ['first', 'last', 'focus'],
-      borderWidth: ['first', 'last', 'focus'],
-      backgroundColor: ['active'],
-      backgroundImage: ['hover', 'focus'],
-      width: ['first', 'last'],
-      textColor: ['group-hover', 'active']
-    }
-  },
-  plugins: [
-    require('@tailwindcss/line-clamp'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ]
-}
+module.exports = {
+  future: {},
+  purge: [],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+
+      black: '#1d1d1d',
+      white: '#fff',
+
+      gray: {
+        100: '#f2f2f2',
+        200: '#e6e6e6',
+        300: '#bfc1c5',
+        400: '#9fa2a8',
+        500: '#7c8188',
+        600: '#5f656d',
+        700: '#343A40',
+        800: '#262626',
+        900: '#222222',
+        'lightest': '#f2f2f2',
+        'lighter': '#e6e6e6',
+        'light': '#bfc1c5',
+        DEFAULT: '#9fa2a8',
+        'dark': '#7c8188',
+        'darker': '#5f656d',
+        'darkest': '#262626',
+      },
+      red: {
+        200: '#FF3131',
+        500: '#ec0404'
+      },
+      orange: {
+        500: '#f48d21'
+      },
+      green: {
+        500: '#8cbd24',
+      },
+      yellow: {
+        500: '#d8ce0d'
+      },
+      blue: {
+        200: '#21bef4',
+        500: '#326dd1'
+      },
+      petrol: {
+        500: '#236a84',
+        DEFAULT: '#236a84',
+        800: '#263340',
+        'dark': '#263340',
+      },
+      teal: {
+        300: '#78eac1',
+        400: '#6ddeba',
+        500: '#33ba9e'
+      },
+      pink: {
+        500: '#e83e8c'
+      },
+      purple: {
+        200: '#8988eb',
+        500: '#7954ff'
+      },
+    },
+    fontFamily: {
+      'sans': ['Source Sans Pro', 'sans-serif'],
+      'serif': ['Source Sans Pro', 'sans-serif'],
+      'mono': ['Source Code Pro', 'monospace'],
+      'display': ['Source Sans Pro', 'sans-serif'],
+      'body': ['Source Sans Pro', 'sans-serif']
+    },
+    borderWidth: {
+      DEFAULT: '1px',
+      '0': '0px',
+      '1': '1px',
+      '2': '2px',
+      '4': '4px',
+      '6': '6px',
+      '10': '10px',
+    },
+    extend: {
+      colors: {
+        'appbody': '#FFFFFF',
+        'black': '#1d1d1d',
+        'primary': '#236a84',
+        'link': '#236a84',
+        'link-hover': '#21bef4',
+        'header': '#1d1d1d',
+        'actionbar': '#236a84',
+        'bordercolor': '#e6e6e6',
+        'bordercolor-dark': '#D4D6DC',
+        'success': '#8cbd24',
+        'danger': '#ec0404',
+        'disabled': '#bfc1c5',
+        'disabled-dark': '#5f656d',
+        'placeholder': '#bfc1c5',
+        'info': '#326dd1',
+        'label-color': '#5f656d',
+        'label-inverted-color': '#bfc1c5',
+        'dark': '#222222',
+        'card': '#e6e6e6',
+        'critical': '#ec0404',
+        'high': '#d8ce0d',
+        'low': '#9fa2a8',
+        'visual': '#f48d21',
+        'content': '#326dd1',
+        'usability': '#263340',
+        'color-product-website': '#236a84',
+        'color-product-apple': '#326dd1',
+        'color-product-android': '#8cbd24',
+        'color-product-streaming': '#FF3131',
+        'color-product-gaming': '#f48d21',
+        'color-product-windows': '#d8ce0d',
+        'navigation-customer-color': '#262626',
+        'navlink-customer-hover-color': '#78eac1',
+        'navlink-customer-hover-bg': '#343A40',
+        'navlink-customer-active-bg': '#78eac1',
+        'navigation-tester-color': '#1d1d1d',
+        'navlink-tester-hover-color': '#7954ff',
+        'navlink-tester-hover-bg': '#343A40',
+        'navlink-tester-active-bg': '#7954ff',
+        'navigation-manager-color': '#ffffff',
+        'navlink-manager-hover-color': '#222222',
+        'navlink-manager-hover-bg': '#e6e6e6',
+        'navlink-manager-active-bg': '#6ddeba'
+      },
+      fontSize: {
+        'heading-1': ['2.25rem', '2.25rem'],
+        'heading-2': ['1.875rem', '1.875rem'],
+        'heading-3': ['1.563rem', '1.563rem'],
+        'heading-4': ['1.375rem', '1.375rem'],
+        'heading-5': ['1.125rem', '1.125rem'],
+        'heading-6': ['1rem', '1rem'],
+        'navlinks': ['14px', '16px'],
+        'base': ['14px', '18px'],
+        'buttons': ['14px', '16px'],
+        'label': ['13px', '13px'],
+        'label-sm': ['12px', '12px'],
+        'icon': '20px',
+        'icon-lg': '40px',
+        'icon-xl': '60px',
+        'icon-sm': '18px',
+        'icon-xs': '16px',
+        'icon-xxs': '14px',
+        'icon-xxxs': '10px',
+        'xl': ['4.25rem', '4.25rem'],
+        'lg': ['1.25rem', '1.25rem'],
+        'sm': ['0.813rem', '0.813rem'],
+        'xs': ['11px', '11px'],
+        'xxs': ['10px', '10px'],
+        'display-1': ['3.25rem','3.25rem'],
+        'display-2': ['3rem','3rem'],
+        'display-3': ['2.75rem','2.75rem'],
+        'display-4': ['2.5rem','2.5rem'],
+        'hidden': ['0rem','0rem'],
+      },
+      fontWeight: {
+        'headings': ['300'],
+        'navlinks': ['600'],
+        'display': ['300']
+      },
+      borderRadius: {
+        DEFAULT: '5px',
+        'default': '0.3rem'
+      },
+      spacing: {
+        'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+        'spacing-3xl': '180px',
+        'spacing-4xl': '240px',
+        'spacing-5xl': '300px',
+        'spacing-6xl': '360px',
+        'spacing-7xl': '420px',
+        'spacing-8xl': '480px',
+        'btn': '40px',
+        'btn-xs': '20px',
+        'btn-sm': '30px',
+        'btn-lg': '90px',
+        'btn-xl': '150px',
+        'header' : '50px',
+        'icon' : '20px',
+        'icon-lg' : '40px',
+        'icon-xl' : '60px',
+        'icon-sm' : '18px',
+        'icon-xs' : '16px',
+        'icon-xxs' : '14px',
+        'icon-spacing' : '8px',
+        'heading' : '1rem',
+        'heading-lg' : '2rem',
+        'section-margin' : '30px',
+        'actionbar' : '70px',
+        'aside' : '20rem',
+        'sidebar' : '200px',
+        'grid-gutter' : '20px',
+        '13': '3.25rem',
+        '30': '7.25rem',
+        '144': '36rem',
+        '192': '48rem',
+        '240': '60rem',
+        'body-padding-mobile': '15px',
+        'body-padding-tablet': '30px',
+        'body-padding-desktop': '50px',
+        'card-lg': '380px',
+        'card-md': '280px',
+        'card-sm': '180px',
+        'card-xs': '80px',
+        '1px': '1px',
+        'modal-lg': '1200px',
+        'modal-md': '700px',
+        'modal-sm': '400px',
+        'progress-bar-thin-height': '2px',
+        'progress-bar-thick-height': '10px',
+        'meta-sidebar-width': '350px',
+        'popover-width': '15rem'
+      },
+      minWidth: {
+        'auto': 'auto',
+        'btn': '40px',
+        'btn-sm': '30px',
+        'cell': '10rem',
+        '6': '1.5rem',
+        '9': '2.25rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '24': '6rem',
+        '30': '7.25rem',
+        '36': '9rem',
+        '56': '14rem',
+        'spacing': '30px',
+      },
+      minHeight: {
+        'auto': 'auto',
+        'btn': '40px',
+        'btn-sm': '30px',
+        '8': '2rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '16': '4rem',
+        '22': '5.5rem',
+        '24': '6rem',
+        '30': '7.25rem',
+        '32': '8rem',
+        '48': '12rem',
+        '96': '24rem',
+        '144': '36rem',
+        'spacing': '30px',
+        'xxs': '5px',
+        'xs': '10px',
+        'sm': '15px',
+        'md': '20px',
+        'lg': '50px',
+        'xl': '60px',
+        'xxl': '90px',
+      },
+      maxWidth: {
+        '1/2': '50%',
+        '2/3': '66%',
+        '8': '2rem',
+        '32': '8rem',
+        '44': '11rem',
+        '48': '12rem',
+        '96': '24rem',
+        '144': '36rem',
+        '192': '48rem',
+        'xxl': '90px',
+        'card-lg': '380px',
+        'card-md': '280px',
+        'card-sm': '180px',
+        'card-xs': '80px',
+        'capped': '700px',
+      },
+      boxShadow: {
+        DEFAULT: '0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05)',
+      }, 
+      backgroundImage: theme => ({
+        'pattern-disabled-bright': "url('/assets/images/pattern-striped-bright.png')",
+        'pattern-disabled-dark': "url('/assets/images/pattern-striped-dark.png')"
+       }),
+       gridTemplateColumns: {
+        '3-1': '3fr 1fr',
+        '1-3': '1fr 3fr',
+        'max-auto': 'max-content auto',
+        '4-auto': 'auto auto auto auto',
+        '3-auto': 'auto auto auto',
+        '2-auto': 'auto auto',
+        'auto-fr-auto': 'auto 1fr auto',
+        'auto-fr-2-auto': 'auto 1fr auto auto',
+        'auto-fr': 'auto 1fr',
+        'auto': 'auto',
+        '14': 'repeat(14, minmax(0, 1fr))',
+       },
+       gridTemplateRows: {
+        'auto': 'auto',
+        'auto-auto': 'auto auto',
+       },
+       screens: {
+        '3xl': '1930px',
+      },
+      lineHeight: {
+        'ultratight': '0.5',
+      },
+      outline: {
+        'link-hover': '2px solid #21bef4',
+      }
+    }
+  },
+  variants: {
+    extend: {
+      margin: ['first', 'last'],
+      padding: ['first', 'last'],
+      borderRadius: ['first', 'last', 'focus'],
+      borderWidth: ['first', 'last', 'focus'],
+      backgroundColor: ['active'],
+      backgroundImage: ['hover', 'focus'],
+      width: ['first', 'last'],
+      textColor: ['group-hover', 'active']
+    }
+  },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ]
+}