Merge pull request #62 from breakside/ui-colors

UI colors
breakside · Jun 25, 2024 · e58ea65 · e58ea65
2 parents ee31534 + 510e494
commit e58ea65
Show file tree

Hide file tree

Showing 29 changed files with 68 additions and 34 deletions.
diff --git a/Command/jskit/Info.yaml b/Command/jskit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: node
 JSBundleIdentifier: io.breakside.jskit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSExecutableName: jskit
 NPMOrganization: breakside
 JSResources:

diff --git a/Frameworks/APIKit/Info.yaml b/Frameworks/APIKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.APIKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSIncludeDirectories:

diff --git a/Frameworks/APIKitTesting/Info.yaml b/Frameworks/APIKitTesting/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.APIKitTesting
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/AuthKit/Info.yaml b/Frameworks/AuthKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.AuthKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/CSSOM/Info.yaml b/Frameworks/CSSOM/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.CSSOM
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/ChartKit/Info.yaml b/Frameworks/ChartKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ChartKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2021 Breakside Inc.
 # JSBundleEnvironments:

diff --git a/Frameworks/ConferenceKit/Info.yaml b/Frameworks/ConferenceKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ConferenceKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/DBKit/Info.yaml b/Frameworks/DBKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.DBKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/DOM/Info.yaml b/Frameworks/DOM/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.DOM
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/Dispatch/Info.yaml b/Frameworks/Dispatch/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.Dispatch
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:
   html: Dispatch+HTML.js

diff --git a/Frameworks/FontKit/Info.yaml b/Frameworks/FontKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.FontKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/Foundation/Info.yaml b/Frameworks/Foundation/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.Foundation
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/ImageKit/Info.yaml b/Frameworks/ImageKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ImageKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/MediaKit/Info.yaml b/Frameworks/MediaKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.MediaKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/MediaKitUI/Info.yaml b/Frameworks/MediaKitUI/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.MediaKitUI
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/NotificationKit/Info.yaml b/Frameworks/NotificationKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.NotificationKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2021 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/PDFKit/Info.yaml b/Frameworks/PDFKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.PDFKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/QRKit/Info.yaml b/Frameworks/QRKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.QRKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/SearchKit/Info.yaml b/Frameworks/SearchKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.SearchKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/SecurityKit/Info.yaml b/Frameworks/SecurityKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.SecurityKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/ServerKit/Info.yaml b/Frameworks/ServerKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ServerKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/ServerKitTesting/Info.yaml b/Frameworks/ServerKitTesting/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ServerKitTesting
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/TestKit/Info.yaml b/Frameworks/TestKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.TestKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

diff --git a/Frameworks/UIKit/Info.yaml b/Frameworks/UIKit/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKit
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

diff --git a/Frameworks/UIKit/JSColor+UIKit.js b/Frameworks/UIKit/JSColor+UIKit.js
@@ -30,13 +30,17 @@ JSColor.definePropertiesFromExtensions({
 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("background", JSColor.white, JSColor.initWithWhite(0.15), JSColor.white, JSColor.initWithWhite(0.15));
+JSColorSpace.ui.setStylesForName("shadedBackground", JSColor.initWithWhite(0.85), JSColor.initWithWhite(0.30), JSColor.white.colorDarkenedByPercentage(0.2), JSColor.black.colorLightenedByPercentage(0.3));
+JSColorSpace.ui.setStylesForName("secondaryShadedBackground", JSColor.initWithWhite(0.965), JSColor.initWithWhite(0.25), JSColor.white, JSColor.black);
+JSColorSpace.ui.setStylesForName("separator", JSColor.initWithWhite(0.85), JSColor.initWithWhite(0.30), JSColor.initWithWhite(0.5), JSColor.initWithWhite(0.5));
+JSColorSpace.ui.setStylesForName("secondarySeparator", JSColor.initWithWhite(0.965), JSColor.initWithWhite(0.25), JSColor.initWithWhite(0.5), JSColor.initWithWhite(0.5));
+JSColorSpace.ui.setStylesForName("text", JSColor.black.colorWithAlpha(0.9), JSColor.white.colorWithAlpha(0.9), JSColor.black, JSColor.white);
+JSColorSpace.ui.setStylesForName("secondaryText", JSColor.black.colorWithAlpha(0.6), JSColor.white.colorWithAlpha(0.6), JSColor.black, JSColor.white);
+JSColorSpace.ui.setStylesForName("highlight", JSColor.initWithRGBA(0, 0.5, 1), JSColor.initWithRGBA(0, 0.5, 1), 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), JSColor.black.colorWithAlpha(0.4), JSColor.white.colorWithAlpha(0.3));
+JSColorSpace.ui.setStylesForName("highlightedText", JSColor.white, JSColor.white, JSColor.white, JSColor.white);
+JSColorSpace.ui.setColorForName("placeholderText", JSColor.black.colorWithAlpha(0.3), JSColor.white.colorWithAlpha(0.3), JSColor.black.colorWithAlpha(0.7), JSColor.white.colorWithAlpha(0.7));
 JSColorSpace.ui.setStylesForName("destructive", JSColor.initWithRGBA(0.8,0,0), JSColor.initWithRGBA(1,0.5,0.5));
 
 // Control Colors
@@ -58,14 +62,15 @@ JSColorSpace.ui.setStylesForName("disabledControlTitle", JSColor.initWithWhite(0
 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.setStylesForName("window", JSColor.initWithWhite(0.94), JSColor.initWithWhite(0.2), JSColor.white, JSColor.initWithWhite(0.2));
+JSColorSpace.ui.setStylesForName("windowBorder", JSColor.clear, JSColor.white.colorWithAlpha(0.1), JSColor.black, JSColor.white);
 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.setStylesForName("tooltipBorder", JSColor.initWithWhite(0.7), JSColor.black, JSColor.black, JSColor.white);
 JSColorSpace.ui.setColorForName("tooltipShadow", JSColor.black.colorWithAlpha(0.2));
 
 // Menu Colors

diff --git a/Frameworks/UIKit/UINavigationBar.js b/Frameworks/UIKit/UINavigationBar.js
@@ -309,6 +309,7 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
     disabledItemColor: null,
     itemInsets: null,
     itemTitleInsets: null,
+    itemSpacing: 0,
     backButtonTitleInsets: null,
     backButtonImage: null,
     backButtonColor: null,
@@ -738,6 +739,9 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
             xLeft = this.titleInsets.left;
         }
         for (i = 0, l = props.leftBarItemViews.length; i < l; ++i){
+            if (i > 0){
+                xLeft += this.itemSpacing;
+            }
             barItemView = props.leftBarItemViews[i];
             barItemView.sizeToFitSize(JSSize(xRight - xLeft, itemHeight));
             barItemView.untransformedFrame = JSRect(JSPoint(xLeft, y + (itemHeight - barItemView.bounds.size.height) / 2), barItemView.bounds.size);
@@ -749,6 +753,9 @@ JSClass("UINavigationBarDefaultStyler", UINavigationBarStyler, {
             xRight -= barItemView.bounds.size.width;
             barItemView.untransformedFrame = JSRect(JSPoint(xRight, y + (itemHeight - barItemView.bounds.size.height) / 2), barItemView.bounds.size);
             barItemView.hidden = xRight < xLeft;
+            if (i > 0){
+                xRight -= this.itemSpacing;
+            }
         }
 
         var availableTitleWidth = xRight - xLeft;

diff --git a/Frameworks/UIKit/UIPopupButton.js b/Frameworks/UIKit/UIPopupButton.js
@@ -797,6 +797,11 @@ JSClass("UIPopupButtonImageStyler", UIPopupButtonStyler, {
     overBackgroundColor: null,
     cornerRadius: 0,
     titleInsets: null,
+    normalBorderColor: null,
+    disabledBorderColor: null,
+    overBorderColor: null,
+    activeBorderColor: null,
+    borderWidth: 0,
 
     init: function(){
         this.initWithColor(JSColor.text);
@@ -863,6 +868,14 @@ JSClass("UIPopupButtonImageStyler", UIPopupButtonStyler, {
                 this.disabledBackgroundColor = this.normalBackgroundColor.colorWithAlpha(0.5);
             }
         }
+        if (this.normalBorderColor !== null){
+            if (this.activeBorderColor === null){
+                this.activeBorderColor = this.normalBorderColor.colorDarkenedByPercentage(0.2);
+            }
+            if (this.disabledBorderColor === null){
+                this.disabledBorderColor = this.normalBorderColor.colorWithAlpha(0.5);
+            }
+        }
     },
 
     initializeControl: function(button){
@@ -875,22 +888,27 @@ JSClass("UIPopupButtonImageStyler", UIPopupButtonStyler, {
         button._imageView.hidden = false;
         button.cornerRadius = this.cornerRadius;
         button.titleInsets = this.titleInsets;
+        button.borderWidth = this.borderWidth;
         this.updateControl(button);
     },
 
     updateControl: function(button){
         if (!button.enabled){
             button._imageView.templateColor = this.disabledColor;
             button.backgroundColor = this.normalBackgroundColor;
+            button.borderColor = this.normalBorderColor;
         }else if (button.active){
             button._imageView.templateColor = this.activeColor;
             button.backgroundColor = this.activeBackgroundColor;
+            button.borderColor = this.activeBorderColor;
         }else{
             button._imageView.templateColor = this.normalColor;
             if (this.showsOverState && button.over){
                 button.backgroundColor = this.overBackgroundColor;
+                button.borderColor = this.overBorderColor;
             }else{
                 button.backgroundColor = this.normalBackgroundColor;
+                button.borderColor = this.normalBorderColor;
             }
         }
     },

diff --git a/Frameworks/UIKit/UIWindow.js b/Frameworks/UIKit/UIWindow.js
@@ -1458,6 +1458,8 @@ JSClass("UIWindowDefaultStyler", UIWindowStyler, {
         window.shadowRadius = this.shadowRadius;
         window.cornerRadius = this.cornerRadius;
         window.backgroundColor = this.backgroundColor;
+        window.borderWidth = 1;
+        window.borderColor = JSColor.windowBorder;
 
         this.updateWindow(window);
     },
@@ -1677,6 +1679,8 @@ JSClass("UIWindowTitlelessStyler", UIWindowStyler, {
         window.shadowRadius = this.shadowRadius;
         window.cornerRadius = this.cornerRadius;
         window.backgroundColor = this.backgroundColor;
+        window.borderWidth = 1;
+        window.borderColor = JSColor.windowBorder;
 
         this.updateWindow(window);
     },

diff --git a/Frameworks/UIKitTesting/Info.yaml b/Frameworks/UIKitTesting/Info.yaml
@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKitTesting
-JSBundleVersion: 2024.24.0
+JSBundleVersion: 2024.25.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |