tweaked scripts tab for fade-out

HISTORY.md

@@ -4,6 +4,7 @@
 
 ### 2020-07-21
 * blocks: tweaked block highlights for fade-out
+* widgets, gui: tweaked scripts tab for fade-out
 
 ### 2020-07-20
 * objects: fixed a list-watcher direct-editing offset bug

snap.html

@@ -6,11 +6,11 @@
         <link rel="shortcut icon" href="src/favicon.ico">
         <script src="src/morphic.js?version=2020-07-20"></script>
         <script src="src/symbols.js?version=2020-07-20"></script>
-        <script src="src/widgets.js?version=2020-07-13"></script>
+        <script src="src/widgets.js?version=2020-07-21"></script>
         <script src="src/blocks.js?version=2020-07-21"></script>
         <script src="src/threads.js?version=2020-07-09"></script>
         <script src="src/objects.js?version=2020-07-20"></script>
-        <script src="src/gui.js?version=2020-07-19"></script>
+        <script src="src/gui.js?version=2020-07-21"></script>
         <script src="src/paint.js?version=2020-05-17"></script>
         <script src="src/lists.js?version=2020-07-01"></script>
         <script src="src/byob.js?version=2020-07-01"></script>

src/gui.js

@@ -78,7 +78,7 @@ Animation, BoxMorph, BlockEditorMorph, BlockDialogMorph, Note, ZERO, BLACK*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2020-July-19';
+modules.gui = '2020-July-21';
 
 // Declarations
 
@@ -1533,6 +1533,17 @@ IDE_Morph.prototype.createSpriteBar = function () {
     tab.labelShadowOffset = new Point(-1, -1);
     tab.labelShadowColor = tabColors[1];
     tab.labelColor = this.buttonLabelColor;
+
+    tab.getPressRenderColor = function () {
+        if (MorphicPreferences.isFlat) {
+            return this.pressColor;
+        }
+        return this.pressColor.lighter(12.5).mixed(
+            Math.max(SyntaxElementMorph.prototype.alpha - 0.15, 0),
+            BLACK
+        );
+    };
+
     tab.fixLayout();
     tabBar.add(tab);
 

src/widgets.js

@@ -85,7 +85,7 @@ HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
 ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences,
 ScrollFrameMorph, MenuItemMorph, Note*/
 
-modules.widgets = '2020-July-13';
+modules.widgets = '2020-July-21';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -728,7 +728,7 @@ ToggleButtonMorph.prototype.render = function (ctx) {
         // note: don't invert the 3D-ish edges for 'pressed' state, because
         // it will stay that way, and should not look inverted (or should it?)
         this.drawOutline(ctx);
-        this.drawBackground(ctx, this.pressColor);
+        this.drawBackground(ctx, this.getPressRenderColor());
         this.drawEdges(
             ctx,
             this.pressColor,
@@ -748,6 +748,11 @@ ToggleButtonMorph.prototype.render = function (ctx) {
     }
 };
 
+ToggleButtonMorph.prototype.getPressRenderColor = function () {
+    // can be overridden by my children
+    return this.pressColor;
+};
+
 ToggleButtonMorph.prototype.drawEdges = function (
     ctx,
     color,