Add rainbow color mode

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

@@ -29,6 +29,7 @@
     font-size: $menu-bar-standard-font-size;
     font-weight: bold;
     background-color: $menu-bar-background;
+    background-image: $menu-bar-background-image;
     color: $menu-bar-foreground;
 }
 

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

@@ -7,10 +7,11 @@ 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, Theme} from '../../lib/themes/index.js';
+import {ACCENT_BLUE, ACCENT_MAP, ACCENT_PURPLE, ACCENT_RED, ACCENT_RAINBOW, 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({
@@ -28,14 +29,33 @@ const options = defineMessages({
         defaultMessage: 'Blue',
         description: 'Name of the blue color scheme. Matches Scratch before the high contrast update.',
         id: 'tw.accent.blue'
+    },
+    [ACCENT_RAINBOW]: {
+        defaultMessage: 'Rainbow',
+        description: 'Name of color scheme that uses a rainbow.',
+        id: 'tw.accent.rainbow'
     }
 });
 
-const ColorIcon = props => (
+const icons = {
+    [ACCENT_RAINBOW]: rainbowIcon
+};
+
+const ColorIcon = props => icons[props.id] ? (
+    <img
+        className={styles.accentIconOuter}
+        src={icons[props.id]}
+        draggable={false}
+        // Image is decorative
+        alt=""
+    />
+) : (
     <div
         className={styles.accentIconOuter}
         style={{
-            backgroundColor: ACCENT_MAP[props.id].guiColors['looks-secondary']
+            // menu-bar-background is var(...), don't want to evaluate with the current values
+            backgroundColor: ACCENT_MAP[props.id].guiColors['looks-secondary'],
+            backgroundImage: ACCENT_MAP[props.id].guiColors['menu-bar-background-image'],
         }}
     />
 );

src/css/colors.css

@@ -54,6 +54,7 @@ $extensions-light: var(--extensions-light);
 $drop-highlight: var(--drop-highlight);
 
 $menu-bar-background: var(--menu-bar-background);
+$menu-bar-background-image: var(--menu-bar-background-image);
 $menu-bar-foreground: var(--menu-bar-foreground);
 
 $assets-background: var(--assets-background);

src/lib/themes/accent/rainbow.js

@@ -0,0 +1,29 @@
+const guiColors = {
+    'motion-primary': '#ff4c4c',
+    'motion-primary-transparent': '#ff4c4ce6',
+    'motion-tertiary': '#cc3333',
+
+    'looks-secondary': '#ff4c4c',
+    'looks-transparent': '#ff4d4d59',
+    'looks-light-transparent': '#ff4d4d26',
+    'looks-secondary-dark': 'hsla(0, 42%, 51%, 1)',
+
+    'extensions-primary': 'hsla(10, 85%, 65%, 1)',
+    'extensions-tertiary': 'hsla(10, 85%, 40%, 1)',
+    'extensions-transparent': 'hsla(10, 85%, 65%, 0.35)',
+    'extensions-light': 'hsla(10, 57%, 85%, 1)',
+
+    'drop-highlight': '#ff8c8c',
+
+    'menu-bar-background-image': 'linear-gradient(90deg, rgba(255, 0, 0, 0.75) 0%, rgba(255, 154, 0, 0.75) 10%, rgba(208, 222, 33, 0.75) 20%, rgba(79, 220, 74, 0.75) 30%, rgba(63, 218, 216, 0.75) 40%, rgba(47, 201, 226, 0.75) 50%, rgba(28, 127, 238, 0.75) 60%, rgba(95, 21, 242, 0.75) 70%, rgba(186, 12, 248, 0.75) 80%, rgba(251, 7, 217, 0.75) 90%, rgba(255, 0, 0, 0.75) 100%)'
+};
+
+const blockColors = {
+    checkboxActiveBackground: '#ff4c4c',
+    checkboxActiveBorder: '#cc3333'
+};
+
+export {
+    guiColors,
+    blockColors
+};

src/lib/themes/gui/light.js

@@ -56,6 +56,7 @@ const guiColors = {
     'drop-highlight': 'hsla(215, 100%, 77%, 1)', /* lighter than motion-primary */
 
     'menu-bar-background': 'var(--looks-secondary)',
+    'menu-bar-background-image': 'none',
     'menu-bar-foreground': '#ffffff',
 
     'assets-background': '#ffffff',

src/lib/themes/index.js

@@ -3,6 +3,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import * as accentPurple from './accent/purple';
 import * as accentBlue from './accent/blue';
 import * as accentRed from './accent/red';
+import * as accentRainbow from './accent/rainbow';
 
 import * as guiLight from './gui/light';
 import * as guiDark from './gui/dark';
@@ -14,10 +15,12 @@ import * as blocksDark from './blocks/dark';
 const ACCENT_PURPLE = 'purple';
 const ACCENT_BLUE = 'blue';
 const ACCENT_RED = 'red';
+const ACCENT_RAINBOW = 'rainbow';
 const ACCENT_MAP = {
     [ACCENT_PURPLE]: accentPurple,
     [ACCENT_BLUE]: accentBlue,
-    [ACCENT_RED]: accentRed
+    [ACCENT_RED]: accentRed,
+    [ACCENT_RAINBOW]: accentRainbow
 };
 const ACCENT_DEFAULT = ACCENT_RED;
 
@@ -146,6 +149,7 @@ export {
     ACCENT_RED,
     ACCENT_PURPLE,
     ACCENT_BLUE,
+    ACCENT_RAINBOW,
     ACCENT_MAP,
 
     GUI_LIGHT,