@breakside/jskit 2021.37.0 → 2021.39.0

package/Root/Frameworks/UIKit/UITabView.js

@@ -60,9 +60,10 @@ JSClass("UITabView", UIView, {
             this.delegate = spec.valueForKey("delegate");
         }
         if (spec.containsKey('items')){
-            var items = spec.valueForKey('items');
-            for (var i = 0, l = items.length; i < l; ++i){
-                items.push(items.valueForKey(i, UITabViewItem));
+            var items = [];
+            var specItems = spec.valueForKey('items');
+            for (var i = 0, l = specItems.length; i < l; ++i){
+                items.push(specItems.valueForKey(i, UITabViewItem));
             }
             this.items = items;
         }
@@ -689,18 +690,18 @@ JSClass("UITabViewDefaultStyler", UITabViewStyler, {
 
     init: function(){
         UITabViewDefaultStyler.$super.init.call(this);
-        this.normalItemColor = JSColor.initWithRGBA(250/255,250/255,250/255);
-        this.activeItemColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-        this.selectedItemColor = JSColor.initWithRGBA(70/255,153/255,254/255);
-        this.activeSelectedItemColor = JSColor.initWithRGBA(63/255,138/255,230/255);
-        this.normalBorderColor = JSColor.initWithRGBA(204/255,204/255,204/255);
-        this.activeBorderColor = JSColor.initWithRGBA(192/255,192/255,192/255);
-        this.selectedBorderColor = JSColor.initWithRGBA(63/255,138/255,230/255);
-        this.activeSelectedBorderColor = JSColor.initWithRGBA(54/255,123/255,205/255);
-        this.normalTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-        this.activeTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-        this.selectedTitleColor = JSColor.initWithRGBA(255/255,255/255,255/255);
-        this.selectedActiveTitleColor = JSColor.initWithRGBA(255/255,255/255,255/255);
+        this.normalItemColor = JSColor.controlBackground;
+        this.activeItemColor = JSColor.activeControlBackground;
+        this.selectedItemColor = JSColor.highlight;
+        this.activeSelectedItemColor = JSColor.highlight.colorDarkenedByPercentage(0.2);
+        this.normalBorderColor = JSColor.controlBorder;
+        this.activeBorderColor = JSColor.activeControlBorder;
+        this.selectedBorderColor = JSColor.highlight.colorDarkenedByPercentage(0.2);
+        this.activeSelectedBorderColor = JSColor.highlight.colorDarkenedByPercentage(0.4);
+        this.normalTitleColor = JSColor.controlTitle;
+        this.activeTitleColor = JSColor.activeControlTitle;
+        this.selectedTitleColor = JSColor.highlightedText;
+        this.selectedActiveTitleColor = JSColor.highlightedText;
         this._fillInMissingStyles();
     },
 
@@ -777,22 +778,22 @@ JSClass("UITabViewDefaultStyler", UITabViewStyler, {
             this.itemsInsets = JSInsets(4);
         }
         if (this.normalTitleColor === null){
-            this.normalTitleColor = JSColor.black;
+            this.normalTitleColor = JSColor.controlTitle;
         }
         if (this.activeTitleColor === null){
             this.activeTitleColor = this.normalTitleColor;
         }
         if (this.selectedTitleColor === null){
-            this.selectedTitleColor = JSColor.white;
+            this.selectedTitleColor = JSColor.highlightedText;
         }
         if (this.activeSelectedTitleColor === null){
             this.activeSelectedTitleColor = this.selectedTitleColor;
         }
         if (this.normalItemColor === null){
-            this.normalItemColor = JSColor.initWithRGBA(250/255,250/255,250/255);
+            this.normalItemColor = JSColor.highlight;
         }
         if (this.selectedItemColor === null){
-            this.selectedItemColor = JSColor.initWithRGBA(70/255,153/255,254/255);
+            this.selectedItemColor = JSColor.highlight.colorDarkenedByPercentage(0.2);
         }
         if (this.activeItemColor === null){
             this.activeItemColor = this.normalItemColor.colorDarkenedByPercentage(0.1);
@@ -813,7 +814,7 @@ JSClass("UITabViewDefaultStyler", UITabViewStyler, {
             this.activeSelectedBorderColor = this.selectedBorderColor.colorDarkenedByPercentage(0.05);
         }
         if (this.dividerColor === null){
-            this.dividerColor = this.normalBorderColor;
+            this.dividerColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
         }
     },
 
@@ -824,7 +825,7 @@ JSClass("UITabViewDefaultStyler", UITabViewStyler, {
         tabView.addSubview(props.contentViewContainer);
         props.itemsView = UITabViewItemsView.init();
         props.itemsView.tabView = tabView;
-        props.itemsView.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        props.itemsView.shadowColor = JSColor.controlShadow;
         props.itemsView.shadowOffset = JSPoint(0, 1);
         props.itemsView.shadowRadius = 1;
         props.itemsView.cornerRadius = this.cornerRadius;
@@ -1038,6 +1039,7 @@ UITabView.Styler = Object.defineProperties({}, {
     },
 
     tabless: {
+        configurable: true,
         get: function UITabView_getTablessStyler(){
             var styler = UITabViewTablessStyler.init();
             Object.defineProperty(this, 'tabless', {writable: true, value: styler});
@@ -1046,6 +1048,7 @@ UITabView.Styler = Object.defineProperties({}, {
     },
 
     images: {
+        configurable: true,
         get: function UITabView_getImagesStyler(){
             var styler = UITabViewImagesStyler.init();
             Object.defineProperty(this, 'images', {writable: true, value: styler});
@@ -1163,8 +1166,8 @@ JSClass("UITabViewImagesStyler", UITabViewStyler, {
     initializeTabView: function(tabView){
         UITabViewDefaultStyler.$super.initializeTabView.call(this, tabView);
         if (this.borderColor === null){
-            var backgroundColor = tabView.backgroundColor || JSColor.white;
-            this.borderColor = backgroundColor.colorDarkenedByPercentage(0.2);
+            var backgroundColor = tabView.backgroundColor || JSColor.background;
+            this.borderColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
         }
         var props = tabView.stylerProperties;
         props.contentViewContainer = UITabViewContentContainer.init();
@@ -1234,14 +1237,14 @@ JSClass("UITabViewImagesStyler", UITabViewStyler, {
 });
 
 var defaultStateImageColors = [
-    JSColor.initWithRGBA(0,0,0,0.2), // 0 normal
-    JSColor.initWithRGBA(0,0,0,0.2), // 1 over
-    JSColor.initWithRGBA(0,0,0,0.5), // 2 active
-    JSColor.initWithRGBA(0,0,0,0.5), // 3 active + over
-    JSColor.initWithRGBA(70/255,153/255,254/255),  // 4 selected
-    JSColor.initWithRGBA(70/255,153/255,254/255),  // 5 selected + over
-    JSColor.initWithRGBA(54/255,123/255,205/255),  // 6 selected + active
-    JSColor.initWithRGBA(54/255,123/255,205/255),  // 7 selected + active + over
+    JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2)), // 0 normal
+    JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2)), // 1 over
+    JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.5), JSColor.white.colorWithAlpha(0.1)), // 2 active
+    JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.5), JSColor.white.colorWithAlpha(0.1)), // 3 active + over
+    JSColor.highlight,  // 4 selected
+    JSColor.highlight,  // 5 selected + over
+    JSColor.highlight.colorDarkenedByPercentage(0.2),  // 6 selected + active
+    JSColor.highlight.colorDarkenedByPercentage(0.2),  // 7 selected + active + over
 ];
 
 })();

package/Root/Frameworks/UIKit/UITextEditor.js

@@ -16,6 +16,7 @@
 // #import Foundation
 // #import "UILayer.js"
 // #import "UITextInput.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -49,7 +50,7 @@ JSClass("UITextEditor", JSObject, {
         this._selectionHighlightLayers = [];
         this.textLayoutManager = textLayer.textLayoutManager;
         this.textLayoutManager.editor = this;
-        this.cursorColor = JSColor.black;
+        this.cursorColor = JSColor.highlight;
         this.selections = [
             this._createSelection(JSRange(0, 0), UITextInput.SelectionInsertionPoint.end)
         ];

package/Root/Frameworks/UIKit/UITextField.js

@@ -21,6 +21,7 @@
 // #import "UITextAttachmentView.js"
 // #import "UIImageView.js"
 // #import "UIPasteboard.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -134,6 +135,8 @@ JSClass("UITextField", UIControl, {
             this._styler = UITextField.Styler.default;
         }
         this.hasOverState = this._styler.showsOverState;
+        this.textColor = JSColor.text;
+        this._placeholderColor = JSColor.placeholderText;
         this._styler.initializeControl(this);
     },
 
@@ -238,22 +241,11 @@ JSClass("UITextField", UIControl, {
         this._placeholderLabel.hidden = true;
         this._placeholderLabel.layer.widthTracksText = this._textLayer.widthTracksText;
         this._placeholderLabel.layer.heightTracksText = true;
-        if (this._placeholderColor === null){
-            this._createPlaceholderColor();
-        }
         this._placeholderLabel.textColor = this._placeholderColor;
         this._clipView.insertSubviewAtIndex(this._placeholderLabel, 0);
         this._clipView.layer.insertSublayerBelowSibling(this._placeholderLabel.layer, this._textLayer);
     },
 
-    _createPlaceholderColor: function(){
-        var backgroundColor = this.backgroundColor;
-        if (backgroundColor === null){
-            backgroundColor = JSColor.white;
-        }
-        this._placeholderColor = backgroundColor.colorByBlendingColor(this.textColor, 0.3);
-    },
-
     _placeholderLabel: null,
 
     _isShowingPlaceholder: false,
@@ -1267,7 +1259,7 @@ JSClass("UITextFieldStyler", UIControlStyler, {
 
     _commonStylerInit: function(){
         if (this.localCursorColor === null){
-            this.localCursorColor = JSColor.initWithRGBA(0, 128/255.0, 255/255.0, 1);
+            this.localCursorColor = JSColor.highlight;
         }
     },
 
@@ -1317,8 +1309,8 @@ JSClass("UITextFieldDefaultStyler", UITextFieldStyler, {
     },
 
     _commonDefaultStylerInit: function(){
-        this.activeColor = JSColor.black;
-        this.inactiveColor = JSColor.initWithWhite(0.8);
+        this.activeColor = JSColor.highlight;
+        this.inactiveColor = JSColor.text.colorWithAlpha(0.2);
         this.textInsets = JSInsets(3, 0);
     },
 
@@ -1366,6 +1358,11 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
     textInsets: null,
     showsFocusRing: true,
 
+    init: function(){
+        UITextFieldCustomStyler.$super.init.call(this);
+        this.textColor = JSColor.text;
+    },
+
     initWithSpec: function(spec){
         UITextFieldCustomStyler.$super.initWithSpec.call(this, spec);
         if (spec.containsKey("backgroundColor")){
@@ -1388,6 +1385,8 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
         }
         if (spec.containsKey("textColor")){
             this.textColor = spec.valueForKey("textColor", JSColor);
+        }else{
+            this.textColor = JSColor.text;
         }
         if (spec.containsKey("placeholderColor")){
             this.placeholderColor = spec.valueForKey("placeholderColor", JSColor);

package/Root/Frameworks/UIKit/UITextLayer.js

@@ -261,6 +261,11 @@ JSClass("UITextLayer", UILayer, {
         return this._textContainer;
     },
 
+    setNeedsRedisplay: function(){
+        UITextLayer.$super.setNeedsRedisplay.call(this);
+        this._textLayoutManager.setNeedsLayout();
+    }
+
 });
 
 })();

package/Root/Frameworks/UIKit/UITokenField.js

@@ -173,7 +173,7 @@ JSClass("UITokenField", UITextField, {
         }
         str = representedObject.toString();
         return UITokenFieldTokenView.initWithString(str, this);
-    },
+    }
 
 });
 
@@ -194,8 +194,8 @@ JSClass("UITokenFieldTokenView", UIView, {
         this.textField = textField;
         this.tokenLabel.font = this.textField.font;
         this.tokenLabel.text = str;
-        this.tokenLabel.backgroundColor = JSColor.initWithRGBA(210/255, 231/255, 251/255, 1.0);
-        this.tokenLabel.borderColor = JSColor.initWithRGBA(116/255, 181/255, 243/255, 1.0);
+        this.tokenLabel.backgroundColor = JSColor.initWithUIStyles(JSColor.highlight.colorLightenedByPercentage(0.8), JSColor.highlight.colorDarkenedByPercentage(0.6));
+        this.tokenLabel.borderColor = JSColor.initWithUIStyles(JSColor.highlight, JSColor.black);
         this.backgroundColor = null;
         this.tokenLabel.borderWidth = 0.5;
         this.tokenLabel.cornerRadius = 3.0;

package/Root/Frameworks/UIKit/UIToolbar.js

@@ -32,6 +32,7 @@ JSClass("UIToolbar", UIView, {
     },
 
     initWithStyler: function(styler){
+        UIToolbar.$super.init.call(this);
         this._items = [];
         this._imageSize = UIToolbar.ImageSize.default;
         this._styler = styler;
@@ -117,7 +118,7 @@ JSClass("UIToolbar", UIView, {
 
     setShowsTitles: function(showsTitles){
         this._showsTitles = showsTitles;
-        this._styler.updateToolbar();
+        this._styler.updateToolbar(this);
     },
 
     imageSize: JSDynamicProperty('_imageSize', 0),
@@ -176,7 +177,7 @@ UIToolbar.Styler = Object.create({}, {
     default: {
         configurable: true,
         get: function UIToolbarStyler_getDefault(){
-            var styler = UIToolbarCustomStyler.initWithItemColor(JSColor.initWithWhite(0.2));
+            var styler = UIToolbarCustomStyler.init();
             styler.itemSpacing = 7;
             Object.defineProperty(this, 'default', {writable: true, value: styler});
             return styler;
@@ -235,6 +236,14 @@ JSClass("UIToolbarItemView", UIView, {
                     break;
             }
         }
+        if (item.toolbar.showsTitles){
+            this.titleLabel.hidden = false;
+            this.titleLabel.text = item.title;
+        }else{
+            if (this._titleLabel !== null){
+                this._titleLabel.hidden = true;
+            }
+        }
         this.contentView.tooltip = item.tooltip;
         this.addSubview(this.contentView);
     },
@@ -242,38 +251,64 @@ JSClass("UIToolbarItemView", UIView, {
     _createTitleLabel: function(){
         var label = UILabel.init();
         label.textAlignment = JSTextAlignment.center;
+        label.font = this.item.toolbar.styler.itemFont;
         this.addSubview(label);
         return label;
     },
 
     layoutSubviews: function(){
         var toolbar = this._item.toolbar;
-        if (this._item.identifier == UIToolbarItem.Identifier.custom && toolbar.showsTitles){
-            var titleHeight = toolbar.styler.itemFont.displayLineHeight;
+        if (this._item.identifier == UIToolbarItem.Identifier.custom){
+            var bounds = this.bounds;
+            if (toolbar.showsTitles){
+                var titleHeight = toolbar.styler.itemFont.displayLineHeight;
+                this.titleLabel.frame = JSRect(0, bounds.size.height - titleHeight, bounds.size.width, titleHeight);
+                bounds = bounds.rectWithInsets(0, 0, titleHeight, 0);
+            }
             var width;
+            var height;
+            if (!isNaN(this._item.minimumWidth) && this._item.minimumWidth > 0){
+                width = this._item.minimumWidth;
+            }else if (this._item.view !== null){
+                width = this._item.view.intrinsicSize.width;
+            }else{
+                width = this._item.image.size.width * toolbar._imageSize / this._item.image.size.height;
+            }
             if (this._item.view !== null){
-                width = this._item.minimumSize.width;
+                height = this._item.view.intrinsicSize.height;
+                if (height === UIView.noIntrinsicSize){
+                    height = bounds.size.height;
+                }
             }else{
-                width = this._item.image.size.width * toolbar.imageSize / this._item.image.size.height;
+                height = bounds.size.height;
             }
-            this.contentView.frame = JSRect((this.bounds.size.width - width) / 2.0, 0, width, this.bounds.size.height - titleHeight);
-            this.titleLabel.frame = JSRect(0, this.bounds.size.height - titleHeight, this.bounds.size.width, titleHeight);
+            this.contentView.frame = JSRect((bounds.size.width - width) / 2.0, (bounds.size.height - height) / 2.0, width, height);
         }else{
             this.contentView.frame = this.bounds;
         }
     },
 
     getIntrinsicSize: function(){
-        var minWidth = this._item.minimumWidth;
-        if (!isNaN(minWidth) && minWidth > 0){
-            return JSSize(minWidth, UIView.noIntrinsicSize);
-        }
-        var contentSize = this.contentView.intrinsicSize;
-        if (this._item.toolbar.showsTitles){
-            var titleSize = this.titleLabel.intrinsicSize;
-            return JSSize(Math.max(contentSize.width, titleSize.width), UIView.noIntrinsicSize);
+        var toolbar = this._item.toolbar;
+        var width;
+        if (this._item.identifier == UIToolbarItem.Identifier.custom){
+            if (!isNaN(this._item.minimumWidth) && this._item.minimumWidth > 0){
+                width = this._item.minimumWidth;
+            }else if (this._item.view !== null){
+                width = this._item.view.intrinsicSize.width;
+            }else{
+                width = this._item.image.size.width * toolbar._imageSize / this._item.image.size.height;
+            }
+            if (toolbar.showsTitles){
+                var titleSize = this.titleLabel.intrinsicSize;
+                if (titleSize.width > width){
+                    width = Math.ceil(titleSize.width);
+                }
+            }
+        }else{
+            width = this.contentView.intrinsicSize.width;
         }
-        return contentSize;
+        return JSSize(width, UIView.noIntrinsicSize);
     },
 
     mouseDown: function(event){
@@ -432,9 +467,14 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     contentInsets: null,
     itemSpacing: 0,
 
-    initWithItemColor: function(itemColor){
+    init: function(){
         this.contentInsets = JSInsets(5);
+        this._fillInMissingStyles();
+    },
+
+    initWithItemColor: function(itemColor){
         this.itemColor = itemColor;
+        this.contentInsets = JSInsets(5);
         this._fillInMissingStyles();
     },
 
@@ -468,13 +508,14 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
             this.itemFont = JSFont.systemFontOfSize(JSFont.Size.detail).fontWithWeight(JSFont.Weight.normal);
         }
         if (this.itemColor === null){
-            this.itemColor = JSColor.initWithWhite(0.8);
+            this.itemColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.7), JSColor.white.colorWithAlpha(0.7));
+            this.activeItemColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.9), JSColor.white.colorWithAlpha(0.5));
         }
         if (this.activeItemColor === null){
             this.activeItemColor = this.itemColor.colorDarkenedByPercentage(0.5);
         }
         if (this.disabledItemColor === null){
-            this.disabledItemColor = this.itemColor.colorWithAlpha(0.5);
+            this.disabledItemColor = this.itemColor.colorWithAlpha(0.4);
         }
     },
 
@@ -517,14 +558,22 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
                 itemView.contentView.alpha = 0.4;
             }
         }
+        if (itemView.contentView instanceof UIImageView){
+            if (itemView.active){
+                itemView.contentView.templateColor = this.activeItemColor;
+            }else if (item.enabled){
+                itemView.contentView.templateColor = this.itemColor;
+            }else{
+                itemView.contentView.templateColor = this.disabledItemColor;
+            }
+        }
         if (toolbar.showsTitles){
-            item.titleLabel.text = item.title;
             if (itemView.active){
-                item.titleLabel.textColor = this.activeItemColor;
+                itemView.titleLabel.textColor = this.activeItemColor;
             }else if (item.enabled){
-                item.titleLabel.textColor = this.itemColor;
+                itemView.titleLabel.textColor = this.itemColor;
             }else{
-                item.titleLabel.textColor = this.disabledItemColor;
+                itemView.titleLabel.textColor = this.disabledItemColor;
             }
         }
     },
@@ -532,7 +581,7 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     createOverflowButtonForToolbar: function(toolbar){
         var styler = UIButtonCustomStyler.initWithColor(this.itemColor);
         var button = UIButton.initWithStyler(styler);
-        button.image = images.toolbarOverflow;
+        button.setImageForState(images.toolbarOverflow, UIControl.State.normal);
         button.addAction(function(){
             var menu = this.createOverflowMenuForToolbar(toolbar);
             if (menu !== null){
@@ -581,7 +630,7 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     },
 
     showOverflowMenuForToolbar: function(menu, toolbar, overflowButton){
-        menu.openAdjacentToView(overflowButton, UIMenu.placement.below);
+        menu.openAdjacentToView(overflowButton, UIMenu.Placement.below);
     },
 
     layoutToolbar: function(toolbar){
@@ -619,9 +668,9 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
                 props.overflowButton = this.createOverflowButtonForToolbar(toolbar);
             }
             size = props.overflowButton.intrinsicSize;
-            props.overflowButton.frame = JSRect(toolbar.width - this.contentInsets.right - size.width, y + (maxHeight - size.height) / 2.0, size.width, size.height);
+            props.overflowButton.frame = JSRect(toolbar.bounds.size.width - this.contentInsets.right - size.width, y + (maxHeight - size.height) / 2.0, size.width, size.height);
             // reduce available width by overflow button width
-            availableWidth -= props.overflowButton.frame.width - this.itemSpacing;
+            availableWidth -= props.overflowButton.bounds.size.width - this.itemSpacing;
             // Back up over any overflowing items
             for (; props.lastVisibleIndex >= 0 && itemsWidth > availableWidth; --props.lastVisibleIndex){
                 size = itemSizes[props.lastVisibleIndex];
@@ -647,20 +696,17 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
         }
 
         // Position each item, centered vertically in the middle
+        var titleHeight = this.itemFont.displayLineHeight;
         for (i = 0, l = props.itemViews.length; i <= props.lastVisibleIndex; ++i){
             itemView = props.itemViews[i];
             itemView.hidden = false;
             item = itemView.item;
             size = itemSizes[i];
-            if (item.view !== null){
-                size.height = item.minimumSize.height;
-            }else{
-                size.height = toolbar.imageSize;
-            }
-            itemView.frame = JSRect(x, y + (maxHeight - size.height) / 2.0, size.width, size.height);
+            size.height = maxHeight;
+            itemView.frame = JSRect(x, y, size.width, size.height);
             x += size.width + this.itemSpacing;
         }
-        for (i = props.lastVisibleIndex + 1; i < itemView.length; ++i){
+        for (i = props.lastVisibleIndex + 1; i < props.itemViews.length; ++i){
             itemView = props.itemViews[i];
             itemView.hidden = true;
         }
@@ -693,9 +739,9 @@ var images = Object.create({}, {
     toolbarOverflow: {
         configurable: true,
         get: function(){
-            var image = JSImage.initWithResourceName("UIToolbarOverflow", this.bundle);
-            Object.defineProperty(this, 'toolbarOverflow', {value: image.imageWithRenderingMode(JSImage.RenderMode.template) });
-            return this.toolbarOverflow;
+            var image = JSImage.initWithResourceName("UIToolbarOverflow", this.bundle).imageWithRenderMode(JSImage.RenderMode.template);
+            Object.defineProperty(this, 'toolbarOverflow', {value: image });
+            return image;
         }
     },
 

package/Root/Frameworks/UIKit/UIToolbarOverflow.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>UIToolbarOverflow</title>
+    <g id="UIToolbarOverflow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Path-Copy" fill="#000000" fill-rule="nonzero" points="8 1 8 4 11 7.5 8 11 8 14 14 7.5"></polygon>
+        <polygon id="Path" fill="#000000" fill-rule="nonzero" points="2 1 2 4 5 7.5 2 11 2 14 8 7.5"></polygon>
+    </g>
+</svg>

package/Root/Frameworks/UIKit/UITooltipWindow.js

@@ -66,11 +66,11 @@ JSClass("UITooltipWindowStyler", UIWindowStyler, {
 
     init: function(){
         UITooltipWindowStyler.$super.init.call(this);
-        this.backgroundColor = JSColor.initWithRGBA(240/255, 240/255, 240/255, 1.0);
-        this.borderColor = JSColor.initWithRGBA(0.7, 0.7, 0.7, 1.0);
-        this.shadowColor = JSColor.initWithRGBA(0.0, 0.0, 0.0, 0.2);
-        this.font = JSFont.systemFontOfSize(12.0);
-        this.textColor = JSColor.initWithRGBA(0.2, 0.2, 0.2, 1.0);
+        this.backgroundColor = JSColor.tooltip;
+        this.borderColor = JSColor.tooltipBorder;
+        this.shadowColor = JSColor.tooltipShadow;
+        this.font = JSFont.systemFontOfSize(JSFont.Size.detail);
+        this.textColor = JSColor.tooltipText;
         this.textInsets = JSInsets(4, 6);
     },
 

package/Root/Frameworks/UIKit/UITraitCollection.js

@@ -27,12 +27,30 @@ JSClass("UITraitCollection", JSObject, {
         var traits = UITraitCollection.init();
         traits.horizontalSizeClass = this.horizontalSizeClass;
         traits.verticalSizeClass = this.verticalSizeClass;
+        traits.userInterfaceStyle = this.userInterfaceStyle;
         traits.accessibilityContrast = contrast;
         return traits;
     },
 
+    traitsWithUserInterfaceStyle: function(style){
+        var traits = UITraitCollection.init();
+        traits.horizontalSizeClass = this.horizontalSizeClass;
+        traits.verticalSizeClass = this.verticalSizeClass;
+        traits.userInterfaceStyle = style;
+        traits.accessibilityContrast = this.accessibilityContrast;
+        return traits;
+    },
+
+    traitsWithSize: function(size){
+        var traits = UITraitCollection.initWithSize(size);
+        traits.accessibilityContrast = this.accessibilityContrast;
+        traits.userInterfaceStyle = this.userInterfaceStyle;
+        return traits;
+    },
+
     horizontalSizeClass: UIUserInterface.SizeClass.unspecified,
     verticalSizeClass: UIUserInterface.SizeClass.unspecified,
+    userInterfaceStyle: UIUserInterface.Style.unspecified,
     accessibilityContrast: UIUserInterface.Contrast.unspecified,
 
     isEqual: function(other){
@@ -45,6 +63,9 @@ JSClass("UITraitCollection", JSObject, {
         if (this.accessibilityContrast !== other.accessibilityContrast){
             return false;
         }
+        if (this.userInterfaceStyle !== other.userInterfaceStyle){
+            return false;
+        }
         return true;
     }
 

package/Root/Frameworks/UIKit/UIUserInterface.js

@@ -49,4 +49,10 @@ UIUserInterface.Contrast = {
     unspecified: 0,
     normal: 1,
     high: 2
+};
+
+UIUserInterface.Style = {
+    unspecified: 0,
+    light: 1,
+    dark: 2
 };

package/Root/Frameworks/UIKit/UIWebView.js

@@ -14,6 +14,7 @@
 // limitations under the License.
 
 // #import "UIView.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -30,14 +31,14 @@ JSClass("UIWebView", UIView, {
 
     initWithFrame: function(frame){
         UIWebView.$super.initWithFrame.call(this, frame);
-        this.backgroundColor = JSColor.white;
+        this.backgroundColor = JSColor.background;
         this.setNeedsDisplay();
     },
 
     initWithSpec: function(spec){
         UIWebView.$super.initWithSpec.call(this, spec);
         if (this.backgroundColor === null){
-            this.backgroundColor = JSColor.white;
+            this.backgroundColor = JSColor.background;
         }
         if (spec.containsKey("delegate")){
             this.delegate = spec.valueForKey("delegate");