@breakside/jskit 2021.37.0 → 2021.39.0

package/Root/Frameworks/UIKit/UIWindow.js

@@ -119,7 +119,7 @@ JSClass('UIWindow', UIView, {
     _commonWindowInit: function(){
         this.window = this;
         if (this.backgroundColor === null){
-            this.backgroundColor = JSColor.white;
+            this.backgroundColor = JSColor.background;
         }
         this.clipsToBounds = true;
         if (this._contentView === null){
@@ -135,8 +135,7 @@ JSClass('UIWindow', UIView, {
                 this._styler = UIWindow.Styler.default;
             }
         }
-        this._traitCollection = UITraitCollection.initWithSize(this.frame.size);
-        this._traitCollection.accessibilityContrast = this.windowServer.contrast;
+        this._traitCollection = this.windowServer.traitCollection.traitsWithSize(this.bounds.size);
         this.stylerProperties = {};
         this._styler.initializeWindow(this);
     },
@@ -179,7 +178,7 @@ JSClass('UIWindow', UIView, {
 
     setToolbar: function(toolbar){
         this._toolbar = toolbar;
-        this._styler.updateWindow();
+        this._styler.updateWindow(this);
         this.setNeedsLayout();
     },
 
@@ -309,9 +308,10 @@ JSClass('UIWindow', UIView, {
     // MARK: Traits
 
     layerDidChangeSize: function(){
-        var traits = UITraitCollection.initWithSize(this.bounds.size);
-        traits.contrast = this.windowServer.contrast;
-        this._setTraitCollection(traits);
+        if (this._traitCollection !== null){
+            var traits = this._traitCollection.traitsWithSize(this.bounds.size);
+            this._setTraitCollection(traits);
+        }
     },
     
     traitCollection: JSReadOnlyProperty('_traitCollection', null),
@@ -1124,7 +1124,7 @@ JSClass("UIWindowStyler", JSObject, {
     focusRingWidth: 3.5,
 
     init: function(){
-        this.focusRingColor = this.localCursorColor = JSColor.initWithRGBA(0, 128/255.0, 255/255.0, 0.6);
+        this.focusRingColor = JSColor.highlight;
     },
 
     initializeWindow: function(window){
@@ -1215,24 +1215,19 @@ JSClass("UIWindowDefaultStyler", UIWindowStyler, {
 
     init: function(){
         UIWindowDefaultStyler.$super.init.call(this);
-        this.activeTitleColor = JSColor.initWithWhite(51/255);
-        this.inactiveTitleColor = JSColor.initWithWhite(192/255);
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.4);
-        this.backgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255,1);
-        this.titleBackgroundColor = null;
-        this.titleBackgroundGradient = JSGradient.initWithStops(
-            0, JSColor.initWithRGBA(230/255,230/255,230/255,1),
-            1, JSColor.initWithRGBA(204/255,204/255,204/255,1)
-        );
-        this.contentSeparatorColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        this.activeTitleColor = JSColor.text;
+        this.inactiveTitleColor = JSColor.text.colorWithAlpha(0.3);
+        this.shadowColor = JSColor.windowShadow;
+        this.backgroundColor = JSColor.window;
+        this.titleBackgroundColor = JSColor.initWithUIStyles(JSColor.window.colorLightenedByPercentage(0.5), JSColor.window.colorLightenedByPercentage(0.05));
+        this.contentSeparatorColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.1), JSColor.black.colorWithAlpha(0.8));
         this.closeButtonImages = {
             inactive: images.closeInactive,
             normal: images.closeNormal,
             over: images.closeOver,
             active: images.closeActive
         };
-        this.toolbarTitleColor = JSColor.initWithWhite(102/255);
-        this.toolbarDisabledTitleColor = JSColor.initWithWhite(204/255);
+        this.toolbarTitleColor = JSColor.toolbarTitle;
     },
 
     initializeWindow: function(window){
@@ -1424,16 +1419,15 @@ JSClass("UIWindowTitlelessStyler", UIWindowStyler, {
 
     init: function(){
         UIWindowDefaultStyler.$super.init.call(this);
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.4);
-        this.backgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255,1);
+        this.shadowColor = JSColor.windowShadow;
+        this.backgroundColor = JSColor.window;
         this.closeButtonImages = {
             inactive: images.closeInactive,
             normal: images.closeNormal,
             over: images.closeOver,
             active: images.closeActive
         };
-        this.toolbarTitleColor = JSColor.initWithWhite(102/255);
-        this.toolbarDisabledTitleColor = JSColor.initWithWhite(204/255);
+        this.toolbarTitleColor = JSColor.toolbarTitle;
     },
 
     initializeWindow: function(window){

package/Root/Frameworks/UIKit/UIWindowButtonCloseInactive.svg

@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="UIWindowButtonCloseInactive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="Oval" stroke="#D8D8D8" cx="6" cy="6" r="5.5"></circle>
+        <circle id="Oval" stroke="rgb(0,0,0,0.1)" cx="6" cy="6" r="5.5"></circle>
     </g>
 </svg>

package/Root/Frameworks/UIKit/UIWindowButtonCloseNormal.svg

@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="UIWindowButtonCloseNormal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="Oval" stroke="#979797" cx="6" cy="6" r="5.5"></circle>
+        <circle id="Oval" stroke="rgba(0,0,0,0.4)" cx="6" cy="6" r="5.5"></circle>
     </g>
 </svg>

package/Root/Frameworks/UIKit/UIWindowServer.js

@@ -21,6 +21,7 @@
 // #import "UITooltipWindow.js"
 // #import "UIDraggingSession.js"
 // #import "UIUserInterface.js"
+// #import "UIColorSpace.js"
 'use strict';
 
 (function(){
@@ -34,11 +35,10 @@ JSClass("UIWindowServer", JSObject, {
     textInputManager: null,
     keyWindow: null,
     mainWindow: null,
-    menuBar: JSDynamicProperty('_menuBar', null),
     screen: null,
-    contrast: JSDynamicProperty('_contrast', UIUserInterface.Contrast.normal),
     mouseLocation: null,
     fullKeyboardAccessEnabled: false,
+    darkModeEnabled: true,
     _windowsById: null,
     _mouseIdleTimer: null,
     _tooltipWindow: null,
@@ -51,6 +51,9 @@ JSClass("UIWindowServer", JSObject, {
     // MARK: - Creating a Window Server
 
     init: function(){
+        this._traitCollection = UITraitCollection.init();
+        this._traitCollection.accessibilityContrast = UIUserInterface.Contrast.normal;
+        this._traitCollection.userInterfaceStyle = UIUserInterface.Style.light;
         this.windowStack = [];
         this._windowsById = {};
         this._normalLevelRange = JSRange.Zero;
@@ -340,6 +343,8 @@ JSClass("UIWindowServer", JSObject, {
 
     // -----------------------------------------------------------------------
     // MARK: - Menu Bar
+    
+    menuBar: JSDynamicProperty('_menuBar', null),
 
     setMenuBar: function(menuBar){
         if (this._menuBar){
@@ -1004,17 +1009,57 @@ JSClass("UIWindowServer", JSObject, {
         }
     },
 
-    setContrast: function(contrast){
-        if (contrast === this._contrast){
+    // -----------------------------------------------------------------------
+    // MARK: - Traits
+
+    traitCollection: JSDynamicProperty("_traitCollection", null),
+
+    setTraitCollection: function(traitCollection){
+        if (!this.darkModeEnabled && traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            traitCollection = traitCollection.traitsWithUserInterfaceStyle(UIUserInterface.Style.light);
+        }
+        if (this._traitCollection.isEqual(traitCollection)){
             return;
         }
-        this._contrast = contrast;
+        this._traitCollection = traitCollection;
+        UIColorSpace.setTraitCollection(traitCollection);
+        if (this.windowStack.length > 0){
+            var window;
+            for (var i = 0, l = this.windowStack.length; i < l; ++i){
+                window = this.windowStack[i];
+                window._setTraitCollection(this._traitCollection.traitsWithSize(window.bounds.size));
+            }
+            this.setNeedsRedisplay();
+        }
+    },
+
+    _needsRedisplay: false,
+
+    setNeedsRedisplay: function(){
+        if (this._needsRedisplay){
+            return;
+        }
+        this._needsRedisplay = true;
+        var i, l;
+        var layers = [];
         var window;
-        for (var i = 0, l = this.windowStack.length; i < l; ++i){
+        for (i = 0, l = this.windowStack.length; i < l; ++i){
             window = this.windowStack[i];
-            window._setTraitCollection(window.traitCollection.traitsWithContrast(this._contrast));
+            layers.push(window.layer);
+        }
+        var layer;
+        var sublayer;
+        while (layers.length > 0){
+            layer = layers.shift();
+            layer.setNeedsRedisplay();
+            for (i = 0, l = layer.sublayers.length; i < l; ++i){
+                layers.push(layer.sublayers[i]);
+            }
         }
-    }
+        this.displayServer.schedule(function(){
+            this._needsRedisplay = false;
+        }, this);
+    },
 
 });
 

package/Root/Frameworks/UIKitTesting/Info.yaml

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

package/Root/Templates/html/${PROJECT_NAME}/www/index.html

@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="rgb(38,38,38)">
   <title></title>
   <base href="/">
   <style id="bootstrap-style" type="text/css">
@@ -32,9 +34,9 @@
     font: 300 16px/24px "Source Sans Pro", "Helvetica", sans-serif;
     height: 24px;
     text-align: center;
-    color: rgb(164,164,164);
     transition-property: opacity, color, margin-top;
     transition-duration: .25s;
+    color: rgb(164,164,164);
   }
   #details {
     position: absolute;
@@ -47,9 +49,9 @@
     text-overflow: ellipsis;
     font: 300 16px/20px "Source Sans Pro", "Helvetica", sans-serif;
     text-align: center;
-    color: rgb(192,192,192);
     transition: opacity linear .5s .5s;
     opacity: 0;
+    color: rgb(192,192,192);
   }
   #progress {
     opacity: 0;
@@ -61,17 +63,17 @@
     margin-left: -51px;
     margin-top: -12px;
     border-radius: 5px;
-    background-color: rgba(245,245,245);
     height: 7px;
     overflow: hidden;
     transition-property: opacity;
     transition-duration: .25s;
+    background-color: rgba(245,245,245);
     box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
   }
   #progress-bar {
-    background-color: rgb(224,224,224);
     height: 100%;
     width: 0%;
+    background-color: rgb(224,224,224);
   }
   #splash.error #status {
     font-weight: 600;
@@ -79,6 +81,24 @@
   #splash.error #details {
     opacity: 1;
   }
+  @media (prefers-color-scheme: dark) {
+    #splash {
+      background-color: rgb(38,38,38);
+    }
+    #status {
+      color: rgb(128,128,128);
+    }
+    #details {
+      color: rgb(102,102,102);
+    }
+    #progress {
+      background-color: rgba(26,26,26);
+      box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
+    }
+    #progress-bar {
+      background-color: rgb(80,80,80);
+    }
+  }
   </style>
 </head>
 <body>

package/package.json

@@ -9,7 +9,7 @@
     "node": ">=10.10.0"
   },
   "name": "@breakside/jskit",
-  "version": "2021.37.0",
+  "version": "2021.39.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "files": [
     "*"