@breakside/jskit 2021.36.1 → 2021.40.0

package/Root/Frameworks/UIKit/UIAccessibility.js

@@ -1,3 +1,18 @@
+// Copyright 2020 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
 'use strict';
 

package/Root/Frameworks/UIKit/UIActivityIndicatorView.js

@@ -16,6 +16,7 @@
 // #import "UIView.js"
 // #import "UICustomAnimation.js"
 // #import "UIImageLayer.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -190,7 +191,7 @@ UIActivityIndicatorView.Style = {
     light: 1
 };
 
-var darkColor = JSColor.black;
+var darkColor = JSColor.initWithUIStyles(JSColor.black, JSColor.white);
 var lightColor = JSColor.white;
 
 var images = Object.create({}, {

package/Root/Frameworks/UIKit/UIAlertController.js

@@ -19,6 +19,7 @@
 // #import "UIButton.js"
 // #import "UIPopupWindow.js"
 // #import "UIAlertAction.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -214,9 +215,9 @@ UIAlertController.ButtonStylers = Object.create({}, {
         get: function(){
             var styler = UIButtonDefaultStyler.init();
             styler.font = styler.font.fontWithPointSize(JSFont.Size.detail).fontWithWeight(JSFont.Weight.bold);
-            styler.normalTitleColor = JSColor.initWithRGBA(204/255,0,0);
-            styler.activeTitleColor = styler.normalTitleColor.colorDarkenedByPercentage(0.2);
-            styler.disabledTitleColor = styler.normalTitleColor.colorWithAlpha(0.5);
+            styler.normalTitleColor = JSColor.destructive;
+            styler.activeTitleColor = JSColor.destructive.colorDarkenedByPercentage(0.2);
+            styler.disabledTitleColor = JSColor.destructive.colorWithAlpha(0.5);
             Object.defineProperty(this, 'destructive', {writable: true, value: styler});
             return styler;
         },

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, {
@@ -29,7 +30,7 @@ JSClass("UIButton", UIControl, {
     _imagesByState: null,
     _backgroundImagesByState: null,
 
-    _imageView: null,
+    imageView: JSLazyInitProperty('_createImageView', '_imageView'),
     _backgroundImageView: null,
 
     initWithSpec: function(spec){
@@ -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"
@@ -13,6 +28,8 @@ JSProtocol("UIColorPanelDelegate", JSProtocol, {
 
 JSClass("UIColorPanel", UIPopupWindow, {
 
+    escapeClosesWindow: true,
+
     init: function(){
         UIColorPanel.$super.init.call(this);
         this.contentViewController = UIColorPanelViewController.init();
@@ -153,16 +170,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 +217,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 +230,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 +747,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.allowsAlpha = spec.valueForKey("allowsAlpha", JSColor);
         }
+        this.update();
     },
 
     commonUIControlInit: function(){
@@ -36,14 +52,14 @@ JSClass("UIColorWell", UIControl, {
     color: JSDynamicProperty("_color", JSColor.black),
 
     setColor: function(color){
-        this._color = color;
+        this._color = color.rgbaColor();
         this.update();
     },
 
     _changeColor: function(color){
         this.color = color;
-        this.sendActionsForEvents(UIControl.Event.valueChanged);
         this.didChangeValueForBinding('color');
+        this.sendActionsForEvents(UIControl.Event.valueChanged);
     },
 
     // ----------------------------------------------------------------------
@@ -288,15 +304,23 @@ JSClass("UIColorWellDefaultStyler", UIColorWellStyler, {
         }
         if (spec.containsKey("normalBorderColor")){
             this.normalBorderColor = spec.valueForKey("normalBorderColor", JSColor);
+        }else{
+            this.normalBorderColor = JSColor.black.colorWithAlpha(0.2);
         }
         if (spec.containsKey("activeBorderColor")){
             this.activeBorderColor = spec.valueForKey("activeBorderColor", JSColor);
+        }else{
+            this.activeBorderColor = JSColor.black.colorWithAlpha(0.4);
         }
         if (spec.containsKey("dropTargetBorderColor")){
             this.dropTargetBorderColor = spec.valueForKey("dropTargetBorderColor", JSColor);
+        }else{
+            this.dropTargetBorderColor = JSColor.black.colorWithAlpha(0.2);
         }
         if (spec.containsKey("disabledBorderColor")){
             this.disabledBorderColor = spec.valueForKey("disabledBorderColor", JSColor);
+        }else{
+            this.disabledBorderColor = JSColor.clear;
         }
         if (spec.containsKey("normalBorderWidth")){
             this.normalBorderWidth = spec.valueForKey("normalBorderWidth");
@@ -325,6 +349,8 @@ JSClass("UIColorWellDefaultStyler", UIColorWellStyler, {
         }
         if (spec.containsKey("wellInnerShadowColor")){
             this.wellInnerShadowColor = spec.valueForKey("wellInnerShadowColor", JSColor);
+        }else{
+            this.wellInnerShadowColor = JSColor.black.colorWithAlpha(0.4);
         }
         if (spec.containsKey("wellInnerShadowOffset")){
             this.wellInnerShadowOffset = spec.valueForKey("wellInnerShadowOffset", JSPoint);

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(){