Merge pull request #170 from WebDevStudios/feature/tailwind-defaults

Feature/tailwind defaults

Author: Greg Rickaby

components/atoms/Button/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase font-secondary;
+  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase;
 
   & svg {
     @apply ml-12;
@@ -21,19 +21,19 @@
 
   /* SIZES */
   &.lg {
-    @apply px-16 py-12 text-h5;
+    @apply px-6 py-3;
 
     line-height: 1.5625rem;
   }
 
   &.md {
-    @apply px-16 py-12 text-sm;
+    @apply px-3 py-1.5;
 
     line-height: 1.25rem;
   }
 
   &.sm {
-    @apply px-16 py-8 text-caption;
+    @apply px-1.5 py-0.5;
 
     line-height: 1.0625rem;
   }
@@ -44,15 +44,15 @@
 
   /* TYPES */
   &.primary {
-    @apply bg-primary text-white border-white border-opacity-0;
+    @apply bg-white;
 
     &.disabled {
       @apply opacity-50;
     }
   }
 
   &.secondary {
-    @apply bg-white bg-opacity-0 text-primary border-primary;
+    @apply bg-black text-white;
 
     &.disabled {
       @apply opacity-50;

components/atoms/Code/Code.module.css

@@ -2,6 +2,6 @@
   @apply mb-40;
 
   & > pre {
-    @apply rounded-larger;
+    @apply rounded;
   }
 }

components/atoms/Icon/Icon.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import tailwindConfig from '../../../tailwind.config.js'
 import {icons} from './icons'
 
 /**
@@ -16,7 +15,7 @@ function sizeToPx(size) {
     lg: '1.5'
   }
 
-  return sizeToRem[size] * parseFloat(tailwindConfig.theme.fontSize['root-em'])
+  return sizeToRem[size] * 16
 }
 
 /**

components/atoms/Icon/Icon.stories.mdx

@@ -10,7 +10,7 @@ Use this component to display an icon. See the Icons Story in General for a list
 
 <Canvas>
   <Story name="Component">
-    <Icon icon="info" title="Info" className="text-black" />
+    <Icon icon="info" title="Info" className="" />
   </Story>
 </Canvas>
 
@@ -20,9 +20,9 @@ Three sizes are supported.
 
 <Canvas>
   <Story name="Sizes">
-    <Icon icon="star" size="sm" title="Star" className="my-8 text-black" />
-    <Icon icon="star" size="md" title="Star" className="my-8 text-black" />
-    <Icon icon="star" size="lg" title="Star" className="my-8 text-black" />
+    <Icon icon="star" size="sm" title="Star" className="my-8 " />
+    <Icon icon="star" size="md" title="Star" className="my-8 " />
+    <Icon icon="star" size="lg" title="Star" className="my-8 " />
   </Story>
 </Canvas>
 
@@ -37,14 +37,14 @@ Two styles are supported - line and fill icons.
       style="line"
       size="lg"
       title="Volume up"
-      className="my-8 text-black"
+      className="my-8 "
     />
     <Icon
       icon="clipboard"
       style="fill"
       size="lg"
       title="Volume up"
-      className="my-8 text-black"
+      className="my-8 "
     />
   </Story>
 </Canvas>
@@ -55,12 +55,7 @@ The icon will inherit the closest defined text color using `currentColor`. If yo
 
 <Canvas>
   <Story name="Color">
-    <Icon
-      icon="colorPalette"
-      size="lg"
-      title="Color palette"
-      className="text-primary"
-    />
+    <Icon icon="colorPalette" size="lg" title="Color palette" className="" />
   </Story>
 </Canvas>
 
@@ -75,12 +70,7 @@ See [this article on CSS Tricks](https://css-tricks.com/accessible-svgs/#example
 
 <Canvas>
   <Story name="Accessibility">
-    <Icon
-      icon="options"
-      title="Options"
-      ariaHidden={false}
-      className="text-black"
-    />
+    <Icon icon="options" title="Options" ariaHidden={false} className="" />
   </Story>
 </Canvas>
 
@@ -96,7 +86,7 @@ export const Template = (args) => <Icon {...args} />
     args={{
       icon: 'info',
       title: 'Info',
-      className: 'text-black'
+      className: ''
     }}
   >
     {Template.bind({})}

components/atoms/Image/Image.module.css

@@ -6,6 +6,6 @@
   }
 
   & .caption {
-    @apply text-center font-secondary text-xs pt-12;
+    @apply text-center pt-12;
   }
 }

components/atoms/PullQuote/PullQuote.module.css

@@ -1,11 +1,11 @@
 .pullquote {
-  @apply mb-24 p-20 px-40 text-center;
+  @apply mb-6 p-5 px-10 text-center;
 
-  & p {
-    @apply font-secondary text-h5;
+  & blockquote {
+    @apply mb-8;
   }
 
-  & > figcaption {
-    @apply font-secondary text-xs pt-12;
+  & figcaption {
+    @apply font-bold;
   }
 }

components/atoms/Quote/Quote.module.css

@@ -1,11 +1,11 @@
 .quote {
-  @apply px-28 border-l mb-40;
+  @apply mb-6 p-5 px-10 border-l;
 
-  & p {
-    @apply font-secondary text-h5;
+  & blockquote {
+    @apply mb-8;
   }
 
-  & > figcaption {
-    @apply font-secondary text-xs pt-12;
+  & figcaption {
+    @apply font-bold;
   }
 }

components/atoms/RichText/RichText.module.css

@@ -10,11 +10,7 @@
   &.ol,
   & p,
   &.p {
-    @apply font-primary text-root-em mb-20;
-
-    & > a {
-      @apply text-primary;
-    }
+    @apply mb-20;
   }
 
   & ul,
@@ -36,7 +32,7 @@
   &.ul {
     & li {
       &::before {
-        @apply absolute block bg-tertiary-lighter rounded-full;
+        @apply absolute block rounded-full;
 
         content: '';
         width: 5px;
@@ -54,7 +50,7 @@
 
     & > li {
       &::before {
-        @apply absolute block text-tertiary-lighter left-0 italic;
+        @apply absolute block left-0 italic;
 
         content: counter(item) '. ';
         counter-increment: item;
@@ -66,26 +62,26 @@
   /* Heading Styles */
   & h1,
   &.h1 {
-    @apply font-secondary text-h1 mb-20;
+    @apply mb-20;
   }
 
   & h2,
   &.h2 {
-    @apply font-secondary text-h2 mb-20;
+    @apply mb-20;
   }
 
   & h3,
   &.h3 {
-    @apply font-secondary text-h3 mb-20;
+    @apply mb-20;
   }
 
   & h4,
   &.h4 {
-    @apply font-secondary text-h4 mb-12;
+    @apply mb-12;
   }
 
   & h5,
   &.h5 {
-    @apply font-secondary text-h5 mb-12;
+    @apply mb-12;
   }
 }

components/atoms/Separator/Separator.js

@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import Container from '../Container'
 import styles from './Separator.module.css'
 
 /**
@@ -17,9 +18,9 @@ export default function Separator({className, fullWidth}) {
       {fullWidth ? (
         <hr className={cn(styles.separator, className)} />
       ) : (
-        <div>
+        <Container>
           <hr className={cn(styles.separator, className)} />
-        </div>
+        </Container>
       )}
     </>
   )

components/atoms/Separator/Separator.module.css

@@ -1,5 +1,3 @@
 .separator {
-  @apply w-full bg-tertiary-lightest border-none my-40;
-
-  height: 1px;
+  @apply w-full border-b my-40;
 }