feat: tailwindcss updated to v1 + associated color adjustments

package.json

@@ -63,7 +63,7 @@
     "semantic-release": "^15.13.3",
     "striptags": "^3.1.1",
     "svg-loader": "0.0.2",
-    "tailwindcss": "^0.6.6",
+    "tailwindcss": "^1.0.3",
     "vue-cli-plugin-electron-builder": "^1.3.0",
     "vue-template-compiler": "^2.6.10"
   },

src/components/AppButton.vue

@@ -26,16 +26,24 @@ export default {
 <style lang="postcss" module>
 .button {
   @apply
-    px-2 py-1 w-full
-    text-white leading-tight
-    border rounded-sm;
+    px-4 py-2 w-full
+    font-medium leading-tight uppercase
+    border rounded;
 }
 
 .primary {
-  @apply bg-blue border-blue;
+  @apply text-white bg-gray-600 border-gray-500 shadow;
+}
+
+.primary:hover {
+  @apply bg-gray-700 border-gray-600;
 }
 
 .secondary {
-  @apply bg-grey-darker border-grey-darker;
+  @apply text-gray-500 border-gray-600;
+}
+
+.secondary:hover {
+  @apply text-white bg-gray-700 border-gray-600;
 }
 </style>

src/components/AppIcon.vue

@@ -47,7 +47,7 @@ export default {
 
 <style lang="postcss" module>
 .icon {
-  @apply block flex-no-shrink mx-auto fill-current;
+  @apply block flex-shrink-0 mx-auto fill-current;
 }
 
 .size-4 {

src/components/AppLayout.vue

@@ -65,13 +65,13 @@ export default {
 </script>
 
 <style lang="postcss" module>
-@tailwind preflight;
+@tailwind base;
 @tailwind components;
 
 .app {
   @apply
-    font-sans text-grey
-    bg-black select-none;
+    font-sans text-gray-400
+    bg-gray-900 select-none;
 
   display: grid;
   grid-template-columns: min-content min-content 1fr min-content min-content;
@@ -145,7 +145,7 @@ export default {
 
 .titleBarSpacer {
   grid-area: space;
-  max-width: config('width.64');
+  max-width: theme('width.64');
 }
 
 .titleBarSpacer__osMac {
@@ -164,11 +164,11 @@ export default {
 .sideBar {
   @apply relative z-20 flex flex-col overflow-y-auto;
   grid-area: aside;
-  max-width: config('width.64');
+  max-width: theme('width.64');
 }
 
 .main {
-  @apply relative z-10 overflow-y-auto bg-grey-darkest;
+  @apply relative z-10 overflow-y-auto bg-gray-800;
   grid-area: main;
 }
 
@@ -183,7 +183,7 @@ export default {
 
 <style lang="postcss">
 body {
-  @apply h-screen overflow-hidden bg-black;
+  @apply h-screen overflow-hidden bg-gray-900;
 }
 
 button:focus,

src/components/SideBarButton.vue

@@ -31,10 +31,10 @@ export default {
 .btn {
   @apply
     block w-full p-2
-    text-grey-darkest text-center;
+    text-gray-600 text-center;
 }
 
 .active {
-  @apply text-grey-darker;
+  @apply text-gray-600;
 }
 </style>

src/components/SuggestedApps.vue

@@ -62,15 +62,15 @@ export default {
 <style lang="postcss" module>
 .wrap {
   display: grid;
-  grid-column-gap: config('padding.8');
-  grid-row-gap: config('padding.4');
-  grid-template-columns: repeat(auto-fill, minmax(config('width.24'), 1fr));
+  grid-column-gap: theme('padding.8');
+  grid-row-gap: theme('padding.4');
+  grid-template-columns: repeat(auto-fill, minmax(theme('width.24'), 1fr));
 }
 
 .btn {
   @apply
     relative mb-8
-    text-center bg-grey-dark rounded shadow-lg;
+    text-center bg-gray-600 rounded shadow-lg;
 }
 
 .btn::before {
@@ -81,17 +81,17 @@ export default {
 
 .btn:hover::after {
   @apply
-    absolute pin flex flex-col justify-center
+    absolute inset-0 flex flex-col justify-center
     text-4xl text-white leading-none
-    opacity-75 bg-grey-darker rounded;
+    opacity-75 bg-gray-700 rounded;
   content: "+";
 }
 
 .thumb {
   @apply
     absolute block p-3
-    text-4xl text-grey-darker leading-none
-    bg-grey-lightest rounded-full;
+    text-4xl text-gray-700 leading-none
+    bg-gray-100 rounded-full shadow;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -104,7 +104,7 @@ export default {
 .label {
   @apply
     absolute pt-2 min-w-0
-    text-center text-grey truncate;
+    text-center text-gray-500 truncate;
   top: 100%;
   left: 0;
   right: 0;

src/components/TabsNav.vue

@@ -80,7 +80,7 @@ export default {
 }
 
 .drag {
-  @apply cursor-move text-blue-lighter bg-blue;
+  @apply cursor-move text-gray-300 bg-gray-500;
 }
 
 .helper {

src/components/TabsNavItem.vue

@@ -58,35 +58,35 @@ export default {
 <style lang="postcss" module>
 .item {
   @apply
-    flex flex-no-shrink items-center p-2
-    text-grey-dark text-left rounded-sm;
+    flex flex-shrink-0 items-center p-2
+    text-gray-600 text-left rounded-sm;
 }
 
 .item + .item {
   @apply mt-1;
 }
 
 .active {
-  @apply text-grey-light bg-grey-darkest shadow;
+  @apply text-gray-400 bg-gray-800 shadow;
 }
 
 .badge {
-  @apply absolute pin-l w-2 h-2 bg-grey-darker rounded-full;
+  @apply absolute left-0 w-2 h-2 bg-gray-700 rounded-full;
   transform: translateX(-50%);
 }
 
 .thumb {
   @apply
-    flex flex-no-shrink justify-center items-center
+    flex flex-shrink-0 justify-center items-center
     p-1 w-8 h-8 rounded-sm;
 }
 
 .thumbIsImage {
-  @apply bg-grey-lightest;
+  @apply bg-gray-100;
 }
 
 .thumbIsIcon {
-  @apply text-grey bg-grey-darker;
+  @apply text-gray-500 bg-gray-700;
 }
 
 .image {

src/components/TitleBarButton.vue

@@ -54,7 +54,7 @@ export default {
     },
     schema: {
       type: String,
-      default: 'blue',
+      default: 'gray',
     },
     tag: {
       type: String,
@@ -96,7 +96,9 @@ export default {
 }
 
 .btn {
-  @apply flex p-2 w-full leading-none appearance-none text-left text-grey-dark whitespace-no-wrap;
+  @apply
+    flex p-2 w-full
+    leading-none appearance-none text-left text-gray-500 whitespace-no-wrap;
   -webkit-app-region: no-drag;
 }
 
@@ -105,7 +107,7 @@ export default {
 }
 
 .icon {
-  @apply flex-no-shrink;
+  @apply flex-shrink-0;
 }
 
 .icon + .label {
@@ -116,27 +118,30 @@ export default {
   @apply flex-grow;
 }
 
-.blue:hover {
-  @apply text-blue-lighter bg-blue;
+.red:hover {
+  @apply text-red-200 bg-red-600;
 }
 
-.red:hover {
-  @apply text-red-lighter bg-red-dark;
+.gray:hover,
+.active {
+  @apply text-gray-300 bg-gray-700;
 }
 
-.grey:hover {
-  @apply bg-grey-darkest;
+.dropdown {
+  @apply
+    absolute right-0 flex flex-col overflow-hidden
+    bg-gray-700 rounded-b shadow-md;
 }
 
-.active {
-  @apply text-blue-lighter bg-blue;
+.dropdown .btn {
+  @apply text-gray-300;
 }
 
-.dropdown {
-  @apply absolute pin-r flex flex-col overflow-hidden bg-grey-darkest rounded shadow-md;
+.dropdown .btn:hover {
+  @apply text-gray-400 bg-gray-800;
 }
 
 .dropdown_shadow {
-  @apply fixed pin;
+  @apply fixed inset-0;
 }
 </style>

src/components/WindowControls.vue

@@ -2,12 +2,12 @@
   <div :class="$style.wrap">
     <title-bar-button
       icon="window-minimize"
-      schema="grey"
+      schema="gray"
       @click="window.minimize()"
     />
     <title-bar-button
       :icon="isMaximized ? 'window-restore' : 'window-maximize'"
-      schema="grey"
+      schema="gray"
       @click="toggleMaximized()"
     />
     <title-bar-button

src/components/WindowDimmer.vue

@@ -75,8 +75,8 @@ export default {
   height: 400vh;
   z-index: 40;
   background-image: linear-gradient(
-    config('colors.black'),
-    config('colors.black') 25%,
+    theme('colors.gray.900'),
+    theme('colors.gray.900') 25%,
     transparent 100%,
   );
 
@@ -96,7 +96,7 @@ export default {
   background-repeat: no-repeat;
   background-size: 192px, contain;
   opacity: 0;
-  transform: rotate(-45deg);
+  transform: rotate(45deg);
 
   .active & {
     opacity: 0.5;

src/views/Changelog.vue

@@ -67,11 +67,11 @@ export default {
 }
 
 .changelog ul {
-  @apply mt-2 text-grey-lighter list-reset;
+  @apply mt-2 text-gray-300;
 }
 
 .changelog strong {
-  @apply text-grey font-light;
+  @apply text-gray-500 font-light;
 }
 
 </style>

src/views/Notifications.vue

@@ -5,6 +5,7 @@
         Notifications
       </title-bar-text>
       <title-bar-button
+        v-if="notifications.length"
         @click="removeAll"
       >
         Clear all
@@ -100,22 +101,22 @@ export default {
 }
 
 .item {
-  @apply flex p-2 mb-2 bg-black rounded;
+  @apply flex p-2 mb-2 bg-gray-900 rounded;
 }
 
 .itemTitle {
   @apply flex-grow font-bold;
 }
 
 .itemTime {
-  @apply mx-2 text-grey-dark;
+  @apply mx-2 text-gray-600;
 }
 
 .thumb {
   @apply
-    flex flex-no-shrink justify-center items-center
+    flex flex-shrink-0 justify-center items-center
     p-1 w-8 h-8 mr-3 rounded-sm
-    bg-grey-lightest;
+    bg-gray-100;
 }
 
 .image {
@@ -131,10 +132,10 @@ export default {
 }
 
 .content {
-  @apply mt-2 text-grey;
+  @apply mt-2 text-gray-500;
 }
 
 .empty {
-  @apply p-2 mb-2 bg-black rounded;
+  @apply p-4 mb-2 bg-gray-900 rounded;
 }
 </style>