selector fit to dark mode

mongodb-forks · Jul 25, 2024 · de63d64 · de63d64
1 parent c3c20b8
commit de63d64
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/cli/index.ts b/cli/index.ts
@@ -415,6 +415,7 @@ async function getPageHTML(
               --colors-success-main-dark: #0a2e0e;
 
               --absolute-border-color: none;
+              --section-divider-color: rgba(0, 0, 0, 0.2);
 
               --sidebar-hover: #E8EDEB;
               --sidebar-active-bg: #E3FCF7;
@@ -469,6 +470,24 @@ async function getPageHTML(
 
               --typography-code-color: #1C2D38;
               --typography-code-bg: #F9FBFA;
+
+              --select-btn-color: #001e2b;
+              --select-btn-bg: white;
+              --select-btn-border: #889397;
+              --select-btn-hover-shadow-color: #E8EDEB;
+              --select-btn-focus-shadow-color: #0498EC;
+
+              --select-ul-border: #E8EDEB;
+              --select-ul-shadow-color: rgba(0,30,43,0.25);
+              --select-ul-bg: white;
+
+              --select-disabled-color: #889397;
+              --select-enabled-hover-bg: #E8EDEB;
+
+              --select-li-color: #1C2D38;
+              --select-li-focus-color: #083C90;
+              --select-li-focus-bg: #E1F7FF;
+              --select-li-before-focus-bg: #016BF8;
             }
 
             .dark-theme {
@@ -493,6 +512,7 @@ async function getPageHTML(
               --colors-success-main-dark: #023430;
 
               --absolute-border-color: #3D4F58;
+              --section-divider-color: rgba(232, 237, 235, 0.2);
 
               --sidebar-hover: #1C2D38;
               --sidebar-active-bg: #023430;
@@ -547,6 +567,24 @@ async function getPageHTML(
 
               --typography-code-color: #f9fbfa;
               --typography-code-bg: #5c6c75;
+
+              --select-btn-color: #e8edeb;
+              --select-btn-bg: #112733;
+              --select-btn-border: #889397;
+              --select-btn-hover-shadow-color: #3d4f58;
+              --select-btn-focus-shadow-color: #0497ec;
+
+              --select-ul-border: #3d4f58;
+              --select-ul-shadow-color: rgba(0, 0, 0, 0.15);
+              --select-ul-bg: #112733;
+
+              --select-disabled-color: #5c6c75;
+              --select-enabled-hover-bg: #3d4f58;
+
+              --select-li-color: #e8edeb;
+              --select-li-focus-color: rgb(225, 247, 255);
+              --select-li-focus-bg: rgb(12, 38, 87);
+              --select-li-before-focus-bg: rgb(1, 107, 248);
             }
           </style>
           `
@@ -557,6 +595,8 @@ async function getPageHTML(
   });
 }
 
+// TODO: Not sure if sleect enabled hover bg is right on dark mode...
+
 // credits: https://stackoverflow.com/a/9238214/1749888
 function respondWithGzip(
   contents: string | ReadStream,

diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
@@ -44,7 +44,7 @@ export const Section = styled.div.attrs(props => ({
       width: 100%;
       display: block;
       content: '';
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      border-bottom: 1px solid var(--section-divider-color);
     }
   `) ||
     ''}

diff --git a/src/components/VersionSelector/styled.elements.ts b/src/components/VersionSelector/styled.elements.ts
@@ -1,5 +1,3 @@
-import { palette } from '@leafygreen-ui/palette';
-import { transparentize } from 'polished';
 import styled, { css } from '../../styled-components';
 import { ArrowSvg } from './ArrowSvg';
 import { ArrowIconProps } from './types';
@@ -56,22 +54,20 @@ export const StyledButton = styled.button.attrs({
   height: 36px;
   margin: 8px 0;
 
-  background-color: white;
-  color: ${palette.black};
+  background-color: var(--select-btn-bg);
+  color: var(--select-btn-color);
   border: 1px solid transparent;
   border-radius: 6px;
-  border-color: ${palette.gray.base};
+  border-color: var(--select-btn-border);
 
   &:hover,
   &:active {
-    color: ${palette.black};
-    background-color: ${palette.white};
-    box-shadow: 0 0 0 3px ${palette.gray.light2};
+    box-shadow: 0 0 0 3px var(--select-btn-hover-shadow-color);
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${palette.blue.light1};
-    border-color: rgba(255, 255, 255, 0);
+    box-shadow: 0 0 0 3px var(--select-btn-focus-shadow-color);
+    border-color: white;
   }
 `;
 
@@ -95,9 +91,10 @@ export const StyledMenuList = styled.ul`
   list-style: none;
   margin: 0;
   padding: 8px 0px;
+  box-shadow: 0 4px 7px 0 var(--select-ul-shadow-color);
+  border: 1px solid var(--select-ul-border);
   overflow: auto;
-  box-shadow: 0 4px 7px 0 ${transparentize(0.75, palette.black)};
-  border: ${palette.gray.light2};
+  max-height: 274px;
 `;
 
 export const StyledDisplay = styled.div`
@@ -114,12 +111,12 @@ export const StyledSelected = styled.div`
 
 export const disabledOptionStyle = css`
   cursor: not-allowed;
-  color: ${palette.gray.base};
+  color: var(--select-disabled-color);
 `;
 
 export const enabledOptionStyle = css`
   &:hover {
-    background-color: ${palette.gray.light2};
+    background-color: var(--select-enabled-hover-bg);
   }
 `;
 
@@ -140,11 +137,11 @@ export const StyledLi = styled.li.attrs<{
   position: relative;
   padding: 8px 12px;
   cursor: pointer;
-  color: ${palette.gray.dark3};
+  color: var(--select-li-color);
   ${props =>
     props.focused &&
-    `color: ${palette.blue.dark2};
-    background-color: ${palette.blue.light3};`}
+    `color: var(--select-li-focus-color);
+    background-color: var(--select-li-focus-bg);`}
   font-weight: ${props => (props.selected ? `bold` : `normal`)};
   &:before {
     content: '';
@@ -163,7 +160,7 @@ export const StyledLi = styled.li.attrs<{
       `
       opacity: 1;
       transform: scaleY(1);
-      background-color: ${palette.blue.base};
+      background-color: var(--select-li-before-focus-bg);
       `}
   }
   ${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)}
@@ -182,7 +179,7 @@ export const openDropdownStyle = css`
   width: 100%;
   pointer-events: initial;
   z-index: 2;
-  background-color: ${palette.white};
+  background-color: var(--select-ul-bg);
 `;
 
 export const StyledDropdown = styled.div.attrs<{ open: boolean }>({