2 more Amazing accent colors

src/components/menu-bar/tw-theme-accent.jsx

@@ -7,14 +7,31 @@ 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';
 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.',
@@ -45,6 +62,11 @@ 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_RAINBOW]: {
         defaultMessage: 'Rainbow',
         description: 'Name of color scheme that uses a rainbow.',

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
+};

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
+};

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,