Last playground, sidebar, components adjustments

Author: bettistein

src/Blog.js

@@ -28,7 +28,7 @@ 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
@@ -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
@@ -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>
   }
@@ -121,7 +121,7 @@ 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
@@ -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>

src/BlogArticle.js

@@ -2,7 +2,7 @@ module Card = {
   @react.component
   let make = (~title: string, ~hrefs: array<(string, string)>) => {
     let style = ReactDOM.Style.make(~maxWidth="21rem", ())
-    <div style className="border border-snow-dark bg-snow-light px-5 py-8 rounded-lg">
+    <div style className="border border-gray-10 bg-gray-5 px-5 py-8 rounded-lg">
       <h2 className="font-bold text-21 mb-4"> {React.string(title)} </h2>
       <ul>
         {Belt.Array.map(hrefs, ((text, href)) =>

src/BlogArticle.res

@@ -189,7 +189,7 @@ module Card = {
           })
           <button
             ?onMouseDown
-            className="hover:pointer px-2 rounded-lg text-white bg-fire-80 text-14"
+            className="hover:pointer px-2 rounded-lg text-white bg-fire-70 text-14"
             key={keyword}>
             {React.string(keyword)}
           </button>
@@ -457,7 +457,7 @@ let default = (props: props) => {
       description="Official and unofficial resources, libraries and bindings for ReScript"
     />
     <div className="mt-16 pt-2">
-      <div className="text-night text-lg">
+      <div className="text-gray-80 text-lg">
         <Navigation overlayState />
         <div className="flex overflow-hidden">
           <div