Merge branch 'update-tailwind'

2019-03-14 20:30:44 +00:00 · 2019-03-14 20:30:44 +00:00 · 4e4c4ea4d9
parent b7bb6ee57e 337ad14e4a
commit 4e4c4ea4d9
9 changed files with 1431 additions and 1573 deletions
--- a/package.json
+++ b/package.json
@ -8,7 +8,7 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "tailwindcss": "^0.7.2",
+    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next",
    "tailwindcss-skip-link": "^1.0.1",
    "vue": "^2.5.17"
  },
@ -37,7 +37,7 @@
  },
  "postcss": {
    "plugins": {
-      "tailwindcss": "./tailwind.js",
+      "tailwindcss": "./tailwind.config.js",
      "autoprefixer": {}
    }
  },
--- a/src/App.vue
+++ b/src/App.vue
@ -20,7 +20,7 @@ export default {
 </script>

 <style>
-@tailwind preflight;
+@tailwind base;
@tailwind components;

 .skip-link:focus {
--- a/src/components/DrupalMessage.vue
+++ b/src/components/DrupalMessage.vue
@ -1,7 +1,7 @@
 <template>
    <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
-      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-3 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
      <slot></slot>
    </div>
  </div>
@ -16,13 +16,13 @@ export default {
  computed: {
    classes: function () {
      return {
-        status: 'border-green-light text-green-dark bg-green-lighter',
+        status: 'border-green-2 text-green-4 bg-green-1',
      }[this.type]
    },

    wrapperClasses: function () {
      return {
-        status: 'bg-green',
+        status: 'bg-green-3',
      }[this.type]
    },
  }
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@ -2,7 +2,7 @@
  <div>
    <button
      type="button"
-      class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none"
+      class="w-full p-3 block sm:hidden bg-blue-1 text-sm text-grey-6 text-left focus:outline-none"
      @click="open = !open"
    >
      <div class="flex items-center justify-between">
@ -15,7 +15,7 @@
      </div>
    </button>

-    <div class="xl:max-w-3xl mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
+    <div class="xl:max-w-6xl mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
      <div class="mt-2 sm:mt-0">
        <nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
          <div
@ -25,7 +25,7 @@
          >
            <a
              class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
-              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-light hover:bg-white' ]"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-1 hover:bg-white' ]"
              :href="link.href"
            >
              {{ link.title }}
--- a/src/components/SidebarBlock.vue
+++ b/src/components/SidebarBlock.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-lightest p-4 mb-4">
+  <div class="bg-grey-1 p-4 mb-4">
    <slot></slot>
  </div>
 </template>
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@ -1,8 +1,8 @@
 <template>
  <div>
-    <div class="bg-blue-dark">
+    <div class="bg-blue-3">
      <div class="py-4 text-white">
-        <div id="header" class="xl:max-w-3xl mx-auto px-4 relative">
+        <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
          <div class="flex flex-col-reverse">
            <div class="flex items-center">
              <img src="img/logo.svg" alt="" class="mr-4">
@ -22,19 +22,19 @@
    </div>

    <div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
-      <div class="xl:max-w-3xl mx-auto px-4">
+      <div class="xl:max-w-6xl mx-auto px-4">
        <drupal-message type="status">
          <p>
            A Bartik clone, built with
-            <a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
-            and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
+            <a href="https://vuejs.org" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Tailwind CSS</a>.
          </p>
        </drupal-message>

        <div class="flex flex-col md:flex-row-reverse md:-mx-6 my-6">
          <div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
            <div class="font-serif">
-              <h1 class="font-normal">Welcome to {{ title }}</h1>
+              <h1 class="text-3xl font-normal leading-tight mb-1">Welcome to {{ title }}</h1>
              <p>No front page content has been created yet.</p>
              <p>Follow the <a href="#0" class="">User Guide</a> to start building your site.</p>
            </div>
@ -48,13 +48,13 @@

          <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
            <sidebar-block>
-              <h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
+              <h2 class="font-serif font-normal text-base text-grey-6 border-b border-solid border-grey-3 mb-3">Search</h2>

              <div>
                <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
+                  <input type="text" class="border border-solid border-grey-4 p-2 w-full xl:w-auto">

-                  <button type="submit" class="bg-grey-lighter px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none">
+                  <button type="submit" class="bg-grey-2 px-3 rounded-full border-b border-solid border-grey-5 ml-2 flex-none">
                    <img src="img/loupe.svg" class="block">
                  </button>
                </form>
@ -66,8 +66,8 @@
    </div>

    <div id="footer" class="text-xs text-white">
-      <div class="xl:max-w-3xl mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-darkest pt-6 -mb-6">
+      <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
+        <div class="border-t border-solid border-grey-6 pt-6 -mb-6">
          <div class="mb-6">
            <p><a href="#0">Contact</a></p>
          </div>
@ -116,11 +116,11 @@ export default {
 }

 #main a {
-  @apply text-blue-dark no-underline border-b border-blue border-dotted;
+  @apply text-blue-3 no-underline border-b border-blue-1 border-dotted;

  &:hover,
  &:focus {
-    @apply text-blue border-solid
+    @apply text-blue-1 border-solid
  }
 }

--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,46 @@
+module.exports = {
+  theme: {
+    colors: {
+      black: {
+        default: '#22292f',
+        60: 'rgba(0,0,0,.6)',
+      },
+      blue: {
+        1: '#bcdefa',
+        2: '#3490dc',
+        3: '#2779bd',
+      },
+      green: {
+        1: '#f3faee',
+        2: '#cde2c2',
+        3: '#77b159',
+        4: '#325e1c',
+      },
+      grey: {
+        1: '#f6f6f2',
+        2: '#f0f0f0',
+        3: '#dae1e7',
+        4: '#b8c2cc',
+        5: '#8795a1',
+        6: '#3d4852',
+      },
+      transparent: 'transparent',
+      white: '#fff',
+    },
+    extend: {
+      fontSize: {
+        '3xl': '1.75rem',
+      },
+      maxWidth: {
+        '6xl': '80rem',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss/plugins/container')({
+      center: true,
+      padding: '1rem',
+    }),
+    require('tailwindcss-skip-link')(),
+  ]
+}
--- a/tailwind.js
+++ b/tailwind.js
@ -1,37 +0,0 @@
-let defaultConfig = require('tailwindcss/defaultConfig')()
-
-var colors = {
-  ...defaultConfig.colors,
-  'black': '#22292f',
-  'black-60': 'rgba(0, 0, 0, .6)',
-  'blue': '#3490dc',
-  'blue-dark': '#2779bd',
-  'blue-light': '#bcdefa',
-  'green': '#77B159',
-  'green-dark': '#325E1C',
-  'green-light': '#CDE2C2',
-  'green-lighter': '#F3FAEE',
-  'grey': '#b8c2cc',
-  'grey-dark': '#8795a1',
-  'grey-darkest': '#3d4852',
-  'grey-light': '#dae1e7',
-  'grey-lighter': '#f0f0f0',
-  'grey-lightest': '#F6F6F2',
-  'transparent': 'transparent',
-  'white': '#ffffff',
-}
-
-module.exports = {
-  ...defaultConfig,
-  colors: colors,
-  textColors: colors,
-  backgroundColors: colors,
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
-  plugins: [
-    require('tailwindcss/plugins/container')({
-      center: true,
-      padding: '1rem',
-    }),
-    require('tailwindcss-skip-link')(),
-  ],
-}
--- a/yarn.lock
+++ b/yarn.lock