merge-upstream: continue working towards a new dark mode

TurboWarp · Dec 26, 2023 · 147c1dc · 147c1dc
1 parent 1170792
commit 147c1dc
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 112 deletions.
diff --git a/src/addons/settings/settings.css b/src/addons/settings/settings.css
@@ -17,23 +17,16 @@
 @import "../../css/colors.css";
 
 body {
-    background-color: white;
-    color: black;
+    background-color: $page-background;
+    color: $page-foreground;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin: 0;
 }
-body[theme="dark"] {
-    background-color: #222222;
-    color: white;
-}
 
 a[href] {
-    color: #2a67eb;
+    color: $link-color;
     text-decoration: underline;
 }
-[theme="dark"] a[href] {
-    color: #6d9bff;
-}
 a:active, a:focus {
     outline: none;
     box-shadow: 0 0 0 3px $looks-transparent;
@@ -58,12 +51,9 @@ a:active, a:focus {
 .header {
     position: relative;
     padding: 8px 20px;
-    background-color: #fcfcfc;
+    background-color: $ui-secondary;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-[theme="dark"] .header {
-    background-color: #222222;
-}
 @media (max-width: 700px) {
     .header {
         padding-left: 5px;
@@ -77,9 +67,9 @@ a:active, a:focus {
 }
 
 .button {
-    color: #000;
-    background: #efefef;
-    border: 1px solid #acacac;
+    color: inherit;
+    background: $ui-secondary;
+    border: 1px solid $ui-black-transparent;
     padding: 8px 12px;
     border-radius: 4px;
     outline: none;
@@ -91,26 +81,17 @@ a:active, a:focus {
     display: flex;
     align-items: center;
 }
-[theme="dark"] .button {
-    color: #fff;
-    background: #222222;
-    border-color: #000;
-}
 .button:hover {
-    background: #aaaaaa;
-}
-[theme="dark"] .button:hover {
-    background: #151515;
+    background: $ui-tertiary;
 }
 .button:active, .button:focus-within {
     box-shadow: 0 0 0 3px $looks-transparent;
 }
 
 .search-container {
     display: flex;
-    background-color: #f0f0f0;
-    color: #222;
-    border: 1px solid #cecece;
+    background-color: $ui-secondary;
+    border: 1px solid $ui-black-transparent;
     border-radius: 4px;
 }
 .search-container:focus-within {
@@ -141,19 +122,14 @@ a:active, a:focus {
     background-repeat: no-repeat;
     background-position: center;
 }
-[theme="dark"] .search-container {
-    color: white;
-    background-color: #111111;
-    border-color: #222222;
-}
 .search-input:not([value=""]) ~ .search-button {
     background-image: url("./icons/clear.svg") !important;
 }
 
 .feedback-button-outer {
-    background: #f0f0f0;
-    border: 1px solid #cecece;
-    color: #333 !important;
+    background: $ui-secondary;
+    border: 1px solid $ui-black-transparent;
+    color: inherit !important; /* override <a> colors */
     height: 36px;
     box-sizing: border-box;
     border-radius: 4px;
@@ -165,10 +141,6 @@ a:active, a:focus {
     align-items: center;
     text-decoration: none !important;
 }
-[theme="dark"] .feedback-button-outer {
-    background-color: white;
-    border-color: white;
-}
 .feedback-button-outer:active, .feedback-button-outer:focus-within {
     box-shadow: 0 0 0 3px $looks-transparent;
 }
@@ -178,14 +150,6 @@ a:active, a:focus {
     text-align: center;
 }
 
-[theme="dark"] .search-button,
-[theme="dark"] .addon-group-expand,
-[theme="dark"] .extension-image,
-[theme="dark"] .reset-button img,
-[theme="dark"] .reset-setting-button img {
-    filter: invert(100%);
-}
-
 .addons {
     overflow-y: auto;
     overflow-x: hidden;
@@ -212,13 +176,10 @@ a:active, a:focus {
 .addon-group-name::after {
     margin-left: 16px;
     content: '';
-    border-top: 1px solid #cfcfcf;
+    border-top: 1px solid $ui-black-transparent;
     width: 100px;
     flex: 1;
 }
-[theme="dark"] .addon-group-name::after {
-    border-color: #333;
-}
 .addon-group-expand {
     width: 24px;
     height: 24px;
@@ -233,22 +194,15 @@ a:active, a:focus {
 }
 
 .addon {
-    background: #f7f7f7;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    border: 1px solid #cfcfcf;
+    box-shadow: 0 2px 5px $ui-black-transparent;
+    border: 1px solid $ui-black-transparent;
     border-radius: 5px;
     margin: 10px 0 10px 0;
     font-size: 14px;
+    /* TODO background */
 }
 .addon-dirty {
-    background: #ffeedf;
-}
-[theme="dark"] .addon {
-    background-color: #2a2a2a;
-    border-color: #333;
-}
-[theme="dark"] .addon-dirty {
-    background: rgb(39, 50, 53);
+    /* TODO background */
 }
 
 .addon-header {
@@ -281,8 +235,8 @@ a:active, a:focus {
 }
 
 .inline-description {
+    opacity: 0.7;
     margin-left: 10px;
-    color: gray;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -303,7 +257,7 @@ a:active, a:focus {
     background-color: transparent;
 }
 .reset-button:hover {
-    background: rgba(0, 0, 0, 0.05);
+    background: $ui-black-transparent;
 }
 .reset-button:active, .reset-button:focus-within {
     outline: none;
@@ -314,9 +268,6 @@ a:active, a:focus {
     height: 16px;
     width: 16px;
 }
-[theme="dark"] .reset-button:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
 
 .switch {
     display: block;
@@ -408,10 +359,6 @@ a:active, a:focus {
 .addon-details {
     padding: 0 20px;
     margin-bottom: 10px;
-    color: #111;
-}
-[theme="dark"] .addon-details {
-    color: #ddd;
 }
 
 .credit-container {
@@ -573,10 +520,7 @@ a:active, a:focus {
 }
 
 .footer {
-    color: #444;
-}
-[theme="dark"] .footer {
-    color: #aaa;
+    opacity: 0.8;
 }
 
 .unsupported-container {

diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
@@ -5,7 +5,7 @@
     display: flex;
     flex-grow: 1;
     border: 1px solid $ui-black-transparent;
-    background: white;
+    background: $assets-background;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.85rem;
 }

diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
@@ -33,8 +33,6 @@ $fade-out-distance: 100px;
     bottom: 0;
     left: 0;
     right:0;
-    background: linear-gradient(rgba(232,237,241, 0),rgba(232,237,241, 1));
-    height: $fade-out-distance;
     width: 100%;
     pointer-events: none;
 }

diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
@@ -91,7 +91,7 @@
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
-    height: calc(100% - 44px);
+    flex-grow: 1;
 }
 
 .list-row {
@@ -128,6 +128,7 @@
     padding: 3px;
     font-size: 0.75rem;
     font-weight: bold;
+    border-top: 1px solid $ui-black-transparent;
     color: $text-primary;
 }
 

diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -89,7 +89,7 @@
 
 .is-selected .sprite-info {
     background: $looks-secondary;
-    color: $ui-white;
+    color: #ffffff;
 }
 
 .delete-button {

diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
@@ -150,10 +150,18 @@ class Blocks extends React.Component {
         Msg.PROCEDURES_TO_STATEMENT = this.props.intl.formatMessage(messages.PROCEDURES_TO_STATEMENT);
         Msg.PROCEDURES_DOCS = this.props.intl.formatMessage(messages.PROCEDURES_DOCS);
 
+        console.log(getColorsForTheme(this.props.theme).gridColor);
         const workspaceConfig = defaultsDeep({},
-            Blocks.defaultOptions,
             this.props.options,
-            {rtl: this.props.isRtl, toolbox: this.props.toolboxXML, colours: getColorsForTheme(this.props.theme)}
+            {
+                rtl: this.props.isRtl,
+                toolbox: this.props.toolboxXML,
+                colours: getColorsForTheme(this.props.theme),
+                grid: {
+                    colour: getColorsForTheme(this.props.theme).gridColor
+                }
+            },
+            Blocks.defaultOptions
         );
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
         AddonHooks.blocklyWorkspace = this.workspace;

diff --git a/src/css/colors.css b/src/css/colors.css
@@ -1,3 +1,5 @@
+/* overridden by src/lib/themes/guiHelpers.js */
+
 $ui-primary: var(--ui-primary);
 $ui-secondary: var(--ui-secondary);
 $ui-tertiary: var(--ui-tertiary);
@@ -53,3 +55,10 @@ $drop-highlight: var(--drop-highlight);
 
 $menu-bar-background: var(--menu-bar-background);
 $menu-bar-foreground: var(--menu-bar-foreground);
+
+$assets-background: var(--assets-background);
+
+$page-background: var(--page-background);
+$page-foreground: var(--page-foreground);
+
+$link-color: var(--link-color);
diff --git a/src/lib/themes/default/index.js b/src/lib/themes/default/index.js
@@ -97,7 +97,23 @@ const blockColors = {
     numPadText: 'white', // Do not use hex here, it cannot be inlined with data-uri SVG
     valueReportBackground: '#FFFFFF',
     valueReportBorder: '#AAAAAA',
-    menuHover: 'rgba(0, 0, 0, 0.2)'
+    valueReportForeground: '#000000',
+    menuHover: 'rgba(0, 0, 0, 0.2)',
+    contextMenuBackground: '#ffffff',
+    contextMenuBorder: '#cccccc',
+    contextMenuForeground: '#000000',
+    contextMenuActiveBackground: '#d6e9f8',
+    contextMenuDisabledForeground: '#cccccc',
+    flyoutLabelColor: '#575E75',
+    checkboxInactiveBackground: '#ffffff',
+    checkboxInactiveBorder: '#c8c8c8',
+    checkboxActiveBackground: '#4C97FF',
+    checkboxActiveBorder: '#3373CC',
+    checkboxCheck: '#ffffff',
+    buttonBorder: '#c6c6c6',
+    buttonActiveBackground: '#ffffff',
+    buttonForeground: '#575E75',
+    gridColor: '#dddddd'
 };
 
 const guiColors = {
@@ -155,7 +171,14 @@ const guiColors = {
     '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 */
+    'menu-bar-foreground': '#ffffff',
+
+    'assets-background': '#ffffff',
+
+    'page-background': '#ffffff',
+    'page-foreground': '#000000',
+
+    'link-color': '#2255dd'
 };
 
 export {

diff --git a/src/lib/themes/tw/index.js b/src/lib/themes/tw/index.js
@@ -14,12 +14,27 @@ const lightGuiColors = {
 };
 
 const darkBlockColors = {
-    textFieldText: '#e5e5e5',
+    insertionMarker: '#cccccc',
     workspace: '#1e1e1e',
     toolboxSelected: '#1e1e1e',
     toolboxText: '#cccccc',
     toolbox: '#111111',
-    flyout: '#111111'
+    flyout: '#111111',
+    scrollbar: '#666666',
+    contextMenuBackground: '#111111',
+    contextMenuBorder: '#ffffff26',
+    contextMenuForeground: '#eeeeee',
+    contextMenuActiveBackground: '#2e2e2e',
+    contextMenuDisabledForeground: '#666666',
+    flyoutLabelColor: '#cccccc',
+    checkboxInactiveBackground: '#222222',
+    checkboxInactiveBorder: '#c8c8c8',
+    checkboxActiveBackground: '#ff4c4c',
+    checkboxActiveBorder: '#cc3333',
+    buttonBorder: '#c6c6c6',
+    buttonActiveBackground: '#222222',
+    buttonForeground: '#cccccc',
+    gridColor: '#484848'
 };
 
 const darkGuiColors = {
@@ -41,7 +56,14 @@ const darkGuiColors = {
 
     'text-primary': '#eeeeee',
 
-    'menu-bar-background': '#333333'
+    'menu-bar-background': '#333333',
+
+    'assets-background': '#111111',
+
+    'page-background': '#111111',
+    'page-foreground': '#eeeeee',
+
+    'link-color': '#44aaff'
 };
 
 export {