Merge pull request #250 from bettistein/color-refactor

Color Refactor and some small layout adjustments

Author: ryyppy

package.json

@@ -12,6 +12,7 @@
     "@mdx-js/loader": "^1.5.5",
     "@next/mdx": "^8.1.0",
     "@octokit/graphql-schema": "^7.4.0",
+    "@rescript/react": "^0.10.1",
     "@ryyppy/rescript-promise": "^0.0.2",
     "@zeit/next-css": "^1.0.1",
     "bs-fetch": "^0.3.1",
@@ -29,7 +30,6 @@
     "prettier": "^1.18.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "@rescript/react": "^0.10.1",
     "remark-parse": "^7.0.1",
     "remark-slug": "^5.1.2",
     "remark-stringify": "^7.0.3",

pages/brand.mdx

@@ -16,7 +16,7 @@
   <div className="p-4">
 </div>
 
-<div className="bg-onyx p-4">
+<div className="bg-gray-95 p-4">
   <img className="h-24" src="/static/brand/rescript-logo-white.svg" />
 </div>
 

src/Blog.js

@@ -28,13 +28,13 @@ module Badge = {
   let make = (~badge: BlogFrontmatter.Badge.t) => {
     let bgColor = switch badge {
     | Preview | Roadmap | Release => "bg-turtle"
-    | Testing => "bg-code-1"
+    | Testing => "bg-orange"
     }
 
     let text = badge->BlogFrontmatter.Badge.toString
 
     <div
-      className={bgColor ++ " flex items-center h-6 font-medium tracking-tight text-onyx-80 text-14 px-2 rounded-sm"}>
+      className={bgColor ++ " flex items-center h-6 font-medium tracking-tight text-gray-80-tr text-14 px-2 rounded-sm"}>
       <div> <img className="h-3 block mr-1" src="/static/star.svg" /> </div>
       <div> {React.string(text)} </div>
     </div>
@@ -47,12 +47,12 @@ module CategorySelector = {
     | Category(BlogFrontmatter.Category.t)
 
   let renderTab = (~text: string, ~isActive: bool, ~onClick) => {
-    let active = "bg-snow-dark text-onyx rounded py-1"
+    let active = "bg-gray-10 text-gray-80 rounded py-1"
     <div
       key=text
       onClick
       className={(
-        isActive ? active : "hover:cursor-pointer hover:text-onyx"
+        isActive ? active : "hover:cursor-pointer hover:text-gray-80"
       ) ++ "  px-4 inline-block"}>
       {React.string(text)}
     </div>
@@ -66,7 +66,7 @@ module CategorySelector = {
   ) => {
     let tabs = [All, Archived]->Js.Array2.concat(Belt.Array.map(categories, cat => Category(cat)))
 
-    <div className="text-16 w-full flex items-center justify-between text-onyx-50">
+    <div className="text-16 w-full flex items-center justify-between text-gray-60">
       {Belt.Array.map(tabs, tab => {
         let onClick = evt => {
           evt->ReactEvent.Mouse.preventDefault
@@ -121,7 +121,7 @@ module BlogCard = {
         <Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
           <a> <h2 className=Text.H3.default> {React.string(title)} </h2> </a>
         </Link>
-        <div className="text-night-light text-sm">
+        <div className="text-gray-60 text-14">
           {switch category {
           | Some(category) => <> {React.string(category)} {React.string(j` · `)} </>
           | None => React.null
@@ -182,13 +182,13 @@ module FeatureCard = {
         <div className="max-w-400 ">
           <h2 className=Text.H2.default> {React.string(title)} </h2>
           <div className="mb-6">
-            <div className="flex items-center font-medium text-onyx-50 text-sm my-2">
+            <div className="flex items-center font-medium text-gray-40 text-sm mt-2 mb-5">
               <div className="inline-block w-4 h-4 mr-2"> authorImg </div>
               <div>
                 {switch author.twitter->Js.Null.toOption {
                 | Some(handle) =>
                   <a
-                    className="hover:text-onyx-80"
+                    className="hover:text-gray-80"
                     href={"https://twitter.com/" ++ handle}
                     rel="noopener noreferrer"
                     target="_blank">
@@ -207,7 +207,7 @@ module FeatureCard = {
                 {date->Util.Date.toDayMonthYear->React.string}
               </div>
             </div>
-            <p className="text-night-dark text-16"> {React.string(firstParagraph)} </p>
+            <p className="text-gray-90 antialiased tracking-tight text-16"> {React.string(firstParagraph)} </p>
           </div>
         </div>
         <Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
@@ -264,7 +264,7 @@ let default = (props: props): React.element => {
   let errorBox = if ProcessEnv.env === ProcessEnv.development && Belt.Array.length(malformed) > 0 {
     <div className="mb-12">
       <Markdown.Warn>
-        <h2 className="font-bold text-night-dark text-2xl mb-2">
+        <h2 className="font-bold text-gray-95 text-2xl mb-2">
           {React.string("Some Blog Posts are Malformed!")}
         </h2>
         <p>
@@ -381,7 +381,7 @@ let default = (props: props): React.element => {
       description="News, Announcements, Release Notes and more"
     />
     <div className="mt-16 pt-2">
-      <div className="text-night text-lg">
+      <div className="text-gray-80 text-lg">
         <Navigation overlayState />
         <div className="flex justify-center overflow-hidden">
           <main className="min-w-320 lg:align-center w-full lg:px-0 max-w-1280 pb-48">

src/Blog.res

@@ -41,7 +41,7 @@ module BlogComponent = {
 
 module Line = {
   @react.component
-  let make = () => <div className="block border-t border-snow-darker" />
+  let make = () => <div className="block border-t border-gray-20" />
 }
 
 module AuthorBox = {
@@ -56,19 +56,19 @@ module AuthorBox = {
 
     <div className="flex items-center">
       <div className="w-12 h-12 bg-berry-40 block rounded-full mr-3"> authorImg </div>
-      <div className="text-14 font-medium text-night-dark">
+      <div className="text-14 font-medium text-gray-95">
         {switch author.twitter->Js.Null.toOption {
         | Some(handle) =>
           <a
             href={"https://twitter.com/" ++ handle}
-            className="hover:text-night"
+            className="hover:text-gray-80"
             rel="noopener noreferrer"
             target="_blank">
             {React.string(displayName)}
           </a>
         | None => React.string(displayName)
         }}
-        <div className="text-night-light"> {React.string(author.role)} </div>
+        <div className="text-gray-60"> {React.string(author.role)} </div>
       </div>
     </div>
   }
@@ -90,8 +90,8 @@ module BlogHeader = {
     let authors = Belt.Array.concat([author], co_authors)
 
     <div className="flex flex-col items-center">
-      <div className="w-full max-w-705">
-        <div className="text-night-light text-lg mb-5">
+      <div className="w-full max-w-740">
+        <div className="text-gray-60 text-lg mb-5">
           {switch category {
           | Some(category) => <> {React.string(category)} {React.string(middleDotSpacer)} </>
           | None => React.null
@@ -103,7 +103,7 @@ module BlogHeader = {
           switch desc {
           | "" => <div className="mb-8" />
           | desc =>
-            <div className="my-8 text-onyx">
+            <div className="my-8 text-gray-95">
               <Markdown.Intro> {React.string(desc)} </Markdown.Intro>
             </div>
           }
@@ -121,14 +121,14 @@ module BlogHeader = {
       </div>
       {switch articleImg {
       | Some(articleImg) =>
-        <div className="-mx-8 sm:mx-0 sm:w-full bg-night-10 md:mt-24">
+        <div className="-mx-8 sm:mx-0 sm:w-full bg-gray-5-tr md:mt-24">
           <img
             className="h-full w-full object-cover"
             src=articleImg
             style={ReactDOMStyle.make(~maxHeight="33.625rem", ())}
           />
         </div>
-      | None => <div className="max-w-705 w-full"> <Line /> </div>
+      | None => <div className="max-w-740 w-full"> <Line /> </div>
       }}
     </div>
   }
@@ -200,7 +200,7 @@ let default = (props: props) => {
         />
       </div>
       <div className="flex justify-center">
-        <div className="max-w-705 w-full">
+        <div className="max-w-740 w-full">
           archivedNote
           children
           {switch canonical->Js.Null.toOption {
@@ -216,11 +216,11 @@ let default = (props: props) => {
           <div className="mt-12">
             <Line />
             <div className="pt-20 flex flex-col items-center">
-              <div className="text-3xl sm:text-4xl text-center text-night-dark font-medium">
+              <div className="text-3xl sm:text-4xl text-center text-gray-95 font-medium">
                 {React.string("Want to read more?")}
               </div>
               <Next.Link href="/blog">
-                <a className="text-fire hover:text-fire-80">
+                <a className="text-fire hover:text-fire-70">
                   {React.string("Back to Overview")}
                   <Icon.ArrowRight className="ml-2 inline-block" />
                 </a>
@@ -234,7 +234,7 @@ let default = (props: props) => {
   | Error(msg) =>
     <div>
       <Markdown.Warn>
-        <h2 className="font-bold text-night-dark text-2xl mb-2">
+        <h2 className="font-bold text-gray-95 text-28 mb-2">
           {React.string("Could not parse file '_blogposts/" ++ (fullslug ++ ".mdx'"))}
         </h2>
         <p>