diff --git a/apps/src/applab/designElements/button.jsx b/apps/src/applab/designElements/button.jsx index 60eeba8b17d15..cf6b32ea55112 100644 --- a/apps/src/applab/designElements/button.jsx +++ b/apps/src/applab/designElements/button.jsx @@ -21,7 +21,6 @@ import * as elementUtils from './elementUtils'; import designMode from '../designMode'; import elementLibrary from './library'; import experiments from '../../util/experiments'; -import {growToGridSize} from '../gridUtils'; class ButtonProperties extends React.Component { static propTypes = { @@ -218,12 +217,12 @@ export default { ketchupAndMustard: 5, lemonade: 6, forest: 6, - watermelon: 10, + watermelon: 20, area51: 10, - polar: 100, + polar: 20, glowInTheDark: 10, - bubblegum: 100, - millennial: 100, + bubblegum: 20, + millennial: 20, robot: 0, classic: 0 }, @@ -268,19 +267,19 @@ export default { classic: 'Arial' }, fontSize: { - default: 18, - orange: 18, - citrus: 18, - ketchupAndMustard: 18, - lemonade: 18, - forest: 18, - watermelon: 18, - area51: 18, - polar: 18, - glowInTheDark: 18, - bubblegum: 18, - millennial: 18, - robot: 18, + default: 15, + orange: 15, + citrus: 15, + ketchupAndMustard: 15, + lemonade: 15, + forest: 15, + watermelon: 15, + area51: 15, + polar: 15, + glowInTheDark: 15, + bubblegum: 15, + millennial: 15, + robot: 15, classic: 14 } }, @@ -291,13 +290,14 @@ export default { element.style.margin = '0px'; if (experiments.isEnabled('applabThemes')) { element.style.borderStyle = 'solid'; - // Roughly scale default size based on the current theme's font size: const currentTheme = elementLibrary.getCurrentTheme( designMode.activeScreen() ); const fontSize = this.themeValues.fontSize[currentTheme]; - element.style.height = `${growToGridSize(fontSize * 2)}px`; - element.style.width = `${10 + growToGridSize(fontSize * 5)}px`; + // Initial button size when fontSize is 14 or smaller is 80x30 (classic theme) + // Initial button size when fontSize is 15 or greater is 100x40 (new themes) + element.style.height = fontSize <= 14 ? '30px' : '40px'; + element.style.width = fontSize <= 14 ? '80px' : '100px'; elementLibrary.applyCurrentTheme(element, designMode.activeScreen()); } else { element.style.height = '30px'; diff --git a/apps/src/applab/designElements/dropdown.jsx b/apps/src/applab/designElements/dropdown.jsx index b972045691aaa..4c2dd52bfa11f 100644 --- a/apps/src/applab/designElements/dropdown.jsx +++ b/apps/src/applab/designElements/dropdown.jsx @@ -203,12 +203,12 @@ export default { ketchupAndMustard: 5, lemonade: 6, forest: 6, - watermelon: 10, + watermelon: 20, area51: 10, - polar: 100, + polar: 20, glowInTheDark: 10, - bubblegum: 100, - millennial: 100, + bubblegum: 20, + millennial: 20, robot: 0, classic: 0 }, @@ -253,19 +253,19 @@ export default { classic: 'Arial' }, fontSize: { - default: 15, - orange: 15, - citrus: 15, - ketchupAndMustard: 15, - lemonade: 15, - forest: 15, - watermelon: 15, - area51: 15, - polar: 15, - glowInTheDark: 15, - bubblegum: 15, - millennial: 15, - robot: 15, + default: 13, + orange: 13, + citrus: 13, + ketchupAndMustard: 13, + lemonade: 13, + forest: 13, + watermelon: 13, + area51: 13, + polar: 13, + glowInTheDark: 13, + bubblegum: 13, + millennial: 13, + robot: 13, classic: 14 } }, diff --git a/apps/src/applab/designElements/label.jsx b/apps/src/applab/designElements/label.jsx index 7fc68b2a7bf95..752fefb1b04ae 100644 --- a/apps/src/applab/designElements/label.jsx +++ b/apps/src/applab/designElements/label.jsx @@ -203,14 +203,14 @@ export default { default: 0, orange: 0, citrus: 2, - ketchupAndMustard: 200, + ketchupAndMustard: 10, lemonade: 0, forest: 2, watermelon: 0, - area51: 20, + area51: 10, polar: 2, glowInTheDark: 0, - bubblegum: 100, + bubblegum: 10, millennial: 4, robot: 0, classic: 0 @@ -256,19 +256,19 @@ export default { classic: 'Arial' }, fontSize: { - default: 15, - orange: 15, - citrus: 15, - ketchupAndMustard: 15, - lemonade: 15, - forest: 15, - watermelon: 15, - area51: 15, - polar: 15, - glowInTheDark: 15, - bubblegum: 15, - millennial: 15, - robot: 15, + default: 13, + orange: 13, + citrus: 13, + ketchupAndMustard: 13, + lemonade: 13, + forest: 13, + watermelon: 13, + area51: 13, + polar: 13, + glowInTheDark: 13, + bubblegum: 13, + millennial: 13, + robot: 13, classic: 14 } }, diff --git a/apps/src/applab/designElements/screen.jsx b/apps/src/applab/designElements/screen.jsx index 1d398705215a9..3f51bd5476842 100644 --- a/apps/src/applab/designElements/screen.jsx +++ b/apps/src/applab/designElements/screen.jsx @@ -178,10 +178,11 @@ export default { element.style.position = 'absolute'; element.style.zIndex = 0; if (experiments.isEnabled('applabThemes')) { - element.setAttribute( - 'data-theme', - applabConstants.themeOptions[applabConstants.DEFAULT_THEME_INDEX] + // New screens are created with the same theme as is currently active + const currentTheme = elementLibrary.getCurrentTheme( + designMode.activeScreen() ); + element.setAttribute('data-theme', currentTheme); elementLibrary.applyCurrentTheme(element, element); } diff --git a/apps/src/applab/designElements/textInput.jsx b/apps/src/applab/designElements/textInput.jsx index 375776e2ed8be..d2138f9af32ae 100644 --- a/apps/src/applab/designElements/textInput.jsx +++ b/apps/src/applab/designElements/textInput.jsx @@ -271,19 +271,19 @@ export default { classic: 'Arial' }, fontSize: { - default: 15, - orange: 15, - citrus: 15, - ketchupAndMustard: 15, - lemonade: 15, - forest: 15, - watermelon: 15, - area51: 15, - polar: 15, - glowInTheDark: 15, - bubblegum: 15, - millennial: 15, - robot: 15, + default: 13, + orange: 13, + citrus: 13, + ketchupAndMustard: 13, + lemonade: 13, + forest: 13, + watermelon: 13, + area51: 13, + polar: 13, + glowInTheDark: 13, + bubblegum: 13, + millennial: 13, + robot: 13, classic: 14 } }, diff --git a/apps/src/applab/designElements/textarea.jsx b/apps/src/applab/designElements/textarea.jsx index e6047ad43e716..33cee17b6e5d6 100644 --- a/apps/src/applab/designElements/textarea.jsx +++ b/apps/src/applab/designElements/textarea.jsx @@ -206,7 +206,7 @@ export default { citrus: 4, ketchupAndMustard: 5, lemonade: 6, - forest: 8, + forest: 5, watermelon: 20, area51: 20, polar: 8, @@ -257,19 +257,19 @@ export default { classic: 'Arial' }, fontSize: { - default: 15, - orange: 15, - citrus: 15, - ketchupAndMustard: 15, - lemonade: 15, - forest: 15, - watermelon: 15, - area51: 15, - polar: 15, - glowInTheDark: 15, - bubblegum: 15, - millennial: 15, - robot: 15, + default: 13, + orange: 13, + citrus: 13, + ketchupAndMustard: 13, + lemonade: 13, + forest: 13, + watermelon: 13, + area51: 13, + polar: 13, + glowInTheDark: 13, + bubblegum: 13, + millennial: 13, + robot: 13, classic: 14 } }, diff --git a/apps/src/applab/themeColor.js b/apps/src/applab/themeColor.js index 8332f809c2781..366e5973373e8 100644 --- a/apps/src/applab/themeColor.js +++ b/apps/src/applab/themeColor.js @@ -117,7 +117,7 @@ module.exports = { default: '#4D575F', orange: '#000000', citrus: '#000000', - ketchupAndMustard: '#151F00', + ketchupAndMustard: '#193A55', lemonade: '#FFFFFF', forest: '#FFFFFF', watermelon: '#151F00', @@ -133,11 +133,11 @@ module.exports = { default: '#000000', orange: '#000000', citrus: '#69883D', - ketchupAndMustard: '#151F00', + ketchupAndMustard: '#193A55', lemonade: '#ACCFDE', - forest: '#000000', + forest: '#482F08', watermelon: '#578B2E', - area51: '#C4ABFF', + area51: '#B394FF', polar: '#ACCFDE', glowInTheDark: '#5EFF5E', bubblegum: '#FFFFFF', @@ -147,7 +147,7 @@ module.exports = { }, buttonBackground: { default: '#FFA400', - orange: '#00ADBC', + orange: '#4BC6D0', citrus: '#F7EC60', ketchupAndMustard: '#F9DD54', lemonade: '#5BB7E7', @@ -165,7 +165,7 @@ module.exports = { default: '#FFFFFF', orange: '#FFFFFF', citrus: '#000000', - ketchupAndMustard: '#151F00', + ketchupAndMustard: '#193A55', lemonade: '#FFFFFF', forest: '#FFFFFF', watermelon: '#151F00', @@ -181,11 +181,11 @@ module.exports = { default: '#4D575F', orange: '#FFFFFF', citrus: '#69883D', - ketchupAndMustard: '#151F00', + ketchupAndMustard: '#193A55', lemonade: '#ACCFDE', - forest: '#000000', + forest: '#482F08', watermelon: '#578B2E', - area51: '#C4ABFF', + area51: '#B394FF', polar: '#ACCFDE', glowInTheDark: '#5EFF5E', bubblegum: '#FFFFFF', @@ -213,9 +213,9 @@ module.exports = { default: '#4D575F', orange: '#FFFFFF', citrus: '#000000', - ketchupAndMustard: '#151F00', + ketchupAndMustard: '#193A55', lemonade: '#00A8FF', - forest: '#65491D', + forest: '#482F08', watermelon: '#151F00', area51: '#C4ABFF', polar: '#EFFAFF',