fix brand colors (#6826)

colors.js

@@ -11,7 +11,7 @@ module.exports = {
   tertiary: '#5E687E', // gray-50
   'tertiary-dark': '#99A1B3', // gray-30
   link: '#087EA4', // blue-50
-  'link-dark': '#149ECA', // blue-40
+  'link-dark': '#58C4DC', // blue-40
   syntax: '#EBECF0', // gray-10
   wash: '#FFFFFF',
   'wash-dark': '#23272F', // gray-90
@@ -23,6 +23,8 @@ module.exports = {
   'border-dark': '#343A46', // gray-80
   'secondary-button': '#EBECF0', // gray-10
   'secondary-button-dark': '#404756', // gray-70
+  brand: '#087EA4', // blue-40
+  'brand-dark': '#58C4DC', // blue-40
 
   // Gray
   'gray-95': '#16181D',

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/safari-pinned-tab.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="397.000000pt" height="397.000000pt" viewBox="0 0 397.000000 397.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,397.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1151 3759 c-30 -5 -88 -25 -129 -45 -185 -89 -296 -291 -321 -581
+-10 -112 -3 -294 14 -386 6 -28 4 -37 -6 -37 -26 0 -264 -121 -349 -178 -266
+-177 -394 -414 -346 -640 49 -233 242 -423 600 -592 101 -48 107 -53 102 -76
+-17 -65 -25 -276 -15 -387 30 -351 184 -567 444 -622 89 -19 122 -19 231 0
+158 28 355 120 525 246 43 33 81 59 84 59 3 0 41 -26 84 -59 170 -126 367
+-218 525 -246 109 -19 142 -19 231 0 262 55 413 269 445 628 9 102 0 319 -16
+381 -5 23 1 28 102 76 359 169 551 359 600 592 48 228 -80 460 -355 643 -93
+62 -312 175 -340 175 -10 0 -12 9 -7 34 15 81 23 275 15 379 -28 373 -196 597
+-479 638 -73 10 -99 10 -184 -5 -170 -28 -372 -122 -549 -255 -37 -28 -70 -51
+-72 -51 -2 0 -35 23 -72 51 -169 127 -379 226 -537 254 -97 16 -143 17 -225 4z
+m238 -195 c91 -22 253 -100 361 -174 l90 -62 -77 -82 c-96 -99 -203 -222 -263
+-298 -30 -39 -52 -58 -66 -58 -43 0 -262 -42 -398 -76 -76 -19 -141 -33 -143
+-30 -2 2 -7 75 -10 162 -6 182 9 298 54 411 36 90 126 184 199 206 65 21 172
+21 253 1z m1447 -1 c73 -24 162 -118 197 -206 45 -111 60 -229 54 -406 -3 -84
+-9 -157 -14 -162 -4 -4 -68 8 -141 26 -109 28 -276 60 -398 77 -13 2 -52 40
+-99 98 -42 52 -128 149 -190 216 l-114 121 47 35 c119 88 275 168 392 199 84
+23 202 24 266 2z m-737 -473 c60 -61 119 -123 129 -138 l20 -27 -263 0 -263 0
+18 25 c28 39 231 250 241 250 5 0 58 -50 118 -110z m284 -366 c33 -8 79 -69
+203 -271 90 -146 244 -441 244 -468 0 -22 -128 -274 -207 -407 -105 -178 -203
+-318 -232 -331 -37 -16 -776 -16 -813 0 -47 21 -237 322 -368 583 -38 77 -70
+147 -70 155 0 22 129 275 207 407 79 135 198 314 214 324 26 16 190 22 484 19
+171 -2 323 -7 338 -11z m-1083 -48 c0 -2 -30 -53 -67 -113 -38 -60 -95 -159
+-128 -221 -33 -61 -63 -112 -66 -112 -10 0 -116 358 -107 365 6 4 136 39 228
+61 91 21 140 28 140 20z m1599 -42 c74 -19 136 -36 139 -38 8 -9 -97 -366
+-108 -366 -3 0 -28 41 -54 90 -26 50 -83 149 -127 221 -43 72 -79 133 -79 136
+0 9 93 -8 229 -43z m-2120 -196 c21 -84 90 -291 136 -409 l18 -45 -41 -105
+c-46 -120 -104 -299 -122 -382 -15 -67 -10 -67 -135 -5 -190 95 -342 222 -406
+340 -32 58 -34 69 -34 153 0 78 4 97 27 140 68 131 201 244 402 345 66 33 122
+60 125 60 4 0 17 -42 30 -92z m2556 40 c191 -95 341 -221 405 -339 33 -60 35
+-70 35 -154 0 -84 -2 -94 -35 -154 -64 -118 -214 -244 -405 -339 -125 -62
+-120 -62 -135 5 -18 83 -76 262 -122 382 l-41 105 18 45 c46 118 115 325 136
+408 27 107 16 104 144 41z m-2241 -829 c26 -50 84 -149 127 -221 44 -72 79
+-132 79 -135 0 -9 -93 8 -229 43 -74 19 -136 36 -138 38 -9 9 95 366 106 366
+4 0 28 -41 55 -91z m1851 57 c14 -34 95 -311 95 -326 0 -14 -354 -99 -365 -88
+-3 2 31 64 75 138 44 73 101 173 127 221 26 49 48 89 50 89 2 0 10 -15 18 -34z
+m-1885 -556 c115 -29 333 -70 374 -70 14 0 36 -19 66 -57 60 -77 167 -200 263
+-299 l78 -82 -63 -44 c-130 -93 -299 -175 -406 -197 -75 -16 -169 -14 -232 5
+-77 23 -166 114 -203 207 -44 111 -60 229 -54 404 3 84 8 157 12 163 4 7 17 9
+29 6 11 -4 73 -20 136 -36z m2024 -37 c17 -201 -1 -375 -51 -501 -37 -92 -126
+-183 -203 -206 -67 -20 -166 -20 -250 0 -87 20 -245 97 -359 173 l-92 62 83
+87 c101 105 209 229 263 300 26 35 46 52 61 52 45 0 264 42 389 74 72 19 135
+34 141 35 7 1 14 -29 18 -76z m-867 -107 c-17 -21 -74 -83 -128 -139 l-98
+-100 -39 31 c-33 26 -183 185 -219 232 -10 13 19 15 252 15 l263 0 -31 -39z"/>
+<path d="M1912 2360 c-62 -13 -157 -67 -198 -113 -20 -22 -50 -69 -67 -106
+-27 -58 -31 -77 -31 -151 0 -74 4 -93 31 -151 43 -92 91 -142 180 -186 70 -34
+82 -37 162 -37 75 0 94 4 152 31 92 43 142 91 186 180 34 70 37 82 37 163 0
+81 -3 93 -37 163 -43 87 -94 137 -181 178 -68 32 -164 44 -234 29z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "React",
+    "short_name": "React",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#23272f",
+    "background_color": "#23272f",
+    "display": "standalone"
+}

src/components/ButtonLink.tsx

@@ -26,7 +26,8 @@ function ButtonLink({
     className,
     'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
     {
-      'bg-link text-white hover:bg-opacity-80': type === 'primary',
+      'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
+        type === 'primary',
       'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
         type === 'secondary',
       'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg',

src/components/Layout/HomeContent.js

@@ -129,7 +129,7 @@ export function HomeContent() {
           </div>
           <Logo
             className={cn(
-              'uwu-hidden mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
+              'uwu-hidden mt-4 mb-3 text-brand dark:text-brand-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
             )}
           />
           <h1 className="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
@@ -509,7 +509,7 @@ export function HomeContent() {
                 src="/images/uwu.png"
               />
             </div>
-            <Logo className="uwu-hidden text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
+            <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               Welcome to the <br className="hidden lg:inline" />
               React community
@@ -1640,7 +1640,7 @@ function Thumbnail({video}) {
           </div>
           <div className="mt-1">
             <span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
-              <Logo className="text-xs me-1 w-4 h-4 text-link-dark" />
+              <Logo className="text-xs me-1 w-4 h-4 text-brand text-brand-dark" />
               React Conf
             </span>
           </div>

src/components/Layout/TopNav/TopNav.tsx

@@ -282,7 +282,7 @@ export default function TopNav({
                     className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
                     <Logo
                       className={cn(
-                        'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                        'text-sm me-0 w-10 h-10 text-brand dark:text-brand-dark flex origin-center transition-all ease-in-out'
                       )}
                     />
                     <span className="sr-only 3xl:not-sr-only">React</span>

src/pages/_document.tsx

@@ -9,6 +9,27 @@ const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#404756" />
+      <meta name="msapplication-TileColor" content="#2b5797" />
+      <meta name="theme-color" content="#23272f" />
       <script
         async
         src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}

src/styles/index.css

@@ -450,7 +450,7 @@
   }
 
   html.dark a > code {
-    color: #149eca !important; /* blue-40 */
+    color: #58c4dc !important; /* blue-40 */
   }
 
   .text-code {

src/styles/sandpack.css

@@ -58,7 +58,7 @@ html .sandpack {
 
 /* Dark theme */
 html.dark .sp-wrapper {
-  --sp-colors-accent: #149eca;
+  --sp-colors-accent: #58c4dc;
   --sp-colors-clickable: #999;
   --sp-colors-disabled: #fff;
   --sp-colors-error: #811e18;
@@ -593,7 +593,7 @@ html.dark .sp-devtools > div {
   -webkit-text-size-adjust: none;
 }
 
-/** 
+/**
  * For iOS: prevent browser zoom when clicking on sandbox.
  * Does NOT apply to code blocks.
  */