From 863ca920c1011b2edcb94fb62831f94125f89f3c Mon Sep 17 00:00:00 2001 From: Embin <113154360+embinmc@users.noreply.github.com> Date: Sun, 1 Nov 2026 09:06:45 -0800 Subject: [PATCH 1/2] pink and maroon --- src/components/menu-bar/tw-theme-accent.jsx | 24 ++++++++++++++++++++- src/lib/themes/accent/maroon.js | 24 +++++++++++++++++++++ src/lib/themes/accent/pink.js | 24 +++++++++++++++++++++ src/lib/themes/index.js | 8 +++++++ 4 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 src/lib/themes/accent/maroon.js create mode 100644 src/lib/themes/accent/pink.js diff --git a/src/components/menu-bar/tw-theme-accent.jsx b/src/components/menu-bar/tw-theme-accent.jsx index 581ec92a610..1e08e0fb54d 100644 --- a/src/components/menu-bar/tw-theme-accent.jsx +++ b/src/components/menu-bar/tw-theme-accent.jsx @@ -7,7 +7,19 @@ import {connect} from 'react-redux'; import check from './check.svg'; import dropdownCaret from './dropdown-caret.svg'; import {MenuItem, Submenu} from '../menu/menu.jsx'; -import {ACCENT_BLUE, ACCENT_MAP, ACCENT_PURPLE, ACCENT_RED, ACCENT_RAINBOW, ACCENT_CYAN, ACCENT_GREEN, ACCENT_ORANGE, Theme} from '../../lib/themes/index.js'; +import { + ACCENT_MAP, + ACCENT_BLUE, + ACCENT_PURPLE, + ACCENT_RED, + ACCENT_RAINBOW, + ACCENT_CYAN, + ACCENT_GREEN, + ACCENT_ORANGE, + ACCENT_PINK, + ACCENT_MAROON, + Theme +} from '../../lib/themes/index.js'; import {openAccentMenu, accentMenuOpen, closeSettingsMenu} from '../../reducers/menus.js'; import {setTheme} from '../../reducers/theme.js'; import {persistTheme} from '../../lib/themes/themePersistance.js'; @@ -45,6 +57,16 @@ const options = defineMessages({ description: 'Name of the purple color scheme. Matches modern Scratch.', id: 'tw.accent.purple' }, + [ACCENT_PINK]: { + defaultMessage: 'Pink', + description: 'Name of the pink color scheme.', + id: 'pm.gui.accent.pink' + }, + [ACCENT_MAROON]: { + defaultMessage: 'Maroon', + description: 'Name of the maroon color scheme.', + id: 'pm.gui.accent.maroon' + }, [ACCENT_RAINBOW]: { defaultMessage: 'Rainbow', description: 'Name of color scheme that uses a rainbow.', diff --git a/src/lib/themes/accent/maroon.js b/src/lib/themes/accent/maroon.js new file mode 100644 index 00000000000..59cd1bfe61c --- /dev/null +++ b/src/lib/themes/accent/maroon.js @@ -0,0 +1,24 @@ +const guiColors = { + 'motion-primary': 'hsla(0, 100%, 30%, 1)', + 'motion-primary-transparent': 'hsla(0, 100%, 30%, 0.9)', + 'motion-tertiary': 'hsla(0, 80%, 25%, 1)', + + 'looks-secondary': '#990000', + 'looks-transparent': 'hsla(0, 100%, 30%, 0.35)', + 'looks-light-transparent': 'hsla(0, 100%, 30%, 0.15)', + 'looks-secondary-dark': 'hsla(0, 90%, 30%, 1)', + + 'extensions-primary': 'hsla(0, 49%, 50%, 1)', + 'extensions-tertiary': 'hsla(0, 85%, 31%, 1)', + 'extensions-transparent': 'hsla(0, 50%, 45%, 0.35)', + 'extensions-light': 'hsla(0, 26%, 67%, 1)', + + 'drop-highlight': '#cf4545' +}; + +const blockColors = {}; + +export { + guiColors, + blockColors +}; \ No newline at end of file diff --git a/src/lib/themes/accent/pink.js b/src/lib/themes/accent/pink.js new file mode 100644 index 00000000000..8a68f46f670 --- /dev/null +++ b/src/lib/themes/accent/pink.js @@ -0,0 +1,24 @@ +const guiColors = { + 'motion-primary': 'hsla(300, 100%, 55%, 1)', + 'motion-primary-transparent': 'hsla(300, 100%, 55%, 0.9)', + 'motion-tertiary': 'hsla(300, 80%, 50%, 1)', + + 'looks-secondary': '#ff1aff', + 'looks-transparent': 'hsla(300, 100%, 55%, 0.35)', + 'looks-light-transparent': 'hsla(300, 100%, 55%, 0.15)', + 'looks-secondary-dark': 'hsla(300, 78%, 44%, 1)', + + 'extensions-primary': 'hsla(313, 85%, 65%, 1)', + 'extensions-tertiary': 'hsla(315, 85%, 40%, 1)', + 'extensions-transparent': 'hsla(313, 85%, 65%, 0.35)', + 'extensions-light': 'hsla(310, 58%, 85%, 1)', + + 'drop-highlight': '#ff8fff' +}; + +const blockColors = {}; + +export { + guiColors, + blockColors +}; \ No newline at end of file diff --git a/src/lib/themes/index.js b/src/lib/themes/index.js index 1bd97508517..5db2ad7303f 100644 --- a/src/lib/themes/index.js +++ b/src/lib/themes/index.js @@ -6,6 +6,8 @@ import * as accentRed from './accent/red'; import * as accentCyan from './accent/cyan'; import * as accentGreen from './accent/green'; import * as accentOrange from './accent/orange'; +import * as accentPink from './accent/pink'; +import * as accentMaroon from './accent/maroon'; import * as accentRainbow from './accent/rainbow'; import * as guiLight from './gui/light'; @@ -22,6 +24,8 @@ const ACCENT_RED = 'red'; const ACCENT_CYAN = 'cyan'; const ACCENT_GREEN = 'green'; const ACCENT_ORANGE = 'orange'; +const ACCENT_PINK = 'pink'; +const ACCENT_MAROON = 'maroon'; const ACCENT_RAINBOW = 'rainbow'; const ACCENT_MAP = { [ACCENT_PURPLE]: accentPurple, @@ -30,6 +34,8 @@ const ACCENT_MAP = { [ACCENT_CYAN]: accentCyan, [ACCENT_GREEN]: accentGreen, [ACCENT_ORANGE]: accentOrange, + [ACCENT_PINK]: accentPink, + [ACCENT_MAROON]: accentMaroon, [ACCENT_RAINBOW]: accentRainbow }; const ACCENT_DEFAULT = ACCENT_CYAN; @@ -161,6 +167,8 @@ export { ACCENT_CYAN, ACCENT_GREEN, ACCENT_ORANGE, + ACCENT_PINK, + ACCENT_MAROON, ACCENT_RAINBOW, ACCENT_MAP, From 946eeb112c946ce926de93099095e44752750b75 Mon Sep 17 00:00:00 2001 From: Embin <113154360+embinmc@users.noreply.github.com> Date: Sun, 1 Nov 2026 09:13:07 -0800 Subject: [PATCH 2/2] move that higher i guess --- src/components/menu-bar/tw-theme-accent.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/menu-bar/tw-theme-accent.jsx b/src/components/menu-bar/tw-theme-accent.jsx index 1e08e0fb54d..461994500f1 100644 --- a/src/components/menu-bar/tw-theme-accent.jsx +++ b/src/components/menu-bar/tw-theme-accent.jsx @@ -27,6 +27,11 @@ import rainbowIcon from './tw-accent-rainbow.svg'; import styles from './settings-menu.css'; const options = defineMessages({ + [ACCENT_MAROON]: { + defaultMessage: 'Maroon', + description: 'Name of the maroon color scheme.', + id: 'pm.gui.accent.maroon' + }, [ACCENT_RED]: { defaultMessage: 'Red', description: 'Name of the red color scheme, used by TurboWarp by default.', @@ -62,11 +67,6 @@ const options = defineMessages({ description: 'Name of the pink color scheme.', id: 'pm.gui.accent.pink' }, - [ACCENT_MAROON]: { - defaultMessage: 'Maroon', - description: 'Name of the maroon color scheme.', - id: 'pm.gui.accent.maroon' - }, [ACCENT_RAINBOW]: { defaultMessage: 'Rainbow', description: 'Name of color scheme that uses a rainbow.',