@breakside/jskit 2021.36.0 → 2021.39.0

package/Root/Frameworks/UIKit/UIAnimation.js

@@ -96,19 +96,7 @@ UIAnimation.interpolationForValues = function(from, to){
         return UIAnimation.interpolateAffineTransform;
     }
     if (from.isKindOfClass && from.isKindOfClass(JSColor)){
-        if (from.components.length == 1){
-            return UIAnimation.interpolate1Color;
-        }
-        if (from.components.length == 2){
-            return UIAnimation.interpolate2Color;
-        }
-        if (from.components.length == 3){
-            return UIAnimation.interpolate3Color;
-        }
-        if (from.components.length == 4){
-            return UIAnimation.interpolate4Color;
-        }
-        return UIAnimation.interpolateNull;
+        return UIAnimation.interpolateColor;
     }
     if (from.animationInterpolation){
         return from.animationInterpolation;
@@ -158,6 +146,12 @@ UIAnimation.interpolateAffineTransform = function(from, to, progress){
     );
 };
 
+UIAnimation.interpolateColor = function(from, to, progress){
+    var mixed = from.space.mixedComponents(from.components, to.components, progress);
+    mixed.push(from.components[from.space.numberOfComponents] + (to.components[to.space.numberOfComponents] - from.components[from.space.numberOfComponents]) * progress);
+    return JSColor.initWithSpaceAndComponents(from.space, mixed);
+};
+
 UIAnimation.interpolate1Color = function(from, to, progress){
     return JSColor.initWithSpaceAndComponents(from.space, [
         from.components[0] + (to.components[0] - from.components[0]) * progress

package/Root/Frameworks/UIKit/UIApplication.js

@@ -37,6 +37,9 @@ JSClass('UIApplication', UIResponder, {
         logger.info("Creating application");
         shared = this;
         this.windowServer = windowServer;
+        if (this.bundle.info.UIUserInterfaceStyle === "light"){
+            this.windowServer.darkModeEnabled = false;
+        }
         this._windows = [];
         this.windowServer.postNotificationForAccessibilityElement(UIAccessibility.Notification.elementCreated, this);
     },

package/Root/Frameworks/UIKit/UIBasicAnimation.js

@@ -97,6 +97,12 @@ JSClass('UIBasicAnimation', UIPropertyAnimation, {
         if (this._toValue === null){
             this._toValue = JSResolveDottedName(this.layer.model, this.keyPath);
         }
+        if ((this._fromValue instanceof JSColor) && (this._toValue instanceof JSColor)){
+            if (this._fromValue.space !== this._toValue.space || !this._fromValue.space.canMixComponents){
+                this._fromValue = this._fromValue.rgbaColor();
+                this._toValue = this._toValue.rgbaColor();
+            }
+        }
         return UIAnimation.interpolationForValues(this._fromValue, this._toValue);
     }
 

package/Root/Frameworks/UIKit/UIButton.js

@@ -17,6 +17,7 @@
 // #import "UILabel.js"
 // #import "UIImageView.js"
 // #import "UIEvent.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 JSClass("UIButton", UIControl, {
@@ -404,7 +405,8 @@ JSClass("UIButtonStyler", UIControlStyler, {
                     size.width += titleSize.width;
                 }
             }else if (image !== null){
-                size.width += image.size.width;
+                imageScale = contentHeight / image.size.height;
+                size.width += Math.ceil(image.size.width * imageScale);
             }
             return size;
         }
@@ -420,7 +422,9 @@ JSClass("UIButtonStyler", UIControlStyler, {
                 size.height += titleSize.height;
             }
         }else if (image !== null){
-            size.width += image.size.width;
+            contentHeight = image.size.height;
+            imageScale = contentHeight / image.size.height;
+            size.width += Math.ceil(image.size.width * imageScale);
             size.height += image.size.height;
         }
         return size;
@@ -472,9 +476,11 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
 
     normalBackgroundColor: null,
     disabledBackgroundColor: null,
+    overBackgroundColor: null,
     activeBackgroundColor: null,
     normalTitleColor: null,
     disabledTitleColor: null,
+    overTitleColor: null,
     activeTitleColor: null,
     cornerRadius: 0,
 
@@ -493,7 +499,7 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
 
     init: function(){
         UIButtonCustomStyler.$super.init.call(this);
-        this.initWithColor(JSColor.black);
+        this.initWithColor(JSColor.text);
     },
 
     initWithSpec: function(spec){
@@ -501,9 +507,27 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
         if (spec.containsKey('normalBackgroundColor')){
             this.normalBackgroundColor = spec.valueForKey("normalBackgroundColor", JSColor);
         }
+        if (spec.containsKey('activeBackgroundColor')){
+            this.activeBackgroundColor = spec.valueForKey("activeBackgroundColor", JSColor);
+        }
+        if (spec.containsKey('disabledBackgroundColor')){
+            this.disabledBackgroundColor = spec.valueForKey("disabledBackgroundColor", JSColor);
+        }
+        if (spec.containsKey('overBackgroundColor')){
+            this.overBackgroundColor = spec.valueForKey("overBackgroundColor", JSColor);
+        }
         if (spec.containsKey('normalTitleColor')){
             this.normalTitleColor = spec.valueForKey("normalTitleColor", JSColor);
         }
+        if (spec.containsKey('activeTitleColor')){
+            this.activeTitleColor = spec.valueForKey("activeTitleColor", JSColor);
+        }
+        if (spec.containsKey('disabledTitleColor')){
+            this.disabledTitleColor = spec.valueForKey("disabledTitleColor", JSColor);
+        }
+        if (spec.containsKey('overTitleColor')){
+            this.overTitleColor = spec.valueForKey("overTitleColor", JSColor);
+        }
         if (spec.containsKey('cornerRadius')){
             this.cornerRadius = spec.valueForKey("cornerRadius");
         }
@@ -517,6 +541,9 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
         if (this.disabledTitleColor === null){
             this.disabledTitleColor = this.normalTitleColor.colorWithAlpha(0.5);
         }
+        if (this.overTitleColor === null){
+            this.overTitleColor = this.normalTitleColor;
+        }
         if (this.normalBackgroundColor !== null){
             if (this.activeBackgroundColor === null){
                 this.activeBackgroundColor = this.normalBackgroundColor.colorDarkenedByPercentage(0.2);
@@ -551,6 +578,14 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
             if (button._imageView !== null){
                 button._imageView.templateColor = this.activeTitleColor;
             }
+        }else if (button.over){
+            button.layer.backgroundColor = this.overBackgroundColor;
+            if (button._titleLabel !== null){
+                button._titleLabel.textColor = this.overTitleColor;
+            }
+            if (button._imageView !== null){
+                button._imageView.templateColor = this.overTitleColor;
+            }
         }else{
             button.layer.backgroundColor = this.normalBackgroundColor;
             if (button._titleLabel !== null){
@@ -587,16 +622,16 @@ JSClass("UIButtonDefaultStyler", UIButtonStyler, {
 
     init: function(){
         UIButtonDefaultStyler.$super.init.call(this);
-        this.normalBackgroundColor = UIButtonDefaultStyler.NormalBackgroundColor;
-        this.disabledBackgroundColor = UIButtonDefaultStyler.DisabledBackgroundColor;
-        this.activeBackgroundColor = UIButtonDefaultStyler.ActiveBackgroundColor;
-        this.normalBorderColor = UIButtonDefaultStyler.NormalBorderColor;
-        this.disabledBorderColor = UIButtonDefaultStyler.DisabledBorderColor;
-        this.activeBorderColor = UIButtonDefaultStyler.ActiveBorderColor;
-        this.normalTitleColor = UIButtonDefaultStyler.NormalTitleColor;
-        this.disabledTitleColor = UIButtonDefaultStyler.DisabledTitleColor;
-        this.activeTitleColor = UIButtonDefaultStyler.ActiveTitleColor;
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        this.normalBackgroundColor = JSColor.controlBackground;
+        this.disabledBackgroundColor = JSColor.disabledControlBackground;
+        this.activeBackgroundColor = JSColor.activeControlBackground;
+        this.normalBorderColor = JSColor.controlBorder;
+        this.disabledBorderColor = JSColor.disabledControlBorder;
+        this.activeBorderColor = JSColor.activeControlBorder;
+        this.normalTitleColor = JSColor.controlTitle;
+        this.disabledTitleColor = JSColor.disabledControlTitle;
+        this.activeTitleColor = JSColor.activeControlTitle;
+        this.shadowColor = JSColor.controlShadow;
         this.shadowOffset = JSPoint(0, 1);
         this.titleInsets = JSInsets(3, 7);
     },
@@ -648,18 +683,6 @@ JSClass("UIButtonDefaultStyler", UIButtonStyler, {
 
 });
 
-UIButtonDefaultStyler.NormalBackgroundColor = JSColor.initWithRGBA(250/255,250/255,250/255);
-UIButtonDefaultStyler.ActiveBackgroundColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-UIButtonDefaultStyler.DisabledBackgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255);
-
-UIButtonDefaultStyler.NormalBorderColor = JSColor.initWithRGBA(204/255,204/255,204/255);
-UIButtonDefaultStyler.ActiveBorderColor = JSColor.initWithRGBA(192/255,192/255,192/255);
-UIButtonDefaultStyler.DisabledBorderColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-
-UIButtonDefaultStyler.NormalTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UIButtonDefaultStyler.ActiveTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UIButtonDefaultStyler.DisabledTitleColor = JSColor.initWithRGBA(152/255,152/255,152/255);
-
 JSClass("UIButtonImageStyler", UIButtonStyler, {
 
     color: JSDynamicProperty('_color', null),

package/Root/Frameworks/UIKit/UICheckbox.js

@@ -17,6 +17,7 @@
 // #import "UILabel.js"
 // #import "UIImageView.js"
 // #import "UIEvent.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -255,16 +256,16 @@ JSClass("UICheckboxDefaultStyler", UICheckboxStyler, {
     shadowRadius: 1,
 
     init: function(){
-        this.normalBackgroundColor = UICheckboxDefaultStyler.NormalBackgroundColor;
-        this.disabledBackgroundColor = UICheckboxDefaultStyler.DisabledBackgroundColor;
-        this.activeBackgroundColor = UICheckboxDefaultStyler.ActiveBackgroundColor;
-        this.normalBorderColor = UICheckboxDefaultStyler.NormalBorderColor;
-        this.disabledBorderColor = UICheckboxDefaultStyler.DisabledBorderColor;
-        this.activeBorderColor = UICheckboxDefaultStyler.ActiveBorderColor;
-        this.normalTitleColor = UICheckboxDefaultStyler.NormalTitleColor;
-        this.disabledTitleColor = UICheckboxDefaultStyler.DisabledTitleColor;
-        this.activeTitleColor = UICheckboxDefaultStyler.ActiveTitleColor;
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        this.normalBackgroundColor = JSColor.controlBackground;
+        this.disabledBackgroundColor = JSColor.disabledControlBackground;
+        this.activeBackgroundColor = JSColor.activeControlBackground;
+        this.normalBorderColor = JSColor.controlBorder;
+        this.disabledBorderColor = JSColor.disabledControlBorder;
+        this.activeBorderColor = JSColor.activeControlBorder;
+        this.normalTitleColor = JSColor.controlTitle;
+        this.disabledTitleColor = JSColor.disabledControlTitle;
+        this.activeTitleColor = JSColor.activeControlTitle;
+        this.shadowColor = JSColor.controlShadow;
         this.shadowOffset = JSPoint(0, 1);
     },
 
@@ -344,18 +345,6 @@ JSClass("UICheckboxDefaultStyler", UICheckboxStyler, {
 
 });
 
-UICheckboxDefaultStyler.NormalBackgroundColor = JSColor.initWithRGBA(250/255,250/255,250/255);
-UICheckboxDefaultStyler.ActiveBackgroundColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-UICheckboxDefaultStyler.DisabledBackgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255);
-
-UICheckboxDefaultStyler.NormalBorderColor = JSColor.initWithRGBA(204/255,204/255,204/255);
-UICheckboxDefaultStyler.ActiveBorderColor = JSColor.initWithRGBA(192/255,192/255,192/255);
-UICheckboxDefaultStyler.DisabledBorderColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-
-UICheckboxDefaultStyler.NormalTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UICheckboxDefaultStyler.ActiveTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UICheckboxDefaultStyler.DisabledTitleColor = JSColor.initWithRGBA(152/255,152/255,152/255);
-
 var images = Object.create({}, {
 
     bundle: {

package/Root/Frameworks/UIKit/UIColorPanel.js

@@ -1,3 +1,18 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
 // #import "UIPopupWindow.js"
 // #import "UISlider.js"
 // #import "UITextField.js"
@@ -153,16 +168,13 @@ JSClass("UIColorPanelViewController", UIViewController, {
         wellStyler.disabledBorderWidth = 0;
         wellStyler.cornerRadius = 3;
         var componentStyler = UITextFieldCustomStyler.init();
-        componentStyler.backgroundColor = JSColor.white.colorWithAlpha(0.4);
-        componentStyler.activeBackgroundColor = JSColor.white.colorWithAlpha(0.8);
+        componentStyler.backgroundColor = JSColor.initWithUIStyles(JSColor.white, JSColor.white.colorWithAlpha(0.1));
         componentStyler.cornerRadius = 3;
         componentStyler.textInsets = JSInsets(3, 4);
-        componentStyler.textColor = JSColor.black;
-        componentStyler.placeholderColor = JSColor.black.colorWithAlpha(0.4);
+        componentStyler.textColor = JSColor.text;
+        componentStyler.placeholderColor = JSColor.placeholderText;
         componentStyler.borderWidth = 1;
-        componentStyler.borderColor = JSColor.black.colorWithAlpha(0.2);
-        componentStyler.activeBorderColor = JSColor.black.colorWithAlpha(0.4);
-        componentStyler.disabledBorderColor = JSColor.black.colorWithAlpha(0.2);
+        componentStyler.borderColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.4));
         this.saturationBrightnessControl = UIColorPanelTwoAxisSlider.init();
         this.hueSlider = UISlider.initWithStyler(hueStyler);
         this.alphaSlider = UISlider.initWithStyler(alphaStyler);
@@ -203,7 +215,7 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.hexLabel.text = "Hex";
         this._updateComponentLabels();
         this.component4Label.text = "Alpha";
-        this.hexLabel.textColor = JSColor.initWithWhite(0.5);
+        this.hexLabel.textColor = JSColor.text.colorWithAlpha(0.5);
         this.component1Label.textColor = this.hexLabel.textColor;
         this.component2Label.textColor = this.hexLabel.textColor;
         this.component3Label.textColor = this.hexLabel.textColor;
@@ -216,7 +228,7 @@ JSClass("UIColorPanelViewController", UIViewController, {
 
         var hashLabel = UILabel.init();
         hashLabel.font = this.hexField.font;
-        hashLabel.textColor = JSColor.initWithWhite(0.6);
+        hashLabel.textColor = JSColor.text.colorWithAlpha(0.4);
         hashLabel.text = "#";
         hashLabel.sizeToFit();
         this.hexField.leftAccessoryView = hashLabel;
@@ -733,12 +745,12 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
         this._maximumValue = JSPoint(1, 1);
         this.knobSize = JSSize(16, 16);
         this._value = JSPoint(0, 0);
-        this.normalKnobBackgroundColor = JSColor.white;
-        this.activeKnobBackgroundColor = JSColor.white;
-        this.disabledKnobBackgroundColor = this.normalKnobBackgroundColor.colorWithAlpha(0.5);
-        this.normalKnobBorderColor = JSColor.black.colorWithAlpha(0.2);
-        this.activeKnobBorderColor = JSColor.black.colorWithAlpha(0.3);
-        this.disabledKnobBorderColor = JSColor.black.colorWithAlpha(0.1);
+        this.normalKnobBackgroundColor = JSColor.controlBackground;
+        this.activeKnobBackgroundColor = JSColor.activeControlBackground;
+        this.disabledKnobBackgroundColor = JSColor.disabledControlBackground;
+        this.normalKnobBorderColor = JSColor.controlBorder;
+        this.activeKnobBorderColor = JSColor.activeControlBorder;
+        this.disabledKnobBorderColor = JSColor.disabledControlBorder;
         this.xLayer = UILayer.init();
         this.yLayer = UILayer.init();
         this.yLayer.backgroundGradient = JSGradient.initWithColors([JSColor.black, JSColor.black.colorWithAlpha(0)]);

package/Root/Frameworks/UIKit/UIColorSpace.js

@@ -0,0 +1,132 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// #import Foundation
+// #import "UIUserInterface.js"
+/* global UIApplication */
+"use strict";
+
+JSClass("UIColorSpace", JSMappedColorSpace, {
+
+    name: "ui",
+    numberOfComponents: 1,
+    componentNames: {},
+    colors: null,
+
+    initWithStyles: function(lightColor, darkColor, lightContrastColor, darkContrastColor){
+        if (darkColor === undefined){
+            darkColor = lightColor;
+        }
+        if (lightContrastColor === undefined){
+            lightContrastColor = lightColor;
+        }
+        if (darkContrastColor === undefined){
+            darkContrastColor = darkColor;
+        }
+        this.colors = [
+            lightColor,
+            darkColor,
+            lightContrastColor,
+            darkContrastColor
+        ];
+    },
+
+    colorFromComponents: function(components){
+        var color = this.colors[UIColorSpace.colorIndex];
+        if (components[0] < 1){
+            color = color.colorDarkenedByPercentage(1 - components[0]);
+        }else if (components[0] > 1){
+            color = color.colorLightenedByPercentage(components[0] - 1);
+        }
+        return color;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0] * (1.0 - percentage)
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0] * (1.0 + percentage)
+        ];
+    }
+
+});
+
+UIColorSpace.colorIndex = 0;
+
+UIColorSpace.setTraitCollection = function(traitCollection){
+    if (traitCollection.accessibilityContrast === UIUserInterface.Contrast.high){
+        if (traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            UIColorSpace.colorIndex = 3;
+        }else{
+            UIColorSpace.colorIndex = 2;
+        }
+    }else{
+        if (traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            UIColorSpace.colorIndex = 1;
+        }else{
+            UIColorSpace.colorIndex = 0;
+        }
+    }
+    if (JSColor.invalidateCSSCache){
+        JSColor.invalidateCSSCache();
+    }
+};
+
+JSClass("UINamedColorSpace", JSNamedColorSpace, {
+
+    setColorForName: function(name, color){
+        var namedColor = UINamedColorSpace.$super.setColorForName.call(this, name, color);
+        if (JSGlobalObject.UIApplication && UIApplication.shared){
+            UIApplication.shared.windowServer.setNeedsRedisplay();
+            if (JSColor.invalidateCSSCache){
+                JSColor.invalidateCSSCache();
+            }
+        }
+        var space = this;
+        Object.defineProperty(JSColor, name, {
+            configurable: true,
+            get: function(){
+                return namedColor;
+            },
+            set: function(color){
+                space.setColorForName(name, color);
+            }
+        });
+        return namedColor;
+    },
+
+    setStylesForName: function(name, lightColor, darkColor, lightContrastColor, darkContrastColor){
+        var color = JSColor.initWithUIStyles(lightColor, darkColor, lightContrastColor, darkContrastColor);
+        this.setColorForName(name, color);
+    }
+
+});
+
+Object.defineProperties(JSColorSpace, {
+
+    ui: {
+        configurable: true,
+        get: function(){
+            var space = UINamedColorSpace.init();
+            Object.defineProperty(this, "ui", {value: space});
+            return space;
+        }
+    }
+
+});

package/Root/Frameworks/UIKit/UIColorWell.js

@@ -1,3 +1,18 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
 // #import "UIControl.js"
 // #import "UIPasteboard.js"
 // #import "UIColorPanel.js"
@@ -12,11 +27,12 @@ JSClass("UIColorWell", UIControl, {
     initWithSpec: function(spec){
         UIColorWell.$super.initWithSpec.call(this, spec);
         if (spec.containsKey("color")){
-            this._color = spec.valueForKey("color", JSColor);
+            this._color = spec.valueForKey("color", JSColor).rgbaColor();
         }
         if (spec.containsKey("allowsAlpha")){
             this._allowsAlpha = spec.valueForKey("allowsAlpha", JSColor);
         }
+        this.update();
     },
 
     commonUIControlInit: function(){
@@ -36,7 +52,7 @@ JSClass("UIColorWell", UIControl, {
     color: JSDynamicProperty("_color", JSColor.black),
 
     setColor: function(color){
-        this._color = color;
+        this._color = color.rgbaColor();
         this.update();
     },
 

package/Root/Frameworks/UIKit/UIControl.js

@@ -43,10 +43,14 @@ JSClass("UIControl", UIView, {
         var target;
         var action;
         var event;
-        if (spec.containsKey('target') && spec.containsKey('action')){
-            target = spec.valueForKey("target");
+        if (spec.containsKey('action')){
+            if (spec.containsKey("target")){
+                target = spec.valueForKey("target");
+            }else{
+                target = null;
+            }
             action = spec.valueForKey("action");
-            if (!target.isKindOfClass(UIResponder)){
+            if (target !== null && !target.isKindOfClass(UIResponder)){
                 throw new Error("Action target must be a UIResponder: %s.%s".sprintf(spec.unmodifiedValueForKey("target"), spec.unmodifiedValueForKey("action")));
             }
             this.addAction(action, target);
@@ -267,7 +271,7 @@ JSClass("UIControl", UIView, {
     },
 
     setOver: function(isOver){
-        this.toggleStates(UIControl.State.over, isOver);
+        this.toggleStates(UIControl.State.over, isOver && this.hasOverState);
     },
 
     isActive: function(){
@@ -343,6 +347,13 @@ JSClass("UIControlStyler", JSObject, {
 
     showsOverState: false,
 
+    initWithSpec: function(spec){
+        UIControlStyler.$super.initWithSpec.call(this, spec);
+        if (spec.containsKey("showsOverState")){
+            this.showsOverState = spec.valueForKey("showsOverState");
+        }
+    },
+
     initializeControl: function(control){
     },
 

package/Root/Frameworks/UIKit/UIHTMLDisplayServer.js

@@ -216,7 +216,6 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
     setLayerNeedsDisplay: function(layer){
         var context = this.contextForLayer(layer);
         context.needsCustomDisplay = true;
-        layer._UIHTMLDisplayServerCustomDrawing = true;
         UIHTMLDisplayServer.$super.setLayerNeedsDisplay.call(this, layer);
     },
 
@@ -433,10 +432,7 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
 
     _removeLayerFromDOM: function(layer){
         layer._displayServer = null;
-        if (layer._UIHTMLDisplayServerCustomDrawing){
-            // So the layer will redraw if it's ever re-added
-            layer.setNeedsDisplay();
-        }
+        layer.setNeedsRedisplay();
         var context = this.contextsByObjectID[layer.objectID];
         if (context){
             if (context.element.isConnected){

package/Root/Frameworks/UIKit/UIHTMLTextField.js

@@ -153,7 +153,7 @@ JSClass("UIHTMLTextField", UIControl, {
     // MARK: - Placeholder
 
     placeholder: JSDynamicProperty("_placeholder", null),
-    placeholderColor: JSDynamicProperty("_placeholderColor", null),
+    placeholderColor: JSDynamicProperty("_placeholderColor", JSColor.placeholderText),
 
     setPlaceholder: function(placeholder){
         this._placeholder = placeholder;
@@ -169,15 +169,6 @@ JSClass("UIHTMLTextField", UIControl, {
         this.setNeedsDisplay();
     },
 
-    _createPlaceholderColor: function(){
-        var backgroundColor = this.backgroundColor;
-        if (backgroundColor === null){
-            backgroundColor = JSColor.white;
-        }
-        this._placeholderColor = backgroundColor.colorByBlendingColor(this.textColor, 0.3);
-        this._needsPlaceholderColor = true;
-    },
-
     // --------------------------------------------------------------------
     // MARK: - Secure Entry
 
@@ -205,8 +196,8 @@ JSClass("UIHTMLTextField", UIControl, {
     // MARK: - Styling
 
     textAlignment: JSDynamicProperty("_textAlignment", JSTextAlignment.left),
-    textColor: JSDynamicProperty("_textColor", JSColor.black),
-    localCursorColor: JSDynamicProperty("_localCursorColor", JSColor.black),
+    textColor: JSDynamicProperty("_textColor", JSColor.text),
+    localCursorColor: JSDynamicProperty("_localCursorColor", JSColor.highlight),
     font: JSDynamicProperty("_font", null),
 
     setTextAlignment: function(textAlignment){
@@ -291,9 +282,6 @@ JSClass("UIHTMLTextField", UIControl, {
             UIHTMLTextField.sharedStyleElement.type = "text/css";
             layer.element.ownerDocument.head.appendChild(UIHTMLTextField.sharedStyleElement);
         }
-        if (this._placeholderColor === null){
-            this._createPlaceholderColor();
-        }
         var stylesheet = UIHTMLTextField.sharedStyleElement.sheet;
         var index = stylesheet.insertRule("#%s::selection { }".sprintf(this.inputElement.id));
         this.selectionStyleRule = stylesheet.cssRules.item(index);