source/js/main.js

-document.addEventListener('DOMContentLoaded', function () {
+import Vue from "vue";
 
+import { forEachNode } from "./utils";
+
+import Renderer from "./components/calendar/Renderer";
+import DummyProvider from "./components/calendar/DummyProvider";
+import GoogleProvider from "./components/calendar/GoogleProvider"
+import MonthCalendar from "./components/full-calendar/MonthCalendar";
+import YearCalendar from "./components/full-calendar/YearCalendar";
+import RegionMap from "./components/RegionMap";
+import ViewProvider from "./components/ViewProvider";
+import Navbar from "./components/navbar/Navbar";
+import FooterCollapsible from "./components/footer/FooterCollapsible";
+import FlipClock from "./components/FlipClock";
+
+import Chart from 'chart.js/auto';
+
+
+Vue.component("ui-calendar-renderer", Renderer);
+Vue.component("ui-calendar-dummy-provider", DummyProvider);
+Vue.component("ui-calendar-google-provider", GoogleProvider);
+Vue.component("ui-month-calendar", MonthCalendar);
+Vue.component("ui-year-calendar", YearCalendar);
+Vue.component("ui-region-map", RegionMap);
+Vue.component("ui-view-provider", ViewProvider);
+Vue.component("ui-navbar", Navbar);
+Vue.component("ui-footer-collapsible", FooterCollapsible);
+Vue.component("ui-flip-clock", FlipClock);
+
+
+import UiApp from "./components/UiApp.vue";
+
+
+const appFactory = (el, attrs) => {
+  // Bootstrap Vue.js.
+  new Vue({
+    el,
+    components: {
+      UiApp
+    }
   });
+};
+
+
+/**
+ * Bootstrap Vue.js application at given Element instance.
+ *
+ * App properties are passed via data attributes, like:
+ *
+ * <div class="__vue-root" data-message="Hello" data-app="SomeApp"></div>
+ *
+ * @param {Element} el DOM Element
+ */
+function renderVueAppElement(el) {
+  const attrs = Object.assign({}, el.dataset);
+  return appFactory(el, attrs);
+}
+
+
+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
+}
+
+
+function init(event) {
+  // Initialize Vue.js apps.
+  forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
+}
+
+document.addEventListener('DOMContentLoaded', init);

source/js/utils.js

+import screens from "../../screens";
+
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+
+export const forEachNode = function (array, callback, scope) {
+  for (var i = 0; i < array.length; i++) {
+    callback.call(scope, array[i]); // passes back stuff we need
+  }
+};
+
+export function getWindowWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+export function isLgScreenSize() {
+  return getWindowWidth() >= lgScreenSize;
+}

tailwind-plugins/buttons.js

+const _ = require('lodash');
+const Color = require('color');
+// const defaultConfig = require('tailwindcss/defaultConfig')();
+
+const darken = (clr, val) => Color(clr).darken(val).rgb().string();
+const lighten = (clr, val) => Color(clr).lighten(val).rgb().string();
+
+function defaultOptions() {
+  return {
+    textAlign: 'center',
+    display: 'inline-block',
+    fontWeight: '400',
+    maxWidth: '20rem',
+    colors: {},
+  }
+}
+
+module.exports = function (options) {
+  options = _.isFunction(options)
+    ? options(defaultOptions())
+    : _.defaults(options, defaultOptions());
+
+  return function ({ addComponents, addUtilities, e, theme }) {
+    const getThemeColor = (alias, fallback) => {
+      if (!alias) {
+        return fallback;
+      }
+      return theme(`colors.${alias}`);
+    }
+
+    const btnUtilities = {
+      '.btn.btn--fullwidth': {
+        width: '100%',
+        maxWidth: '100%',
+        '.btn__body-wrap': {
+          width: '100%',
+          maxWidth: '100%',
+        },
+        '.btn__body': {
+          flex: '1'
+        }
+      },
+      '.btn.btn--autowidth': {
+        width: 'auto',
+      }
+    };
+
+    addUtilities(btnUtilities, ['responsive']);
+
+    const defaultIconBorder = getThemeColor(options.defaultColor.iconBorder, lighten(getThemeColor(options.defaultColor.background, '#000'), 0.1));
+
+    addComponents([
+      {
+        '.btn': {
+          display: 'inline-block',
+          textAlign: 'center',
+          display: 'inline-block',
+          fontWeight: theme('fontWeight.normal'),
+          maxWidth: theme('maxWidth.xs'),
+          textDecoration: 'none',
+        },
+        '.btn[disabled]': {
+          opacity: '0.7',
+          cursor: 'not-allowed',
+        },
+        '.btn:hover': {
+          textDecoration: 'none',
+        },
+        '.btn__body': {
+          display: 'flex',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '.75em 2em'
+        },
+        '.btn__icon': {
+          display: 'flex',
+          alignItems: 'center',
+          borderLeftWidth: '1px',
+          padding: `0 ${theme('spacing.4')}`,
+          borderColor: defaultIconBorder,
+        },
+        // All possible parts are transition ready
+        '.btn__body, .btn__icon, .btn__inline-icon': {
+          transitionProperty: 'color,background-color,border-color',
+          transitionDuration: '.2s',
+          color: getThemeColor(options.defaultColor.text),
+        },
+        '.btn__body, .btn__icon': {
+          backgroundColor: getThemeColor(options.defaultColor.background),
+        },
+        '.btn__icon img': {
+          width: theme('spacing.4')
+        },
+        // Button with a standalone icon on right side
+        '.btn--icon .btn__body-wrap': {
+          display: 'flex',
+        },
+        // Button with a standalone icon on the left
+        '.btn--inverted-icon .btn__icon': {
+          order: '-1',
+          borderRightWidth: '1px',
+          borderLeftWidth: '0',
+        },
+        // Button with an inline icon
+        '.btn__inline-icon': {
+          marginRight: theme('spacing.2'),
+        },
+        // Smaller size
+        '.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');
+        return {
+          // Standard colorized variant
+          [`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
+            backgroundColor: getThemeColor(colorOptions.background),
+            color: getThemeColor(colorOptions.text),
+          },
+          [`.btn--${e(name)} .btn__icon`]: {
+            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, darken(bg, 0.2)),
+              color:  getThemeColor(colorOptions.hoverText, '#fff'),
+            },
+            '.btn__icon': {
+              borderColor: getThemeColor(
+                colorOptions.hoverIconBorder,
+                darken(bg, 0.3)
+              ),
+            },
+            '.btn__icon svg, .btn__icon i': {
+              color:  getThemeColor(colorOptions.hoverText, '#fff'),
+              fill: getThemeColor(colorOptions.hoverText, '#fff')
+            }
+          },
+          [`.btn--hoveractive.btn--to-${e(name)}:hover, .btn--to-${e(name)}.btn--activated`]: {
+            '.btn__body': {
+              backgroundColor: `${getThemeColor(colorOptions.background)} !important`,
+              color: `${getThemeColor(colorOptions.text)} !important`,
+            },
+            '.btn__icon': {
+              borderColor: `${getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1))} !important`,
+              backgroundColor: `${getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000'))} !important`,
+            },
+            '.btn__inline-icon': {
+              color: `${getThemeColor(colorOptions.text)} !important`,
+            }
+          }
+        }
+      })
+    ])
+  }
+}

tailwind.config.js

+const Color = require('color');
+const screens = require("./screens");
+
+const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
+const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
+const darken = (clr, val) => Color(clr).darken(val).rgb().string();
+
 module.exports = {
+  content: [
+    "./source/**/*.mustache",
+    "./source/**/*.json",
+    "./source/**/*.js",
+    "./source/**/*.vue",
+    "./public/**/*.html",
+  ],
+  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)\:)?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)\:)?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',
       },
-      gridTemplateColumns: {
-        'candidate-table-row': 'auto auto auto auto 1fr'
+      height: {
+        '120': '30rem',
       },
       opacity: {
         '85': '0.85',
       },
       lineHeight: {
         'negative': '0.9',
-      }
       },
+      spacing: {
+        '0/5': '0.125rem',
+        '14': '3.5rem',
+        '28': '7rem',
+        '36': '9rem',
+        '44': '11rem',
+        '52': '13rem',
+        '80': '20rem',
+      },
+      // flip-x
+      scale: {
+        '-1': '-1',
+      },
+    },
+    // Breakpoints
+    screens,
     fontFamily: {
       alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
       body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
       condensed: ['Roboto Condensed', 'Helvetica', 'Arial', 'sans-serif'],
     },
     fontSize: {
+      '2xs': '.65rem',
       'xs': '.75rem',
       'sm': '.875rem',
       'base': '1rem',
@@ -30,7 +105,9 @@ module.exports = {
       '4xl': '2.45rem',
       '5xl': '3rem',
       '6xl': '4rem',
-      '7xl': '5.6rem',
+      '7xl': '5.3rem',
+      '8xl': '6.5rem',
+      '9xl': '7.5rem',
     },
     fontWeight: {
       light: 300,
@@ -43,58 +120,75 @@ module.exports = {
       'black': '#000000',
       'white': '#ffffff',
       'grey': {
+        '25': '#fafafa',
         '50': '#f7f7f7',
         '100': '#f3f3f3',
         '125': '#f0f0f0',
-        '150': '#00000012',
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
-        '450': '#262626',
-        '500': '#202020',
+        '500': '#303132',
+        '600': '#262626',
+        '700': '#202020',
+        '800': '#1f1f1f',
       },
-      'red': {
-        '100': '#d6151b',
+      'olive': {
+        '100': '#d6e8b3'
       },
       'green': {
-        '100': '#29bc51',
-        '200': '#26b34b',
-        '300': '#22a244',
+        '200': '#92c6ab',
+        '300': '#76cc9f',
+        '400': '#4ca971',
+      },
+      'yellow': {
+        '100': '#fff7bf',
+        '200': '#f7f38a',
+        '300': '#ffea5a',
+        '400': '#fde119',
+      },
+      'red': {
+        '600': '#d60d53'
       },
       'brands': {
         'facebook': '#067ceb',
         'twitter': '#00c9ff',
         'gmail': '#ec230e',
         'linkedin': '#0066a9',
-      }
       },
-    spacing: {
-      '0': '0',
-      'xs': '0.15rem',
-      'sm': '0.25rem',
-      '1': '0.5rem',
-      '2': '1rem',
-      '3': '1.5rem',
-      '4': '2rem',
-      '5': '2.5rem',
-      '6': '3rem',
-      '7': '4rem',
-      '8': '6rem',
-      '9': '8rem',
-      '10': '10rem',
-      '11': '12rem',
-      '11': '16rem',
-      '12': '20rem',
-      '13': '24rem',
-      '14': '30rem',
+      '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',
+      },
+      'pirati': {
+        'yellow': '#fec934'
+      },
     },
     container: {
       center: true,
+      /* @note: needs to be kept in sync with tailwind css/atoms/container.pcss */
       padding: {
         default: '1rem',
-        sm: '2rem',
-        lg: '4rem',
-        xl: '5rem',
+        xl: '2rem',
       },
     },
     textDecorationColor: { // defaults to theme => theme('colors')
@@ -104,90 +198,12 @@ module.exports = {
   },
   variants: {
     textDecorationColor: ['responsive', 'hover'],
+    background: ['responsive'],
+    appearance: ['responsive'],
+    space: ['responsive'],
+    text: ['responsive', 'hover'],
+    zIndex: ['responsive'],
   },
-  // textStyles: theme => ({ // defaults to {}
-  //   heading: {
-  //     output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
-  //     fontWeight: theme('fontWeight.bold'),
-  //     lineHeight: theme('lineHeight.tight'),
-  //   },
-  //   h1: {
-  //     extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
-  //     fontSize: theme('fontSize.5xl'),
-  //     '@screen sm': {
-  //       fontSize: theme('fontSize.6xl'),
-  //     },
-  //   },
-  //   h2: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.4xl'),
-  //     '@screen sm': {
-  //       fontSize: theme('fontSize.5xl'),
-  //     },
-  //   },
-  //   h3: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.4xl'),
-  //   },
-  //   h4: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.3xl'),
-  //   },
-  //   h5: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.2xl'),
-  //   },
-  //   h6: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.xl'),
-  //   },
-  //   link: {
-  //     '&:hover': {
-  //       textDecoration: 'underline',
-  //     },
-  //   },
-  //   richText: {
-  //     fontWeight: theme('fontWeight.normal'),
-  //     fontSize: theme('fontSize.base'),
-  //     lineHeight: theme('lineHeight.relaxed'),
-  //     '> * + *': {
-  //       marginTop: '1em',
-  //     },
-  //     'h1': {
-  //       extends: 'h1',
-  //     },
-  //     'h2': {
-  //       extends: 'h2',
-  //     },
-  //     'h3': {
-  //       extends: 'h3',
-  //     },
-  //     'h4': {
-  //       extends: 'h4',
-  //     },
-  //     'h5': {
-  //       extends: 'h5',
-  //     },
-  //     'h6': {
-  //       extends: 'h6',
-  //     },
-  //     'ul': {
-  //       listStyleType: 'disc',
-  //     },
-  //     'ol': {
-  //       listStyleType: 'decimal',
-  //     },
-  //     'a': {
-  //       extends: 'link',
-  //     },
-  //     'b, strong': {
-  //       fontWeight: theme('fontWeight.bold'),
-  //     },
-  //     'i, em': {
-  //       fontStyle: 'italic',
-  //     },
-  //   },
-  // }),
   plugins: [
     require('tailwind-css-variables')(
       {
@@ -197,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
@@ -209,5 +225,81 @@ module.exports = {
       color: "#dddddd",
       opacityBoost: '0.23',
     }),
+    require("./tailwind-plugins/buttons")({
+      defaultColor: {
+        text: 'white',
+        background: 'black',
+        iconBorder: 'grey.300'
+      },
+      colors: {
+        'black': {
+          text: 'white',
+          background: 'black',
+          iconBorder: 'grey.400',
+          hoverIconBorder: 'grey.600',
+        },
+        'grey-700': {
+          text: 'white',
+          background: 'grey.700',
+          iconBorder: 'grey.500',
+          hoverBackground: 'grey.400',
+          hoverIconBorder: 'grey.600',
+        },
+        'grey-500': {
+          text: 'white',
+          background: 'grey.500',
+          iconBorder: 'grey.300',
+          hoverBackground: 'grey.300',
+          hoverIconBorder: 'grey.400',
+        },
+        'grey-125': {
+          text: 'black',
+          background: 'grey.125',
+          hoverText: 'black',
+        },
+        'white': {
+          text: 'black',
+          background: 'white',
+          iconBorder: 'grey.100',
+          hoverText: 'black',
+        },
+        'blue-300': {
+          text: 'white',
+          background: 'blue.300',
+        },
+        'cyan-200': {
+          text: 'white',
+          background: 'cyan.200',
+        },
+        'green-300': {
+          text: 'white',
+          background: 'green.300',
+        },
+        'green-400': {
+          text: 'white',
+          background: 'green.400',
+        },
+        'orange-300': {
+          text: 'white',
+          background: 'orange.300',
+        },
+        'violet-400': {
+          text: 'white',
+          background: 'violet.400',
+        },
+        'violet-500': {
+          text: 'white',
+          background: 'violet.500',
+        },
+        'red-600': {
+          text: 'white',
+          background: 'red.600',
+        },
+        'brands-facebook': {
+          text: 'white',
+          background: 'brands.facebook',
+        }
+      }
+    })
   ]
 }