@breakside/jskit 2021.37.0 → 2021.39.0

package/Root/Frameworks/Foundation/JSColorSpace.js

@@ -15,6 +15,7 @@
 
 // #import "JSObject.js"
 // #import "CoreTypes.js"
+/* global JSSpec, JSBundle, JSColor */
 'use strict';
 
 (function(){
@@ -22,6 +23,7 @@
 JSClass("JSColorSpace", JSObject, {
 
     numberOfComponents: 0,
+    canMixComponents: true,
 
     rgbFromComponents: function(components){
         return JSColorSpace.rgb.componentsFromSpace(this, components);
@@ -31,6 +33,10 @@ JSClass("JSColorSpace", JSObject, {
         return JSColorSpace.gray.componentsFromSpace(this, components);
     },
 
+    alphaFromComponents: function(components){
+        return 1;
+    },
+
     xyzFromComponents: function(components){
     },
 
@@ -45,7 +51,36 @@ JSClass("JSColorSpace", JSObject, {
         }
         var xyz = space.xyzFromComponents(components);
         return this.componentsFromXYZ(xyz);
-    }
+    },
+
+    mixedComponents: function(a, b, percentage){
+        var mixed = [];
+        for (var i = 0; i < this.numberOfComponents; ++i){
+            mixed.push(a[i] + (b[i] - a[i]) * percentage);
+        }
+        return mixed;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        var rgb = this.rgbFromComponents(components);
+        var darkenedRGB = JSColorSpace.rgb.componentsDarkenedByPercentage(rgb, percentage);
+        return this.componentsFromSpace(JSColorSpace.rgb, darkenedRGB);
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        var rgb = this.rgbFromComponents(components);
+        var lightenedRGB = JSColorSpace.rgb.componentsLightenedByPercentage(rgb, percentage);
+        return this.componentsFromSpace(JSColorSpace.rgb, lightenedRGB);
+    },
+
+    compareComponents: function(a, b){
+        for (var i = 0; i < this.numberOfComponents; ++i){
+            if (a[i] !== b[i]){
+                return false;
+            }
+        }
+        return true;
+    },
 
 });
 
@@ -186,6 +221,22 @@ JSClass("JSRGBColorSpace", JSColorSpace, {
         return [(components[0] + components[1] + components[2]) / 3];
     },
 
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0] - components[0] * percentage,
+            components[1] - components[1]  * percentage,
+            components[2] - components[2]  * percentage
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0] + (1.0 - components[0]) * percentage,
+            components[1] + (1.0 - components[1]) * percentage,
+            components[2] + (1.0 - components[2]) * percentage
+        ];
+    },
+
     // MARK: - Lab conversions
 
     xyzFromComponents: function(components){
@@ -328,6 +379,15 @@ JSClass("JSRGBColorSpace", JSColorSpace, {
         ];
     },
 
+    compareComponents: function(a, b){
+        for (var i = 0; i < this.numberOfComponents; ++i){
+            if (Math.round(a[i] * 255) !== Math.round(b[i] * 255)){
+                return false;
+            }
+        }
+        return true;
+    }
+
 });
 
 JSClass("JSGrayColorSpace", JSColorSpace, {
@@ -346,6 +406,27 @@ JSClass("JSGrayColorSpace", JSColorSpace, {
         return [components[0]];
     },
 
+    compareComponents: function(a, b){
+        for (var i = 0; i < this.numberOfComponents; ++i){
+            if (Math.round(a[i] * 255) !== Math.round(b[i] * 255)){
+                return false;
+            }
+        }
+        return true;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0] - components[0] * percentage
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0] + (1.0 - components[0]) * percentage
+        ];
+    }
+
 });
 
 JSClass("JSDerivedColorSpace", JSColorSpace, {
@@ -382,6 +463,133 @@ JSClass("JSDerivedColorSpace", JSColorSpace, {
 
 });
 
+JSClass("JSMappedColorSpace", JSColorSpace, {
+
+    canMixComponents: false,
+
+    colorFromComponents: function(components){
+    },
+
+    rgbFromComponents: function(components){
+        var rgba = this.colorFromComponents(components).rgbaColor().components;
+        return [
+            rgba[0],
+            rgba[1],
+            rgba[2],
+        ];
+    },
+
+    grayFromComponents: function(components){
+        var graya = this.colorFromComponents(components).grayColor().components;
+        return [
+            graya[0],
+        ];
+    },
+
+    alphaFromComponents: function(components){
+        return this.colorFromComponents(components).alpha;
+    },
+
+    xyzFromComponents: function(components){
+        var rgb = this.rgbFromComponents(components);
+        return JSColorSpace.rgb.xyzFromComponents(rgb);
+    },
+
+    componentsFromXYZ: function(xyz){
+        throw new Error("Unable to convert from xyz -> %s mapped color space".sprintf(this.name));
+    },
+
+});
+
+JSClass("JSIndexedColorSpace", JSMappedColorSpace, {
+
+    name: "indexed",
+    numberOfComponents: 2,
+    componentNames: {"index": 0},
+    colors: null,
+
+    init: function(){
+        this.colors = [];
+    },
+
+    addColor: function(color){
+        var index = this.colors.length;
+        this.colors.push(color);
+        return JSColor.initWithSpaceAndComponents(this, [index, 1, -1]);
+    },
+
+    setColorAtIndex: function(color, index){
+        this.colors[index] = color;
+    },
+
+    colorFromComponents: function(components){
+        var color = this.colors[components[0]];
+        if (components[1] < 1){
+            color = color.colorDarkenedByPercentage(1 - components[1]);
+        }else if (components[1] > 1){
+            color = color.colorLightenedByPercentage(components[1] - 1);
+        }
+        return color;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0],
+            components[1] * (1.0 - percentage)
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0],
+            components[1] * (1.0 + percentage)
+        ];
+    }
+
+});
+
+JSClass("JSNamedColorSpace", JSMappedColorSpace, {
+
+    name: "named",
+    numberOfComponents: 2,
+    componentNames: {"name": 0},
+    colors: null,
+
+    init: function(){
+        this.colors = {};
+    },
+
+    setColorForName: function(name, color){
+        this.colors[name] = color;
+        return JSColor.initWithSpaceAndComponents(this, [name, 1, -1]);
+    },
+
+    colorFromComponents: function(components){
+        var color = this.colors[components[0]];
+        if (components[1] < 1){
+            color = color.colorDarkenedByPercentage(1 - components[1]);
+        }else if (components[1] > 1){
+            color = color.colorLightenedByPercentage(components[1] - 1);
+        }
+        return color;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0],
+            components[1] * (1.0 - percentage)
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0],
+            components[1] * (1.0 + percentage)
+        ];
+    }
+
+});
+
 Object.defineProperties(JSColorSpace, {
 
     rgb: {

package/Root/Frameworks/Foundation/JSSpec.js

@@ -66,7 +66,7 @@ JSClass("JSSpec", JSObject, {
         }else if (typeof(value) == 'object'){
             this._dictionaryValue = value;
         }
-        this._root = root;
+        this._root = root || this;
         this._cache = {};
     },
 

package/Root/Frameworks/ImageKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ImageKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/MediaKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.MediaKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/MediaKitUI/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.MediaKitUI
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/NotificationKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.NotificationKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2021 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/PDFKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.PDFKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Frameworks/QRKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.QRKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Frameworks/SearchKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.SearchKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Frameworks/SecurityKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.SecurityKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/ServerKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ServerKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/ServerKitTesting/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ServerKitTesting
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Frameworks/TestKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.TestKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Frameworks/UIKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKit
-JSBundleVersion: 2021.37.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/UIKit/JSColor+UIKit.js

@@ -0,0 +1,75 @@
+// 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 "UIColorSpace.js"
+"use strict";
+
+JSColor.definePropertiesFromExtensions({
+
+    initWithUIStyles: function(lightColor, darkColor, lightContrastColor, darkContrastColor){
+        var space = UIColorSpace.initWithStyles(lightColor, darkColor, lightContrastColor, darkContrastColor);
+        var components = [1, -1];
+        this.initWithSpaceAndComponents(space, components);
+    },
+
+});
+
+JSColor.defineInitMethod("initWithUIStyles");
+
+// Common Colors
+JSColorSpace.ui.setStylesForName("background", JSColor.white, JSColor.initWithWhite(0.15));
+JSColorSpace.ui.setStylesForName("text", JSColor.black.colorWithAlpha(0.9), JSColor.white.colorWithAlpha(0.9));
+JSColorSpace.ui.setStylesForName("secondaryText", JSColor.black.colorWithAlpha(0.6), JSColor.white.colorWithAlpha(0.6));
+JSColorSpace.ui.setStylesForName("highlight", JSColor.initWithRGBA(0, 0.5, 1), JSColor.initWithRGBA(0, 0.5, 1));
+JSColorSpace.ui.setStylesForName("mutedHighlight", JSColor.black.colorWithAlpha(0.15), JSColor.white.colorWithAlpha(0.1));
+JSColorSpace.ui.setStylesForName("highlightedText", JSColor.white, JSColor.white);
+JSColorSpace.ui.setColorForName("placeholderText", JSColor.text.colorWithAlpha(0.3));
+JSColorSpace.ui.setStylesForName("destructive", JSColor.initWithRGBA(0.8,0,0), JSColor.initWithRGBA(1,0.5,0.5));
+
+// Control Colors
+JSColorSpace.ui.setStylesForName("controlBackground", JSColor.initWithWhite(0.98), JSColor.initWithWhite(0.35));
+JSColorSpace.ui.setStylesForName("controlBorder", JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.8));
+JSColorSpace.ui.setStylesForName("controlTitle", JSColor.initWithWhite(0.2), JSColor.white);
+JSColorSpace.ui.setStylesForName("activeControlBackground", JSColor.initWithWhite(0.875), JSColor.initWithWhite(0.2));
+JSColorSpace.ui.setStylesForName("activeControlBorder", JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.8));
+JSColorSpace.ui.setStylesForName("activeControlTitle", JSColor.initWithWhite(0.2), JSColor.initWithWhite(0.8));
+JSColorSpace.ui.setStylesForName("selectedControlBackground", JSColor.initWithWhite(0.5), JSColor.initWithWhite(0.1));
+JSColorSpace.ui.setStylesForName("selectedControlBorder", JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.8));
+JSColorSpace.ui.setStylesForName("selectedControlTitle", JSColor.initWithWhite(0.94), JSColor.initWithWhite(0.94));
+JSColorSpace.ui.setStylesForName("activeSelectedControlBackground", JSColor.initWithWhite(0.4), JSColor.black);
+JSColorSpace.ui.setStylesForName("activeSelectedControlBorder", JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.8));
+JSColorSpace.ui.setStylesForName("activeSelectedControlTitle", JSColor.initWithWhite(0.94), JSColor.initWithWhite(1.0));
+JSColorSpace.ui.setStylesForName("disabledControlBackground", JSColor.initWithWhite(0.94), JSColor.initWithWhite(0.1));
+JSColorSpace.ui.setStylesForName("disabledControlBorder", JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.8));
+JSColorSpace.ui.setStylesForName("disabledControlTitle", JSColor.initWithWhite(0.6), JSColor.initWithWhite(0.4));
+JSColorSpace.ui.setColorForName("controlShadow", JSColor.black.colorWithAlpha(0.1));
+
+// Window Colors
+JSColorSpace.ui.setStylesForName("window", JSColor.initWithWhite(0.94), JSColor.initWithWhite(0.2));
+JSColorSpace.ui.setColorForName("windowShadow", JSColor.black.colorWithAlpha(0.4));
+JSColorSpace.ui.setColorForName("toolbarTitle", JSColor.text.colorWithAlpha(0.6));
+
+// Tooltip Colors
+JSColorSpace.ui.setColorForName("tooltip", JSColor.window);
+JSColorSpace.ui.setColorForName("tooltipText", JSColor.text);
+JSColorSpace.ui.setStylesForName("tooltipBorder", JSColor.initWithWhite(0.7), JSColor.black);
+JSColorSpace.ui.setColorForName("tooltipShadow", JSColor.black.colorWithAlpha(0.2));
+
+// Menu Colors
+JSColorSpace.ui.setStylesForName("menuBar", JSColor.initWithWhite(0.94), JSColor.initWithWhite(0.1));
+JSColorSpace.ui.setStylesForName("menuBarText", JSColor.black, JSColor.white);
+JSColorSpace.ui.setColorForName("menu", JSColor.window);
+JSColorSpace.ui.setColorForName("menuShadow", JSColor.black.colorWithAlpha(0.2));

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, {
@@ -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;
@@ -495,7 +499,7 @@ JSClass("UIButtonCustomStyler", UIButtonStyler, {
 
     init: function(){
         UIButtonCustomStyler.$super.init.call(this);
-        this.initWithColor(JSColor.black);
+        this.initWithColor(JSColor.text);
     },
 
     initWithSpec: function(spec){
@@ -618,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);
     },
@@ -679,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),