Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
13
scratch-gui/src/lib/themes/accent/blue.js
Normal file
13
scratch-gui/src/lib/themes/accent/blue.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const guiColors = {
|
||||
'looks-secondary': 'hsla(215, 100%, 65%, 1)',
|
||||
'looks-transparent': 'hsla(215, 100%, 65%, 0.35)',
|
||||
'looks-light-transparent': 'hsla(215, 100%, 65%, 0.15)',
|
||||
'looks-secondary-dark': 'hsla(215, 60%, 50%, 1)'
|
||||
};
|
||||
|
||||
const blockColors = {};
|
||||
|
||||
export {
|
||||
guiColors,
|
||||
blockColors
|
||||
};
|
||||
17
scratch-gui/src/lib/themes/accent/purple.js
Normal file
17
scratch-gui/src/lib/themes/accent/purple.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const guiColors = {
|
||||
'motion-primary': 'hsla(260, 60%, 60%, 1)',
|
||||
'motion-primary-transparent': 'hsla(260, 60%, 60%, 0.9)',
|
||||
'motion-tertiary': 'hsla(260, 42%, 51%, 1)',
|
||||
|
||||
'looks-secondary': 'hsla(260, 60%, 60%, 1)',
|
||||
'looks-transparent': 'hsla(260, 60%, 60%, 0.35)',
|
||||
'looks-light-transparent': 'hsla(260, 60%, 60%, 0.15)',
|
||||
'looks-secondary-dark': 'hsla(260, 42%, 51%, 1)'
|
||||
};
|
||||
|
||||
const blockColors = {};
|
||||
|
||||
export {
|
||||
guiColors,
|
||||
blockColors
|
||||
};
|
||||
29
scratch-gui/src/lib/themes/accent/rainbow.js
Normal file
29
scratch-gui/src/lib/themes/accent/rainbow.js
Normal file
@@ -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
|
||||
};
|
||||
27
scratch-gui/src/lib/themes/accent/red.js
Normal file
27
scratch-gui/src/lib/themes/accent/red.js
Normal file
@@ -0,0 +1,27 @@
|
||||
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'
|
||||
};
|
||||
|
||||
const blockColors = {
|
||||
checkboxActiveBackground: '#ff4c4c',
|
||||
checkboxActiveBorder: '#cc3333'
|
||||
};
|
||||
|
||||
export {
|
||||
guiColors,
|
||||
blockColors
|
||||
};
|
||||
126
scratch-gui/src/lib/themes/blockHelpers.js
Normal file
126
scratch-gui/src/lib/themes/blockHelpers.js
Normal file
@@ -0,0 +1,126 @@
|
||||
import {BLOCKS_THREE} from '.';
|
||||
|
||||
const getBlockIconURI = extensionIcons => {
|
||||
if (!extensionIcons) return null;
|
||||
|
||||
return extensionIcons.blockIconURI || extensionIcons.menuIconURI;
|
||||
};
|
||||
|
||||
const getCategoryIconURI = extensionIcons => {
|
||||
if (!extensionIcons) return null;
|
||||
|
||||
return extensionIcons.menuIconURI || extensionIcons.blockIconURI;
|
||||
};
|
||||
|
||||
// scratch-blocks colours has a pen property that scratch-gui uses for all extensions
|
||||
const getExtensionColors = theme => theme.getBlockColors().pen;
|
||||
|
||||
const DEFAULT_EXTENSION_PRIMARY = '#0fbd8c';
|
||||
|
||||
/**
|
||||
* Applies extension color theme to categories.
|
||||
* No changes are applied if called with the default theme, allowing extensions to provide their own colors.
|
||||
* These colors are not seen if the category provides a blockIconURI.
|
||||
* @param {Array.<object>} dynamicBlockXML - XML for each category of extension blocks, returned from getBlocksXML
|
||||
* in the vm runtime.
|
||||
* @param {Theme} theme - Theme name
|
||||
* @returns {Array.<object>} Dynamic block XML updated with colors.
|
||||
*/
|
||||
const injectExtensionCategoryTheme = (dynamicBlockXML, theme) => {
|
||||
// Minor optimization -- don't do anything at all for the default theme.
|
||||
if (theme.blocks === BLOCKS_THREE) return dynamicBlockXML;
|
||||
|
||||
const extensionColors = getExtensionColors(theme);
|
||||
const extensionIcons = theme.getExtensions();
|
||||
const parser = new DOMParser();
|
||||
const serializer = new XMLSerializer();
|
||||
|
||||
return dynamicBlockXML.map(extension => {
|
||||
const dom = parser.parseFromString(extension.xml, 'text/xml');
|
||||
|
||||
const primaryColor = dom.documentElement.getAttribute('colour');
|
||||
const usesCustomColors = primaryColor.toLowerCase() !== DEFAULT_EXTENSION_PRIMARY;
|
||||
if (usesCustomColors) {
|
||||
const converters = theme.getCustomExtensionColors();
|
||||
dom.documentElement.setAttribute('colour', converters.categoryIconBackground(primaryColor));
|
||||
dom.documentElement.setAttribute('secondaryColour', converters.categoryIconBorder(primaryColor));
|
||||
} else {
|
||||
dom.documentElement.setAttribute('colour', extensionColors.primary);
|
||||
// Note: the category's secondaryColour matches up with the blocks' tertiary color,
|
||||
// both used for border color.
|
||||
dom.documentElement.setAttribute('secondaryColour', extensionColors.tertiary);
|
||||
}
|
||||
|
||||
const categoryIconURI = getCategoryIconURI(extensionIcons[extension.id]);
|
||||
if (categoryIconURI) {
|
||||
dom.documentElement.setAttribute('iconURI', categoryIconURI);
|
||||
}
|
||||
|
||||
return {
|
||||
...extension,
|
||||
xml: serializer.serializeToString(dom)
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const injectBlockIcons = (blockInfoJson, theme) => {
|
||||
// Block icons are the first element of `args0`
|
||||
if (!blockInfoJson.args0 || blockInfoJson.args0.length < 1 ||
|
||||
blockInfoJson.args0[0].type !== 'field_image') return blockInfoJson;
|
||||
|
||||
const extensionIcons = theme.getExtensions();
|
||||
const extensionId = blockInfoJson.type.substring(0, blockInfoJson.type.indexOf('_'));
|
||||
const blockIconURI = getBlockIconURI(extensionIcons[extensionId]);
|
||||
|
||||
if (!blockIconURI) return blockInfoJson;
|
||||
|
||||
return {
|
||||
...blockInfoJson,
|
||||
args0: blockInfoJson.args0.map((value, index) => {
|
||||
if (index !== 0) return value;
|
||||
|
||||
return {
|
||||
...value,
|
||||
src: 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.
|
||||
* @param {object} blockInfoJson - Static block json
|
||||
* @param {Theme} theme - Theme name
|
||||
* @returns {object} Block info json with updated colors. The original blockInfoJson is not modified.
|
||||
*/
|
||||
const injectExtensionBlockTheme = (blockInfoJson, theme) => {
|
||||
// Minor optimization -- don't do anything at all for the default theme.
|
||||
if (theme.blocks === BLOCKS_THREE) return blockInfoJson;
|
||||
|
||||
if (!blockInfoJson.extensions?.includes('default_extension_colors')) {
|
||||
const converters = theme.getCustomExtensionColors();
|
||||
return {
|
||||
...blockInfoJson,
|
||||
colour: converters.primary(blockInfoJson.colour),
|
||||
colourSecondary: converters.secondary(blockInfoJson.colour),
|
||||
colourTertiary: converters.tertiary(blockInfoJson.colour),
|
||||
colourQuaternary: converters.quaternary(blockInfoJson.colour)
|
||||
};
|
||||
}
|
||||
|
||||
const extensionColors = getExtensionColors(theme);
|
||||
|
||||
return {
|
||||
...injectBlockIcons(blockInfoJson, theme),
|
||||
colour: extensionColors.primary,
|
||||
colourSecondary: extensionColors.secondary,
|
||||
colourTertiary: extensionColors.tertiary,
|
||||
colourQuaternary: extensionColors.quaternary
|
||||
};
|
||||
};
|
||||
|
||||
export {
|
||||
injectExtensionBlockTheme,
|
||||
injectExtensionCategoryTheme
|
||||
};
|
||||
101
scratch-gui/src/lib/themes/blocks/dark.js
Normal file
101
scratch-gui/src/lib/themes/blocks/dark.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import {hex2hsv, hsv2hex} from '../../tw-color-utils';
|
||||
|
||||
const blockColors = {
|
||||
motion: {
|
||||
primary: '#0F1E33',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#4C97FF',
|
||||
quaternary: '#4C97FF'
|
||||
},
|
||||
looks: {
|
||||
primary: '#1E1433',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#9966FF',
|
||||
quaternary: '#9966FF'
|
||||
},
|
||||
sounds: {
|
||||
primary: '#291329',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#CF63CF',
|
||||
quaternary: '#CF63CF'
|
||||
},
|
||||
control: {
|
||||
primary: '#332205',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#FFAB19',
|
||||
quaternary: '#FFAB19'
|
||||
},
|
||||
event: {
|
||||
primary: '#332600',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#FFBF00',
|
||||
quaternary: '#FFBF00'
|
||||
},
|
||||
sensing: {
|
||||
primary: '#12232A',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#5CB1D6',
|
||||
quaternary: '#5CB1D6'
|
||||
},
|
||||
pen: {
|
||||
primary: '#03251C',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#0fBD8C',
|
||||
quaternary: '#0fBD8C'
|
||||
},
|
||||
operators: {
|
||||
primary: '#112611',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#59C059',
|
||||
quaternary: '#59C059'
|
||||
},
|
||||
data: {
|
||||
primary: '#331C05',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#FF8C1A',
|
||||
quaternary: '#FF8C1A'
|
||||
},
|
||||
data_lists: {
|
||||
primary: '#331405',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#FF661A',
|
||||
quaternary: '#FF661A'
|
||||
},
|
||||
more: {
|
||||
primary: '#331419',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#FF6680',
|
||||
quaternary: '#FF6680'
|
||||
},
|
||||
addons: {
|
||||
primary: '#0b3331',
|
||||
secondary: '#4C4C4C',
|
||||
tertiary: '#34e4d0',
|
||||
quaternary: '#34e4d0'
|
||||
},
|
||||
text: 'rgba(255, 255, 255, .7)',
|
||||
textFieldText: '#E5E5E5',
|
||||
textField: '#4C4C4C',
|
||||
menuHover: 'rgba(255, 255, 255, 0.3)'
|
||||
};
|
||||
|
||||
const extensions = {};
|
||||
|
||||
const customExtensionColors = {
|
||||
primary: primary => {
|
||||
const hsv = hex2hsv(primary);
|
||||
hsv[2] = Math.max(hsv[2] - 70, 20);
|
||||
return hsv2hex(hsv);
|
||||
},
|
||||
secondary: () => '#4C4C4C',
|
||||
tertiary: primary => primary,
|
||||
quaternary: primary => primary,
|
||||
categoryIconBackground: primary => customExtensionColors.primary(primary),
|
||||
categoryIconBorder: primary => customExtensionColors.tertiary(primary)
|
||||
};
|
||||
|
||||
export {
|
||||
blockColors,
|
||||
extensions,
|
||||
customExtensionColors
|
||||
};
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 885 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 977 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 569 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 470 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 825 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 590 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 577 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.4338 30C29.513 30 31.6366 28.1569 31.179 25.874C28.2994 13.0436 27.4256 9.85134 27.9454 9.60547C28.3125 9.43183 29.3746 10.7276 30.9162 11.1359C34.6416 12.1126 40.2742 6.40751 34.5655 7.29186C32.3224 7.639 30.1587 6.23836 28.4879 5.15679C25.9072 3.4862 24.5024 2.57684 25.7974 10.0451C26.4349 13.7035 26.9697 16.3231 27.3475 18.1739C27.9957 21.3494 28.1819 22.2616 27.6325 22.2741C27.3321 22.152 27.0327 22.0578 26.6957 21.9724C26.088 21.8225 25.4516 21.7382 24.8053 21.7382C21.7271 21.7382 19.6036 23.5892 20.0621 25.874C20.5107 28.1569 23.3646 30 26.4338 30Z" fill="black"/>
|
||||
<path d="M9.43861 36.0001C12.5065 36.0001 14.6302 34.148 14.1817 31.8642C11.3032 19.0336 10.4299 15.8416 10.9496 15.5958C11.3166 15.4222 12.3783 16.7177 13.919 17.126C17.6428 18.1136 23.2729 12.3985 17.5667 13.2918C15.3248 13.6386 13.1623 12.2382 11.4922 11.1569C8.91237 9.48636 7.50797 8.57698 8.80251 16.0451C9.44294 19.7286 9.9798 22.3594 10.358 24.2125C10.9912 27.3154 11.1795 28.2384 10.6644 28.2732C9.78432 27.9258 8.81239 27.7293 7.81082 27.7293C4.734 27.7293 2.61134 29.5804 3.05978 31.8642C3.51809 34.148 6.37069 36.0001 9.43861 36.0001Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,14 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7529 34.6025L4.5019 36.3805L6.2859 32.1445C7.5039 29.2535 9.1929 26.7225 11.3159 24.6075L31.0669 4.9295C31.9119 4.0875 33.7169 4.5205 35.0979 5.8965C36.4789 7.2725 36.9139 9.0705 36.0679 9.9125L16.3179 29.5905C14.1949 31.7055 11.6539 33.3885 8.7529 34.6025Z" fill="white"/>
|
||||
<path d="M8.7529 34.6025L4.5019 36.3805L6.2859 32.1445C7.5039 29.2535 9.1929 26.7225 11.3159 24.6075L31.0669 4.9295C31.9119 4.0875 33.7169 4.5205 35.0979 5.8965C36.4789 7.2725 36.9139 9.0705 36.0679 9.9125L16.3179 29.5905C14.1949 31.7055 11.6539 33.3885 8.7529 34.6025" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M29.4092 6.1113C29.4092 6.1113 24.9602 3.7323 21.2082 11.8823C19.4742 15.6483 16.8582 13.4283 16.8582 13.4283" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4209 8.8251C36.4209 9.2881 36.2799 9.6981 35.9879 9.9891L26.6529 19.2901C26.9349 18.9991 27.0639 18.6221 27.0639 18.1691C27.0639 17.2961 26.5559 16.2071 25.6569 15.3021C24.2949 13.9441 22.5099 13.5021 21.6549 14.3111L30.9899 5.0101C31.8339 4.1691 33.6409 4.6001 35.0249 5.9691C35.9229 6.8741 36.4209 7.9521 36.4209 8.8251Z" fill="#4C97FF"/>
|
||||
<path d="M36.4209 8.8251C36.4209 9.2881 36.2799 9.6981 35.9879 9.9891L26.6529 19.2901C26.9349 18.9991 27.0639 18.6221 27.0639 18.1691C27.0639 17.2961 26.5559 16.2071 25.6569 15.3021C24.2949 13.9441 22.5099 13.5021 21.6549 14.3111L30.9899 5.0101C31.8339 4.1691 33.6409 4.6001 35.0249 5.9691C35.9229 6.8741 36.4209 7.9521 36.4209 8.8251" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5146 33.7739C9.9416 34.0759 9.3576 34.3449 8.7506 34.6039L4.4996 36.3819L6.2856 32.1469C6.5436 31.5429 6.8146 30.9609 7.1186 30.3899C7.8096 30.5729 8.5676 31.0149 9.2276 31.6719C9.8866 32.3299 10.3296 33.0839 10.5146 33.7739Z" fill="#4C97FF"/>
|
||||
<path d="M10.5146 33.7739C9.9416 34.0759 9.3576 34.3449 8.7506 34.6039L4.4996 36.3819L6.2856 32.1469C6.5436 31.5429 6.8146 30.9609 7.1186 30.3899C7.8096 30.5729 8.5676 31.0149 9.2276 31.6719C9.8866 32.3299 10.3296 33.0839 10.5146 33.7739" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g opacity="0.15">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.498 8.7485C36.498 9.2115 36.357 9.6215 36.065 9.9125L16.323 29.5925C14.192 31.7045 11.65 33.3855 8.751 34.6035L4.5 36.3815L5.474 34.0645L7.399 33.2565C10.298 32.0385 12.84 30.3575 14.971 28.2455L34.713 8.5655C35.005 8.2745 35.145 7.8645 35.145 7.4015C35.145 6.7545 34.875 6.0005 34.366 5.2785C34.615 5.4505 34.864 5.6555 35.102 5.8925C36 6.7975 36.498 7.8755 36.498 8.7485Z" fill="#0B8E69"/>
|
||||
<path d="M36.498 8.7485C36.498 9.2115 36.357 9.6215 36.065 9.9125L16.323 29.5925C14.192 31.7045 11.65 33.3855 8.751 34.6035L4.5 36.3815L5.474 34.0645L7.399 33.2565C10.298 32.0385 12.84 30.3575 14.971 28.2455L34.713 8.5655C35.005 8.2745 35.145 7.8645 35.145 7.4015C35.145 6.7545 34.875 6.0005 34.366 5.2785C34.615 5.4505 34.864 5.6555 35.102 5.8925C36 6.7975 36.498 7.8755 36.498 8.7485" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4502 12.831C18.4502 13.33 18.0462 13.735 17.5462 13.735C17.0472 13.735 16.6412 13.33 16.6412 12.831C16.6412 12.331 17.0472 11.927 17.5462 11.927C18.0462 11.927 18.4502 12.331 18.4502 12.831Z" fill="#0B8E69" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 21.6693V34.2834C16 35.8151 14 36.5359 12.8 35.5448L10.2 33.3824C9.2 32.5715 8 32.2111 6.7 32.2111H6.3C5 32.2111 4 31.3101 4 30.1388V25.9041C4 24.7328 5 23.8318 6.3 23.8318H6.7C8 23.8318 9.2 23.3813 10.1 22.6604L12.8 20.498C14 19.4168 16 20.2277 16 21.6693Z" fill="black"/>
|
||||
<path d="M24 4C19.5817 4 16 7.58172 16 12C16 15.1147 17.7799 17.8136 20.3781 19.1351C20.2095 20.9087 19.6564 21.6655 19.3042 22.1473C19.1265 22.3904 19 22.5635 19 22.7619C19 23.4286 19.6667 23.4286 19.6667 23.4286C20.6132 23.4286 23.5813 22.2623 25.4097 20H28C32.4183 20 36 16.4183 36 12C36 7.58172 32.4183 4 28 4H24Z" fill="white" stroke="#0B8E69"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 740 B |
@@ -0,0 +1,9 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 5C5.79086 5 4 6.79086 4 9V17C4 19.2091 5.79086 21 8 21H8.25277C8.01648 22.1728 7.59283 22.7524 7.30423 23.1473C7.12651 23.3904 7 23.5635 7 23.7619C7 24.4286 7.66667 24.4286 7.66667 24.4286C8.61324 24.4286 11.5813 23.2623 13.4097 21H20C22.2091 21 24 19.2091 24 17V9C24 6.79086 22.2091 5 20 5H8Z" fill="white" stroke="#0B8E69"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4218 7.91302C13.5521 7.80153 13.7239 7.75 13.9067 7.75C14.0928 7.75 14.267 7.80036 14.3994 7.9115C14.5354 8.02561 14.6067 8.18748 14.6067 8.36216V9.52841H18.7036C18.8799 9.52841 19.0272 9.61017 19.1229 9.73957C19.2134 9.86201 19.25 10.0146 19.25 10.1626C19.25 10.3136 19.2147 10.4702 19.1293 10.5971C19.0395 10.7306 18.8927 10.8297 18.7036 10.8297H17.1012C16.6608 12.2802 15.9482 13.6381 14.927 14.7819C15.0606 14.8916 15.189 14.9921 15.3213 15.0826L15.3279 15.0871C16.3219 15.814 17.5472 16.385 18.7351 16.7629C19.0395 16.859 19.2282 17.1036 19.2282 17.4073C19.2282 17.4936 19.2112 17.577 19.1806 17.6561C19.132 17.8055 19.0555 17.9345 18.9428 18.0265C18.8251 18.1226 18.6874 18.1624 18.55 18.1624C18.4481 18.1624 18.3427 18.1477 18.226 18.1047C16.7997 17.6359 15.5777 17.0201 14.433 16.1225L14.4309 16.1208C14.4142 16.1074 14.3975 16.0941 14.3809 16.0807C14.2391 15.9673 14.0975 15.8538 13.9592 15.7335C13.8055 15.8657 13.6522 15.9898 13.4867 16.1141C12.2772 17.0323 11.123 17.6027 9.7455 18.1139L9.73817 18.1166C9.64781 18.147 9.55486 18.1624 9.46112 18.1624C9.31982 18.1624 9.17991 18.1267 9.05858 18.042C8.93808 17.9579 8.85251 17.8372 8.79947 17.6945C8.76726 17.613 8.75 17.5278 8.75 17.4402C8.75 17.1207 8.97641 16.8921 9.23884 16.7903L9.24949 16.7862C10.4679 16.3765 11.614 15.8515 12.8797 14.866C12.9149 14.835 12.9509 14.8055 12.9854 14.7779C11.9845 13.6337 11.2834 12.2689 10.8442 10.8297H9.3075C9.11622 10.8297 8.96687 10.7336 8.87583 10.5946C8.79144 10.4657 8.76088 10.3087 8.76088 10.1626C8.76088 10.0199 8.79235 9.86674 8.8821 9.74212C8.97906 9.60748 9.1291 9.52841 9.3075 9.52841H13.2179V8.36216C13.2179 8.18805 13.2886 8.027 13.4218 7.91302ZM12.2386 10.8297C12.6091 11.9316 13.2056 12.9588 13.9626 13.8377C14.7257 12.9593 15.3051 11.9389 15.6493 10.8297H12.2386Z" fill="#4C97FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 16C34.2091 16 36 17.7909 36 20V28C36 30.2091 34.2091 32 32 32H31.7472C31.9835 33.1728 32.4072 33.7524 32.6958 34.1473C32.8735 34.3904 33 34.5635 33 34.7619C33 35.4286 32.3333 35.4286 32.3333 35.4286C31.3868 35.4286 28.4187 34.2623 26.5903 32H20C17.7909 32 16 30.2091 16 28V20C16 17.7909 17.7909 16 20 16H32Z" fill="white"/>
|
||||
<path d="M31.7472 32L31.2571 32.0988L31.1364 31.5H31.7472V32ZM32.6958 34.1473L33.0994 33.8522H33.0994L32.6958 34.1473ZM26.5903 32V31.5H26.8291L26.9792 31.6857L26.5903 32ZM35.5 20C35.5 18.067 33.933 16.5 32 16.5V15.5C34.4853 15.5 36.5 17.5147 36.5 20H35.5ZM35.5 28V20H36.5V28H35.5ZM32 31.5C33.933 31.5 35.5 29.933 35.5 28H36.5C36.5 30.4853 34.4853 32.5 32 32.5V31.5ZM31.7472 31.5H32V32.5H31.7472V31.5ZM32.2921 34.4423C31.9838 34.0206 31.5138 33.3727 31.2571 32.0988L32.2374 31.9012C32.4533 32.9729 32.8305 33.4843 33.0994 33.8522L32.2921 34.4423ZM32.5 34.7619C32.5 34.7755 32.5061 34.7666 32.4758 34.7113C32.441 34.6475 32.3869 34.5721 32.2921 34.4423L33.0994 33.8522C33.1823 33.9656 33.2804 34.0983 33.3532 34.2315C33.4307 34.3731 33.5 34.55 33.5 34.7619H32.5ZM32.3333 35.4286C32.3333 34.9286 32.3331 34.9286 32.3329 34.9286C32.3328 34.9286 32.3325 34.9286 32.3324 34.9286C32.3321 34.9286 32.3318 34.9286 32.3315 34.9286C32.3309 34.9286 32.3304 34.9286 32.3298 34.9286C32.3288 34.9286 32.3279 34.9286 32.3272 34.9286C32.3257 34.9286 32.3247 34.9287 32.3242 34.9287C32.3231 34.9287 32.324 34.9287 32.3264 34.9285C32.3313 34.9282 32.3416 34.9272 32.3553 34.925C32.3851 34.92 32.4171 34.911 32.4431 34.898C32.4671 34.886 32.4759 34.8759 32.4798 34.87C32.4816 34.8672 32.5 34.8411 32.5 34.7619H33.5C33.5 35.0161 33.435 35.2399 33.3119 35.4247C33.1908 35.6063 33.0329 35.7211 32.8903 35.7925C32.7496 35.8628 32.6149 35.8955 32.5197 35.9114C32.4709 35.9195 32.4291 35.9237 32.3976 35.926C32.3818 35.9271 32.3683 35.9278 32.3575 35.9281C32.3521 35.9283 32.3473 35.9284 32.3433 35.9285C32.3413 35.9285 32.3394 35.9285 32.3378 35.9286C32.337 35.9286 32.3362 35.9286 32.3354 35.9286C32.3351 35.9286 32.3347 35.9286 32.3343 35.9286C32.3342 35.9286 32.3339 35.9286 32.3338 35.9286C32.3336 35.9286 32.3333 35.9286 32.3333 35.4286ZM26.9792 31.6857C27.8397 32.7504 28.9791 33.5683 30.0258 34.1204C30.5475 34.3956 31.0386 34.6007 31.45 34.736C31.8727 34.875 32.176 34.9286 32.3333 34.9286V35.9286C32.0173 35.9286 31.5947 35.8363 31.1376 35.686C30.669 35.5319 30.1264 35.3041 29.5592 35.0049C28.4281 34.4083 27.1693 33.5119 26.2015 32.3143L26.9792 31.6857ZM20 31.5H26.5903V32.5H20V31.5ZM16.5 28C16.5 29.933 18.067 31.5 20 31.5V32.5C17.5147 32.5 15.5 30.4853 15.5 28H16.5ZM16.5 20V28H15.5V20H16.5ZM20 16.5C18.067 16.5 16.5 18.067 16.5 20H15.5C15.5 17.5147 17.5147 15.5 20 15.5V16.5ZM32 16.5H20V15.5H32V16.5Z" fill="#0B8E69"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9226 25.0201H27.043L26.0115 22.0172H25.9885L24.9226 25.0201ZM25.0946 20H26.9398L30 28.1834H28.1318L27.5129 26.361H24.4527L23.8109 28.1834H22L25.0946 20Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.033 12.8763C32.8335 13.0713 32.5635 13.1813 32.283 13.1813C32.0034 13.1813 31.7334 13.0713 31.5329 12.8763L28.8784 10.2162C28.5734 9.91122 28.4834 9.45621 28.6484 9.0612C28.8134 8.66619 29.1934 8.41119 29.6234 8.41119H30.5784C30.5534 8.18119 30.4884 7.92118 30.3784 7.64618C30.3439 7.56617 30.3084 7.48617 30.2684 7.40617C30.2134 7.31617 30.2189 7.29117 30.1434 7.18117C30.0234 7.00116 29.9134 6.86616 29.7829 6.71116C29.5184 6.42615 29.1984 6.18115 28.8584 6.00115C28.5134 5.82114 28.1534 5.71114 27.8334 5.65114C27.5184 5.59614 27.2284 5.59114 27.0584 5.59114C26.9734 5.58614 26.8634 5.60614 26.8084 5.61114C26.7484 5.61614 26.7134 5.62114 26.7134 5.62114C26.3583 5.65614 26.0383 5.39614 26.0033 5.04113C25.9733 4.74112 26.1483 4.47112 26.4133 4.37112C26.4133 4.37112 26.4483 4.35612 26.5033 4.33612C26.5683 4.31612 26.6284 4.28112 26.7684 4.24112C27.0484 4.15611 27.4034 4.06611 27.8684 4.02111C28.3284 3.98111 28.8834 3.99111 29.4689 4.11111C30.0534 4.23612 30.6684 4.47112 31.2384 4.81113C31.5084 4.98613 31.7984 5.19113 32.0234 5.39114C32.1234 5.46614 32.2935 5.63614 32.3935 5.74114C32.5085 5.86114 32.6135 5.98115 32.719 6.10615C33.1235 6.60616 33.4235 7.14617 33.6185 7.63618C33.7335 7.91618 33.8135 8.18119 33.8735 8.41119H34.9435C35.3735 8.41119 35.7535 8.66619 35.9185 9.0612C36.0835 9.45621 35.9935 9.91122 35.6885 10.2162L33.033 12.8763Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96704 27.125C7.16654 26.93 7.43654 26.82 7.71705 26.82C7.99655 26.82 8.26656 26.93 8.46706 27.125L11.1216 29.7851C11.4266 30.0901 11.5166 30.5451 11.3516 30.9401C11.1866 31.3351 10.8066 31.5901 10.3766 31.5901H9.42158C9.44658 31.8201 9.51158 32.0801 9.62158 32.3551C9.65608 32.4351 9.69158 32.5151 9.73158 32.5951C9.78659 32.6851 9.78109 32.7101 9.85659 32.8201C9.97659 33.0001 10.0866 33.1351 10.2171 33.2901C10.4816 33.5751 10.8016 33.8201 11.1416 34.0001C11.4866 34.1801 11.8466 34.2901 12.1666 34.3501C12.4816 34.4051 12.7716 34.4101 12.9416 34.4101C13.0266 34.4151 13.1366 34.3951 13.1916 34.3901C13.2516 34.3851 13.2866 34.3801 13.2866 34.3801C13.6417 34.3451 13.9617 34.6051 13.9967 34.9602C14.0267 35.2602 13.8517 35.5302 13.5867 35.6302C13.5867 35.6302 13.5517 35.6452 13.4967 35.6652C13.4317 35.6852 13.3716 35.7202 13.2316 35.7602C12.9516 35.8452 12.5966 35.9352 12.1316 35.9802C11.6716 36.0202 11.1166 36.0102 10.5311 35.8902C9.94659 35.7652 9.33158 35.5302 8.76157 35.1902C8.49156 35.0152 8.20156 34.8101 7.97655 34.6101C7.87655 34.5351 7.70655 34.3651 7.60655 34.2601C7.49154 34.1401 7.38654 34.0201 7.28104 33.8951C6.87653 33.3951 6.57653 32.8551 6.38153 32.3651C6.26652 32.0851 6.18652 31.8201 6.12652 31.5901H5.0565C4.62649 31.5901 4.24649 31.3351 4.08148 30.9401C3.91648 30.5451 4.00648 30.0901 4.31149 29.7851L6.96704 27.125Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.9 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle opacity="0.25" cx="32" cy="26" r="4" fill="white" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle opacity="0.5" cx="32" cy="22" r="4" fill="white" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle opacity="0.75" cx="32" cy="18" r="4" fill="white" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="32" cy="14" r="4" fill="white" stroke="#0B8E69" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 17.5L22.4 14C22.9 13.7 23.5 13.8 23.8 14.3C23.9 14.5 24 14.7 24 14.8V25.1C24 25.7 23.5 26.1 23 26.1C22.8 26.1 22.6 26 22.5 25.9L17 22.6V24C17 26.2 15.2 28.1 13 28.1H4.1C1.8 28 0 26.2 0 24V16.1C0 13.8 1.8 12 4.1 12H13C15.2 12 17 13.8 17 16.1V17.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 859 B |
149
scratch-gui/src/lib/themes/blocks/high-contrast.js
Normal file
149
scratch-gui/src/lib/themes/blocks/high-contrast.js
Normal file
@@ -0,0 +1,149 @@
|
||||
import musicIcon from './high-contrast-media/extensions/musicIcon.svg';
|
||||
import penIcon from './high-contrast-media/extensions/penIcon.svg';
|
||||
import text2speechIcon from './high-contrast-media/extensions/text2speechIcon.svg';
|
||||
import translateIcon from './high-contrast-media/extensions/translateIcon.svg';
|
||||
import videoSensingIcon from './high-contrast-media/extensions/videoSensingIcon.svg';
|
||||
import {hex2hsv, hsv2hex} from '../../tw-color-utils';
|
||||
|
||||
const blockColors = {
|
||||
motion: {
|
||||
primary: '#80B5FF',
|
||||
secondary: '#B3D2FF',
|
||||
tertiary: '#3373CC',
|
||||
quaternary: '#CCE1FF'
|
||||
},
|
||||
looks: {
|
||||
primary: '#CCB3FF',
|
||||
secondary: '#DDCCFF',
|
||||
tertiary: '#774DCB',
|
||||
quaternary: '#EEE5FF'
|
||||
},
|
||||
sounds: {
|
||||
primary: '#E19DE1',
|
||||
secondary: '#FFB3FF',
|
||||
tertiary: '#BD42BD',
|
||||
quaternary: '#FFCCFF'
|
||||
|
||||
},
|
||||
control: {
|
||||
primary: '#FFBE4C',
|
||||
secondary: '#FFDA99',
|
||||
tertiary: '#CF8B17',
|
||||
quaternary: '#FFE3B3'
|
||||
},
|
||||
event: {
|
||||
primary: '#FFD966',
|
||||
secondary: '#FFECB3',
|
||||
tertiary: '#CC9900',
|
||||
quaternary: '#FFF2CC'
|
||||
},
|
||||
sensing: {
|
||||
primary: '#85C4E0',
|
||||
secondary: '#AED8EA',
|
||||
tertiary: '#2E8EB8',
|
||||
quaternary: '#C2E2F0'
|
||||
},
|
||||
pen: {
|
||||
primary: '#13ECAF',
|
||||
secondary: '#75F0CD',
|
||||
tertiary: '#0B8E69',
|
||||
quaternary: '#A3F5DE'
|
||||
},
|
||||
operators: {
|
||||
primary: '#7ECE7E',
|
||||
secondary: '#B5E3B5',
|
||||
tertiary: '#389438',
|
||||
quaternary: '#DAF1DA'
|
||||
},
|
||||
data: {
|
||||
primary: '#FFA54C',
|
||||
secondary: '#FFCC99',
|
||||
tertiary: '#DB6E00',
|
||||
quaternary: '#FFE5CC'
|
||||
},
|
||||
// This is not a new category, but rather for differentiation
|
||||
// between lists and scalar variables.
|
||||
data_lists: {
|
||||
primary: '#FF9966',
|
||||
secondary: '#FFCAB0', // I don't think this is used, b/c we don't have any droppable fields in list blocks
|
||||
tertiary: '#E64D00',
|
||||
quaternary: '#FFDDCC'
|
||||
},
|
||||
more: {
|
||||
primary: '#FF99AA',
|
||||
secondary: '#FFCCD5',
|
||||
tertiary: '#FF3355',
|
||||
quaternary: '#FFE5EA'
|
||||
},
|
||||
addons: {
|
||||
primary: '#34e4d0',
|
||||
secondary: '#71e2d5',
|
||||
tertiary: '#29b2a2',
|
||||
quaternary: '#9ee2db'
|
||||
},
|
||||
text: '#000000',
|
||||
textFieldText: '#000000', // Text inside of inputs e.g. 90 in [point in direction (90)]
|
||||
toolboxText: '#000000', // Toolbox text, color picker text (used to be #575E75)
|
||||
blackText: '#000000',
|
||||
// The color that the category menu label (e.g. 'motion', 'looks', etc.) changes to on hover
|
||||
toolboxHover: '#3373CC',
|
||||
insertionMarker: '#000000',
|
||||
insertionMarkerOpacity: 0.2,
|
||||
fieldShadow: 'rgba(255, 255, 255, 0.3)',
|
||||
dragShadowOpacity: 0.6,
|
||||
menuHover: 'rgba(255, 255, 255, 0.3)'
|
||||
};
|
||||
|
||||
const extensions = {
|
||||
music: {
|
||||
blockIconURI: musicIcon
|
||||
},
|
||||
pen: {
|
||||
blockIconURI: penIcon
|
||||
},
|
||||
text2speech: {
|
||||
blockIconURI: text2speechIcon
|
||||
},
|
||||
translate: {
|
||||
blockIconURI: translateIcon
|
||||
},
|
||||
videoSensing: {
|
||||
blockIconURI: videoSensingIcon
|
||||
}
|
||||
};
|
||||
|
||||
const clamp = (value, lower, upper) => Math.max(lower, Math.min(upper, value));
|
||||
|
||||
const customExtensionColors = {
|
||||
primary: primary => {
|
||||
const hsv = hex2hsv(primary);
|
||||
hsv[1] = clamp(hsv[1] - 20, 0, 50);
|
||||
hsv[2] = clamp(hsv[2] + 20, 80, 100);
|
||||
return hsv2hex(hsv);
|
||||
},
|
||||
secondary: primary => {
|
||||
const hsv = hex2hsv(primary);
|
||||
hsv[1] = clamp(hsv[1] - 40, 0, 50);
|
||||
hsv[2] = clamp(hsv[2] + 20, 80, 100);
|
||||
return hsv2hex(hsv);
|
||||
},
|
||||
tertiary: primary => {
|
||||
const hsv = hex2hsv(primary);
|
||||
hsv[2] = clamp(hsv[2] - 20, 0, 100);
|
||||
return hsv2hex(hsv);
|
||||
},
|
||||
quaternary: primary => {
|
||||
const hsv = hex2hsv(primary);
|
||||
hsv[1] = clamp(hsv[1] - 60, 0, 100);
|
||||
hsv[2] = clamp(hsv[2] + 20, 90, 100);
|
||||
return hsv2hex(hsv);
|
||||
},
|
||||
categoryIconBackground: primary => customExtensionColors.primary(primary),
|
||||
categoryIconBorder: primary => customExtensionColors.tertiary(primary)
|
||||
};
|
||||
|
||||
export {
|
||||
blockColors,
|
||||
extensions,
|
||||
customExtensionColors
|
||||
};
|
||||
132
scratch-gui/src/lib/themes/blocks/three.js
Normal file
132
scratch-gui/src/lib/themes/blocks/three.js
Normal file
@@ -0,0 +1,132 @@
|
||||
const blockColors = {
|
||||
motion: {
|
||||
primary: '#4C97FF',
|
||||
secondary: '#4280D7',
|
||||
tertiary: '#3373CC',
|
||||
quaternary: '#3373CC'
|
||||
},
|
||||
looks: {
|
||||
primary: '#9966FF',
|
||||
secondary: '#855CD6',
|
||||
tertiary: '#774DCB',
|
||||
quaternary: '#774DCB'
|
||||
},
|
||||
sounds: {
|
||||
primary: '#CF63CF',
|
||||
secondary: '#C94FC9',
|
||||
tertiary: '#BD42BD',
|
||||
quaternary: '#BD42BD'
|
||||
},
|
||||
control: {
|
||||
primary: '#FFAB19',
|
||||
secondary: '#EC9C13',
|
||||
tertiary: '#CF8B17',
|
||||
quaternary: '#CF8B17'
|
||||
},
|
||||
event: {
|
||||
primary: '#FFBF00',
|
||||
secondary: '#E6AC00',
|
||||
tertiary: '#CC9900',
|
||||
quaternary: '#CC9900'
|
||||
},
|
||||
sensing: {
|
||||
primary: '#5CB1D6',
|
||||
secondary: '#47A8D1',
|
||||
tertiary: '#2E8EB8',
|
||||
quaternary: '#2E8EB8'
|
||||
},
|
||||
pen: {
|
||||
primary: '#0fBD8C',
|
||||
secondary: '#0DA57A',
|
||||
tertiary: '#0B8E69',
|
||||
quaternary: '#0B8E69'
|
||||
},
|
||||
operators: {
|
||||
primary: '#59C059',
|
||||
secondary: '#46B946',
|
||||
tertiary: '#389438',
|
||||
quaternary: '#389438'
|
||||
},
|
||||
data: {
|
||||
primary: '#FF8C1A',
|
||||
secondary: '#FF8000',
|
||||
tertiary: '#DB6E00',
|
||||
quaternary: '#DB6E00'
|
||||
},
|
||||
// This is not a new category, but rather for differentiation
|
||||
// between lists and scalar variables.
|
||||
data_lists: {
|
||||
primary: '#FF661A',
|
||||
secondary: '#FF5500',
|
||||
tertiary: '#E64D00',
|
||||
quaternary: '#E64D00'
|
||||
},
|
||||
more: {
|
||||
primary: '#FF6680',
|
||||
secondary: '#FF4D6A',
|
||||
tertiary: '#FF3355',
|
||||
quaternary: '#FF3355'
|
||||
},
|
||||
addons: {
|
||||
primary: '#29beb8',
|
||||
secondary: '#3aa8a4',
|
||||
tertiary: '#3aa8a4',
|
||||
quaternary: '#3aa8a4'
|
||||
},
|
||||
text: '#FFFFFF',
|
||||
workspace: '#F9F9F9',
|
||||
toolboxHover: '#4C97FF',
|
||||
toolboxSelected: '#E9EEF2',
|
||||
toolboxText: '#575E75',
|
||||
toolbox: '#FFFFFF',
|
||||
blackText: '#575E75',
|
||||
flyout: '#F9F9F9',
|
||||
scrollbar: '#CECDCE',
|
||||
scrollbarHover: '#CECDCE',
|
||||
textField: '#FFFFFF',
|
||||
textFieldText: '#575E75',
|
||||
insertionMarker: '#000000',
|
||||
insertionMarkerOpacity: 0.2,
|
||||
dragShadowOpacity: 0.6,
|
||||
stackGlow: '#FFF200',
|
||||
stackGlowSize: 4,
|
||||
stackGlowOpacity: 1,
|
||||
replacementGlow: '#FFFFFF',
|
||||
replacementGlowSize: 2,
|
||||
replacementGlowOpacity: 1,
|
||||
colourPickerStroke: '#FFFFFF',
|
||||
// CSS colours: support RGBA
|
||||
fieldShadow: 'rgba(255, 255, 255, 0.3)',
|
||||
dropDownShadow: 'rgba(0, 0, 0, .3)',
|
||||
numPadBackground: '#547AB2',
|
||||
numPadBorder: '#435F91',
|
||||
numPadActiveBackground: '#435F91',
|
||||
numPadText: 'white', // Do not use hex here, it cannot be inlined with data-uri SVG
|
||||
valueReportBackground: '#FFFFFF',
|
||||
valueReportBorder: '#AAAAAA',
|
||||
valueReportForeground: '#000000',
|
||||
menuHover: 'rgba(0, 0, 0, 0.2)',
|
||||
contextMenuBackground: '#ffffff',
|
||||
contextMenuBorder: '#cccccc',
|
||||
contextMenuForeground: '#000000',
|
||||
contextMenuActiveBackground: '#d6e9f8',
|
||||
contextMenuDisabledForeground: '#cccccc',
|
||||
flyoutLabelColor: '#575E75',
|
||||
checkboxInactiveBackground: '#ffffff',
|
||||
checkboxInactiveBorder: '#c8c8c8',
|
||||
checkboxActiveBackground: '#4C97FF',
|
||||
checkboxActiveBorder: '#3373CC',
|
||||
checkboxCheck: '#ffffff',
|
||||
buttonBorder: '#c6c6c6',
|
||||
buttonActiveBackground: '#ffffff',
|
||||
buttonForeground: '#575E75',
|
||||
zoomIconFilter: 'none',
|
||||
gridColor: '#dddddd'
|
||||
};
|
||||
|
||||
const extensions = {};
|
||||
|
||||
export {
|
||||
blockColors,
|
||||
extensions
|
||||
};
|
||||
37
scratch-gui/src/lib/themes/global-styles.css
Normal file
37
scratch-gui/src/lib/themes/global-styles.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "../../css/colors.css";
|
||||
|
||||
/* This is for overriding some styles that don't really "belong" to any existing stylesheets */
|
||||
/* Try to use this sparingly, otherwise this will become unmaintainable again... */
|
||||
|
||||
:root {
|
||||
color-scheme: var(--color-scheme);
|
||||
}
|
||||
|
||||
/* popover is used by gui and paint */
|
||||
/* some of these are duplicated over there too; !important makes sure these win */
|
||||
:global(.Popover) {
|
||||
color-scheme: light !important;
|
||||
}
|
||||
:global(.Popover-body) {
|
||||
color: $text-primary !important;
|
||||
background: $popover-background !important;
|
||||
border: 1px solid $ui-black-transparent !important;
|
||||
box-shadow: 0px 0px 8px 1px $shadow !important;
|
||||
}
|
||||
:global(.Popover-tipShape) {
|
||||
fill: $popover-background !important;
|
||||
stroke: $ui-black-transparent !important;
|
||||
}
|
||||
|
||||
/* ScratchAdddons editor-dark-mode compatibility */
|
||||
:root {
|
||||
--editorDarkMode-primary: $looks-secondary;
|
||||
--editorDarkMode-primary-transparent35: $looks-transparent;
|
||||
--editorDarkMode-primary-variant: $looks-secondary-dark;
|
||||
--editorDarkMode-border: $ui-black-transparent;
|
||||
--editorDarkMode-accent: $ui-modal-background;
|
||||
--editorDarkMode-categoryMenu-text: $text-primary;
|
||||
--editorDarkMode-accent-text: $text-primary;
|
||||
--editorDarkMode-page: $ui-primary;
|
||||
--editorDarkMode-highlightText: $looks-secondary;
|
||||
}
|
||||
78
scratch-gui/src/lib/themes/gui/dark.js
Normal file
78
scratch-gui/src/lib/themes/gui/dark.js
Normal file
@@ -0,0 +1,78 @@
|
||||
const guiColors = {
|
||||
'color-scheme': 'dark',
|
||||
|
||||
'ui-primary': '#111111',
|
||||
'ui-secondary': '#1e1e1e',
|
||||
'ui-tertiary': '#2e2e2e',
|
||||
|
||||
'ui-modal-overlay': '#333333aa',
|
||||
'ui-modal-background': '#111111',
|
||||
'ui-modal-foreground': '#eeeeee',
|
||||
'ui-modal-header-background': '#333333',
|
||||
'ui-modal-header-foreground': '#ffffff',
|
||||
|
||||
'ui-white': '#111111',
|
||||
|
||||
'ui-black-transparent': '#ffffff26',
|
||||
|
||||
'text-primary': '#eeeeee',
|
||||
|
||||
'menu-bar-background': '#333333',
|
||||
|
||||
'assets-background': '#111111',
|
||||
|
||||
'input-background': '#1e1e1e',
|
||||
|
||||
'popover-background': '#1e1e1e',
|
||||
|
||||
'badge-background': '#16202c',
|
||||
'badge-border': '#203652',
|
||||
|
||||
'fullscreen-background': '#111111',
|
||||
'fullscreen-accent': '#111111',
|
||||
|
||||
'page-background': '#111111',
|
||||
'page-foreground': '#eeeeee',
|
||||
|
||||
'project-title-inactive': 'var(--ui-secondary)',
|
||||
'project-title-hover': '#ffffff3f',
|
||||
|
||||
'link-color': '#44aaff',
|
||||
|
||||
'filter-icon-black': 'invert(100%)',
|
||||
'filter-icon-gray': 'grayscale(100%) brightness(1.7)',
|
||||
'filter-icon-white': 'brightness(0) invert(100%)',
|
||||
|
||||
'paint-filter-icon-gray': 'brightness(1.7)'
|
||||
};
|
||||
|
||||
const blockColors = {
|
||||
insertionMarker: '#cccccc',
|
||||
workspace: '#1e1e1e',
|
||||
toolboxSelected: '#1e1e1e',
|
||||
toolboxText: '#cccccc',
|
||||
toolbox: '#111111',
|
||||
flyout: '#111111',
|
||||
scrollbar: '#666666',
|
||||
valueReportBackground: '#1e1e1e',
|
||||
valueReportBorder: '#333333',
|
||||
valueReportForeground: '#eeeeee',
|
||||
contextMenuBackground: '#111111',
|
||||
contextMenuBorder: '#ffffff26',
|
||||
contextMenuForeground: '#eeeeee',
|
||||
contextMenuActiveBackground: '#2e2e2e',
|
||||
contextMenuDisabledForeground: '#666666',
|
||||
flyoutLabelColor: '#cccccc',
|
||||
checkboxInactiveBackground: '#222222',
|
||||
checkboxInactiveBorder: '#c8c8c8',
|
||||
buttonBorder: '#c6c6c6',
|
||||
buttonActiveBackground: '#222222',
|
||||
buttonForeground: '#cccccc',
|
||||
zoomIconFilter: 'invert(100%)',
|
||||
gridColor: '#484848'
|
||||
};
|
||||
|
||||
export {
|
||||
guiColors,
|
||||
blockColors
|
||||
};
|
||||
103
scratch-gui/src/lib/themes/gui/light.js
Normal file
103
scratch-gui/src/lib/themes/gui/light.js
Normal file
@@ -0,0 +1,103 @@
|
||||
const guiColors = {
|
||||
'color-scheme': 'light',
|
||||
|
||||
'ui-primary': 'hsla(215, 100%, 95%, 1)', /* #E5F0FF */
|
||||
'ui-secondary': 'hsla(215, 75%, 95%, 1)', /* #E9F1FC */
|
||||
'ui-tertiary': 'hsla(215, 50%, 90%, 1)', /* #D9E3F2 */
|
||||
|
||||
'ui-modal-overlay': 'var(--motion-primary-transparent)',
|
||||
'ui-modal-background': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
|
||||
'ui-modal-foreground': 'hsla(225, 15%, 40%, 1)', /* #575E75 */
|
||||
'ui-modal-header-background': 'var(--looks-secondary)',
|
||||
'ui-modal-header-foreground': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
|
||||
|
||||
'ui-white': 'hsla(0, 100%, 100%, 1)', /* #FFFFFF */
|
||||
'ui-white-dim': 'hsla(0, 100%, 100%, 0.75)', /* 25% transparent version of ui-white */
|
||||
'ui-white-transparent': 'hsla(0, 100%, 100%, 0.25)', /* 25% transparent version of ui-white */
|
||||
'ui-transparent': 'hsla(0, 100%, 100%, 0)', /* 25% transparent version of ui-white */
|
||||
|
||||
'ui-black-transparent': 'hsla(0, 0%, 0%, 0.15)', /* 15% transparent version of black */
|
||||
|
||||
'text-primary': 'hsla(225, 15%, 40%, 1)', /* #575E75 */
|
||||
'text-primary-transparent': 'hsla(225, 15%, 40%, 0.75)',
|
||||
|
||||
'motion-primary': 'hsla(215, 100%, 65%, 1)', /* #4C97FF */
|
||||
'motion-primary-transparent': 'hsla(215, 100%, 65%, 0.9)', /* 90% transparent version of motion-primary */
|
||||
'motion-tertiary': 'hsla(215, 60%, 50%, 1)', /* #3373CC */
|
||||
|
||||
'looks-secondary': 'hsla(260, 60%, 60%, 1)', /* #855CD6 */
|
||||
'looks-transparent': 'hsla(260, 60%, 60%, 0.35)', /* 35% transparent version of looks-tertiary */
|
||||
'looks-light-transparent': 'hsla(260, 60%, 60%, 0.15)', /* 15% transparent version of looks-tertiary */
|
||||
'looks-secondary-dark': 'hsla(260, 42%, 51%, 1)', /* #714EB6 */
|
||||
|
||||
'red-primary': 'hsla(20, 100%, 55%, 1)', /* #FF661A */
|
||||
'red-tertiary': 'hsla(20, 100%, 45%, 1)', /* #E64D00 */
|
||||
|
||||
'sound-primary': 'hsla(300, 53%, 60%, 1)', /* #CF63CF */
|
||||
'sound-tertiary': 'hsla(300, 48%, 50%, 1)', /* #BD42BD */
|
||||
|
||||
'control-primary': 'hsla(38, 100%, 55%, 1)', /* #FFAB19 */
|
||||
|
||||
'data-primary': 'hsla(30, 100%, 55%, 1)', /* #FF8C1A */
|
||||
|
||||
'pen-primary': 'hsla(163, 85%, 40%, 1)', /* #0FBD8C */
|
||||
'pen-transparent': 'hsla(163, 85%, 40%, 0.25)', /* #0FBD8C */
|
||||
'pen-tertiary': 'hsla(163, 86%, 30%, 1)', /* #0B8E69 */
|
||||
|
||||
'error-primary': 'hsla(30, 100%, 55%, 1)', /* #FF8C1A */
|
||||
'error-light': 'hsla(30, 100%, 70%, 1)', /* #FFB366 */
|
||||
'error-transparent': 'hsla(30, 100%, 55%, 0.25)', /* #FF8C1A */
|
||||
|
||||
'extensions-primary': 'hsla(163, 85%, 40%, 1)', /* #0FBD8C */
|
||||
'extensions-tertiary': 'hsla(163, 85%, 30%, 1)', /* #0B8E69 */
|
||||
'extensions-transparent': 'hsla(163, 85%, 40%, 0.35)', /* 35% transparent version of extensions-primary */
|
||||
'extensions-light': 'hsla(163, 57%, 85%, 1)', /* opaque version of extensions-transparent, on white bg */
|
||||
|
||||
'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',
|
||||
|
||||
'input-background': '#ffffff',
|
||||
|
||||
'popover-background': '#ffffff',
|
||||
|
||||
'shadow': 'hsla(0, 0%, 0%, 0.15)',
|
||||
|
||||
'badge-background': '#dbebff',
|
||||
'badge-border': '#b9d6ff',
|
||||
|
||||
'fullscreen-background': '#ffffff',
|
||||
'fullscreen-accent': '#e8edf1',
|
||||
|
||||
'page-background': '#ffffff',
|
||||
'page-foreground': '#000000',
|
||||
|
||||
'project-title-inactive': 'var(--ui-white-transparent)',
|
||||
'project-title-hover': '#ffffff7f',
|
||||
|
||||
'link-color': '#2255dd',
|
||||
|
||||
'filter-icon-black': 'none',
|
||||
'filter-icon-gray': 'grayscale(100%)',
|
||||
'filter-icon-white': 'none',
|
||||
|
||||
'paint-ui-pane-border': 'var(--ui-black-transparent)',
|
||||
'paint-text-primary': 'var(--text-primary)',
|
||||
'paint-form-border': 'var(--ui-black-transparent)',
|
||||
'paint-looks-secondary': 'var(--looks-secondary)',
|
||||
'paint-looks-transparent': 'var(--looks-transparent)',
|
||||
'paint-input-background': 'var(--input-background)',
|
||||
'paint-popover-background': 'var(--popover-background)',
|
||||
'paint-filter-icon-gray': 'none'
|
||||
};
|
||||
|
||||
const blockColors = {};
|
||||
|
||||
export {
|
||||
guiColors,
|
||||
blockColors
|
||||
};
|
||||
79
scratch-gui/src/lib/themes/guiHelpers.js
Normal file
79
scratch-gui/src/lib/themes/guiHelpers.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import {Theme} from '.';
|
||||
import AddonHooks from '../../addons/hooks';
|
||||
import './global-styles.css';
|
||||
|
||||
const BLOCK_COLOR_NAMES = [
|
||||
// Corresponds to the name of the object in blockColors
|
||||
'motion',
|
||||
'looks',
|
||||
'sounds',
|
||||
'control',
|
||||
'event',
|
||||
'sensing',
|
||||
'pen',
|
||||
'operators',
|
||||
'data',
|
||||
'data_lists',
|
||||
'more',
|
||||
'addons'
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {string} css CSS color or var(--...)
|
||||
* @returns {string} evaluated CSS
|
||||
*/
|
||||
const evaluateCSS = css => {
|
||||
const variableMatch = css.match(/^var\(([\w-]+)\)$/);
|
||||
if (variableMatch) {
|
||||
return document.documentElement.style.getPropertyValue(variableMatch[1]);
|
||||
}
|
||||
return css;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Theme} theme the theme
|
||||
*/
|
||||
const applyGuiColors = theme => {
|
||||
const doc = document.documentElement;
|
||||
|
||||
const defaultGuiColors = Theme.light.getGuiColors();
|
||||
for (const [name, value] of Object.entries(defaultGuiColors)) {
|
||||
doc.style.setProperty(`--${name}-default`, value);
|
||||
}
|
||||
|
||||
const guiColors = theme.getGuiColors();
|
||||
for (const [name, value] of Object.entries(guiColors)) {
|
||||
doc.style.setProperty(`--${name}`, value);
|
||||
}
|
||||
|
||||
const blockColors = theme.getBlockColors();
|
||||
doc.style.setProperty('--editorTheme3-blockText', blockColors.text);
|
||||
doc.style.setProperty('--editorTheme3-inputColor', blockColors.textField);
|
||||
doc.style.setProperty('--editorTheme3-inputColor-text', blockColors.textFieldText);
|
||||
for (const color of BLOCK_COLOR_NAMES) {
|
||||
doc.style.setProperty(`--editorTheme3-${color}-primary`, blockColors[color].primary);
|
||||
doc.style.setProperty(`--editorTheme3-${color}-secondary`, blockColors[color].secondary);
|
||||
doc.style.setProperty(`--editorTheme3-${color}-tertiary`, blockColors[color].tertiary);
|
||||
doc.style.setProperty(`--editorTheme3-${color}-field-background`, blockColors[color].quaternary);
|
||||
}
|
||||
|
||||
// Some browsers will color their interfaces to match theme-color, so if we make it the same color as our
|
||||
// menu bar, it'll look pretty cool.
|
||||
let metaThemeColor = document.head.querySelector('meta[name=theme-color]');
|
||||
if (!metaThemeColor) {
|
||||
metaThemeColor = document.createElement('meta');
|
||||
metaThemeColor.setAttribute('name', 'theme-color');
|
||||
document.head.appendChild(metaThemeColor);
|
||||
}
|
||||
metaThemeColor.setAttribute('content', evaluateCSS(guiColors['menu-bar-background']));
|
||||
|
||||
// a horrible hack for icons...
|
||||
window.Recolor = {
|
||||
primary: guiColors['looks-secondary']
|
||||
};
|
||||
AddonHooks.recolorCallbacks.forEach(i => i());
|
||||
};
|
||||
|
||||
export {
|
||||
applyGuiColors
|
||||
};
|
||||
164
scratch-gui/src/lib/themes/index.js
Normal file
164
scratch-gui/src/lib/themes/index.js
Normal file
@@ -0,0 +1,164 @@
|
||||
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';
|
||||
|
||||
import * as blocksThree from './blocks/three';
|
||||
import * as blocksHighContrast from './blocks/high-contrast';
|
||||
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_RAINBOW]: accentRainbow
|
||||
};
|
||||
const ACCENT_DEFAULT = ACCENT_BLUE;
|
||||
|
||||
const GUI_LIGHT = 'light';
|
||||
const GUI_DARK = 'dark';
|
||||
const GUI_MAP = {
|
||||
[GUI_LIGHT]: guiLight,
|
||||
[GUI_DARK]: guiDark
|
||||
};
|
||||
const GUI_DEFAULT = GUI_LIGHT;
|
||||
|
||||
const BLOCKS_THREE = 'three';
|
||||
const BLOCKS_DARK = 'dark';
|
||||
const BLOCKS_HIGH_CONTRAST = 'high-contrast';
|
||||
const BLOCKS_CUSTOM = 'custom';
|
||||
const BLOCKS_DEFAULT = BLOCKS_THREE;
|
||||
const defaultBlockColors = blocksThree.blockColors;
|
||||
const BLOCKS_MAP = {
|
||||
[BLOCKS_THREE]: {
|
||||
blocksMediaFolder: 'blocks-media/default',
|
||||
colors: blocksThree.blockColors,
|
||||
extensions: blocksThree.extensions,
|
||||
customExtensionColors: {},
|
||||
useForStage: true
|
||||
},
|
||||
[BLOCKS_HIGH_CONTRAST]: {
|
||||
blocksMediaFolder: 'blocks-media/high-contrast',
|
||||
colors: defaultsDeep({}, blocksHighContrast.blockColors, defaultBlockColors),
|
||||
extensions: blocksHighContrast.extensions,
|
||||
customExtensionColors: blocksHighContrast.customExtensionColors,
|
||||
useForStage: true
|
||||
},
|
||||
[BLOCKS_DARK]: {
|
||||
blocksMediaFolder: 'blocks-media/default',
|
||||
colors: defaultsDeep({}, blocksDark.blockColors, defaultBlockColors),
|
||||
extensions: blocksDark.extensions,
|
||||
customExtensionColors: blocksDark.customExtensionColors,
|
||||
useForStage: false
|
||||
},
|
||||
[BLOCKS_CUSTOM]: {
|
||||
// to be filled by editor-theme3 addon
|
||||
blocksMediaFolder: 'blocks-media/default',
|
||||
colors: blocksThree.blockColors,
|
||||
extensions: {},
|
||||
customExtensionColors: {},
|
||||
useForStage: false
|
||||
}
|
||||
};
|
||||
|
||||
let themeObjectsCreated = 0;
|
||||
|
||||
class Theme {
|
||||
constructor(accent, gui, blocks) {
|
||||
// do not modify these directly
|
||||
/** @readonly */
|
||||
this.id = ++themeObjectsCreated;
|
||||
/** @readonly */
|
||||
this.accent = Object.prototype.hasOwnProperty.call(ACCENT_MAP, accent) ? accent : ACCENT_DEFAULT;
|
||||
/** @readonly */
|
||||
this.gui = Object.prototype.hasOwnProperty.call(GUI_MAP, gui) ? gui : GUI_DEFAULT;
|
||||
/** @readonly */
|
||||
this.blocks = Object.prototype.hasOwnProperty.call(BLOCKS_MAP, blocks) ? blocks : BLOCKS_DEFAULT;
|
||||
}
|
||||
|
||||
static light = new Theme(ACCENT_DEFAULT, GUI_LIGHT, BLOCKS_DEFAULT);
|
||||
static dark = new Theme(ACCENT_DEFAULT, GUI_DARK, BLOCKS_DEFAULT);
|
||||
static highContrast = new Theme(ACCENT_DEFAULT, GUI_DEFAULT, BLOCKS_HIGH_CONTRAST);
|
||||
|
||||
set(what, to) {
|
||||
if (what === 'accent') {
|
||||
return new Theme(to, this.gui, this.blocks);
|
||||
} else if (what === 'gui') {
|
||||
return new Theme(this.accent, to, this.blocks);
|
||||
} else if (what === 'blocks') {
|
||||
return new Theme(this.accent, this.gui, to);
|
||||
}
|
||||
throw new Error(`Unknown theme property: ${what}`);
|
||||
}
|
||||
|
||||
getBlocksMediaFolder() {
|
||||
return BLOCKS_MAP[this.blocks].blocksMediaFolder;
|
||||
}
|
||||
|
||||
getGuiColors() {
|
||||
return defaultsDeep(
|
||||
{},
|
||||
ACCENT_MAP[this.accent].guiColors,
|
||||
GUI_MAP[this.gui].guiColors,
|
||||
guiLight.guiColors
|
||||
);
|
||||
}
|
||||
|
||||
getBlockColors() {
|
||||
return defaultsDeep(
|
||||
{},
|
||||
ACCENT_MAP[this.accent].blockColors,
|
||||
GUI_MAP[this.gui].blockColors,
|
||||
BLOCKS_MAP[this.blocks].colors
|
||||
);
|
||||
}
|
||||
|
||||
getExtensions() {
|
||||
return BLOCKS_MAP[this.blocks].extensions;
|
||||
}
|
||||
|
||||
isDark() {
|
||||
return this.getGuiColors()['color-scheme'] === 'dark';
|
||||
}
|
||||
|
||||
getStageBlockColors() {
|
||||
if (BLOCKS_MAP[this.blocks].useForStage) {
|
||||
return this.getBlockColors();
|
||||
}
|
||||
return Theme.light.getBlockColors();
|
||||
}
|
||||
|
||||
getCustomExtensionColors() {
|
||||
return BLOCKS_MAP[this.blocks].customExtensionColors;
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
Theme,
|
||||
defaultBlockColors,
|
||||
|
||||
ACCENT_RED,
|
||||
ACCENT_PURPLE,
|
||||
ACCENT_BLUE,
|
||||
ACCENT_RAINBOW,
|
||||
ACCENT_MAP,
|
||||
|
||||
GUI_LIGHT,
|
||||
GUI_DARK,
|
||||
GUI_MAP,
|
||||
|
||||
BLOCKS_THREE,
|
||||
BLOCKS_DARK,
|
||||
BLOCKS_HIGH_CONTRAST,
|
||||
BLOCKS_CUSTOM,
|
||||
BLOCKS_MAP
|
||||
};
|
||||
114
scratch-gui/src/lib/themes/themePersistance.js
Normal file
114
scratch-gui/src/lib/themes/themePersistance.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import {BLOCKS_CUSTOM, Theme} from '.';
|
||||
|
||||
const matchMedia = query => (window.matchMedia ? window.matchMedia(query) : null);
|
||||
const PREFERS_HIGH_CONTRAST_QUERY = matchMedia('(prefers-contrast: more)');
|
||||
const PREFERS_DARK_QUERY = matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const STORAGE_KEY = 'tw:theme';
|
||||
|
||||
/**
|
||||
* @returns {Theme} detected theme
|
||||
*/
|
||||
const systemPreferencesTheme = () => {
|
||||
if (PREFERS_HIGH_CONTRAST_QUERY && PREFERS_HIGH_CONTRAST_QUERY.matches) {
|
||||
return Theme.highContrast;
|
||||
}
|
||||
if (PREFERS_DARK_QUERY && PREFERS_DARK_QUERY.matches) {
|
||||
return Theme.dark;
|
||||
}
|
||||
return Theme.light;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {function} onChange callback; no guarantees about arguments
|
||||
* @returns {function} call to remove event listeners to prevent memory leak
|
||||
*/
|
||||
const onSystemPreferenceChange = onChange => {
|
||||
if (
|
||||
!PREFERS_HIGH_CONTRAST_QUERY ||
|
||||
!PREFERS_DARK_QUERY ||
|
||||
// Some old browsers don't support addEventListener on media queries
|
||||
!PREFERS_HIGH_CONTRAST_QUERY.addEventListener ||
|
||||
!PREFERS_DARK_QUERY.addEventListener
|
||||
) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
PREFERS_HIGH_CONTRAST_QUERY.addEventListener('change', onChange);
|
||||
PREFERS_DARK_QUERY.addEventListener('change', onChange);
|
||||
|
||||
return () => {
|
||||
PREFERS_HIGH_CONTRAST_QUERY.removeEventListener('change', onChange);
|
||||
PREFERS_DARK_QUERY.removeEventListener('change', onChange);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {Theme} the theme
|
||||
*/
|
||||
const detectTheme = () => {
|
||||
const systemPreferences = systemPreferencesTheme();
|
||||
|
||||
try {
|
||||
const local = localStorage.getItem(STORAGE_KEY);
|
||||
|
||||
// Migrate legacy preferences
|
||||
if (local === 'dark') {
|
||||
return Theme.dark;
|
||||
}
|
||||
if (local === 'light') {
|
||||
return Theme.light;
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(local);
|
||||
// Any invalid values in storage will be handled by Theme itself
|
||||
return new Theme(
|
||||
parsed.accent || systemPreferences.accent,
|
||||
parsed.gui || systemPreferences.gui,
|
||||
parsed.blocks || systemPreferences.blocks
|
||||
);
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
return systemPreferences;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Theme} theme the theme
|
||||
*/
|
||||
const persistTheme = theme => {
|
||||
const systemPreferences = systemPreferencesTheme();
|
||||
const nonDefaultSettings = {};
|
||||
|
||||
if (theme.accent !== systemPreferences.accent) {
|
||||
nonDefaultSettings.accent = theme.accent;
|
||||
}
|
||||
if (theme.gui !== systemPreferences.gui) {
|
||||
nonDefaultSettings.gui = theme.gui;
|
||||
}
|
||||
// custom blocks are managed by addon at runtime, don't save here
|
||||
if (theme.blocks !== systemPreferences.blocks && theme.blocks !== BLOCKS_CUSTOM) {
|
||||
nonDefaultSettings.blocks = theme.blocks;
|
||||
}
|
||||
|
||||
if (Object.keys(nonDefaultSettings).length === 0) {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(nonDefaultSettings));
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export {
|
||||
onSystemPreferenceChange,
|
||||
detectTheme,
|
||||
persistTheme
|
||||
};
|
||||
Reference in New Issue
Block a user