fix: improve tooltip dark mode

felixmosh · Oct 17, 2024 · 2131355 · 2131355
1 parent 04a0cf1
commit 2131355
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 40 deletions.
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
@@ -7,14 +7,15 @@
   outline: none;
   white-space: nowrap;
   padding: 0.65em 0.92857143em;
-  color: var(--button-text-color);
+  color: inherit;
   font-family: inherit;
   vertical-align: baseline;
   min-height: 1em;
   display: inline-block;
   text-transform: none;
   text-shadow: none;
   font-weight: 400;
+  transition: background-color 150ms ease-in-out;
 }
 
 .button + .button {
@@ -72,12 +73,10 @@
   color: var(--button-primary-color);
 }
 
-.button.primary:hover {
+.button.primary:hover,
+.button.primary:focus {
   background-color: var(--button-primary-hover-bg);
 }
 .button.primary:active {
   background-color: var(--button-primary-active-bg);
 }
-.button.primary:focus {
-  background-color: var(--button-primary-focus-bg);
-}
diff --git a/packages/ui/src/components/DropdownContent/DropdownContent.module.css b/packages/ui/src/components/DropdownContent/DropdownContent.module.css
@@ -1,7 +1,7 @@
 .content {
-  background: #fff;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  border: 1px solid rgba(34, 36, 38, 0.15);
+  background: var(--dropdown-bg);
+  box-shadow: var(--dropdown-shadow);
+  border: 1px solid var(--dropdown-border-color);
   border-radius: 0.28571429rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -14,7 +14,7 @@
 
 .content > [role='menuitem'] {
   display: block;
-  color: rgba(0, 0, 0, 0.87);
+  color: inherit;
   padding: 0.5rem 1rem;
   font-weight: 400;
   white-space: nowrap;
@@ -28,10 +28,10 @@
   width: 1.18em;
   height: 1em;
   vertical-align: middle;
-  fill: var(--accent-color-d1);
+  fill: var(--button-icon-fill);
 }
 
 .content > [role='menuitem']:hover {
-  color: rgba(0, 0, 0, 0.95);
-  background: var(--separator-color);
+  color: inherit;
+  background: var(--button-default-hover-bg);
 }
diff --git a/packages/ui/src/components/Icons/Redis.tsx b/packages/ui/src/components/Icons/Redis.tsx
@@ -1,17 +1,28 @@
 import React from 'react';
 
 export const RedisIcon = () => (
-  <svg width={42} role="img" viewBox="0 0 24 24">
+  <svg xmlns="svg" width={42} role="img" viewBox="0 0 24 24">
+    <style>
+      {`
+      .rds-b1 {fill: #ae7d83}
+      .rds-b2 {fill: #c29ea2}
+      .rds-b3 {fill: #e2d0d2}
+
+      .dark-mode .rds-b1 {fill: #a26169}
+      .dark-mode .rds-b2 {fill: #7b4a50}
+      .dark-mode .rds-b3 {fill: #514042}
+    `}
+    </style>
     <path
-      fill="#ae7d83"
+      className="rds-b1"
       d="M23.99314 6.28305c.012-.244-.307-.458-.949-.694-1.248-.457-7.843-3.082-9.106-3.545-1.263-.462-1.777-.443-3.261.089-1.484.533-8.506 3.287-9.755 3.776-.625.246-.931.473-.92.715v2.426c0 .242.334.498.97.802 1.272.608 8.332 3.461 9.448 3.994 1.116.533 1.9.54 3.313-.196 1.412-.736 8.047-3.465 9.328-4.132.651-.34.939-.604.939-.843 0-.225.001-2.392.001-2.392h-.008zm-15.399 2.296l5.561-.854-1.68 2.463-3.881-1.609zm12.299-2.218l-3.288 1.299-.357.14-3.287-1.299 3.642-1.44 3.29 1.3zm-9.655-2.383l-.538-.992 1.678.656 1.582-.518-.428 1.025 1.612.604-2.079.216-.466 1.12-.752-1.249-2.401-.216 1.792-.646zm-4.143 1.399c1.642 0 2.972.516 2.972 1.152 0 .636-1.331 1.152-2.972 1.152s-2.973-.517-2.973-1.152c0-.636 1.331-1.152 2.973-1.152z"
     />
     <path
-      fill="#c29ea2"
+      className="rds-b2"
       d="M23.99314 10.38505c-.011.229-.313.484-.934.809-1.281.667-7.916 3.396-9.328 4.132-1.413.736-2.197.729-3.313.196-1.116-.533-8.176-3.386-9.448-3.994-.635-.303-.959-.56-.97-.801v2.426c0 .242.334.498.97.802 1.272.608 8.332 3.46 9.448 3.993 1.116.534 1.9.541 3.313-.195 1.412-.736 8.047-3.465 9.328-4.132.651-.34.939-.604.939-.843 0-.226.001-2.392.001-2.392-.001-.001-.004 0-.006-.001z"
     />
     <path
-      fill="#e2d0d2"
+      className="rds-b3"
       d="M23.99414 14.34005c-.01.229-.313.485-.935.81-1.281.667-7.916 3.396-9.328 4.132-1.413.736-2.197.729-3.313.195-1.116-.533-8.176-3.386-9.448-3.993-.635-.304-.959-.56-.97-.802v2.426c0 .242.334.499.97.803 1.272.608 8.333 3.46 9.448 3.993 1.116.534 1.9.541 3.313-.196 1.412-.736 8.047-3.464 9.328-4.132.651-.339.939-.603.939-.842 0-.226.001-2.392.001-2.392-.001-.001-.004-.001-.005-.002z"
     />
   </svg>

diff --git a/packages/ui/src/components/JsonEditor/JsonEditor.tsx b/packages/ui/src/components/JsonEditor/JsonEditor.tsx
@@ -29,14 +29,14 @@ import { jsonSchema, updateSchema } from 'codemirror-json-schema';
 import React, { HTMLProps, useEffect, useRef, useState } from 'react';
 
 const customStyle = HighlightStyle.define([
-  { tag: tags.atom, color: '#990073' },
-  { tag: tags.keyword, color: '#990073' },
-  { tag: tags.bool, color: '#990073' },
-  { tag: tags.string, color: '#d14' },
-  { tag: tags.number, color: 'teal' },
+  { tag: tags.atom, color: 'var(--hl-keyword)' },
+  { tag: tags.keyword, color: 'var(--hl-keyword)' },
+  { tag: tags.bool, color: 'var(--hl-keyword)' },
+  { tag: tags.string, color: 'var(--hl-string)' },
+  { tag: tags.number, color: 'var(--hl-number)' },
   { tag: tags.brace, color: 'var(--accent-color-d1)' },
   { tag: tags.punctuation, color: 'var(--accent-color-d1)' },
-  { tag: tags.propertyName, color: '#458' },
+  { tag: tags.propertyName, color: 'var(--hl-type)' },
 ]);
 
 const theme = EditorView.theme({
@@ -55,7 +55,16 @@ const theme = EditorView.theme({
     borderColor: 'var(--input-focus-border)',
     boxShadow: 'var(--input-focus-shadow)',
   },
-  '.cm-gutters': { borderRadius: '0.375rem 0 0 0.375rem' },
+  '.cm-gutters': {
+    borderRadius: '0.375rem 0 0 0.375rem',
+    backgroundColor: 'var(--json-edit-gutter-bg)',
+    color: 'inherit',
+    borderRight: 'var(--json-edit-gutter-border-color)',
+  },
+  '.cm-cursor': {
+    borderLeftColor: 'var(--json-edit-cursor-color)',
+  },
+  '.cm-activeLineGutter': { backgroundColor: 'var(--json-edit-gutter-active-bg)' },
   '.cm-scroller': { overflow: 'auto' },
   '.cm-tooltip': { padding: '0.25rem 0.5rem', borderRadius: '0.275rem' },
 });

diff --git a/packages/ui/src/components/Pagination/Pagination.module.css b/packages/ui/src/components/Pagination/Pagination.module.css
@@ -21,16 +21,17 @@
   text-decoration: none;
   display: flex;
   line-height: 1;
+  transition: background-color 150ms ease-in-out;
 }
 
 .pagination a:hover,
 .pagination a:focus {
-  background-color: #e2e8f0;
+  background-color: var(--button-default-hover-bg);
 }
 
 .pagination a:active,
 .pagination li.isActive a {
-  background-color: var(--text-secondary-color);
+  background-color: var(--button-default-active-bg);
 }
 
 .pagination a svg {

diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css
@@ -5,8 +5,8 @@
 .tooltip:before {
   content: attr(data-title);
   padding: 0.2em 0.75em;
-  background-color: rgba(45, 55, 72, 0.95);
-  color: #fff;
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-text-color);
   border-radius: 0.28571429rem;
   font-size: 0.833rem;
   font-weight: 300;

diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
@@ -41,11 +41,9 @@
   --button-default-hover-bg: var(--separator-color);
   --button-icon-fill: var(--accent-color-d1);
   --button-primary-active-bg: #3d454f;
+  --button-primary-hover-bg: #67727e;
   --button-primary-bg: #4b5563;
   --button-primary-color: #fff;
-  --button-primary-focus-bg: #373f47;
-  --button-primary-hover-bg: #424c58;
-  --button-text-color: inherit;
 
   --details-error-color: #d73a49;
   --details-scrollbar-thumb-bg: var(--text-secondary-color);
@@ -69,6 +67,25 @@
   --status-menu-border-color: #e0e7eb;
   --status-menu-text: rgba(0, 0, 0, 0.87);
   --sticky-header-bg: rgba(245, 248, 250, 0.85);
+  --tooltip-bg: rgba(45, 55, 72, 0.95);
+  --tooltip-text-color: #fff;
+
+  --dropdown-bg: var(--card-bg);
+  --dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --dropdown-border-color: rgba(34, 36, 38, 0.15);
+
+  --json-edit-gutter-bg: #f5f5f5;
+  --json-edit-gutter-border-color: #ddd;
+  --json-edit-gutter-active-bg: hsl(0, 0%, 87%);
+  --json-edit-cursor-color: rgba(45, 55, 72, 0.95);
+
+  --hl-string: #d14;
+  --hl-number: teal;
+  --hl-type: #458;
+  --hl-keyword: #990073;
+  --hl-built_in: #0086b3;
+  --hl-attribute: navy;
+  --hl-meta: #999;
 }
 
 .dark-mode {
@@ -108,15 +125,15 @@
   --button-basic-focus-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
     0 0 0 0 rgba(255, 255, 255, 0.2) inset;
   --button-basic-focus-color: rgba(255, 255, 255, 0.9);
+
   --button-default-active-bg: var(--text-secondary-color);
   --button-default-hover-bg: #3a4556;
   --button-icon-fill: var(--card-text-secondary-color);
   --button-primary-active-bg: #4b5563;
   --button-primary-bg: #505a65;
   --button-primary-color: #cfcfcf;
-  --button-primary-focus-bg: #4e5865;
   --button-primary-hover-bg: #3b4758;
-  --button-text-color: #e0e0e0;
+
   --details-error-color: #f56565;
   --details-scrollbar-thumb-bg: var(--text-secondary-color);
   --details-scrollbar-track-bg: rgba(255, 255, 255, 0.1);
@@ -140,6 +157,26 @@
   --status-menu-active-text: var(--text-color);
   --status-menu-active-border: var(--accent-color);
   --sticky-header-bg: rgba(24, 29, 36, 0.9);
+
+  --tooltip-bg: hsla(218, 15%, 35%, 0.95);
+  --tooltip-text-color: var(--text-color);
+
+  --dropdown-bg: var(--card-bg);
+  --dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --dropdown-border-color: #303746;
+
+  --json-edit-gutter-bg: #47546b;
+  --json-edit-gutter-border-color: transparent;
+  --json-edit-gutter-active-bg: var(--input-bg);
+  --json-edit-cursor-color: var(--accent-color-d1);
+
+  --hl-string: #ff6088;
+  --hl-number: #00aaaa;
+  --hl-type: #9fb0da;
+  --hl-keyword: #f294da;
+  --hl-built_in: #0086b3;
+  --hl-attribute: navy;
+  --hl-meta: #999;
 }
 
 body {

diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
@@ -21,12 +21,12 @@
 .hljs-tag .hljs-attr,
 .hljs-template-variable,
 .hljs-variable {
-  color: teal;
+  color: var(--hl-number);
 }
 
 .hljs-doctag,
 .hljs-string {
-  color: #d14;
+  color: var(--hl-string);
 }
 
 .hljs-section,
@@ -39,15 +39,14 @@
 .hljs-class .hljs-title,
 .hljs-type,
 .hljs-attr {
-  color: #458;
+  color: var(--hl-type);
   font-weight: 500;
 }
 
-.hljs-keyword,
 .hljs-attribute,
 .hljs-name,
 .hljs-tag {
-  color: navy;
+  color: var(--hl-attribute);
   font-weight: 400;
 }
 
@@ -59,16 +58,16 @@
 .hljs-keyword,
 .hljs-bullet,
 .hljs-symbol {
-  color: #990073;
+  color: var(--hl-keyword);
 }
 
 .hljs-built_in,
 .hljs-builtin-name {
-  color: #0086b3;
+  color: var(--hl-built_in);
 }
 
 .hljs-meta {
-  color: #999;
+  color: var(--hl-meta);
   font-weight: 500;
 }