fix issues with light mode

packages/ui/styles/themes/light.css

@@ -1,6 +1,6 @@
 :root {
-  --theme-variables-background: #fff;
-  --theme-variables-background-body: #fbfcfd;
+  --theme-variables-background: #fbfcfd;
+  --theme-variables-background-body: #f8f9fa;
   --theme-variables-background-body-alt: #fff;
   --theme-variables-text-body: #1a1d1e;
   --lighten-default: 0.1;
@@ -17,12 +17,12 @@
   --text-body-light: #858787;
   --text-body-lighter: #bfc0c0;
   --text-body-lightest: #dfe0e0;
-  --background-color-default: #fff;
-  --background-color-body: #fbfcfd;
+  --background-color-default: #fbfcfd;
+  --background-color-body: #f8f9fa;
   --background-color-body-alt: #fff;
-  --background-color-selection: #ebebeb;
-  --background-color-control: #fff;
-  --border-color-default: #ebebeb;
-  --border-color-body: #fbfcfd;
-  --border-color-control: #e2e2e2;
+  --background-color-selection: #e7e8e9;
+  --background-color-control: #fdfefe;
+  --border-color-default: #e7e8e9;
+  --border-color-body: #f8f9fa;
+  --border-color-control: #dedfe0;
 }

studio/components/layouts/AccountLayout/WithSidebar.tsx

@@ -49,13 +49,13 @@ const WithSidebar: FC<Props> = ({
           id="with-sidebar"
           style={{ height: maxHeight, maxHeight }}
           className={[
-            'h-full bg-scale-200',
-            'hide-scrollbar w-64 overflow-auto border-r dark:border-dark',
+            'h-full bg-body',
+            'hide-scrollbar w-64 overflow-auto border-r border-scale-500',
           ].join(' ')}
         >
           {title && (
             <div className="mb-2">
-              <div className="flex h-12 max-h-12 items-center border-b px-6 dark:border-dark">
+              <div className="flex h-12 max-h-12 items-center border-b px-6 border-scale-500">
                 <h4 className="mb-0 text-lg truncate" title={title}>
                   {title}
                 </h4>
@@ -75,7 +75,7 @@ const WithSidebar: FC<Props> = ({
                     subitemsParentKey={subitemsParentKey}
                   />
                 ) : (
-                  <div className="border-b py-5 px-6 dark:border-dark" key={section.key}>
+                  <div className="border-b py-5 px-6 border-scale-400" key={section.key}>
                     <SidebarItem
                       links={section.links}
                       subitems={subitems}
@@ -108,7 +108,7 @@ const SectionWithHeaders: FC<SectionWithHeadersProps> = ({
   subitems,
   subitemsParentKey,
 }) => (
-  <div key={section.heading} className="border-b py-5 px-6 dark:border-dark">
+  <div key={section.heading} className="border-b py-5 px-6 border-scale-500">
     {section.heading && <Menu.Group title={section.heading} />}
     {section.versionLabel && (
       <div className="mb-1 px-3">

studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -50,7 +50,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
   return (
     <div
       className={`flex h-12 max-h-12 items-center justify-between py-2 px-5 ${
-        headerBorder ? 'border-b dark:border-dark' : ''
+        headerBorder ? 'border-b border-scale-500' : ''
       }`}
     >
       <div className="-ml-2 flex items-center text-sm">

studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

@@ -37,7 +37,7 @@ const NavigationBar: FC<Props> = ({}) => {
       style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
       className={[
         'flex w-14 flex-col justify-between overflow-y-hidden p-2',
-        'border-r bg-scale-200 dark:border-dark dark:bg-sidebar-dark',
+        'border-r bg-body border-scale-500',
       ].join(' ')}
     >
       <ul className="flex flex-col space-y-2">

studio/styles/main.scss

@@ -21,13 +21,13 @@ html,
 body,
 #__next,
 .main {
+  @apply bg-body;
+  @apply text-scale-1200;
   height: 100%;
   padding: 0;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  @apply bg-body;
-  @apply text-scale-1200;
 }
 
 * {