From 1cd340d7c8e30cce0abebebc96140466c5456f89 Mon Sep 17 00:00:00 2001
From: Dan Lebo <dan.lebo@me.com>
Date: Sun, 5 Feb 2023 12:21:25 -0800
Subject: [PATCH] add tertiary variable

---
 beta/colors.js                                          | 4 +++-
 beta/src/components/DocsFooter.tsx                      | 2 +-
 beta/src/components/Layout/HomeContent.js               | 8 ++++----
 beta/src/components/Layout/Sidebar/SidebarLink.tsx      | 4 ++--
 beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx | 2 +-
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/beta/colors.js b/beta/colors.js
index 9eeb9f3eb..63d923596 100644
--- a/beta/colors.js
+++ b/beta/colors.js
@@ -8,6 +8,8 @@ module.exports = {
   'primary-dark': '#F6F7F9', // gray-5
   secondary: '#404756', // gray-70
   'secondary-dark': '#EBECF0', // gray-10
+  tertiary: '#5E687E', // gray-50
+  'tertiary-dark': '#99A1B3', // gray-30
   link: '#087EA4', // blue-50
   'link-dark': '#149ECA', // blue-40
   syntax: '#EBECF0', // gray-10
@@ -28,7 +30,7 @@ module.exports = {
   'gray-80': '#343A46',
   'gray-70': '#404756',
   'gray-60': '#4E5769',
-  'gray-50': '#5E687E', // unused
+  'gray-50': '#5E687E',
   'gray-40': '#78839B',
   'gray-30': '#99A1B3',
   'gray-20': '#BCC1CD',
diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx
index 3932d0910..d2c2c25de 100644
--- a/beta/src/components/DocsFooter.tsx
+++ b/beta/src/components/DocsFooter.tsx
@@ -75,7 +75,7 @@ function FooterLink({
           }
         )}>
         <IconNavArrow
-          className="text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark"
+          className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
           displayDirection={type === 'Previous' ? 'left' : 'right'}
         />
         <span>
diff --git a/beta/src/components/Layout/HomeContent.js b/beta/src/components/Layout/HomeContent.js
index ae9b71fea..e7efaae2b 100644
--- a/beta/src/components/Layout/HomeContent.js
+++ b/beta/src/components/Layout/HomeContent.js
@@ -344,7 +344,7 @@ function Example1() {
         <div className="flex-col-reverse gap-0 lg:gap-5 lg:rounded-xl bg-gray-10 dark:bg-gray-70 shadow-inner lg:flex-row flex grow w-full mx-auto items-center">
           <div className="lg:-m-5 h-full shadow-xl lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
             <div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-border dark:border-border-dark">
-              <h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
+              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
                 Comment.js
               </h3>
             </div>
@@ -431,7 +431,7 @@ function Example2() {
         <div className="flex-col-reverse gap-0 lg:gap-5 bg-gray-05 dark:gray-95 shadow-inner lg:rounded-xl lg:flex-row flex grow w-full mx-auto items-center">
           <div className="lg:-m-5 h-full shadow-xl lg:rounded-xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
             <div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-xl border-b border-border dark:border-border-dark">
-              <h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
+              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
                 CommentList.js
               </h3>
             </div>
@@ -564,7 +564,7 @@ function Example3() {
         <div className="flex-col-reverse gap-0 lg:gap-5 lg:rounded-xl bg-gray-10 dark:bg-gray-70 shadow-inner lg:flex-row flex grow w-full mx-auto items-center">
           <div className="lg:-m-5 h-full shadow-xl lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
             <div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-border dark:border-border-dark">
-              <h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
+              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
                 PostPage.js
               </h3>
             </div>
@@ -671,7 +671,7 @@ function BrowserChrome({children, setPostPromise, setCommentsPromise}) {
   return (
     <div className="bg-wash dark:bg-gray-95 shadow-xl relative overflow-hidden w-full border border-border dark:border-opacity-10 rounded-2xl">
       <div className="w-full h-16 border-b border-border backdrop-filter rounded-t-2xl overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 py-4 px-4 gap-2 flex flex-row items-center">
-        <div className="bg-gray-10 text-sm text-gray-50 text-center rounded-full p-1 w-full flex-row flex space-between items-center">
+        <div className="bg-gray-10 text-sm text-tertiary text-center rounded-full p-1 w-full flex-row flex space-between items-center">
           <div className="h-6 w-6" />
           <div className="w-full leading-snug">
             <span className="text-gray-30">example.com</span>
diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
index de5ea8ea7..bec9a4172 100644
--- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -88,8 +88,8 @@ export function SidebarLink({
         {isExpanded != null && !heading && !hideArrow && (
           <span
             className={cn('pr-1', {
-              'text-link': isExpanded,
-              'text-gray-30': !isExpanded,
+              'text-link dark:text-link-dark': isExpanded,
+              'text-tertiary dark:text-tertiary-dark': !isExpanded,
             })}>
             <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
           </span>
diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 5a3b519c2..b8db801c6 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -153,7 +153,7 @@ export function SidebarRouteTree({
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-gray-400 dark:text-gray-500',
+                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}