feat: use high contrast icons

src/components/gui/gui.jsx

@@ -33,6 +33,7 @@ import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
+import {themeMap} from '../../lib/themes';
 
 import styles from './gui.css';
 import addExtensionIcon from './icon--extensions.svg';
@@ -308,7 +309,7 @@ const GUIComponent = props => {
                                             isVisible={blocksTabVisible}
                                             key={theme}
                                             options={{
-                                                media: `${basePath}static/blocks-media/`
+                                                media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
                                             }}
                                             stageSize={stageSize}
                                             theme={theme}

src/components/record-modal/record-modal.css

@@ -106,7 +106,8 @@
     text-align: center;
 }
 
-.record-button {
+/* Increase specificity to make sure this wins out over normalize.css */
+svg.record-button {
     overflow: visible;
 }
 

src/containers/blocks.jsx

@@ -19,7 +19,7 @@ import DropAreaHOC from '../lib/drop-area-hoc.jsx';
 import DragConstants from '../lib/drag-constants';
 import defineDynamicBlock from '../lib/define-dynamic-block';
 import {DEFAULT_THEME, getColorsForTheme, themeMap} from '../lib/themes';
-import {injectExtensionBlockColors, injectExtensionCategoryColors} from '../lib/themes/blockHelpers';
+import {injectExtensionBlockTheme, injectExtensionCategoryTheme} from '../lib/themes/blockHelpers';
 
 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
@@ -349,7 +349,7 @@ class Blocks extends React.Component {
             const stageCostumes = stage.getCostumes();
             const targetCostumes = target.getCostumes();
             const targetSounds = target.getSounds();
-            const dynamicBlocksXML = injectExtensionCategoryColors(
+            const dynamicBlocksXML = injectExtensionCategoryTheme(
                 this.props.vm.runtime.getBlocksXML(target),
                 this.props.theme
             );
@@ -436,7 +436,7 @@ class Blocks extends React.Component {
                     if (blockInfo.info && blockInfo.info.isDynamic) {
                         dynamicBlocksInfo.push(blockInfo);
                     } else if (blockInfo.json) {
-                        staticBlocksJson.push(injectExtensionBlockColors(blockInfo.json, this.props.theme));
+                        staticBlocksJson.push(injectExtensionBlockTheme(blockInfo.json, this.props.theme));
                     }
                     // otherwise it's a non-block entry such as '---'
                 });

src/lib/themes/__mocks__/dark-mode.js

@@ -10,4 +10,9 @@ const blockColors = {
     text: '#BBBBBB'
 };
 
-export default blockColors;
+const extensions = {};
+
+export {
+    blockColors,
+    extensions
+}

src/lib/themes/__mocks__/default-colors.js

@@ -13,4 +13,6 @@ const blockColors = {
     workspace: '#555555'
 };
 
-export default blockColors;
+export {
+    blockColors
+};

src/lib/themes/blockHelpers.js

@@ -1,4 +1,4 @@
-import {DEFAULT_THEME, getColorsForTheme} from '.';
+import {DEFAULT_THEME, getColorsForTheme, themeMap} from '.';
 
 // scratch-blocks colours has a pen property that scratch-gui uses for all extensions
 const getExtensionColors = theme => getColorsForTheme(theme).pen;
@@ -12,11 +12,12 @@ const getExtensionColors = theme => getColorsForTheme(theme).pen;
  * @param {string} theme - Theme name
  * @returns {Array.<object>} Dynamic block XML updated with colors.
  */
-const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
+const injectExtensionCategoryTheme = (dynamicBlockXML, theme) => {
     // Don't do any manipulation for the default theme
     if (theme === DEFAULT_THEME) return dynamicBlockXML;
 
     const extensionColors = getExtensionColors(theme);
+    const extensionIcons = themeMap[theme].extensions;
     const parser = new DOMParser();
     const serializer = new XMLSerializer();
 
@@ -27,6 +28,10 @@ const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
         // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
         dom.documentElement.setAttribute('secondaryColour', extensionColors.tertiary);
 
+        if (extensionIcons[extension.id] && extensionIcons[extension.id].menuIconURI) {
+            dom.documentElement.setAttribute('iconURI', extensionIcons[extension.id].menuIconURI);
+        }
+
         return {
             ...extension,
             xml: serializer.serializeToString(dom)
@@ -34,6 +39,29 @@ const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
     });
 };
 
+const isScratchExtension = blockInfoJson => (blockInfoJson.extensions || []).includes('scratch_extension');
+
+const injectBlockIcons = (blockInfoJson, theme) => {
+    if (!blockInfoJson.args0 || blockInfoJson.args0[0].type !== 'field_image') return blockInfoJson;
+
+    const extensionIcons = themeMap[theme].extensions;
+    const extension = blockInfoJson.type.substring(0, blockInfoJson.type.indexOf('_'));
+
+    if (!extensionIcons[extension] || !extensionIcons[extension].blockIconURI) return blockInfoJson;
+
+    return {
+        ...blockInfoJson,
+        args0: blockInfoJson.args0.map((value, index) => {
+            if (index !== 0) return value;
+
+            return {
+                ...value,
+                src: extensionIcons[extension].blockIconURI
+            };
+        })
+    };
+};
+
 /**
  * Applies extension color theme to static block json.
  * No changes are applied if called with the default theme, allowing extensions to provide their own colors.
@@ -41,14 +69,14 @@ const injectExtensionCategoryColors = (dynamicBlockXML, theme) => {
  * @param {string} theme - Theme name
  * @returns {object} Block info json with updated colors. The original blockInfoJson is not modified.
  */
-const injectExtensionBlockColors = (blockInfoJson, theme) => {
+const injectExtensionBlockTheme = (blockInfoJson, theme) => {
     // Don't do any manipulation for the default theme
     if (theme === DEFAULT_THEME) return blockInfoJson;
 
     const extensionColors = getExtensionColors(theme);
 
     return {
-        ...blockInfoJson,
+        ...injectBlockIcons(blockInfoJson, theme),
         colour: extensionColors.primary,
         colourSecondary: extensionColors.secondary,
         colourTertiary: extensionColors.tertiary,
@@ -57,6 +85,6 @@ const injectExtensionBlockColors = (blockInfoJson, theme) => {
 };
 
 export {
-    injectExtensionBlockColors,
-    injectExtensionCategoryColors
+    injectExtensionBlockTheme,
+    injectExtensionCategoryTheme
 };

src/lib/themes/dark-mode.js

@@ -76,4 +76,9 @@ const blockColors = {
     menuHover: 'rgba(255, 255, 255, 0.3)'
 };
 
-export default blockColors;
+const extensions = {};
+
+export {
+    blockColors,
+    extensions
+};

src/lib/themes/default-colors.js

@@ -100,4 +100,6 @@ const blockColors = {
     menuHover: 'rgba(0, 0, 0, 0.2)'
 };
 
-export default blockColors;
+export {
+    blockColors
+};

src/lib/themes/high-contrast.js

@@ -80,4 +80,30 @@ const blockColors = {
     menuHover: 'rgba(255, 255, 255, 0.3)'
 };
 
-export default blockColors;
+const extensions = {
+    music: {
+        // eslint-disable-next-line max-len
+        blockIconURI: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjQzMzggMzBDMjkuNTEzIDMwIDMxLjYzNjYgMjguMTU2OSAzMS4xNzkgMjUuODc0QzI4LjI5OTQgMTMuMDQzNiAyNy40MjU2IDkuODUxMzQgMjcuOTQ1NCA5LjYwNTQ3QzI4LjMxMjUgOS40MzE4MyAyOS4zNzQ2IDEwLjcyNzYgMzAuOTE2MiAxMS4xMzU5QzM0LjY0MTYgMTIuMTEyNiA0MC4yNzQyIDYuNDA3NTEgMzQuNTY1NSA3LjI5MTg2QzMyLjMyMjQgNy42MzkgMzAuMTU4NyA2LjIzODM2IDI4LjQ4NzkgNS4xNTY3OUMyNS45MDcyIDMuNDg2MiAyNC41MDI0IDIuNTc2ODQgMjUuNzk3NCAxMC4wNDUxQzI2LjQzNDkgMTMuNzAzNSAyNi45Njk3IDE2LjMyMzEgMjcuMzQ3NSAxOC4xNzM5QzI3Ljk5NTcgMjEuMzQ5NCAyOC4xODE5IDIyLjI2MTYgMjcuNjMyNSAyMi4yNzQxQzI3LjMzMjEgMjIuMTUyIDI3LjAzMjcgMjIuMDU3OCAyNi42OTU3IDIxLjk3MjRDMjYuMDg4IDIxLjgyMjUgMjUuNDUxNiAyMS43MzgyIDI0LjgwNTMgMjEuNzM4MkMyMS43MjcxIDIxLjczODIgMTkuNjAzNiAyMy41ODkyIDIwLjA2MjEgMjUuODc0QzIwLjUxMDcgMjguMTU2OSAyMy4zNjQ2IDMwIDI2LjQzMzggMzBaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOS40Mzg2MSAzNi4wMDAxQzEyLjUwNjUgMzYuMDAwMSAxNC42MzAyIDM0LjE0OCAxNC4xODE3IDMxLjg2NDJDMTEuMzAzMiAxOS4wMzM2IDEwLjQyOTkgMTUuODQxNiAxMC45NDk2IDE1LjU5NThDMTEuMzE2NiAxNS40MjIyIDEyLjM3ODMgMTYuNzE3NyAxMy45MTkgMTcuMTI2QzE3LjY0MjggMTguMTEzNiAyMy4yNzI5IDEyLjM5ODUgMTcuNTY2NyAxMy4yOTE4QzE1LjMyNDggMTMuNjM4NiAxMy4xNjIzIDEyLjIzODIgMTEuNDkyMiAxMS4xNTY5QzguOTEyMzcgOS40ODYzNiA3LjUwNzk3IDguNTc2OTggOC44MDI1MSAxNi4wNDUxQzkuNDQyOTQgMTkuNzI4NiA5Ljk3OTggMjIuMzU5NCAxMC4zNTggMjQuMjEyNUMxMC45OTEyIDI3LjMxNTQgMTEuMTc5NSAyOC4yMzg0IDEwLjY2NDQgMjguMjczMkM5Ljc4NDMyIDI3LjkyNTggOC44MTIzOSAyNy43MjkzIDcuODEwODIgMjcuNzI5M0M0LjczNCAyNy43MjkzIDIuNjExMzQgMjkuNTgwNCAzLjA1OTc4IDMxLjg2NDJDMy41MTgwOSAzNC4xNDggNi4zNzA2OSAzNi4wMDAxIDkuNDM4NjEgMzYuMDAwMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo='
+    },
+    pen: {
+        // eslint-disable-next-line max-len
+        blockIconURI: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ljc1MjkgMzQuNjAyNUw0LjUwMTkgMzYuMzgwNUw2LjI4NTkgMzIuMTQ0NUM3LjUwMzkgMjkuMjUzNSA5LjE5MjkgMjYuNzIyNSAxMS4zMTU5IDI0LjYwNzVMMzEuMDY2OSA0LjkyOTVDMzEuOTExOSA0LjA4NzUgMzMuNzE2OSA0LjUyMDUgMzUuMDk3OSA1Ljg5NjVDMzYuNDc4OSA3LjI3MjUgMzYuOTEzOSA5LjA3MDUgMzYuMDY3OSA5LjkxMjVMMTYuMzE3OSAyOS41OTA1QzE0LjE5NDkgMzEuNzA1NSAxMS42NTM5IDMzLjM4ODUgOC43NTI5IDM0LjYwMjVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOC43NTI5IDM0LjYwMjVMNC41MDE5IDM2LjM4MDVMNi4yODU5IDMyLjE0NDVDNy41MDM5IDI5LjI1MzUgOS4xOTI5IDI2LjcyMjUgMTEuMzE1OSAyNC42MDc1TDMxLjA2NjkgNC45Mjk1QzMxLjkxMTkgNC4wODc1IDMzLjcxNjkgNC41MjA1IDM1LjA5NzkgNS44OTY1QzM2LjQ3ODkgNy4yNzI1IDM2LjkxMzkgOS4wNzA1IDM2LjA2NzkgOS45MTI1TDE2LjMxNzkgMjkuNTkwNUMxNC4xOTQ5IDMxLjcwNTUgMTEuNjUzOSAzMy4zODg1IDguNzUyOSAzNC42MDI1IiBzdHJva2U9IiMwQjhFNjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjkuNDA5MiA2LjExMTNDMjkuNDA5MiA2LjExMTMgMjQuOTYwMiAzLjczMjMgMjEuMjA4MiAxMS44ODIzQzE5LjQ3NDIgMTUuNjQ4MyAxNi44NTgyIDEzLjQyODMgMTYuODU4MiAxMy40MjgzIiBzdHJva2U9IiMwQjhFNjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM2LjQyMDkgOC44MjUxQzM2LjQyMDkgOS4yODgxIDM2LjI3OTkgOS42OTgxIDM1Ljk4NzkgOS45ODkxTDI2LjY1MjkgMTkuMjkwMUMyNi45MzQ5IDE4Ljk5OTEgMjcuMDYzOSAxOC42MjIxIDI3LjA2MzkgMTguMTY5MUMyNy4wNjM5IDE3LjI5NjEgMjYuNTU1OSAxNi4yMDcxIDI1LjY1NjkgMTUuMzAyMUMyNC4yOTQ5IDEzLjk0NDEgMjIuNTA5OSAxMy41MDIxIDIxLjY1NDkgMTQuMzExMUwzMC45ODk5IDUuMDEwMUMzMS44MzM5IDQuMTY5MSAzMy42NDA5IDQuNjAwMSAzNS4wMjQ5IDUuOTY5MUMzNS45MjI5IDYuODc0MSAzNi40MjA5IDcuOTUyMSAzNi40MjA5IDguODI1MVoiIGZpbGw9IiM0Qzk3RkYiLz4KPHBhdGggZD0iTTM2LjQyMDkgOC44MjUxQzM2LjQyMDkgOS4yODgxIDM2LjI3OTkgOS42OTgxIDM1Ljk4NzkgOS45ODkxTDI2LjY1MjkgMTkuMjkwMUMyNi45MzQ5IDE4Ljk5OTEgMjcuMDYzOSAxOC42MjIxIDI3LjA2MzkgMTguMTY5MUMyNy4wNjM5IDE3LjI5NjEgMjYuNTU1OSAxNi4yMDcxIDI1LjY1NjkgMTUuMzAyMUMyNC4yOTQ5IDEzLjk0NDEgMjIuNTA5OSAxMy41MDIxIDIxLjY1NDkgMTQuMzExMUwzMC45ODk5IDUuMDEwMUMzMS44MzM5IDQuMTY5MSAzMy42NDA5IDQuNjAwMSAzNS4wMjQ5IDUuOTY5MUMzNS45MjI5IDYuODc0MSAzNi40MjA5IDcuOTUyMSAzNi40MjA5IDguODI1MSIgc3Ryb2tlPSIjMEI4RTY5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC41MTQ2IDMzLjc3MzlDOS45NDE2IDM0LjA3NTkgOS4zNTc2IDM0LjM0NDkgOC43NTA2IDM0LjYwMzlMNC40OTk2IDM2LjM4MTlMNi4yODU2IDMyLjE0NjlDNi41NDM2IDMxLjU0MjkgNi44MTQ2IDMwLjk2MDkgNy4xMTg2IDMwLjM4OTlDNy44MDk2IDMwLjU3MjkgOC41Njc2IDMxLjAxNDkgOS4yMjc2IDMxLjY3MTlDOS44ODY2IDMyLjMyOTkgMTAuMzI5NiAzMy4wODM5IDEwLjUxNDYgMzMuNzczOVoiIGZpbGw9IiM0Qzk3RkYiLz4KPHBhdGggZD0iTTEwLjUxNDYgMzMuNzczOUM5Ljk0MTYgMzQuMDc1OSA5LjM1NzYgMzQuMzQ0OSA4Ljc1MDYgMzQuNjAzOUw0LjQ5OTYgMzYuMzgxOUw2LjI4NTYgMzIuMTQ2OUM2LjU0MzYgMzEuNTQyOSA2LjgxNDYgMzAuOTYwOSA3LjExODYgMzAuMzg5OUM3LjgwOTYgMzAuNTcyOSA4LjU2NzYgMzEuMDE0OSA5LjIyNzYgMzEuNjcxOUM5Ljg4NjYgMzIuMzI5OSAxMC4zMjk2IDMzLjA4MzkgMTAuNTE0NiAzMy43NzM5IiBzdHJva2U9IiMwQjhFNjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZyBvcGFjaXR5PSIwLjE1Ij4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zNi40OTggOC43NDg1QzM2LjQ5OCA5LjIxMTUgMzYuMzU3IDkuNjIxNSAzNi4wNjUgOS45MTI1TDE2LjMyMyAyOS41OTI1QzE0LjE5MiAzMS43MDQ1IDExLjY1IDMzLjM4NTUgOC43NTEgMzQuNjAzNUw0LjUgMzYuMzgxNUw1LjQ3NCAzNC4wNjQ1TDcuMzk5IDMzLjI1NjVDMTAuMjk4IDMyLjAzODUgMTIuODQgMzAuMzU3NSAxNC45NzEgMjguMjQ1NUwzNC43MTMgOC41NjU1QzM1LjAwNSA4LjI3NDUgMzUuMTQ1IDcuODY0NSAzNS4xNDUgNy40MDE1QzM1LjE0NSA2Ljc1NDUgMzQuODc1IDYuMDAwNSAzNC4zNjYgNS4yNzg1QzM0LjYxNSA1LjQ1MDUgMzQuODY0IDUuNjU1NSAzNS4xMDIgNS44OTI1QzM2IDYuNzk3NSAzNi40OTggNy44NzU1IDM2LjQ5OCA4Ljc0ODVaIiBmaWxsPSIjMEI4RTY5Ii8+CjxwYXRoIGQ9Ik0zNi40OTggOC43NDg1QzM2LjQ5OCA5LjIxMTUgMzYuMzU3IDkuNjIxNSAzNi4wNjUgOS45MTI1TDE2LjMyMyAyOS41OTI1QzE0LjE5MiAzMS43MDQ1IDExLjY1IDMzLjM4NTUgOC43NTEgMzQuNjAzNUw0LjUgMzYuMzgxNUw1LjQ3NCAzNC4wNjQ1TDcuMzk5IDMzLjI1NjVDMTAuMjk4IDMyLjAzODUgMTIuODQgMzAuMzU3NSAxNC45NzEgMjguMjQ1NUwzNC43MTMgOC41NjU1QzM1LjAwNSA4LjI3NDUgMzUuMTQ1IDcuODY0NSAzNS4xNDUgNy40MDE1QzM1LjE0NSA2Ljc1NDUgMzQuODc1IDYuMDAwNSAzNC4zNjYgNS4yNzg1QzM0LjYxNSA1LjQ1MDUgMzQuODY0IDUuNjU1NSAzNS4xMDIgNS44OTI1QzM2IDYuNzk3NSAzNi40OTggNy44NzU1IDM2LjQ5OCA4Ljc0ODUiIHN0cm9rZT0iIzBCOEU2OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC40NTAyIDEyLjgzMUMxOC40NTAyIDEzLjMzIDE4LjA0NjIgMTMuNzM1IDE3LjU0NjIgMTMuNzM1QzE3LjA0NzIgMTMuNzM1IDE2LjY0MTIgMTMuMzMgMTYuNjQxMiAxMi44MzFDMTYuNjQxMiAxMi4zMzEgMTcuMDQ3MiAxMS45MjcgMTcuNTQ2MiAxMS45MjdDMTguMDQ2MiAxMS45MjcgMTguNDUwMiAxMi4zMzEgMTguNDUwMiAxMi44MzFaIiBmaWxsPSIjMEI4RTY5IiBzdHJva2U9IiMwQjhFNjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K'
+    },
+    text2speech: {
+        // eslint-disable-next-line max-len
+        blockIconURI: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDIxLjY2OTNWMzQuMjgzNEMxNiAzNS44MTUxIDE0IDM2LjUzNTkgMTIuOCAzNS41NDQ4TDEwLjIgMzMuMzgyNEM5LjIgMzIuNTcxNSA4IDMyLjIxMTEgNi43IDMyLjIxMTFINi4zQzUgMzIuMjExMSA0IDMxLjMxMDEgNCAzMC4xMzg4VjI1LjkwNDFDNCAyNC43MzI4IDUgMjMuODMxOCA2LjMgMjMuODMxOEg2LjdDOCAyMy44MzE4IDkuMiAyMy4zODEzIDEwLjEgMjIuNjYwNEwxMi44IDIwLjQ5OEMxNCAxOS40MTY4IDE2IDIwLjIyNzcgMTYgMjEuNjY5M1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yNCA0QzE5LjU4MTcgNCAxNiA3LjU4MTcyIDE2IDEyQzE2IDE1LjExNDcgMTcuNzc5OSAxNy44MTM2IDIwLjM3ODEgMTkuMTM1MUMyMC4yMDk1IDIwLjkwODcgMTkuNjU2NCAyMS42NjU1IDE5LjMwNDIgMjIuMTQ3M0MxOS4xMjY1IDIyLjM5MDQgMTkgMjIuNTYzNSAxOSAyMi43NjE5QzE5IDIzLjQyODYgMTkuNjY2NyAyMy40Mjg2IDE5LjY2NjcgMjMuNDI4NkMyMC42MTMyIDIzLjQyODYgMjMuNTgxMyAyMi4yNjIzIDI1LjQwOTcgMjBIMjhDMzIuNDE4MyAyMCAzNiAxNi40MTgzIDM2IDEyQzM2IDcuNTgxNzIgMzIuNDE4MyA0IDI4IDRIMjRaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMEI4RTY5Ii8+Cjwvc3ZnPgo='
+    },
+    translate: {
+        // eslint-disable-next-line max-len
+        blockIconURI: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggNUM1Ljc5MDg2IDUgNCA2Ljc5MDg2IDQgOVYxN0M0IDE5LjIwOTEgNS43OTA4NiAyMSA4IDIxSDguMjUyNzdDOC4wMTY0OCAyMi4xNzI4IDcuNTkyODMgMjIuNzUyNCA3LjMwNDIzIDIzLjE0NzNDNy4xMjY1MSAyMy4zOTA0IDcgMjMuNTYzNSA3IDIzLjc2MTlDNyAyNC40Mjg2IDcuNjY2NjcgMjQuNDI4NiA3LjY2NjY3IDI0LjQyODZDOC42MTMyNCAyNC40Mjg2IDExLjU4MTMgMjMuMjYyMyAxMy40MDk3IDIxSDIwQzIyLjIwOTEgMjEgMjQgMTkuMjA5MSAyNCAxN1Y5QzI0IDYuNzkwODYgMjIuMjA5MSA1IDIwIDVIOFoiIGZpbGw9IndoaXRlIiBzdHJva2U9IiMwQjhFNjkiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy40MjE4IDcuOTEzMDJDMTMuNTUyMSA3LjgwMTUzIDEzLjcyMzkgNy43NSAxMy45MDY3IDcuNzVDMTQuMDkyOCA3Ljc1IDE0LjI2NyA3LjgwMDM2IDE0LjM5OTQgNy45MTE1QzE0LjUzNTQgOC4wMjU2MSAxNC42MDY3IDguMTg3NDggMTQuNjA2NyA4LjM2MjE2VjkuNTI4NDFIMTguNzAzNkMxOC44Nzk5IDkuNTI4NDEgMTkuMDI3MiA5LjYxMDE3IDE5LjEyMjkgOS43Mzk1N0MxOS4yMTM0IDkuODYyMDEgMTkuMjUgMTAuMDE0NiAxOS4yNSAxMC4xNjI2QzE5LjI1IDEwLjMxMzYgMTkuMjE0NyAxMC40NzAyIDE5LjEyOTMgMTAuNTk3MUMxOS4wMzk1IDEwLjczMDYgMTguODkyNyAxMC44Mjk3IDE4LjcwMzYgMTAuODI5N0gxNy4xMDEyQzE2LjY2MDggMTIuMjgwMiAxNS45NDgyIDEzLjYzODEgMTQuOTI3IDE0Ljc4MTlDMTUuMDYwNiAxNC44OTE2IDE1LjE4OSAxNC45OTIxIDE1LjMyMTMgMTUuMDgyNkwxNS4zMjc5IDE1LjA4NzFDMTYuMzIxOSAxNS44MTQgMTcuNTQ3MiAxNi4zODUgMTguNzM1MSAxNi43NjI5QzE5LjAzOTUgMTYuODU5IDE5LjIyODIgMTcuMTAzNiAxOS4yMjgyIDE3LjQwNzNDMTkuMjI4MiAxNy40OTM2IDE5LjIxMTIgMTcuNTc3IDE5LjE4MDYgMTcuNjU2MUMxOS4xMzIgMTcuODA1NSAxOS4wNTU1IDE3LjkzNDUgMTguOTQyOCAxOC4wMjY1QzE4LjgyNTEgMTguMTIyNiAxOC42ODc0IDE4LjE2MjQgMTguNTUgMTguMTYyNEMxOC40NDgxIDE4LjE2MjQgMTguMzQyNyAxOC4xNDc3IDE4LjIyNiAxOC4xMDQ3QzE2Ljc5OTcgMTcuNjM1OSAxNS41Nzc3IDE3LjAyMDEgMTQuNDMzIDE2LjEyMjVMMTQuNDMwOSAxNi4xMjA4QzE0LjQxNDIgMTYuMTA3NCAxNC4zOTc1IDE2LjA5NDEgMTQuMzgwOSAxNi4wODA3QzE0LjIzOTEgMTUuOTY3MyAxNC4wOTc1IDE1Ljg1MzggMTMuOTU5MiAxNS43MzM1QzEzLjgwNTUgMTUuODY1NyAxMy42NTIyIDE1Ljk4OTggMTMuNDg2NyAxNi4xMTQxQzEyLjI3NzIgMTcuMDMyMyAxMS4xMjMgMTcuNjAyNyA5Ljc0NTUgMTguMTEzOUw5LjczODE3IDE4LjExNjZDOS42NDc4MSAxOC4xNDcgOS41NTQ4NiAxOC4xNjI0IDkuNDYxMTIgMTguMTYyNEM5LjMxOTgyIDE4LjE2MjQgOS4xNzk5MSAxOC4xMjY3IDkuMDU4NTggMTguMDQyQzguOTM4MDggMTcuOTU3OSA4Ljg1MjUxIDE3LjgzNzIgOC43OTk0NyAxNy42OTQ1QzguNzY3MjYgMTcuNjEzIDguNzUgMTcuNTI3OCA4Ljc1IDE3LjQ0MDJDOC43NSAxNy4xMjA3IDguOTc2NDEgMTYuODkyMSA5LjIzODg0IDE2Ljc5MDNMOS4yNDk0OSAxNi43ODYyQzEwLjQ2NzkgMTYuMzc2NSAxMS42MTQgMTUuODUxNSAxMi44Nzk3IDE0Ljg2NkMxMi45MTQ5IDE0LjgzNSAxMi45NTA5IDE0LjgwNTUgMTIuOTg1NCAxNC43Nzc5QzExLjk4NDUgMTMuNjMzNyAxMS4yODM0IDEyLjI2ODkgMTAuODQ0MiAxMC44Mjk3SDkuMzA3NUM5LjExNjIyIDEwLjgyOTcgOC45NjY4NyAxMC43MzM2IDguODc1ODMgMTAuNTk0NkM4Ljc5MTQ0IDEwLjQ2NTcgOC43NjA4OCAxMC4zMDg3IDguNzYwODggMTAuMTYyNkM4Ljc2MDg4IDEwLjAxOTkgOC43OTIzNSA5Ljg2Njc0IDguODgyMSA5Ljc0MjEyQzguOTc5MDYgOS42MDc0OCA5LjEyOTEgOS41Mjg0MSA5LjMwNzUgOS41Mjg0MUgxMy4yMTc5VjguMzYyMTZDMTMuMjE3OSA4LjE4ODA1IDEzLjI4ODYgOC4wMjcgMTMuNDIxOCA3LjkxMzAyWk0xMi4yMzg2IDEwLjgyOTdDMTIuNjA5MSAxMS45MzE2IDEzLjIwNTYgMTIuOTU4OCAxMy45NjI2IDEzLjgzNzdDMTQuNzI1NyAxMi45NTkzIDE1LjMwNTEgMTEuOTM4OSAxNS42NDkzIDEwLjgyOTdIMTIuMjM4NloiIGZpbGw9IiM0Qzk3RkYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAxNkMzNC4yMDkxIDE2IDM2IDE3Ljc5MDkgMzYgMjBWMjhDMzYgMzAuMjA5MSAzNC4yMDkxIDMyIDMyIDMySDMxLjc0NzJDMzEuOTgzNSAzMy4xNzI4IDMyLjQwNzIgMzMuNzUyNCAzMi42OTU4IDM0LjE0NzNDMzIuODczNSAzNC4zOTA0IDMzIDM0LjU2MzUgMzMgMzQuNzYxOUMzMyAzNS40Mjg2IDMyLjMzMzMgMzUuNDI4NiAzMi4zMzMzIDM1LjQyODZDMzEuMzg2OCAzNS40Mjg2IDI4LjQxODcgMzQuMjYyMyAyNi41OTAzIDMySDIwQzE3Ljc5MDkgMzIgMTYgMzAuMjA5MSAxNiAyOFYyMEMxNiAxNy43OTA5IDE3Ljc5MDkgMTYgMjAgMTZIMzJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzEuNzQ3MiAzMkwzMS4yNTcxIDMyLjA5ODhMMzEuMTM2NCAzMS41SDMxLjc0NzJWMzJaTTMyLjY5NTggMzQuMTQ3M0wzMy4wOTk0IDMzLjg1MjJIMzMuMDk5NEwzMi42OTU4IDM0LjE0NzNaTTI2LjU5MDMgMzJWMzEuNUgyNi44MjkxTDI2Ljk3OTIgMzEuNjg1N0wyNi41OTAzIDMyWk0zNS41IDIwQzM1LjUgMTguMDY3IDMzLjkzMyAxNi41IDMyIDE2LjVWMTUuNUMzNC40ODUzIDE1LjUgMzYuNSAxNy41MTQ3IDM2LjUgMjBIMzUuNVpNMzUuNSAyOFYyMEgzNi41VjI4SDM1LjVaTTMyIDMxLjVDMzMuOTMzIDMxLjUgMzUuNSAyOS45MzMgMzUuNSAyOEgzNi41QzM2LjUgMzAuNDg1MyAzNC40ODUzIDMyLjUgMzIgMzIuNVYzMS41Wk0zMS43NDcyIDMxLjVIMzJWMzIuNUgzMS43NDcyVjMxLjVaTTMyLjI5MjEgMzQuNDQyM0MzMS45ODM4IDM0LjAyMDYgMzEuNTEzOCAzMy4zNzI3IDMxLjI1NzEgMzIuMDk4OEwzMi4yMzc0IDMxLjkwMTJDMzIuNDUzMyAzMi45NzI5IDMyLjgzMDUgMzMuNDg0MyAzMy4wOTk0IDMzLjg1MjJMMzIuMjkyMSAzNC40NDIzWk0zMi41IDM0Ljc2MTlDMzIuNSAzNC43NzU1IDMyLjUwNjEgMzQuNzY2NiAzMi40NzU4IDM0LjcxMTNDMzIuNDQxIDM0LjY0NzUgMzIuMzg2OSAzNC41NzIxIDMyLjI5MjEgMzQuNDQyM0wzMy4wOTk0IDMzLjg1MjJDMzMuMTgyMyAzMy45NjU2IDMzLjI4MDQgMzQuMDk4MyAzMy4zNTMyIDM0LjIzMTVDMzMuNDMwNyAzNC4zNzMxIDMzLjUgMzQuNTUgMzMuNSAzNC43NjE5SDMyLjVaTTMyLjMzMzMgMzUuNDI4NkMzMi4zMzMzIDM0LjkyODYgMzIuMzMzMSAzNC45Mjg2IDMyLjMzMjkgMzQuOTI4NkMzMi4zMzI4IDM0LjkyODYgMzIuMzMyNSAzNC45Mjg2IDMyLjMzMjQgMzQuOTI4NkMzMi4zMzIxIDM0LjkyODYgMzIuMzMxOCAzNC45Mjg2IDMyLjMzMTUgMzQuOTI4NkMzMi4zMzA5IDM0LjkyODYgMzIuMzMwNCAzNC45Mjg2IDMyLjMyOTggMzQuOTI4NkMzMi4zMjg4IDM0LjkyODYgMzIuMzI3OSAzNC45Mjg2IDMyLjMyNzIgMzQuOTI4NkMzMi4zMjU3IDM0LjkyODYgMzIuMzI0NyAzNC45Mjg3IDLine truncated
+    },
+    videoSensing: {
+        // eslint-disable-next-line max-len
+        blockIconURI: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBvcGFjaXR5PSIwLjI1IiBjeD0iMzIiIGN5PSIyNiIgcj0iNCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzBCOEU2OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxjaXJjbGUgb3BhY2l0eT0iMC41IiBjeD0iMzIiIGN5PSIyMiIgcj0iNCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzBCOEU2OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxjaXJjbGUgb3BhY2l0eT0iMC43NSIgY3g9IjMyIiBjeT0iMTgiIHI9IjQiIGZpbGw9IndoaXRlIiBzdHJva2U9IiMwQjhFNjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIzMiIgY3k9IjE0IiByPSI0IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMEI4RTY5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3IDE3LjVMMjIuNCAxNEMyMi45IDEzLjcgMjMuNSAxMy44IDIzLjggMTQuM0MyMy45IDE0LjUgMjQgMTQuNyAyNCAxNC44VjI1LjFDMjQgMjUuNyAyMy41IDI2LjEgMjMgMjYuMUMyMi44IDI2LjEgMjIuNiAyNiAyMi41IDI1LjlMMTcgMjIuNlYyNEMxNyAyNi4yIDE1LjIgMjguMSAxMyAyOC4xSDQuMUMxLjggMjggMCAyNi4yIDAgMjRWMTYuMUMwIDEzLjggMS44IDEyIDQuMSAxMkgxM0MxNS4yIDEyIDE3IDEzLjggMTcgMTYuMVYxNy41WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg=='
+    }
+};
+
+export {
+    blockColors,
+    extensions
+};

src/lib/themes/index.js

@@ -1,9 +1,15 @@
 import defaultsDeep from 'lodash.defaultsdeep';
 import {defineMessages} from 'react-intl';
 
-import darkMode from './dark-mode';
-import highContrast from './high-contrast';
-import defaultColors from './default-colors';
+import {
+    blockColors as darkModeBlockColors,
+    extensions as darkModeExtensions
+} from './dark-mode';
+import {
+    blockColors as highContrastBlockColors,
+    extensions as highContrastExtensions
+} from './high-contrast';
+import {blockColors as defaultColors} from './default-colors';
 
 import defaultIcon from './standard.svg';
 import highContrastIcon from './high-contrast.svg';
@@ -34,16 +40,22 @@ const messages = defineMessages({
 
 const themeMap = {
     [DEFAULT_THEME]: {
+        blocksMediaFolder: 'blocks-media',
         colors: defaultColors,
+        extensions: {},
         label: messages[DEFAULT_THEME],
         icon: defaultIcon
     },
     [DARK_THEME]: {
-        colors: mergeWithDefaults(darkMode),
+        blocksMediaFolder: 'blocks-media',
+        colors: mergeWithDefaults(darkModeBlockColors),
+        extensions: darkModeExtensions,
         label: messages[DARK_THEME]
     },
     [HIGH_CONTRAST_THEME]: {
-        colors: mergeWithDefaults(highContrast),
+        blocksMediaFolder: 'blocks-media-high-contrast',
+        colors: mergeWithDefaults(highContrastBlockColors),
+        extensions: highContrastExtensions,
         label: messages[HIGH_CONTRAST_THEME],
         icon: highContrastIcon
     }

static/blocks-media-high-contrast/comment-arrow-down.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="-4.5 -6 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>dropdown-caret-up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="dropdown-caret-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M6,9 C5.72520708,9 5.45163006,8.89695045 5.24127973,8.68965311 L2.31461357,5.80666227 C1.89512881,5.39326583 1.89512881,4.72464202 2.31461357,4.31004733 C2.73288244,3.89665089 9.26711756,3.89665089 9.68538643,4.31004733 C10.1048712,4.72344377 10.1048712,5.39326583 9.68538643,5.80666227 L6.75993617,8.68965311 C6.54958583,8.89695045 6.27600882,9 6,9" id="dropdown-caret" fill="#000000"></path>
+    </g>
+</svg>

static/blocks-media-high-contrast/comment-arrow-up.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="-4.5 -6 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>dropdown-caret-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="dropdown-caret-down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M6,9 C5.72520708,9 5.45163006,8.89695045 5.24127973,8.68965311 L2.31461357,5.80666227 C1.89512881,5.39326583 1.89512881,4.72464202 2.31461357,4.31004733 C2.73288244,3.89665089 9.26711756,3.89665089 9.68538643,4.31004733 C10.1048712,4.72344377 10.1048712,5.39326583 9.68538643,5.80666227 L6.75993617,8.68965311 C6.54958583,8.89695045 6.27600882,9 6,9" id="dropdown-caret" fill="#000000" transform="translate(6.000000, 6.500000) scale(1, -1) translate(-6.000000, -6.500000) "></path>
+    </g>
+</svg>

static/blocks-media-high-contrast/delete-x.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="-14 -10 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>delete-x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="delete-x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.8761123,10.87825 C10.2421123,11.52125 9.20511231,11.52125 8.56211231,10.87825 L5.92911231,8.24525 L3.29511231,10.87825 C2.65611231,11.51725 1.62011231,11.51725 0.981112306,10.87825 C0.662112306,10.55925 0.500112306,10.13725 0.500112306,9.72125 C0.500112306,9.30425 0.662112306,8.88325 0.981112306,8.56425 L3.61411231,5.93125 L0.977112306,3.29325 C0.657112306,2.97325 0.495112306,2.55225 0.500112306,2.13125 C0.500112306,1.71425 0.657112306,1.29825 0.977112306,0.97925 C1.61511231,0.34025 2.65111231,0.34025 3.29111231,0.97925 L5.92911231,3.61625 L8.56611231,0.97925 C9.20511231,0.34025 10.2421123,0.34025 10.8811123,0.97925 C11.5201123,1.61725 11.5201123,2.65425 10.8811123,3.29325 L8.24211231,5.93125 L10.8811123,8.56825 C11.5201123,9.20725 11.5201123,10.23425 10.8761123,10.87825" id="Fill-1" fill="#000000"></path>
+    </g>
+</svg>

static/blocks-media-high-contrast/dropdown-arrow.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#000"/></svg>

static/blocks-media-high-contrast/eyedropper.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard">
+            <g id="Eye-Dropper---Inactive" transform="translate(5.000000, 1.000000)">
+                <g id="stage" transform="translate(0.000000, 9.800000)" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M11.2266846,0 L12.6666667,0 C13.4,0 14,0.66442953 14,1.47651007 L14,9.52348993 C14,10.3355705 13.4,11 12.6666667,11 L1.33333333,11 C0.6,11 0,10.3355705 0,9.52348993 L0,1.47651007 C0,0.66442953 0.6,0 1.33333333,0 L6.2845459,0" id="Shape"></path>
+                    <path d="M13.9336493,7.6602179 L11.1469194,4.91112699 C10.7488152,4.51839972 10.0853081,4.45294517 9.62085308,4.84567245 L6.17061611,7.52930881 C5.63981043,7.92203608 4.90995261,7.85658154 4.51184834,7.33294517 L4.18009479,6.9402179 C3.78199052,6.41658154 2.98578199,6.35112699 2.52132701,6.74385426 L0,8.77294517 L0,9.36203608 C0,10.0165815 0.530805687,10.5402179 1.1943128,10.5402179 L12.8056872,10.5402179 C13.4691943,10.5402179 14,10.0165815 14,9.36203608 L14,7.6602179 L13.9336493,7.6602179 Z" id="Shape" fill="#000000"></path>
+                </g>
+                <g id="eye-dropper" transform="translate(5.000000, 0.000000)">
+                    <path d="M1.04929697,12.6007661 L0.732569697,12.2840388 C0.557660606,12.1107055 0.543478788,11.8050085 0.693175758,11.4835539 L1.46372121,9.83531152 C1.63390303,9.46658424 1.9916,9.14985697 2.35717576,9.03797818 C2.80941818,8.90246303 3.23014545,8.46125091 3.3325697,8.01373576 L3.36408485,7.87979636 C3.41608485,7.65288727 3.55317576,7.41652364 3.7485697,7.22270545 L8.05038788,2.91931152 C8.46481212,2.50646303 9.01632727,2.38670545 9.2826303,2.65458424 L10.6803273,4.05228121 C10.9466303,4.31858424 10.8284485,4.86852364 10.4140242,5.28137212 L6.11220606,9.58476606 C5.91681212,9.78016 5.68044848,9.91882667 5.45353939,9.97082667 L5.3196,10.0023418 C4.87366061,10.1047661 4.43087273,10.5254933 4.29693333,10.97616 C4.18505455,11.3433115 3.86832727,11.6994327 3.4996,11.8711903 L1.85135758,12.64016 C1.52990303,12.789857 1.2226303,12.7756752 1.04929697,12.6007661 Z" id="Stroke-6" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M10.1021818,6.29994182 L7.03418182,3.23194182 C6.71587879,2.91363879 6.71587879,2.39521455 7.03418182,2.07691152 L7.63454545,1.47654788 C7.95442424,1.15824485 8.46969697,1.15824485 8.78957576,1.47654788 L11.8575758,4.54454788 C12.1758788,4.86285091 12.1758788,5.38127515 11.8575758,5.69957818 L11.2556364,6.29994182 C10.9373333,6.61982061 10.4204848,6.61982061 10.1021818,6.29994182" id="Fill-1" fill="#000000"></path>
+                    <path d="M8.66036364,2.91757818 L10.8207273,0.757214545 C11.3060606,0.271881212 12.0923636,0.271881212 12.5761212,0.757214545 C13.0614545,1.24254788 13.0614545,2.02885091 12.5761212,2.51260848 L10.4157576,4.67297212 C9.932,5.1567297 9.14569697,5.1567297 8.66036364,4.67297212 C8.1750303,4.18763879 8.1750303,3.40291152 8.66036364,2.91757818" id="Fill-3" fill="#000000"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/blocks-media-high-contrast/icons/arrow_button.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" enable-background="new 0 0 32 32"><style>.st2{fill:#000}</style><g id="Tutorials_x2F_Navigation_x2F_Next"><defs></defs><g><path id="path-1_1_" class="st2" d="M23 16.7L18.7 21c-.4.3-.9.4-1.3.2s-.7-.6-.7-1.1v-1.6l-6-.8c-1-.1-1.7-.9-1.7-1.9v-.2c.1-.9.8-1.5 1.6-1.6l6-.9v-1.6c0-.5.3-.9.7-1.1.4-.2.9-.1 1.3.3L23 15c.2.2.3.5.3.8l-.3.9z"/></g><g id="Color_x2F_White" mask="url(#mask-2_1_)"></g></g></svg>

static/blocks-media-high-contrast/repeat.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="repeat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st1{fill:#000000;}
+</style>
+<title>repeat</title>
+<path class="st1" d="M21.8,11h-2.6c0,1.5-0.3,2.9-1,4.2c-0.8,1.6-2.1,2.8-3.7,3.6c-1.5,0.8-3.3,1.1-4.9,0.8c-1.6-0.2-3.2-1-4.4-2.1
+	c-0.4-0.3-0.4-0.9-0.1-1.2c0.3-0.4,0.9-0.4,1.2-0.1l0,0c1,0.7,2.2,1.1,3.4,1.1s2.3-0.3,3.3-1c0.9-0.6,1.6-1.5,2-2.6
+	c0.3-0.9,0.4-1.8,0.2-2.8h-2.4c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.3,0.2-0.4l4.4-4.4c0.3-0.3,0.7-0.3,0.9,0L22,9.8
+	c0.3,0.3,0.4,0.6,0.3,0.9S22,11,21.8,11z"/>
+</svg>

static/blocks-media-high-contrast/rotate-left.svg

@@ -0,0 +1 @@
+<svg id="rotate-clockwise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#3d79cc;}.cls-2{fill:#000;}</style></defs><title>rotate-clockwise</title><path class="cls-2" d="M19.56,17.65a9.29,9.29,0,0,1-7.35,3.83,1.31,1.31,0,0,1-.08-2.62,6.53,6.53,0,0,0,5-2.92,6.05,6.05,0,0,0,.67-5.51,5.32,5.32,0,0,0-1.64-2.16,5.21,5.21,0,0,0-2.48-1A5.86,5.86,0,0,0,9,8.84L10.74,11a.59.59,0,0,1-.43,1H2.7a.6.6,0,0,1-.6-.75L3.81,3.83a.59.59,0,0,1,1-.21l1.67,2.1a9.71,9.71,0,0,1,7.75-2.07,8.84,8.84,0,0,1,4.12,1.92,8.68,8.68,0,0,1,2.54,3.72A9.14,9.14,0,0,1,19.56,17.65Z"/></svg>

static/blocks-media-high-contrast/rotate-right.svg

@@ -0,0 +1 @@
+<svg id="rotate-counter-clockwise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#000;}.cls-2{fill:#000;}</style></defs><title>rotate-counter-clockwise</title><path class="cls-2" d="M21.38,11.83H13.77a.59.59,0,0,1-.43-1l1.75-2.19a5.9,5.9,0,0,0-4.7-1.58,5.07,5.07,0,0,0-4.11,3.17A6,6,0,0,0,7,15.77a6.51,6.51,0,0,0,5,2.92,1.31,1.31,0,0,1-.08,2.62,9.3,9.3,0,0,1-7.35-3.82A9.16,9.16,0,0,1,3.17,9.12,8.51,8.51,0,0,1,5.71,5.4,8.76,8.76,0,0,1,9.82,3.48a9.71,9.71,0,0,1,7.75,2.07l1.67-2.1a.59.59,0,0,1,1,.21L22,11.08A.59.59,0,0,1,21.38,11.83Z"/></svg>

static/blocks-media-high-contrast/zoom-in.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 19C1 9.05888 9.05888 1 19 1C28.9411 1 37 9.05888 37 19C37 28.9411 28.9411 37 19 37C9.05888 37 1 28.9411 1 19Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 29C13.4772 29 9 24.5228 9 19C9 13.4772 13.4772 9 19 9C24.5228 9 29 13.4772 29 19C29 24.5228 24.5228 29 19 29ZM19 27.0645C23.4539 27.0645 27.0645 23.4539 27.0645 19C27.0645 14.5461 23.4539 10.9355 19 10.9355C14.546 10.9355 10.9354 14.5461 10.9354 19C10.9354 23.4539 14.546 27.0645 19 27.0645ZM18.0322 16.4194C18.0322 15.8849 18.4655 15.4516 19 15.4516C19.5344 15.4516 19.9677 15.8849 19.9677 16.4194V18.0323H21.5806C22.1151 18.0323 22.5483 18.4655 22.5483 19C22.5483 19.5345 22.1151 19.9678 21.5806 19.9678H19.9677V21.5807C19.9677 22.1151 19.5344 22.5484 19 22.5484C18.4655 22.5484 18.0322 22.1151 18.0322 21.5807V19.9678H16.4193C15.8848 19.9678 15.4516 19.5345 15.4516 19C15.4516 18.4655 15.8848 18.0323 16.4193 18.0323H18.0322V16.4194Z" fill="black"/>
+<path d="M19 36.5C9.33502 36.5 1.5 28.665 1.5 19H0.5C0.5 29.2173 8.78273 37.5 19 37.5V36.5ZM36.5 19C36.5 28.665 28.665 36.5 19 36.5V37.5C29.2173 37.5 37.5 29.2173 37.5 19H36.5ZM19 1.5C28.665 1.5 36.5 9.33502 36.5 19H37.5C37.5 8.78273 29.2173 0.5 19 0.5V1.5ZM19 0.5C8.78273 0.5 0.5 8.78273 0.5 19H1.5C1.5 9.33502 9.33502 1.5 19 1.5V0.5Z" fill="black" fill-opacity="0.15"/>
+</svg>

static/blocks-media-high-contrast/zoom-out.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 19C1 9.05888 9.05888 1 19 1C28.9411 1 37 9.05888 37 19C37 28.9411 28.9411 37 19 37C9.05888 37 1 28.9411 1 19Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 29C13.4772 29 9 24.5228 9 19C9 13.4772 13.4772 9 19 9C24.5228 9 29 13.4772 29 19C29 24.5228 24.5228 29 19 29ZM16.4193 19.9678C15.8848 19.9678 15.4516 19.5345 15.4516 19C15.4516 18.4655 15.8848 18.0323 16.4193 18.0323H21.5806C22.1151 18.0323 22.5483 18.4655 22.5483 19C22.5483 19.5345 22.1151 19.9678 21.5806 19.9678H16.4193ZM27.0645 19C27.0645 23.4539 23.4539 27.0645 19 27.0645C14.546 27.0645 10.9354 23.4539 10.9354 19C10.9354 14.5461 14.546 10.9355 19 10.9355C23.4539 10.9355 27.0645 14.5461 27.0645 19Z" fill="black"/>
+<path d="M19 36.5C9.33502 36.5 1.5 28.665 1.5 19H0.5C0.5 29.2173 8.78273 37.5 19 37.5V36.5ZM36.5 19C36.5 28.665 28.665 36.5 19 36.5V37.5C29.2173 37.5 37.5 29.2173 37.5 19H36.5ZM19 1.5C28.665 1.5 36.5 9.33502 36.5 19H37.5C37.5 8.78273 29.2173 0.5 19 0.5V1.5ZM19 0.5C8.78273 0.5 0.5 8.78273 0.5 19H1.5C1.5 9.33502 9.33502 1.5 19 1.5V0.5Z" fill="black" fill-opacity="0.15"/>
+</svg>

static/blocks-media-high-contrast/zoom-reset.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 19C1 9.05888 9.05888 1 19 1C28.9411 1 37 9.05888 37 19C37 28.9411 28.9411 37 19 37C9.05888 37 1 28.9411 1 19Z" fill="white"/>
+<path d="M14.1613 16.4194C14.1613 16.9539 14.5945 17.3871 15.129 17.3871H22.8709C23.4054 17.3871 23.8387 16.9539 23.8387 16.4194C23.8387 15.8849 23.4054 15.4517 22.8709 15.4517H15.129C14.5945 15.4517 14.1613 15.8849 14.1613 16.4194Z" fill="black"/>
+<path d="M14.1613 21.5807C14.1613 22.1152 14.5945 22.5484 15.129 22.5484H22.8709C23.4054 22.5484 23.8387 22.1152 23.8387 21.5807C23.8387 21.0462 23.4054 20.613 22.8709 20.613H15.129C14.5945 20.613 14.1613 21.0462 14.1613 21.5807Z" fill="black"/>
+<path d="M19 36.5C9.33502 36.5 1.5 28.665 1.5 19H0.5C0.5 29.2173 8.78273 37.5 19 37.5V36.5ZM36.5 19C36.5 28.665 28.665 36.5 19 36.5V37.5C29.2173 37.5 37.5 29.2173 37.5 19H36.5ZM19 1.5C28.665 1.5 36.5 9.33502 36.5 19H37.5C37.5 8.78273 29.2173 0.5 19 0.5V1.5ZM19 0.5C8.78273 0.5 0.5 8.78273 0.5 19H1.5C1.5 9.33502 9.33502 1.5 19 1.5V0.5Z" fill="black" fill-opacity="0.15"/>
+</svg>

test/unit/util/themes.test.js

@@ -5,7 +5,7 @@ import {
     getColorsForTheme,
     HIGH_CONTRAST_THEME
 } from '../../../src/lib/themes';
-import {injectExtensionBlockColors, injectExtensionCategoryColors} from '../../../src/lib/themes/blockHelpers';
+import {injectExtensionBlockTheme, injectExtensionCategoryTheme} from '../../../src/lib/themes/blockHelpers';
 import {detectTheme, persistTheme} from '../../../src/lib/themes/themePersistance';
 
 jest.mock('../../../src/lib/themes/default-colors');
@@ -49,7 +49,7 @@ describe('themes', () => {
                 colourTertiary: '#0B8E69'
             };
 
-            const updated = injectExtensionBlockColors(blockInfoJson, DARK_THEME);
+            const updated = injectExtensionBlockTheme(blockInfoJson, DARK_THEME);
 
             expect(updated).toEqual({
                 type: 'dummy_block',
@@ -69,7 +69,7 @@ describe('themes', () => {
                 colourTertiary: '#0B8E69'
             };
 
-            const updated = injectExtensionBlockColors(blockInfoJson, DEFAULT_THEME);
+            const updated = injectExtensionBlockTheme(blockInfoJson, DEFAULT_THEME);
 
             expect(updated).toEqual({
                 type: 'dummy_block',
@@ -87,7 +87,7 @@ describe('themes', () => {
                 }
             ];
 
-            injectExtensionCategoryColors(dynamicBlockXML, DARK_THEME);
+            injectExtensionCategoryTheme(dynamicBlockXML, DARK_THEME);
 
             // XMLSerializer is not available outside the browser.
             // Verify the mocked XMLSerializer.serializeToString is called with updated colors.

webpack.config.js

@@ -171,6 +171,15 @@ module.exports = [
                     {
                         from: 'node_modules/scratch-blocks/media',
                         to: 'static/blocks-media'
+                    },
+                    {
+                        from: 'node_modules/scratch-blocks/media',
+                        to: 'static/blocks-media-high-contrast'
+                    },
+                    {
+                        from: 'static/blocks-media-high-contrast',
+                        to: 'static/blocks-media-high-contrast',
+                        force: true
                     }
                 ]
             }),