merge-upstream: Continue fixing dark mode things

src/components/gui/gui.css

@@ -67,6 +67,8 @@
     /* Overrides for react-tabs styling */
     margin: 0 !important;
     border-bottom: 0 !important;
+
+    color: $text-primary;
 }
 
 .tab {

src/components/menu-bar/menu-bar.css

@@ -27,8 +27,8 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: $menu-bar-standard-font-size;
     font-weight: bold;
-    background-color: $looks-secondary;
-    color: $ui-white;
+    background-color: $menu-bar-background;
+    color: $menu-bar-foreground;
 }
 
 .main-menu {
@@ -55,7 +55,6 @@
     display: flex;
     padding: 0 0.25rem;
     text-decoration: none;
-    color: $ui-white;
     user-select: none;
     align-self: center;
     position: relative;
@@ -105,7 +104,8 @@
 }
 
 .feedback-button {
-    background-color: $ui-white;
+    background-color: white;
+    color: inherit;
     height: 34px;
 }
 

src/components/menu/menu.css

@@ -4,12 +4,11 @@
     position: absolute;
     border: 1px solid $ui-black-transparent;
     border-radius: 0 0 8px 8px;
-    background-color: $looks-secondary;
+    background-color: $menu-bar-background;
     padding: 0;
     margin: 0;
     min-width: 186px;
     overflow: visible;
-    color: $ui-white;
     box-shadow: 0 8px 8px 0 $ui-black-transparent;
 }
 

src/components/modal/modal.css

@@ -10,6 +10,7 @@
     bottom: 0;
     z-index: $z-index-modal;
     background-color: $ui-modal-overlay;
+    color: $ui-modal-foreground;
 }
 
 .modal-content * {
@@ -25,7 +26,6 @@
     user-select: none;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: $text-primary;
     overflow: hidden;
 }
 
@@ -67,7 +67,8 @@ $sides: 20rem;
 
     box-sizing: border-box;
     width: 100%;
-    background-color: $looks-secondary;
+    background-color: $ui-modal-header-background;
+    color: $ui-modal-header-foreground;
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 1rem;
@@ -79,7 +80,6 @@ $sides: 20rem;
     align-items: center;
     padding: 1rem;
     text-decoration: none;
-    color: $ui-white;
     user-select: none;
 }
 

src/components/prompt/prompt.css

@@ -58,6 +58,7 @@
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;
     background: white;
+    color: black;
     border: 1px solid $ui-black-transparent;
     font-weight: 600;
     font-size: 0.85rem;

src/components/sprite-info/sprite-info.css

@@ -4,7 +4,7 @@
 .sprite-info {
     padding: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background-color: white;
+    background-color: $ui-white;
     color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;

src/components/stage-selector/stage-selector.css

@@ -40,7 +40,7 @@ $header-height: calc($stage-menu-height - 2px);
     align-items: center;
     justify-content: center;
     height: $header-height;
-    background-color: white;
+    background-color: $ui-white;
     color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;

src/css/colors.css

@@ -3,6 +3,10 @@ $ui-secondary: var(--ui-secondary);
 $ui-tertiary: var(--ui-tertiary);
 
 $ui-modal-overlay: var(--ui-modal-overlay);
+$ui-modal-background: var(--ui-modal-background);
+$ui-modal-foreground: var(--ui-modal-foreground);
+$ui-modal-header-background: var(--ui-modal-header-background);
+$ui-modal-header-foreground: var(--ui-modal-header-foreground);
 
 $ui-white: var(--ui-white);
 $ui-white-dim: var(--ui-white-dim);
@@ -46,3 +50,6 @@ $extensions-transparent: var(--extensions-transparent);
 $extensions-light: var(--extensions-light);
 
 $drop-highlight: var(--drop-highlight);
+
+$menu-bar-background: var(--menu-bar-background);
+$menu-bar-foreground: var(--menu-bar-foreground);

src/lib/themes/default/index.js

@@ -106,6 +106,10 @@ const guiColors = {
     'ui-tertiary': 'hsla(215, 50%, 90%, 1)', /* #D9E3F2 */
 
     'ui-modal-overlay': 'hsla(215, 100%, 65%, 0.9)', /* 90% transparent version of motion-primary */
+    'ui-modal-background': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
+    'ui-modal-foreground': 'hsla(225, 15%, 40%, 1)', /* #575E75 */
+    'ui-modal-header-background': 'hsla(260, 60%, 60%, 1)', /* #855CD6 */
+    'ui-modal-header-foreground': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
 
     'ui-white': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
     'ui-white-dim': 'hsla(0, 100%, 100%, 0.75)', /* 25% transparent version of ui-white */
@@ -148,7 +152,10 @@ const guiColors = {
     'extensions-transparent': 'hsla(163, 85%, 40%, 0.35)', /* 35% transparent version of extensions-primary */
     'extensions-light': 'hsla(163, 57%, 85%, 1)', /* opaque version of extensions-transparent, on white bg */
 
-    'drop-highlight': 'hsla(215, 100%, 77%, 1)' /* lighter than motion-primary */
+    'drop-highlight': 'hsla(215, 100%, 77%, 1)', /* lighter than motion-primary */
+
+    'menu-bar-background': 'hsla(260, 60%, 60%, 1)', /* #855CD6 */
+    'menu-bar-foreground': 'hsla(0, 100%, 100%, 1)' /* #FFFFFF */
 };
 
 export {

src/lib/themes/guiHelpers.js

@@ -1,13 +1,20 @@
 import {themeMap} from '.';
 
 const applyGuiColors = theme => {
+    const doc = document.documentElement;
     const themeObject = themeMap[theme];
 
     for (const [name, value] of Object.entries(themeObject.guiColors)) {
-        document.documentElement.style.setProperty(`--${name}`, value);
+        doc.style.setProperty(`--${name}`, value);
     }
 
-    document.documentElement.style.colorScheme = themeObject.isDark ? 'dark' : 'light';
+    doc.style.setProperty('--paint-ui-pane-border', 'var(--ui-black-transparent)');
+    doc.style.setProperty('--paint-text-primary', 'var(--text-primary)');
+    doc.style.setProperty('--paint-form-border', 'var(--ui-black-transparent)');
+    doc.style.setProperty('--paint-looks-secondary', 'var(--looks-secondary)');
+    doc.style.setProperty('--paint-looks-transparent', 'var(--looks-transparent)');
+
+    doc.style.colorScheme = themeObject.isDark ? 'dark' : 'light';
 
     window.Recolor = {
         primary: themeObject.guiColors['looks-secondary']

src/lib/themes/tw/index.js

@@ -1,5 +1,6 @@
 const lightGuiColors = {
     'ui-modal-overlay': '#ff4c4ce6',
+    'ui-modal-header-background': '#ff4c4c',
 
     'motion-primary': '#ff4c4c',
     'motion-tertiary': '#cc3333',
@@ -7,7 +8,9 @@ const lightGuiColors = {
     'looks-secondary': '#ff4c4c',
     'looks-transparent': '#ff4d4d59',
     'looks-light-transparent': '#ff4d4d26',
-    'looks-secondary-dark': 'hsla(0, 42%, 51%, 1)'
+    'looks-secondary-dark': 'hsla(0, 42%, 51%, 1)',
+
+    'menu-bar-background': '#ff4c4c'
 };
 
 const darkBlockColors = {
@@ -20,19 +23,25 @@ const darkBlockColors = {
 };
 
 const darkGuiColors = {
+    ...lightGuiColors,
+
     'ui-primary': '#111111',
     'ui-secondary': '#1e1e1e',
     'ui-tertiary': '#2e2e2e',
 
     'ui-modal-overlay': '#333333aa',
+    'ui-modal-background': '#111111',
+    'ui-modal-foreground': '#eeeeee',
+    'ui-modal-header-background': '#333333',
+    'ui-modal-header-foreground': '#ffffff',
+
+    'ui-white': '#1e1e1e',
 
     'ui-black-transparent': '#ffffff26',
 
     'text-primary': '#eeeeee',
 
-    'motion-primary': '#333333',
-
-    'looks-secondary': '#333333'
+    'menu-bar-background': '#333333'
 };
 
 export {