@breakside/jskit 2021.36.0 → 2021.39.0

package/Root/Frameworks/UIKit/UIHTMLWindowServer.js

@@ -65,6 +65,7 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
     rootElement: null,
     domDocument: null,
     domWindow: null,
+    themeColorElement: null,
     _screenClientOrigin: null,
 
     setupRenderingEnvironment: function(){
@@ -85,11 +86,24 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
             body.style.overflow = 'hidden';
             body.style.borderLeft = "env(safe-area-inset-left) solid black";
             body.style.borderRight = "env(safe-area-inset-right) solid black";
+            var head = this.domDocument.head;
+            var child;
+            for (var i = head.childNodes.length - 1; i >= 0; --i){
+                child = head.childNodes[i];
+                if (child.nodeType == Node.ELEMENT_NODE){
+                    if (child.tagName.toLowerCase() === "meta" && child.getAttribute("name") == "theme-color"){
+                        head.removeChild(child);
+                    }
+                }
+            }
+            this.themeColorElement = head.appendChild(this.domDocument.createElement("meta"));
+            this.themeColorElement.setAttribute("name", "theme-color");
         }else{
             var style = this.domWindow.getComputedStyle(this.rootElement);
             if (style.position != 'absolute' && style.position != 'relative' && style.position != 'fixed'){
                 this.rootElement.style.position = 'relative';
             }
+            this.themeColorElement = null;
         }
         this.rootElement.style.userSelect = 'none';
         this.rootElement.style.mozUserSelect = 'none';
@@ -267,16 +281,21 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
     // --------------------------------------------------------------------
     // MARK: - Media Queries
 
+    darkColorSchemeListener: null,
     highContrastListener: null,
     reducedMotionListener: null,
 
     setupMediaListeners: function(){
+        this.darkColorSchemeListener = this.handleDarkColorSchemeChanged.bind(this);
+        this.darkColorSchemeQuery = this.domWindow.matchMedia("(prefers-color-scheme: dark)");
+        this.darkColorSchemeQuery.addListener(this.darkColorSchemeListener);
         this.highContrastListener = this.handleHighContrastChanged.bind(this);
         this.highContrastQuery = this.domWindow.matchMedia("(prefers-contrast: more)");
         this.highContrastQuery.addListener(this.highContrastListener);
         this.reducedMotionListener = this.handleReducedMotionChanged.bind(this);
         this.reducedMotionQuery = this.domWindow.matchMedia("(prefers-reduced-motion)");
         this.reducedMotionQuery.addListener(this.reducedMotionListener);
+        this.handleDarkColorSchemeChanged(this.darkColorSchemeQuery);
         this.handleHighContrastChanged(this.highContrastQuery);
         this.handleReducedMotionChanged(this.reducedMotionQuery);
     },
@@ -286,8 +305,16 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         this.reducedMotionQuery.removeListener(this.reducedMotionListener);
     },
 
+    handleDarkColorSchemeChanged: function(query){
+        var style = query.matches ? UIUserInterface.Style.dark : UIUserInterface.Style.light;
+        this.traitCollection = this._traitCollection.traitsWithUserInterfaceStyle(style);
+        this.updateThemeColorElement();
+    },
+
     handleHighContrastChanged: function(query){
-        this.contrast = query.matches ? UIUserInterface.Contrast.high : UIUserInterface.Contrast.normal;
+        var contrast = query.matches ? UIUserInterface.Contrast.high : UIUserInterface.Contrast.normal;
+        this.traitCollection = this._traitCollection.traitsWithContrast(contrast);
+        this.updateThemeColorElement();
     },
 
     handleReducedMotionChanged: function(query){
@@ -872,6 +899,50 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         }
     },
 
+    orderWindowFront: function(window){
+        UIHTMLWindowServer.$super.orderWindowFront.call(this, window);
+        if (window.subviewIndex === 0){
+            this.updateThemeColorElement();
+        }
+    },
+
+    // --------------------------------------------------------------------
+    // MARK: - Menu Bar
+
+    setMenuBar: function(menuBar){
+        UIHTMLWindowServer.$super.setMenuBar.call(this, menuBar);
+        this.updateThemeColorElement();
+    },
+
+    updateThemeColorElement: function(){
+        if (this.themeColorElement === null){
+            return;
+        }
+        var window = this._menuBar;
+        var color = null;
+        if (window === null && this.windowStack.length > 0){
+            window = this.windowStack[0];
+        }
+        if (window !== null){
+            var vc = window.contentViewController;
+            if ((vc instanceof UISplitViewController) && vc.view.mainHidden){
+                vc = vc.leadingViewController;
+            }
+            if (vc instanceof UINavigationController){
+                color = vc.navigationBar.backgroundColor;
+            }else if (window.backgroundGradient !== null){
+                color = window.backgroundGradient.stops[0].color;
+            }else if (window.backgroundColor !== null){
+                color = window.backgroundColor;
+            }
+        }
+        if (color !== null){
+            this.themeColorElement.setAttribute("content", color.cssString());
+        }else{
+            this.themeColorElement.setAttribute("content", JSColor.background);
+        }
+    },
+
     // --------------------------------------------------------------------
     // MARK: - Screen Updates
 

package/Root/Frameworks/UIKit/UIImageView.js

@@ -15,6 +15,7 @@
 
 // #import "UIView.js"
 // #import "UIImageLayer.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 JSClass("UIImageView", UIView, {
@@ -32,6 +33,7 @@ JSClass("UIImageView", UIView, {
     initWithFrame: function(frame){
         UIImageView.$super.initWithFrame.call(this, frame);
         this._contentInsets = JSInsets.Zero;
+        this.templateColor = JSColor.text;
         this._commonImageViewInit();
     },
 
@@ -39,6 +41,8 @@ JSClass("UIImageView", UIView, {
         UIImageView.$super.initWithSpec.call(this, spec);
         if (spec.containsKey('templateColor')){
             this.templateColor = spec.valueForKey("templateColor", JSColor);
+        }else{
+            this.templateColor = JSColor.text;
         }
         if (spec.containsKey("automaticRenderMode")){
             this.automaticRenderMode = spec.valueForKey("automaticRenderMode", JSImage.RenderMode);

package/Root/Frameworks/UIKit/UIKit.js

@@ -26,6 +26,8 @@
 // Application
 // #import "UIApplication.js"
 // #import "UIPlatform.js"
+// #import "JSColor+UIKit.js"
+// #import "UIColorSpace.js"
 
 // Layers & Views
 // #import "UIResponder.js"

package/Root/Frameworks/UIKit/UILabel.js

@@ -38,7 +38,8 @@ JSClass('UILabel', UIView, {
     initWithFrame: function(frame){
         UILabel.$super.initWithFrame.call(this, frame);
         this.maximumNumberOfLines = 1;
-        this._selectionColor = JSColor.white.colorWithAlpha(0.2);
+        this.textColor = JSColor.text;
+        this._selectionColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
     },
 
     initWithSpec: function(spec){
@@ -51,6 +52,8 @@ JSClass('UILabel', UIView, {
         }
         if (spec.containsKey("textColor")){
             this.textColor = spec.valueForKey("textColor", JSColor);
+        }else{
+            this.textColor = JSColor.text;
         }
         if (spec.containsKey("textAlignment")){
             this.textAlignment = spec.valueForKey("textAlignment", JSTextAlignment);
@@ -72,7 +75,16 @@ JSClass('UILabel', UIView, {
         if (spec.containsKey("selectionColor")){
             this._selectionColor = spec.valueForKey("selectionColor");
         }else{
-            this._selectionColor = JSColor.white.colorWithAlpha(0.2);
+            this._selectionColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
+        }
+    },
+
+    tooltip: JSDynamicProperty("_tooltip"),
+
+    setTooltip: function(tooltip){
+        this._tooltip = tooltip;
+        if (this._tooltip !== null){
+            this.userInteractionEnabled = true;
         }
     },
 

package/Root/Frameworks/UIKit/UILayer.js

@@ -686,6 +686,16 @@ JSClass("UILayer", JSObject, {
         }
     },
 
+    setNeedsRedisplay: function(){
+        this.didChangeProperty("backgroundColor");
+        this.didChangeProperty("backgroundGradient");
+        this.didChangeProperty("borderColor");
+        this.didChangeProperty("shadowColor");
+        if (this.performsCustomDrawing){
+            this.setNeedsDisplay();
+        }
+    },
+
     displayIfNeeded: function(){
         if (this._displayServer !== null){
             this._displayServer.displayLayerIfNeeded(this);
@@ -699,6 +709,15 @@ JSClass("UILayer", JSObject, {
         }
     },
 
+    performsCustomDrawing: JSReadOnlyProperty(),
+
+    getPerformsCustomDrawing: function(){
+        if (this.delegate && this.delegate.drawLayerInContext){
+            return true;
+        }
+        return this.drawInContext !== UILayer.prototype.drawInContext;
+    },
+
     drawInContext: function(context){
     },
 
@@ -714,7 +733,16 @@ JSClass("UILayer", JSObject, {
         if (this._displayServer !== null){
             var displayContext = this._displayServer.contextForLayer(this);
             if (context === displayContext){
-                this.setNeedsDisplay();
+                var layers = [this];
+                var layer;
+                var i, l;
+                while (layers.length > 0){
+                    layer = layers.shift();
+                    layer.setNeedsRedisplay();
+                    for (i = 0, l = layer.sublayers.length; i < l; ++i){
+                        layers.push(layer.sublayers[i]);
+                    }
+                }
                 return;
             }
         }

package/Root/Frameworks/UIKit/UIListView.js

@@ -18,6 +18,7 @@
 // #import "UIPlatform.js"
 // #import "UIImageView.js"
 // #import "UIViewPropertyAnimator.js"
+// #import "JSColor+UIKit.js"
 /* global UIListViewCell, UIListViewHeaderFooterView */
 'use strict';
 
@@ -132,6 +133,9 @@ JSClass("UIListView", UIScrollView, {
         if (spec.containsKey('allowsMultipleSelection')){
             this.allowsMultipleSelection = spec.valueForKey("allowsMultipleSelection");
         }
+        if (spec.containsKey('allowsEmptySelection')){
+            this.allowsEmptySelection = spec.valueForKey("allowsEmptySelection");
+        }
         if (spec.containsKey('headersStickToTop')){
             this._headersStickToTop = spec.valueForKey("headersStickToTop");
         }
@@ -1708,6 +1712,7 @@ JSClass("UIListView", UIScrollView, {
     // MARK: - Selecting cells
 
     allowsMultipleSelection: false,
+    allowsEmptySelection: true,
     selectedIndexPaths: JSDynamicProperty('_selectedIndexPaths', null),
     selectedIndexPath: JSDynamicProperty(),
     contextSelectedIndexPaths: JSReadOnlyProperty('_contextSelectedIndexPaths', null),
@@ -1730,6 +1735,9 @@ JSClass("UIListView", UIScrollView, {
                 return;
             }
         }
+        if (!this.allowsEmptySelection && indexPaths.length === 0){
+            return;
+        }
         this._selectedIndexPaths = indexPaths;
         if (this._edit !== null){
             this._edit.selectionChanged = true;
@@ -1816,6 +1824,9 @@ JSClass("UIListView", UIScrollView, {
         if (index === null){
             return;
         }
+        if (!this.allowsEmptySelection && this._selectedIndexPaths.length === 1){
+            return;
+        }
         this._selectedIndexPaths.splice(index, 1);
         this._updateSelectedIndexPaths(options);
     },
@@ -3019,22 +3030,22 @@ JSClass("UIListViewDefaultStyler", UIListViewStyler, {
             this.headerFont = JSFont.systemFontOfSize(JSFont.Size.normal).fontWithWeight(JSFont.Weight.bold);
         }
         if (this.cellTextColor === null){
-            this.cellTextColor = JSColor.black;
+            this.cellTextColor = JSColor.text;
         }
         if (this.cellDetailTextColor === null){
-            this.cellDetailTextColor = this.cellTextColor.colorLightenedByPercentage(0.6);
+            this.cellDetailTextColor = JSColor.secondaryText;
         }
         if (this.cellDetailFont === null && this.cellFont !== null){
-            this.cellDetailFont = this.cellFont.fontWithPointSize(Math.round(this.cellFont.pointSize * 12.0 / 14.0));
+            this.cellDetailFont = this.cellFont.fontWithPointSize(JSFont.Size.detail);
         }
         if (this.selectedCellBackgroundColor === null){
-            this.selectedCellBackgroundColor = JSColor.initWithRGBA(70/255, 153/255, 254/255, 1);
+            this.selectedCellBackgroundColor = JSColor.highlight;
         }
         if (this.contextSelectedCellBorderColor === null){
             this.contextSelectedCellBorderColor = this.selectedCellBackgroundColor.colorDarkenedByPercentage(0.5);
         }
         if (this.headerTextColor === null){
-            this.headerTextColor = JSColor.black;
+            this.headerTextColor = JSColor.text;
         }
         if (this.cellSeparatorColor === null){
             this.cellSeparatorColor = this.cellTextColor.colorWithAlpha(0.2);
@@ -3043,13 +3054,13 @@ JSClass("UIListViewDefaultStyler", UIListViewStyler, {
             this.accessoryColor = this.cellTextColor;
         }
         if (this.selectedCellTextColor === null){
-            this.selectedCellTextColor = JSColor.white;
+            this.selectedCellTextColor = JSColor.highlightedText;
         }
         if (this.selectedCellDetailTextColor === null){
             this.selectedCellDetailTextColor = this.selectedCellTextColor;
         }
         if (this.selectedCellSeparatorColor === null){
-            this.selectedCellSeparatorColor = this.selectedCellBackgroundColor.colorLightenedByPercentage(0.2);
+            this.selectedCellSeparatorColor = JSColor.clear;
         }
         if (this.activeCellBackgroundColor === null){
             this.activeCellBackgroundColor = this.cellBackgroundColor;
@@ -3070,10 +3081,10 @@ JSClass("UIListViewDefaultStyler", UIListViewStyler, {
             this.mutedSelectedCellDetailTextColor = this.cellDetailTextColor;
         }
         if (this.mutedSelectedCellBackgroundColor === null){
-            this.mutedSelectedCellBackgroundColor = this.cellSeparatorColor;
+            this.mutedSelectedCellBackgroundColor = JSColor.mutedHighlight;
         }
         if (this.mutedSelectedCellSeparatorColor === null){
-            this.mutedSelectedCellSeparatorColor = this.mutedSelectedCellBackgroundColor.colorLightenedByPercentage(0.2);
+            this.mutedSelectedCellSeparatorColor = JSColor.clear;
         }
         if (this.cellContentInsets === null){
             this.cellContentInsets = JSInsets.Zero;
@@ -3217,7 +3228,7 @@ JSClass("UIListViewDefaultStyler", UIListViewStyler, {
         if (cell._titleLabel !== null){
             if (cell._detailLabel !== null){
                 size.height = cell._titleLabel.font.displayLineHeight * (cell._titleLabel.maximumNumberOfLines || 1) + cell._detailLabel.font.displayLineHeight * (cell._detailLabel.maximumNumberOfLines || 1);
-                origin.y =  Math.floor((cell.bounds.size.height - size.height) / 2.0);
+                origin.y =  Math.floor((cell._contentView.bounds.size.height - size.height) / 2.0);
                 size.height = cell._titleLabel.font.displayLineHeight * (cell._titleLabel.maximumNumberOfLines || 1);
                 cell._titleLabel.frame = JSRect(origin, size);
                 origin.y += size.height;
@@ -3225,12 +3236,12 @@ JSClass("UIListViewDefaultStyler", UIListViewStyler, {
                 cell._detailLabel.frame = JSRect(origin, size);
             }else{
                 size.height = cell._titleLabel.font.displayLineHeight * (cell._titleLabel.maximumNumberOfLines || 1);
-                origin.y =  Math.floor((cell.bounds.size.height - size.height) / 2.0);
+                origin.y =  Math.floor((cell._contentView.bounds.size.height - size.height) / 2.0);
                 cell._titleLabel.frame = JSRect(origin, size);
             }
         }else if (cell._detailLabel !== null){
             size.height = cell._detailLabel.font.displayLineHeight * (cell._detailLabel.maximumNumberOfLines || 1);
-            cell._detailLabel.frame = JSRect(JSPoint(cell._titleInsets.left, Math.floor((cell.bounds.size.height - size.height) / 2.0)), size);
+            cell._detailLabel.frame = JSRect(JSPoint(cell._titleInsets.left, Math.floor((cell._contentView.bounds.size.height - size.height) / 2.0)), size);
         }
 
         var separatorInsets = cell._separatorInsets;

package/Root/Frameworks/UIKit/UIListViewCell.js

@@ -151,11 +151,15 @@ JSClass("UIListViewCell", UIView, {
     _updateState: function(newState){
         if (newState != this._state){
             this._state = newState;
-            this._didChangeState();
+            if (this._didChangeState){
+                this._didChangeState();
+            }else{
+                this.update();
+            }
         }
     },
 
-    _didChangeState: function(){
+    update: function(){
         var styler = (this._styler || (this.listView && this.listView._styler));
         if (!styler){
             return;
@@ -173,6 +177,10 @@ JSClass("UIListViewCell", UIView, {
         this._updateState(newState);
     },
 
+    toggleStates: function(flag, on){
+        this._toggleState(flag, on);
+    },
+
     isActive: function(){
         return (this._state & UIListViewCell.State.active) === UIListViewCell.State.active;
     },

package/Root/Frameworks/UIKit/UIMenu.js

@@ -20,6 +20,7 @@
 // #import "UIEvent.js"
 // #import "UIWindow.js"
 // #import "UIAccessibility.js"
+// #import "JSColor+UIKit.js"
 /* global UIMenuWindow */
 'use strict';
 
@@ -444,12 +445,12 @@ JSClass("UIMenuStyler", JSObject, {
 
 });
 
-var defaultTextColor = JSColor.initWithRGBA(51/255, 51/255, 51/255, 1);
-var defaultHighlightTextColor = JSColor.initWithRGBA(1, 1, 1, 1);
-var defaultDisabledTextColor = JSColor.initWithRGBA(223/255, 223/255, 223/255, 1);
-var defaultHighlightColor = JSColor.initWithRGBA(70/255, 153/255, 254/255, 1);
-var defaultBackgroundColor = JSColor.initWithRGBA(240/255, 240/255, 240/255, 1);
-var defaultBorderColor = JSColor.initWithRGBA(184/255, 184/255, 184/255, 1);
+var defaultTextColor = JSColor.text;
+var defaultHighlightTextColor = JSColor.highlightedText;
+var defaultDisabledTextColor = JSColor.text.colorWithAlpha(0.2);
+var defaultHighlightColor = JSColor.highlight;
+var defaultBackgroundColor = JSColor.menu;
+var defaultBorderColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
 
 JSClass("UIMenuWindowStyler", UIMenuStyler, {
 
@@ -465,7 +466,8 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
     itemContentInsets: JSDynamicProperty('_itemContentInsets', JSInsets(2, 3, 2, 7)),
     indentationSize: JSDynamicProperty('_indentationSize', 10),
     separatorSize: 10,
-    separatorLineWidth: 2,
+    separatorLineWidth: 1,
+    separatorColor: null,
     shadowColor: null,
     shadowRadius: 14,
     shadowOffset: null,
@@ -473,13 +475,14 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
 
     init: function(){
         UIMenuWindowStyler.$super.init.call(this);
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.2);
+        this.shadowColor = JSColor.menuShadow;
         this.shadowOffset = JSPoint.Zero;
+        this.separatorColor = this.disabledTextColor;
     },
 
     initWithSpec: function(spec){
         UIMenuWindowStyler.$super.initWithSpec.call(this, spec);
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.2);
+        this.shadowColor = JSColor.menuShadow;
         this.shadowOffset = JSPoint.Zero;
         if (spec.containsKey('capSize')){
             this._capSize = spec.valueForKey("capSize");
@@ -520,8 +523,13 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
         if (spec.containsKey('separatorSize')){
             this.separatorSize = spec.valueForKey("separatorSize");
         }
-        if (spec.containsKey('separtorLineWidth')){
-            this.separtorLineWidth = spec.valueForKey("separtorLineWidth");
+        if (spec.containsKey('separatorLineWidth')){
+            this.separatorLineWidth = spec.valueForKey("separatorLineWidth");
+        }
+        if (spec.containsKey('separatorColor')){
+            this.separatorColor = spec.valueForKey("separatorColor", JSColor);
+        }else{
+            this.separatorColor = this.disabledTextColor;
         }
         if (spec.containsKey('itemContentInsets')){
             this.itemContentInsets = spec.valueForKey("itemContentInsets", JSInsets);
@@ -854,8 +862,8 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
         window.downIndicatorImageView.templateColor = this._textColor;
         window.menuView.backgroundColor = this._backgroundColor;
         window.capSize = this._capSize;
-        window.separatorColor = this.disabledTextColor;
-        window.separatorLineWidth = this.separtorLineWidth;
+        window.separatorColor = this.separatorColor;
+        window.separatorLineWidth = this.separatorLineWidth;
         window.separatorSize = this.separatorSize;
         window.itemContentInsets = this._itemContentInsets;
         window.indentationSize = this.indentationSize;

package/Root/Frameworks/UIKit/UIMenuBar.js

@@ -16,6 +16,7 @@
 // #import "UIWindow.js"
 // #import "UIMenu.js"
 // #import "UIMenuView.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 JSClass("UIMenuBar", UIWindow, {
@@ -86,11 +87,11 @@ JSClass("UIMenuBar", UIWindow, {
         this.contentView = UIView.init();
         this._clipView = UIView.init();
         this.contentView.addSubview(this._clipView);
-        // this.backgroundColor = JSColor.initWithRGBA(1, 1, 1, 0.95);
+        this.backgroundColor = JSColor.menuBar;
         this._font = JSFont.systemFontOfSize(JSFont.Size.normal).fontWithWeight(JSFont.Weight.regular);
-        this._textColor = UIMenu.Styler.default.textColor;
-        this._highlightColor = UIMenu.Styler.default.highlightColor;
-        this._highlightedTextColor = UIMenu.Styler.default.highlightedTextColor;
+        this._textColor = JSColor.menuBarText;
+        this._highlightColor = JSColor.highlight;
+        this._highlightedTextColor = JSColor.highlightedText;
     },
 
     // --------------------------------------------------------------------

package/Root/Frameworks/UIKit/UIMenuView.js

@@ -20,6 +20,7 @@
 // #import "UIImageView.js"
 // #import "UIEvent.js"
 // #import "UIPlatform.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -48,7 +49,7 @@ JSClass("UIMenuWindow", UIWindow, {
     _keyWidth: 0,
     separatorColor: null,
     separatorSize: 10,
-    sepratorLineWidth: 2,
+    separatorLineWidth: 2,
     itemContentInsets: null,
     indentationSize: 10,
     highlightColor: null,
@@ -635,7 +636,7 @@ JSClass("UIMenuView", UIView, {
 
     initWithFrame: function(frame){
         UIMenuView.$super.initWithFrame.call(this, frame);
-        this.backgroundColor = JSColor.initWithRGBA(255/255, 255/255, 255/255, 1.0);
+        this.backgroundColor = JSColor.background;
         this.itemViews = [];
     },
 
@@ -643,7 +644,7 @@ JSClass("UIMenuView", UIView, {
         var view = item.view;
         if (view === null){
             if (item.separator){
-                view = UIMenuItemSeparatorView.initWithColor(this.menuWindow.separatorColor, this.menuWindow.sepratorLineWidth);
+                view = UIMenuItemSeparatorView.initWithColor(this.menuWindow.separatorColor, this.menuWindow.separatorLineWidth, this.menuWindow.itemContentInsets.insetsWithInsets(0, item.menu.showStatusColumn ? (item.menu.font.displayLineHeight + this.menuWindow.itemContentInsets.left) : 0, 0, 0));
                 view.frame = JSRect(0, 0, 1, this.menuWindow.separatorSize);
             }else{
                 view = UIMenuItemView.init();
@@ -714,10 +715,12 @@ JSClass("UIMenuItemSeparatorView", UIView, {
 
     lineLayer: null,
     size: 0,
+    insets: null,
 
-    initWithColor: function(color, size){
+    initWithColor: function(color, size, insets){
         UIMenuItemSeparatorView.$super.init.call(this);
         this.size = size;
+        this.insets = JSInsets(insets);
         this.lineLayer = UILayer.init();
         this.lineLayer.backgroundColor = color;
         this.layer.addSublayer(this.lineLayer);
@@ -725,7 +728,8 @@ JSClass("UIMenuItemSeparatorView", UIView, {
 
     layoutSubviews: function(){
         UIMenuItemSeparatorView.$super.layoutSubviews.call(this);
-        this.lineLayer.frame = JSRect(0, (this.bounds.size.height - this.size) / 2, this.bounds.size.width, this.size);
+
+        this.lineLayer.frame = JSRect(this.insets.left, (this.bounds.size.height - this.size) / 2, this.bounds.size.width - this.insets.width, this.size);
     },
 
     isAccessibilityElement: true,

package/Root/Frameworks/UIKit/UINavigationBar.js

@@ -17,6 +17,7 @@
 // #import "UILabel.js"
 // #import "UINavigationBarItem.js"
 // #import "UIViewPropertyAnimator.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -317,10 +318,11 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
     init: function(){
         UINavigationBarDefaultStyler.$super.init.call(this);
         this.coversContent = true;
-        this.backgroundColor = JSColor.initWithWhite(0.8);
+        this.backgroundColor = JSColor.background;
         this.contentSeparatorSize = 1;
-        this.contentSeparatorColor = JSColor.initWithWhite(0.8);
-        this.titleColor = JSColor.initWithWhite(0.2);
+        this.contentSeparatorColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.1), JSColor.white.colorWithAlpha(0.1));
+        this.titleColor = JSColor.text;
+        this.itemColor = JSColor.highlight;
         this.itemInsets = JSInsets.Zero;
         this._fillInDefaultStyles();
     },
@@ -336,8 +338,8 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
         if (spec.containsKey("contentSeparatorColor")){
             this.contentSeparatorColor = spec.valueForKey("contentSeparatorColor", JSColor);
         }
-        if (spec.containsKey("contentSeparatorWidth")){
-            this.contentSeparatorWidth = spec.valueForKey("contentSeparatorWidth");
+        if (spec.containsKey("contentSeparatorSize")){
+            this.contentSeparatorSize = spec.valueForKey("contentSeparatorSize");
         }
         if (spec.containsKey("titleColor")){
             this.titleColor = spec.valueForKey("titleColor", JSColor);
@@ -772,6 +774,7 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
         button.accessibilityLabel = barItem.accessibilityTitle;
         if (barItem.image){
             button.setImageForState(barItem.image, UIControl.State.normal);
+            button._imageView.automaticRenderMode = JSImage.RenderMode.template;
         }
         button.addAction(barItem.action, barItem.target);
         return button;

package/Root/Frameworks/UIKit/UINavigationController.js

@@ -17,6 +17,7 @@
 // #import "UINavigationBar.js"
 // #import "UIScrollView.js"
 // #import "UIViewPropertyAnimator.js"
+// #import "JSColor+UIKit.js"
 /* global UISplitViewController */
 'use strict';
 
@@ -195,7 +196,7 @@ JSClass("UINavigationController", UIViewController, {
             var navController = this;
             this.layoutChildView(viewController.view);
             viewController.view.transform = JSAffineTransform.Translated(viewController.view.bounds.size.width, 0);
-            viewController.view.shadowColor = JSColor.initWithWhite(0, 0.4);
+            viewController.view.shadowColor = JSColor.windowShadow;
             viewController.view.shadowRadius = 20;
             this.pushAnimator.addAnimations(function(){
                 viewController.view.transform = JSAffineTransform.Identity;
@@ -272,7 +273,7 @@ JSClass("UINavigationController", UIViewController, {
             var navController = this;
             this.layoutChildView(viewController.view);
             viewController.view.transform = JSAffineTransform.Translated(-viewController.view.bounds.size.width / 2, 0);
-            fromViewController.view.shadowColor = JSColor.initWithWhite(0, 0.4);
+            fromViewController.view.shadowColor = JSColor.windowShadow;
             fromViewController.view.shadowRadius = 20;
             this.popAnimator.addAnimations(function(){
                 viewController.view.transform = JSAffineTransform.Identity;

package/Root/Frameworks/UIKit/UIOutlineViewCell.js

@@ -16,6 +16,7 @@
 // #import "UIListViewCell.js"
 // #import "UIButton.js"
 // #import "UIEvent.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 JSClass("UIOutlineViewCell", UIListViewCell, {
@@ -28,7 +29,7 @@ JSClass("UIOutlineViewCell", UIListViewCell, {
 
     _commonCellInit: function(){
         UIOutlineViewCell.$super._commonCellInit.call(this);
-        var buttonStyler = UIButtonImageStyler.initWithColor(JSColor.black);
+        var buttonStyler = UIButtonImageStyler.initWithColor(JSColor.text);
         this._disclosureButton = UIButton.initWithStyler(buttonStyler);
         this._disclosureButton.addAction("_toggleExpanded", this);
         this._disclosureButton.accessibilityRole = UIAccessibility.Role.disclosureTriangle;