main color refactor

Author: bettistein

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

@@ -34,7 +34,7 @@ module Badge = {
     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
@@ -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}>

src/Blog.res

@@ -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>
           }
@@ -128,7 +128,7 @@ module BlogHeader = {
             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 {

src/BlogArticle.js

@@ -247,7 +247,7 @@ module InfoSidebar = {
 
   @react.component
   let make = (~setFilter: (Filter.t => Filter.t) => unit, ~filter: Filter.t) => {
-    let h2 = "group mb-3 text-14 uppercase  leading-1 font-sans font-medium text-onyx"
+    let h2 = "group mb-3 text-14 uppercase  leading-1 font-sans font-medium text-gray-95"
     let link = "hover:underline"
 
     <aside className=" border-l-2 p-4 py-12 border-fire-30 space-y-16">

src/BlogArticle.res

@@ -122,7 +122,7 @@ let make = (props: props): React.element => {
       <MainLayout>
         <Meta ?title ?description />
         <div className="flex justify-center">
-          <div className="max-w-705 w-full"> content </div>
+          <div className="max-w-740 w-full"> content </div>
         </div>
       </MainLayout>
     }