From dd7d56456efd1af1848b8f83a8c6eb84d71c8b91 Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 10:14:53 -0400 Subject: [PATCH 01/11] Add base high contrast mode toggle --- src/components/menu-bar/menu-bar.css | 4 ++-- src/components/menu-bar/menu-bar.jsx | 30 +++++++++++++++++++++++++++- src/css/colors.css | 2 ++ 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 843ed74bfd3..b835a06b4c1 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -28,7 +28,7 @@ font-size: $menu-bar-standard-font-size; font-weight: bold; background-color: $motion-primary; - color: $ui-white; + color: $text-primary; } [theme="dark"] .menu-bar { background-color: $motion-primary-dark; @@ -71,7 +71,7 @@ display: flex; padding: 0 0.25rem; text-decoration: none; - color: $ui-white; + color: $text-menubar; user-select: none; align-self: center; position: relative; diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 7c8d216a1c0..11f932f0c50 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -197,6 +197,9 @@ MenuItemLink.propTypes = { class MenuBar extends React.Component { constructor(props) { super(props); + this.state = { + highContrast: false + }; bindAll(this, [ 'handleClickSeeInside', 'handleClickNew', @@ -213,9 +216,24 @@ class MenuBar extends React.Component { 'handleLanguageMouseUp', 'handleRestoreOption', 'getSaveToComputerHandler', - 'restoreOptionMessage' + 'restoreOptionMessage', + 'handleToggleHighContrast' ]); } + + handleToggleHighContrast() { + this.setState(prevState => { + // wcag high contrast mode + if (!prevState.highContrast) { + document.body.style.setProperty('--text-menubar', '#000000'); + window.isHighContrast = true; + } else { + document.body.style.setProperty('--text-menubar', '#FFFFFF'); + window.isHighContrast = false; + } + return { highContrast: !prevState.highContrast }; + }); + } componentDidMount() { document.addEventListener('keydown', this.handleKeyPress); } @@ -476,6 +494,16 @@ class MenuBar extends React.Component { )} >
+
+ +
{this.props.onClickLogo ? (
diff --git a/src/css/colors.css b/src/css/colors.css index 0c1f564d7c8..961e16aaade 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -50,3 +50,5 @@ $extensions-transparent: hsla(194, 100%, 50%, 0.35); /* 35% transparent version $extensions-light: hsla(203, 100%, 39%, 1); /* opaque version of extensions-transparent, on white bg */ $drop-highlight: hsla(194, 100%, 77%, 1); /* lighter than motion-primary */ + +$text-menubar: var(--text-menubar, hsla(225, 100%, 100%, 1)); /* #FFFFFF */ From bcbc6c7997f3594977246eb80bc66d907e925056 Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 10:40:15 -0400 Subject: [PATCH 02/11] Finish the high contrast mode --- .../menu-bar/icon--high-contrast.svg | 1 + src/components/menu-bar/menu-bar.css | 5 ++- src/components/menu-bar/menu-bar.jsx | 37 ++++++++++++------- .../menu-bar/project-title-input.css | 4 +- src/components/menu/menu.css | 2 +- 5 files changed, 32 insertions(+), 17 deletions(-) create mode 100644 src/components/menu-bar/icon--high-contrast.svg diff --git a/src/components/menu-bar/icon--high-contrast.svg b/src/components/menu-bar/icon--high-contrast.svg new file mode 100644 index 00000000000..3898770b3f3 --- /dev/null +++ b/src/components/menu-bar/icon--high-contrast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index b835a06b4c1..080bfdc8c99 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -28,7 +28,7 @@ font-size: $menu-bar-standard-font-size; font-weight: bold; background-color: $motion-primary; - color: $text-primary; + color: $text-menubar; } [theme="dark"] .menu-bar { background-color: $motion-primary-dark; @@ -54,6 +54,7 @@ .language-icon { height: 1.5rem; + color: $text-menubar; vertical-align: middle; } @@ -116,6 +117,7 @@ .menu-bar-menu { margin-top: $menu-bar-height; z-index: $z-index-menu-bar; + color: $text-menubar; } .feedback-link { @@ -143,6 +145,7 @@ .menu-bar-button { height: $menu-bar-button-size; + color: $text-menubar; } .remix-button { diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 11f932f0c50..7db8dc19ec4 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -72,6 +72,7 @@ import collectMetadata from '../../lib/collect-metadata'; import styles from './menu-bar.css'; import remixIcon from './icon--remix.svg'; +import highContrastIcon from './icon--high-contrast.svg'; import dropdownCaret from './dropdown-caret.svg'; import languageIcon from '../language-selector/language-icon.svg'; import aboutIcon from './icon--about.svg'; @@ -494,15 +495,15 @@ class MenuBar extends React.Component { )} >
-
- +
+ High Contrast
{this.props.onClickLogo ? ( @@ -520,13 +521,15 @@ class MenuBar extends React.Component { ) : null} {(this.props.canChangeLanguage) && (
-
+
)} @@ -921,13 +926,15 @@ class MenuBar extends React.Component { /> ) : null} */} {this.props.canEditTitle ? ( -
+
@@ -972,14 +979,18 @@ class MenuBar extends React.Component { />) : (null)}
-
+
- ); diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 7db8dc19ec4..aa2c8f1fd46 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -536,6 +536,7 @@ class MenuBar extends React.Component { src={dropdownCaret} width="8" height="5" + style={{ marginRight: '4px', filter: this.state.highContrast ? 'invert(1)' : 'none' }} />
From c2c91ff55bfe365a57ed508c62d1c650d0f9e580 Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 21:15:01 -0400 Subject: [PATCH 04/11] move eye-con HAHAHHAHAHAHA did you see my pun ill see the door --- src/components/menu-bar/menu-bar.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index aa2c8f1fd46..7026f5a306e 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -495,16 +495,6 @@ class MenuBar extends React.Component { )} >
-
- High Contrast -
{this.props.onClickLogo ? (
@@ -557,6 +547,16 @@ class MenuBar extends React.Component { />
)} +
+ High Contrast +
{/* tw: display compile errors */} {this.props.compileErrors.length > 0 &&
Date: Sun, 21 Sep 2025 21:28:39 -0400 Subject: [PATCH 05/11] turn windowvar into css thing --- src/components/menu-bar/menu-bar.jsx | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 7026f5a306e..9a7447f5dcd 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -223,18 +223,22 @@ class MenuBar extends React.Component { } handleToggleHighContrast() { - this.setState(prevState => { - // wcag high contrast mode - if (!prevState.highContrast) { - document.body.style.setProperty('--text-menubar', '#000000'); - window.isHighContrast = true; - } else { - document.body.style.setProperty('--text-menubar', '#FFFFFF'); - window.isHighContrast = false; - } - return { highContrast: !prevState.highContrast }; - }); - } + this.setState(prevState => { + // wcag high contrast mode + const isHighContrast = !prevState.highContrast; + + if (isHighContrast) { + document.documentElement.setAttribute('data-theme', 'high-contrast'); + window.isHighContrast = true; + } else { + document.documentElement.removeAttribute('data-theme'); + window.isHighContrast = false; + } + + return { highContrast: isHighContrast }; + }); +} + componentDidMount() { document.addEventListener('keydown', this.handleKeyPress); } From 3818631ec778f6c7de84594a68abe99072e749d2 Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 21:52:42 -0400 Subject: [PATCH 06/11] how the fuck --- src/components/menu-bar/menu-bar.jsx | 39 +++++++++++++++++++++++++++- src/reducers/menus.js | 10 +++++-- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 9a7447f5dcd..8acb116da62 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -63,7 +63,9 @@ import { languageMenuOpen, openLoginMenu, closeLoginMenu, - loginMenuOpen + loginMenuOpen, + openAppearanceMenu, + closeAppearanceMenu } from '../../reducers/menus'; import { setFileHandle } from '../../reducers/tw.js'; @@ -561,6 +563,38 @@ class MenuBar extends React.Component { > High Contrast
+
+ + + + + + + + +
{/* tw: display compile errors */} {this.props.compileErrors.length > 0 &&
({ onClickAccount: () => dispatch(openAccountMenu()), onRequestCloseAccount: () => dispatch(closeAccountMenu()), onClickFile: () => dispatch(openFileMenu()), + onClickAppearance: () => dispatch(openAppearanceMenu()), + onRequestCloseAppearance: () => dispatch(closeAppearanceMenu()), onRequestCloseFile: () => dispatch(closeFileMenu()), onClickEdit: () => dispatch(openEditMenu()), onRequestCloseEdit: () => dispatch(closeEditMenu()), diff --git a/src/reducers/menus.js b/src/reducers/menus.js index bd9426f97c1..4def045977d 100644 --- a/src/reducers/menus.js +++ b/src/reducers/menus.js @@ -8,6 +8,7 @@ const MENU_EDIT = 'editMenu'; const MENU_LANGUAGE = 'languageMenu'; const MENU_LOGIN = 'loginMenu'; const MENU_ERRORS = 'errorMenu'; +const MENU_APPEARANCE = 'appearanceMenu'; const initialState = { @@ -17,7 +18,8 @@ const initialState = { [MENU_EDIT]: false, [MENU_LANGUAGE]: false, [MENU_LOGIN]: false, - [MENU_ERRORS]: false + [MENU_ERRORS]: false, + [MENU_APPEARANCE]: false }; const reducer = function (state, action) { @@ -44,6 +46,8 @@ const closeMenu = menu => ({ menu: menu }); const openAboutMenu = () => openMenu(MENU_ABOUT); +const openAppearanceMenu = () => openMenu(MENU_APPEARANCE); +const closeAppearanceMenu = () => closeMenu(MENU_APPEARANCE); const closeAboutMenu = () => closeMenu(MENU_ABOUT); const aboutMenuOpen = state => state.scratchGui.menus[MENU_ABOUT]; const openAccountMenu = () => openMenu(MENU_ACCOUNT); @@ -88,5 +92,7 @@ export { loginMenuOpen, openErrorsMenu, closeErrorsMenu, - errorsMenuOpen + errorsMenuOpen, + openAppearanceMenu, + closeAppearanceMenu }; From 7e1a5da525068505719e85bf02d96706190f9f3c Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 21:56:26 -0400 Subject: [PATCH 07/11] fix bug when creating --- src/components/menu-bar/menu-bar.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 8acb116da62..11ed10734af 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -231,9 +231,11 @@ class MenuBar extends React.Component { if (isHighContrast) { document.documentElement.setAttribute('data-theme', 'high-contrast'); + document.body.style.setProperty('--text-menubar', '#000000'); window.isHighContrast = true; } else { document.documentElement.removeAttribute('data-theme'); + document.body.style.setProperty('--text-menubar', '#FFFFFF'); window.isHighContrast = false; } From 9be20e3b5bff87decd981e0ba9edb6619723a909 Mon Sep 17 00:00:00 2001 From: coni Date: Sun, 21 Sep 2025 22:05:47 -0400 Subject: [PATCH 08/11] aaaaaaaaaaaaaaaaaaaa --- src/components/menu-bar/menu-bar.jsx | 64 ++++++++++++++-------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 11ed10734af..ab9dd8cb015 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -565,38 +565,6 @@ class MenuBar extends React.Component { > High Contrast
-
- - - - - - - - -
{/* tw: display compile errors */} {this.props.compileErrors.length > 0 &&
} +
+ + + + + + + + +
{(this.props.canManageFiles) && (
Date: Sun, 21 Sep 2025 22:07:15 -0400 Subject: [PATCH 09/11] comment it out cause i just cant --- src/components/menu-bar/menu-bar.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index ab9dd8cb015..2ee77975244 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -618,6 +618,7 @@ class MenuBar extends React.Component {
} + {/*
+ */} {(this.props.canManageFiles) && (
Date: Mon, 22 Sep 2025 13:43:19 -0400 Subject: [PATCH 10/11] Add menu for high contrast --- src/components/menu-bar/menu-bar.jsx | 61 ++++++++++++++++++++-------- src/reducers/menus.js | 2 + 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 2ee77975244..1985ad0d687 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -65,7 +65,8 @@ import { closeLoginMenu, loginMenuOpen, openAppearanceMenu, - closeAppearanceMenu + closeAppearanceMenu, + appearanceMenuOpen } from '../../reducers/menus'; import { setFileHandle } from '../../reducers/tw.js'; @@ -201,7 +202,8 @@ class MenuBar extends React.Component { constructor(props) { super(props); this.state = { - highContrast: false + highContrast: false, + darkMode: false }; bindAll(this, [ 'handleClickSeeInside', @@ -220,7 +222,9 @@ class MenuBar extends React.Component { 'handleRestoreOption', 'getSaveToComputerHandler', 'restoreOptionMessage', - 'handleToggleHighContrast' + 'handleToggleDarkModeNew', + 'handleToggleHighContrast', + 'handleClickTheme' ]); } @@ -243,6 +247,21 @@ class MenuBar extends React.Component { }); } + handleToggleDarkModeNew() { + this.setState(prevState => { + // testing stub + const isDarkMode = !prevState.darkMode; + + if (isDarkMode) { + document.documentElement.setAttribute('data-theme', 'dark') + } else { + document.documentElement.removeAttribute('data-theme'); + } + + return { darkMode: isDarkMode }; + }); +} + componentDidMount() { document.addEventListener('keydown', this.handleKeyPress); } @@ -367,6 +386,12 @@ class MenuBar extends React.Component { } } + handleClickTheme () { + this.setState(state => ({ + dark: !state.dark + })); + } + restoreOptionMessage(deletedItem) { switch (deletedItem) { case 'Sprite': @@ -555,16 +580,6 @@ class MenuBar extends React.Component { />
)} -
- High Contrast -
{/* tw: display compile errors */} {this.props.compileErrors.length > 0 &&
} - {/*
@@ -648,10 +662,23 @@ class MenuBar extends React.Component { id="gui.menuBar.hcontrast" /> + {/* + + + + */}
- */} + {(this.props.canManageFiles) && (
{ return { aboutMenuOpen: aboutMenuOpen(state), accountMenuOpen: accountMenuOpen(state), + appearanceMenuOpen: appearanceMenuOpen(state), authorThumbnailUrl: state.scratchGui.tw.author.thumbnail, authorUsername: state.scratchGui.tw.author.username, compileErrors: state.scratchGui.tw.compileErrors, diff --git a/src/reducers/menus.js b/src/reducers/menus.js index 4def045977d..fa7c4cd58fd 100644 --- a/src/reducers/menus.js +++ b/src/reducers/menus.js @@ -48,6 +48,7 @@ const closeMenu = menu => ({ const openAboutMenu = () => openMenu(MENU_ABOUT); const openAppearanceMenu = () => openMenu(MENU_APPEARANCE); const closeAppearanceMenu = () => closeMenu(MENU_APPEARANCE); +const appearanceMenuOpen = state => state.scratchGui.menus[MENU_APPEARANCE]; const closeAboutMenu = () => closeMenu(MENU_ABOUT); const aboutMenuOpen = state => state.scratchGui.menus[MENU_ABOUT]; const openAccountMenu = () => openMenu(MENU_ACCOUNT); @@ -73,6 +74,7 @@ export { reducer as default, initialState as menuInitialState, openAboutMenu, + appearanceMenuOpen, closeAboutMenu, aboutMenuOpen, openAccountMenu, From 8e798c71abbaf0172e862eddcf0e003d04cd9b15 Mon Sep 17 00:00:00 2001 From: coni Date: Mon, 22 Sep 2025 13:55:13 -0400 Subject: [PATCH 11/11] a --- src/components/sprite-info/sprite-info.css | 3 +++ src/components/sprite-selector/sprite-selector.css | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css index e121f8e8621..f7954ae0dad 100644 --- a/src/components/sprite-info/sprite-info.css +++ b/src/components/sprite-info/sprite-info.css @@ -13,6 +13,9 @@ [theme="dark"] .sprite-info { background-color: $ui-primary; } +[theme="high-contrast"] .sprite-info { + color: #ffffff; +} .row { display: flex; diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css index bfb3598c9e6..0c8660b7a9b 100644 --- a/src/components/sprite-selector/sprite-selector.css +++ b/src/components/sprite-selector/sprite-selector.css @@ -16,6 +16,10 @@ border-bottom: 0; } +[theme="high-contrast"] .sprite-selector .spriteIcon { + filter: invert(1); +} + .sprite-wrapper { /* Our goal is to fit sprites evenly in a row without leftover space.