embermap · ryanto · Sep 14, 2018
diff --git a/app/pods/components/bar-chart/template.hbs b/app/pods/components/bar-chart/template.hbs
@@ -7,7 +7,7 @@
     attachment='bottom middle'
     offset='14px 0'}}
 
-    <div class='bg-black white f7 pa2 o-80'>
+    <div class='bg-black text-white text-xs p-2 opacity-80'>
       <p>{{highlightedLabel}}</p>
     </div>
     <div class="tooltip-arrow"></div>

diff --git a/app/pods/components/comment-box/template.hbs b/app/pods/components/comment-box/template.hbs
@@ -14,7 +14,7 @@
   {{#if isLong}}
     <a href="#"
       {{action (toggle "isExpanded" this)}}
-      class="gray"
+      class="text-grey-dark no-underline"
       data-test-id={{if isExpanded "show-less" "show-more"}}>
         Show {{if isExpanded "less" "more"}}</a>
   {{/if}}

diff --git a/app/pods/components/confirm-delete-post/template.hbs b/app/pods/components/confirm-delete-post/template.hbs
@@ -1,11 +1,11 @@
 {{#ui-modal onClose=(action on-cancel)}}
 
-  <div class="mh3 mt3">
-    <h1 class="f3 lh-title mb3 mt0">
+  <div class="mx-4 mt-4">
+    <h1 class="text-2xl leading-normal mb-4 mt-0">
       Delete post?
     </h1>
 
-    <p class="f5 lh-normal mb5">
+    <p class="text-base leading-normal mb-16">
       Are you sure you want to delete {{post.title}}? This
       action cannot be undone.
     </p>

diff --git a/app/pods/components/tag-list/template.hbs b/app/pods/components/tag-list/template.hbs
@@ -1,5 +1,10 @@
 {{#each (sort-by 'name' tags) as |tag|}}
-  {{#link-to 'tags.tag' tag.slug class='dib transition mr1 near-black link f8 fw5 ttu br-pill bg-light-gray hover-bg-moon-gray ph2 pv1'}}
+  {{#link-to 'tags.tag' tag.slug
+    class='
+      inline-block no-underline transition mr-1
+      text-black text-10px font-medium uppercase
+      rounded-full bg-grey-lighter hover:bg-grey-light
+      px-2 py-1'}}
     {{tag.name}}
   {{/link-to}}
 {{/each}}
diff --git a/app/pods/components/ui-button/template.hbs b/app/pods/components/ui-button/template.hbs
@@ -3,12 +3,14 @@
   disabled={{disabled}}
   data-test-id={{data-test-id}}
   class="
-    leading-tight inline-block mb3 pointer f5 pv2 ph3 br2 fw3 bn bg-blue white
-    {{if disabled 'o-50' 'dim'}}
+    leading-tight inline-block
+    mb-4 pointer text-base py-2 px-3 rounded font-light border-0
+    bg-blue text-white
+    {{if disabled 'opacity-50' 'dim'}}
     ">
 
   {{#if task.isRunning}}
-    <div class="dib mr1">
+    <div class="inline-block mr-1">
       {{ui-spinner}}
     </div>
   {{/if}}

diff --git a/app/pods/components/ui-card/header/template.hbs b/app/pods/components/ui-card/header/template.hbs
@@ -1,6 +1,7 @@
-<div class="flex pb3 mb2 bb b--light-gray">
-  <p class='gray f6'>{{yield}}</p>
-  <a {{action onClose}} href='#' class="mla link gray f4 o-50 glow">
+<div class="flex items-center pb-4 mb-2 border-b border-grey-light">
+  <p class='text-grey-darker text-sm'>{{yield}}</p>
+  <a {{action onClose}} href='#' class="
+      ml-auto no-underline text-grey-darker text-xl opacity-50 glow">
     &times;
   </a>
 </div>
diff --git a/app/pods/components/ui-selectable-list/item/template.hbs b/app/pods/components/ui-selectable-list/item/template.hbs
@@ -1,11 +1,13 @@
 <li>
   <a {{action onClick}}
     href="#"
-    class='flex items-center link gray pa2 br2 hover-bg-near-white mb2'>
+    class='
+      flex items-center
+      no-underline text-grey-dark p-2 rounded hover:bg-grey-lightest mb-2'>
     <span>
       {{yield}}
     </span>
-    <span class='mla f6'>
+    <span class='ml-auto text-sm'>
       {{#if selected}}
         {{fa-icon 'check'}}
       {{/if}}

diff --git a/app/pods/dashboard/template.hbs b/app/pods/dashboard/template.hbs
@@ -2,27 +2,27 @@
   did-insert=(action 'activateKeyboard')
   will-destroy=(action 'deactivateKeyboard')}}
 
-<h1 class='mt0'>Welcome, Sam!</h1>
+<h1 class='mt-0'>Welcome, Sam!</h1>
 
 <h2>Latest posts</h2>
 
 {{#liquid-if isLoading}}
   {{ui-spinner}}
 {{/liquid-if}}
 
-<div class="mb3">
+<div class="mb-4">
   {{#ui-card}}
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   {{/ui-card}}
 </div>
 
-<div class="mb3">
+<div class="mb-4">
   {{#ui-card}}
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   {{/ui-card}}
 </div>
 
-<div class="mb3">
+<div class="mb-4">
   {{#ui-card}}
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   {{/ui-card}}

diff --git a/app/pods/media/albums/album/image/template.hbs b/app/pods/media/albums/album/image/template.hbs
@@ -1,7 +1,7 @@
-{{#link-to 'media.albums.album.index' class='link dark-gray dim'}}
+{{#link-to 'media.albums.album.index' class='no-underline text-grey-darkest dim'}}
   &lt; {{model.album.title}}
 {{/link-to}}
 
 <h1>{{model.title}}</h1>
 
-<img src={{model.url}} class='w5 h5'>
+<img src={{model.url}} class='w-64 h-64'>
diff --git a/app/pods/media/albums/album/index/template.hbs b/app/pods/media/albums/album/index/template.hbs
@@ -1,4 +1,4 @@
-{{#link-to 'media.albums' class='link dark-gray dim'}}
+{{#link-to 'media.albums' class='no-underline text-grey-darkest dim'}}
   &lt; All albums
 {{/link-to}}
 
@@ -7,7 +7,7 @@
 <div class="flex flex-wrap">
   {{#each model.images as |image|}}
     {{#link-to 'media.albums.album.image' image class='dim'}}
-      <img src={{image.url}} class='w4 h4 mr4 mb4'>
+      <img src={{image.url}} class='w-32 h-32 mr-8 mb-8'>
     {{/link-to}}
   {{/each}}
 </div>
diff --git a/app/pods/media/albums/index/template.hbs b/app/pods/media/albums/index/template.hbs
@@ -2,10 +2,11 @@
 
 <div class="flex flex-wrap">
   {{#each (sort-by 'id' model) as |album|}}
-    {{#link-to 'media.albums.album.index' album class='db w4 mb3 mr3 link gray dim'}}
+    {{#link-to 'media.albums.album.index' album
+      class='block w-32 mb-3 mr-3 no-underline text-grey-dark dim'}}
       <img src={{album.images.firstObject.url}}
-        class='w4 h4 br2 ba b--moon-gray'>
-      <p class='pv2 tc lh-copy'>{{album.title}}</p>
+        class='w-32 h-32 rounded border border-grey'>
+      <p class='py-2 text-center leading-normal'>{{album.title}}</p>
     {{/link-to}}
   {{/each}}
 </div>
diff --git a/app/pods/media/styles/style/template.hbs b/app/pods/media/styles/style/template.hbs
@@ -1,5 +1,5 @@
 <div class="flex flex-wrap">
   {{#each model as |image|}}
-    <img src={{image.url}} class='w4 h4 mr4 mb4'>
+    <img src={{image.url}} class='w-32 h-32 mr-8 mb-8'>
   {{/each}}
 </div>
diff --git a/app/pods/media/styles/template.hbs b/app/pods/media/styles/template.hbs
@@ -1,20 +1,20 @@
-<div class="flex items-center mb4">
-  <h1 class='mt0 mb0 dib mr3'>Photo styles</h1>
+<div class="flex items-center mb-8">
+  <h1 class='mt-0 mb-0 inline-block mr-4'>Photo styles</h1>
 
   {{#link-to 'media.styles.style' 'light'
-    class='flex link b silver pb2 mr3 bb bw1 b--transparent'
-    activeClass='b--inherit'}}
-    <div class='dib w1 h1 mr2 bg-light-silver'></div>
-    <p class='dib ma0 f6'>
+    class='flex no-underline text-bold text-grey-dark mr-4 border-bottom border-color-transparent'
+    activeClass='border-color-inherit'}}
+    <div class='inline-block w-4 h-4 mr-2 bg-grey'></div>
+    <p class='inline-block m-0 text-sm'>
       LIGHT
     </p>
   {{/link-to}}
 
   {{#link-to 'media.styles.style' 'dark'
-    class='flex link b near-black pb2 bb bw1 b--transparent'
-    activeClass='b--inherit'}}
-    <div class='dib w1 h1 mr2 bg-near-black'></div>
-    <p class='dib ma0 f6'>
+    class='flex no-underline text-bold text-black border-bottom-1 border-color-transparent'
+    activeClass='border-color-inherit'}}
+    <div class='inline-block w-4 h-4 mr-2 bg-black'></div>
+    <p class='inline-block m-0 text-sm'>
       DARK
     </p>
   {{/link-to}}

diff --git a/app/pods/media/template.hbs b/app/pods/media/template.hbs
@@ -1,11 +1,15 @@
-{{#link-to 'media.albums' class='link dark-gray dim mr3' activeClass='silver'}}
+{{#link-to 'media.albums'
+  class='no-underline text-grey-darkest dim mr-4'
+  activeClass='text-grey-dark'}}
   Albums
 {{/link-to}}
 
-{{#link-to 'media.styles' class='link dark-gray dim' activeClass='silver'}}
+{{#link-to 'media.styles'
+  class='no-underline text-grey-darkest dim'
+  activeClass='text-grey-dark'}}
   Styles
 {{/link-to}}
 
-<hr class='mb4'>
+<hr class='mb-8'>
 
 {{outlet}}
diff --git a/app/pods/posts/index/template.hbs b/app/pods/posts/index/template.hbs
@@ -5,39 +5,39 @@
 {{/if}}
 
 {{#if model}}
-  <div class="flex tc">
-    <div class="flex-auto ph4">
+  <div class="flex text-center">
+    <div class="flex-auto px-8">
       {{bar-chart data=authorData
         selectedLabel=selectedAuthor
         on-click=(action 'toggleBar' 'selectedAuthor')}}
 
-      <h2 class='f5 mt3 mb4'>
+      <h2 class='text-base font-normal mt-4 mb-8'>
         Authors
       </h2>
     </div>
-    <div class="flex-auto ph4">
+    <div class="flex-auto px-8">
       {{bar-chart data=categoryData color='green'
         selectedLabel=selectedCategory
         on-click=(action 'toggleBar' 'selectedCategory')}}
 
-      <h2 class='f5 mt3 mb4'>
+      <h2 class='text-base font-normal mt-4 mb-8'>
         Categories
       </h2>
     </div>
-    <div class="flex-auto ph4">
+    <div class="flex-auto px-8">
       {{bar-chart data=commentsData color='red'
         selectedLabel=selectedPost
         on-click=(action 'toggleBar' 'selectedPost')}}
 
-      <h2 class='f5 mt3 mb4'>
+      <h2 class='text-base font-normal mt-4 mb-8'>
         Comments
       </h2>
     </div>
   </div>
 {{/if}}
 
 {{#if model}}
-  <table class='lh-title'>
+  <table class='leading-tight'>
     <thead>
       <tr>
         <th>
@@ -64,18 +64,20 @@
       {{keyboard-press key="Enter" on-press=(action "openPost" navigatedPost)}}
 
       {{#each posts as |post|}}
-        <tr class="hide-child" class="bl bw2 {{if (eq post navigatedPost) 'b--blue' 'b--transparent'}}">
+        <tr class="
+          group
+          border-l-4 {{if (eq post navigatedPost) 'border-blue' 'border-transparent'}}">
           <td>
-            {{#link-to 'posts.post' post.id class='link dark-gray dim'}}
+            {{#link-to 'posts.post' post.id class='no-underline text-grey-darkest'}}
               {{post.title}}
             {{/link-to}}
           </td>
           <td>{{moment-format post.date 'MMM D, YYYY'}}</td>
           <td>{{post.author}}</td>
           <td>{{tag-list tags=post.tags}}</td>
-          <td class="tr">
+          <td class="text-right">
             <a href="#" {{action "showDelete" post}}
-              class="child no-transition gray no-underline">
+              class="hidden group-hover:block no-transition text-grey-dark no-underline">
               {{fa-icon "trash"}}
               <span class="f6">Delete</span>
             </a>

diff --git a/app/pods/posts/post/edit/template.hbs b/app/pods/posts/post/edit/template.hbs
@@ -1,22 +1,24 @@
-<div class="flex mt3">
-  <div class="w-75">
-    <h1 class='mt0 w-100'>
-      {{input value=model.title class='w-100 pa2'}}
+<div class="flex mt-4">
+  <div class="w-3/4">
+    <h1 class='mt-0 w-full'>
+      {{input
+        value=model.title
+        class='w-full p-2 border border-grey-lighter'}}
     </h1>
 
-    <div class="mt3">
+    <div class="mt-4">
       {{textarea value=model.text rows=20
-        class='pa2 b--light-gray w-100'}}
+        class='p-2 border border-grey-lighter w-full'}}
     </div>
   </div>
 
-  <div class="w-25 pl4">
+  <div class="w-1/4 pl-8">
     {{#ui-button task=save data-test-id="save"}}
       Save
     {{/ui-button}}
 
     {{#if save.last.isError}}
-      <p class='mt3 red' data-test-id="error">
+      <p class='mt-4 text-red' data-test-id="error">
         {{fa-icon 'exclamation-circle'}}
         Whoops - your post was not saved. Please try again!
       </p>

diff --git a/app/pods/posts/post/index/template.hbs b/app/pods/posts/post/index/template.hbs
@@ -1,21 +1,25 @@
 <div class="flex items-center">
   <h1 data-test-id="title">{{model.title}}</h1>
 
-  <p class='pl4'>
-    {{#link-to 'posts.post.edit' model.id class='dim link silver'}}
+  <p class='pl-8'>
+    {{#link-to 'posts.post.edit' model.id class='dim no-underline text-grey-dark'}}
       Edit post
     {{/link-to}}
   </p>
 </div>
 
-<div class="flex mb3 items-center">
-  <p class='mr1'>
+<div class="flex mb-4 items-center">
+  <p class='mr-1'>
     Tags:
   </p>
 
-  <span class='mr2'>
+  <span class='mr-2'>
     <a {{action (toggle 'isEditingTags' this)}}
-      class='link silver br1 f7 dib flex items-center justify-center w2 h2 hover-near-black'
+      class='
+        no-underline text-grey-dark rounded-sm
+        text-xs inline-block
+        flex items-center justify-center
+        w-8 h-8 hover:text-black'
       href="#"
       data-modal-attach-id='tag-list'>
       {{fa-icon 'pencil'}}
@@ -25,23 +29,23 @@
   {{tag-list tags=model.tags}}
 </div>
 
-<hr class='bt-0 mv3'>
+<hr class='border-top-0 my-4'>
 
-<div class='lh-copy'>
+<div class='leading-normal'>
   {{{model.text}}}
 </div>
 
 <h2>
   Activity
 </h2>
 
-<div class="lh-copy">
+<div class="leading-normal">
   <ul>
     {{#each (sort-by 'createdAt:desc' model.activities) as |activity|}}
       <li>
         &middot;
         {{activity.text}}
-        <span class='pl2 silver'>{{moment-from-now activity.createdAt}}</span>
+        <span class='pl-2 text-grey-dark'>{{moment-from-now activity.createdAt}}</span>
       </li>
     {{/each}}
   </ul>
@@ -54,7 +58,7 @@
   {{/if}}
 </h2>
 
-<div class='lh-copy'>
+<div class='leading-normal'>
   {{#if model.comments}}
     <ul>
       {{#each model.comments as |comment|}}