Revert "Merge pull request #28232 from code-dot-org/cpirich/applab-th…

…eme-design-updates" This reverts commit 8fd4040, reversing changes made to 275aee6.
code-dot-org · Jun 3, 2019 · ac482b4 · ac482b4
1 parent c76835d
commit ac482b4
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 96 deletions.
diff --git a/apps/src/applab/designElements/button.jsx b/apps/src/applab/designElements/button.jsx
@@ -21,6 +21,7 @@ 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 = {
@@ -217,12 +218,12 @@ export default {
       ketchupAndMustard: 5,
       lemonade: 6,
       forest: 6,
-      watermelon: 20,
+      watermelon: 10,
       area51: 10,
-      polar: 20,
+      polar: 100,
       glowInTheDark: 10,
-      bubblegum: 20,
-      millennial: 20,
+      bubblegum: 100,
+      millennial: 100,
       robot: 0,
       classic: 0
     },
@@ -267,19 +268,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: 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,
       classic: 14
     }
   },
@@ -290,14 +291,13 @@ 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];
-      // 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';
+      element.style.height = `${growToGridSize(fontSize * 2)}px`;
+      element.style.width = `${10 + growToGridSize(fontSize * 5)}px`;
       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
@@ -203,12 +203,12 @@ export default {
       ketchupAndMustard: 5,
       lemonade: 6,
       forest: 6,
-      watermelon: 20,
+      watermelon: 10,
       area51: 10,
-      polar: 20,
+      polar: 100,
       glowInTheDark: 10,
-      bubblegum: 20,
-      millennial: 20,
+      bubblegum: 100,
+      millennial: 100,
       robot: 0,
       classic: 0
     },
@@ -253,19 +253,19 @@ export default {
       classic: 'Arial'
     },
     fontSize: {
-      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,
+      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
     }
   },

diff --git 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: 10,
+      ketchupAndMustard: 200,
       lemonade: 0,
       forest: 2,
       watermelon: 0,
-      area51: 10,
+      area51: 20,
       polar: 2,
       glowInTheDark: 0,
-      bubblegum: 10,
+      bubblegum: 100,
       millennial: 4,
       robot: 0,
       classic: 0
@@ -256,19 +256,19 @@ export default {
       classic: 'Arial'
     },
     fontSize: {
-      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,
+      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
     }
   },

diff --git a/apps/src/applab/designElements/screen.jsx b/apps/src/applab/designElements/screen.jsx
@@ -178,11 +178,10 @@ export default {
     element.style.position = 'absolute';
     element.style.zIndex = 0;
     if (experiments.isEnabled('applabThemes')) {
-      // New screens are created with the same theme as is currently active
-      const currentTheme = elementLibrary.getCurrentTheme(
-        designMode.activeScreen()
+      element.setAttribute(
+        'data-theme',
+        applabConstants.themeOptions[applabConstants.DEFAULT_THEME_INDEX]
       );
-      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
@@ -271,19 +271,19 @@ export default {
       classic: 'Arial'
     },
     fontSize: {
-      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,
+      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
     }
   },

diff --git 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: 5,
+      forest: 8,
       watermelon: 20,
       area51: 20,
       polar: 8,
@@ -257,19 +257,19 @@ export default {
       classic: 'Arial'
     },
     fontSize: {
-      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,
+      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
     }
   },

diff --git 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: '#193A55',
+    ketchupAndMustard: '#151F00',
     lemonade: '#FFFFFF',
     forest: '#FFFFFF',
     watermelon: '#151F00',
@@ -133,11 +133,11 @@ module.exports = {
     default: '#000000',
     orange: '#000000',
     citrus: '#69883D',
-    ketchupAndMustard: '#193A55',
+    ketchupAndMustard: '#151F00',
     lemonade: '#ACCFDE',
-    forest: '#482F08',
+    forest: '#000000',
     watermelon: '#578B2E',
-    area51: '#B394FF',
+    area51: '#C4ABFF',
     polar: '#ACCFDE',
     glowInTheDark: '#5EFF5E',
     bubblegum: '#FFFFFF',
@@ -147,7 +147,7 @@ module.exports = {
   },
   buttonBackground: {
     default: '#FFA400',
-    orange: '#4BC6D0',
+    orange: '#00ADBC',
     citrus: '#F7EC60',
     ketchupAndMustard: '#F9DD54',
     lemonade: '#5BB7E7',
@@ -165,7 +165,7 @@ module.exports = {
     default: '#FFFFFF',
     orange: '#FFFFFF',
     citrus: '#000000',
-    ketchupAndMustard: '#193A55',
+    ketchupAndMustard: '#151F00',
     lemonade: '#FFFFFF',
     forest: '#FFFFFF',
     watermelon: '#151F00',
@@ -181,11 +181,11 @@ module.exports = {
     default: '#4D575F',
     orange: '#FFFFFF',
     citrus: '#69883D',
-    ketchupAndMustard: '#193A55',
+    ketchupAndMustard: '#151F00',
     lemonade: '#ACCFDE',
-    forest: '#482F08',
+    forest: '#000000',
     watermelon: '#578B2E',
-    area51: '#B394FF',
+    area51: '#C4ABFF',
     polar: '#ACCFDE',
     glowInTheDark: '#5EFF5E',
     bubblegum: '#FFFFFF',
@@ -213,9 +213,9 @@ module.exports = {
     default: '#4D575F',
     orange: '#FFFFFF',
     citrus: '#000000',
-    ketchupAndMustard: '#193A55',
+    ketchupAndMustard: '#151F00',
     lemonade: '#00A8FF',
-    forest: '#482F08',
+    forest: '#65491D',
     watermelon: '#151F00',
     area51: '#C4ABFF',
     polar: '#EFFAFF',