fix: dark/light theme for sidebar, modal, code (#345)

dequelabs · Sep 21, 2021 · d1e71e0 · d1e71e0
1 parent f18f47c
commit d1e71e0
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 69 deletions.
diff --git a/packages/styles/code.css b/packages/styles/code.css
@@ -2,12 +2,14 @@
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  background: #000;
-  color: #d1d9e1;
+  background: var(--gray-20);
+  color: var(--gray-90);
+  border: 1px solid var(--gray-40);
+  color: var(--accent-primary-active);
 }
 
 .Code .hljs-comment {
-  color: #969896;
+  color: #575957;
   font-style: italic;
 }
 
@@ -16,24 +18,12 @@
   font-style: italic;
 }
 
-.Code .hljs-keyword {
-  color: #cc99cc;
-}
-
-.Code .hljs-selector-tag {
-  color: #cc99cc;
-}
-
-.Code .hljs-literal {
-  color: #cc99cc;
-}
-
-.Code .hljs-type {
-  color: #cc99cc;
-}
-
+.Code .hljs-keyword,
+.Code .hljs-selector-tag,
+.Code .hljs-literal,
+.Code .hljs-type,
 .Code .hljs-addition {
-  color: #cc99cc;
+  color: #8a0c8a;
 }
 
 .Code .hljs-number {
@@ -49,7 +39,7 @@
 }
 
 .Code .hljs-string {
-  color: #8abeb7;
+  color: var(--gray-60);
 }
 
 .Code .hljs-doctag {
@@ -60,36 +50,20 @@
   color: #8abeb7;
 }
 
+.Code .hljs-built_in,
 .Code .hljs-title {
-  color: #b5bd68;
-}
-
-.Code .hljs-name {
-  color: #b5bd68;
-  font-weight: bold;
+  color: var(--accent-dark);
 }
 
+.Code .hljs-name,
 .Code .hljs-section {
-  color: #b5bd68;
+  color: var(--accent-primary-active);
   font-weight: bold;
 }
 
-.Code .hljs-built_in {
-  color: #b5bd68;
-}
-
-.Code .hljs-variable {
-  color: #ffcc66;
-}
-
-.Code .hljs-template-variable {
-  color: #ffcc66;
-}
-
-.Code .hljs-selector-id {
-  color: #ffcc66;
-}
-
+.Code .hljs-variable,
+.Code .hljs-template-variable,
+.Code .hljs-selector-id,
 .Code .hljs-class .hljs-title {
   color: #ffcc66;
 }
@@ -98,42 +72,62 @@
   font-weight: bold;
 }
 
-.Code .hljs-symbol {
+.Code .hljs-symbol,
+.Code .hljs-bullet,
+.Code .hljs-subst,
+.Code .hljs-meta,
+.Code .hljs-link {
   color: #f99157;
 }
 
-.Code .hljs-bullet {
-  color: #f99157;
+.Code .hljs-deletion {
+  color: #dc322f;
 }
 
-.Code .hljs-subst {
-  color: #f99157;
+.Code .hljs-formula {
+  background: #eee8d5;
 }
 
-.Code .hljs-meta {
-  color: #f99157;
+.Code .hljs-attr,
+.Code .hljs-attribute {
+  color: var(--accent-error);
 }
 
-.Code .hljs-link {
-  color: #f99157;
+.Code .hljs-emphasis {
+  font-style: italic;
 }
 
-.Code .hljs-deletion {
-  color: #dc322f;
+/* Dark Theme */
+.cauldron--theme-dark .Code.hljs {
+  background: var(--accent-dark);
+  color: var(--accent-light);
+  border: 1px solid transparent;
 }
 
-.Code .hljs-formula {
-  background: #eee8d5;
+.cauldron--theme-dark .Code .hljs-string {
+  color: #8abeb7;
 }
 
-.Code .hljs-attr {
-  color: #81a2be;
+.cauldron--theme-dark .Code .hljs-keyword,
+.cauldron--theme-dark .Code .hljs-selector-tag,
+.cauldron--theme-dark .Code .hljs-literal,
+.cauldron--theme-dark .Code .hljs-type,
+.cauldron--theme-dark .Code .hljs-addition {
+  color: #cc99cc;
 }
 
-.Code .hljs-attribute {
-  color: #81a2be;
+.cauldron--theme-dark .Code .hljs-comment {
+  color: #969896;
 }
 
-.Code .hljs-emphasis {
-  font-style: italic;
+.cauldron--theme-dark .Code .hljs-built_in,
+.cauldron--theme-dark .Code .hljs-title,
+.cauldron--theme-dark .Code .hljs-name,
+.cauldron--theme-dark .Code .hljs-section {
+  color: #b5bd68;
+}
+
+.cauldron--theme-dark .Code .hljs-attr,
+.cauldron--theme-dark .Code .hljs-attribute {
+  color: #81a2be;
 }
diff --git a/packages/styles/dialog.css b/packages/styles/dialog.css
@@ -144,15 +144,15 @@
 .cauldron--theme-dark .Dialog__inner {
   background-color: var(--accent-medium);
   color: var(--white);
-  border: 1px solid var(--gray-70);
+  border: 4px solid var(--gray-20);
 }
 
 .cauldron--theme-dark .Dialog__header {
-  border-bottom: 1px solid var(--gray-70);
+  border-bottom: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__footer {
-  border-top: 1px solid var(--gray-70);
+  border-top: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__header,

diff --git a/packages/styles/icon-button.css b/packages/styles/icon-button.css
@@ -183,6 +183,7 @@
 
 .cauldron--theme-dark .IconButton--error {
   background-color: var(--accent-danger);
+  color: var(--accent-dark);
 }
 
 .cauldron--theme-dark .IconButton--primary:active {

diff --git a/packages/styles/side-bar.css b/packages/styles/side-bar.css
@@ -38,14 +38,15 @@
   border-left: var(--border-width) solid transparent;
 }
 
-.SideBar li:not([aria-controls]):hover,
+.SideBar li:not([aria-controls]):not(.MenuItem--active):hover,
 .SideBar li:not([aria-controls]):focus-within {
   outline: 0;
-  border-left: var(--border-width) solid var(--top-bar-text-color);
+  background-color: var(--gray-20);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-primary);
+  background-color: var(--white);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active a {
@@ -105,9 +106,17 @@
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-info);
+  background-color: var(--accent-medium);
 }
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active a {
   color: var(--white);
   font-weight: var(--font-weight-medium);
 }
+
+.cauldron--theme-dark
+  .SideBar
+  li:not([aria-controls]):not(.MenuItem--active):hover,
+.cauldron--theme-dark .SideBar li:not([aria-controls]):focus-within {
+  background-color: var(--accent-dark);
+}
diff --git a/packages/styles/top-bar.css b/packages/styles/top-bar.css
@@ -162,7 +162,6 @@
   color: var(--top-bar-text-color);
 }
 
-.cauldron--theme-dark li.MenuItem--active,
 .cauldron--theme-dark .TopBar [aria-current='page'] {
   background-color: var(--top-bar-background-color-active);
 }