From b5e700314e0f4e2cae2c8b95646c3b5b5a901fde Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Mon, 11 Jul 2022 09:27:08 +1000
Subject: [PATCH] fix: website lightmode colors

---
 apps/website/sidebars.js               | 62 +-------------------------
 apps/website/src/css/global.scss       |  2 +-
 apps/website/src/css/sidebar-menu.scss |  6 +--
 3 files changed, 5 insertions(+), 65 deletions(-)

diff --git a/apps/website/sidebars.js b/apps/website/sidebars.js
index db23d26..44a4cbc 100644
--- a/apps/website/sidebars.js
+++ b/apps/website/sidebars.js
@@ -21,7 +21,7 @@ const sidebars = {
     },
     {
       type: "category",
-      label: "overview",
+      label: "Overview",
       collapsed: false,
       items: [
         "overview/overview",
@@ -40,10 +40,6 @@ const sidebars = {
         "quick-starts/create-react-native-app",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Setup",
@@ -59,20 +55,12 @@ const sidebars = {
         "guides/postcss-native",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Guides",
       collapsed: false,
       items: ["guides/theme-values", "guides/tailwindcss-react-native"],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "API",
@@ -85,10 +73,6 @@ const sidebars = {
         "api/use-tailwind",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Core concepts",
@@ -103,10 +87,6 @@ const sidebars = {
         "core-concepts/units",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Customization",
@@ -119,10 +99,6 @@ const sidebars = {
         "customization/babel",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Layout",
@@ -137,10 +113,6 @@ const sidebars = {
         "tailwind/layout/z-index",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Flexbox",
@@ -190,10 +162,6 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Spacing",
@@ -212,10 +180,6 @@ const sidebars = {
         "tailwind/spacing/space-between",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Sizing",
@@ -253,10 +217,6 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Typography",
@@ -304,20 +264,12 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Background",
       collapsed: false,
       items: ["tailwind/backgrounds/background-color"],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Borders",
@@ -340,10 +292,6 @@ const sidebars = {
         "tailwind/borders/divide-style",
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Effects",
@@ -361,10 +309,6 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "Transforms",
@@ -392,10 +336,6 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "html",
-      value: "<br />",
-    },
     {
       type: "category",
       label: "SVG",
diff --git a/apps/website/src/css/global.scss b/apps/website/src/css/global.scss
index b462ec8..d1b508a 100644
--- a/apps/website/src/css/global.scss
+++ b/apps/website/src/css/global.scss
@@ -192,7 +192,7 @@ html[data-theme="light"] {
   --ifm-toc-border-color: #e6e6e6;
   --ifm-link-color: #0055ff;
   --ifm-color-primary: #0055ff;
-  --ifm-menu-color-background-active: rgba(227, 0, 189, 0.08);
+  --ifm-menu-color-background-active: rgba(9, 75, 255, 0.08);
 
   main {
     .container {
diff --git a/apps/website/src/css/sidebar-menu.scss b/apps/website/src/css/sidebar-menu.scss
index 6ce4460..e1607a4 100644
--- a/apps/website/src/css/sidebar-menu.scss
+++ b/apps/website/src/css/sidebar-menu.scss
@@ -139,12 +139,12 @@ html[data-theme="light"] {
   .menu {
     .menu__link:hover,
     .menu__caret:hover {
-      color: $color-secondary-purple;
+      color: $color-secondary-blue;
     }
 
     .menu__list-item-collapsible:hover {
       .menu__link {
-        color: $color-secondary-purple;
+        color: $color-secondary-blue;
       }
     }
 
@@ -156,7 +156,7 @@ html[data-theme="light"] {
       }
 
       &--active:not(.menu__link--sublist) {
-        color: $color-secondary-purple;
+        color: $color-secondary-blue;
       }
     }