@breakside/jskit 2021.36.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/Foundation/JSSynchronizer.js

@@ -101,7 +101,15 @@ JSClass("JSSynchronizer", JSObject, {
             },
         };
         try{
-            this.action.call(this.target, context);
+            var promise = this.action.call(this.target, context);
+            if (promise instanceof Promise){
+                context.started();
+                promise.then(function(){
+                    context.completed();
+                }, function(error){
+                    context.completed(error);
+                });
+            }
         }catch (e){
             logger.error(e);
             this.error = e;

package/Root/Frameworks/Foundation/JSURL.js

@@ -361,9 +361,48 @@ JSClass("JSURL", JSObject, {
         this._query = null;
     },
 
+    _createQuery: function(other){
+        var url = this;
+        var query = Object.create(JSFormFieldMap.prototype, {
+
+            add: {
+                value: function(name, value){
+                    JSFormFieldMap.prototype.add.call(this, name, value);
+                    url._encodedQuery = this.urlEncoded();
+                    if (url._encodedQuery.length === 0){
+                        url._encodedQuery = null;
+                    }
+                }
+            },
+
+            set: {
+                value: function(name, value){
+                    JSFormFieldMap.prototype.set.call(this, name, value);
+                    url._encodedQuery = this.urlEncoded();
+                    if (url._encodedQuery.length === 0){
+                        url._encodedQuery = null;
+                    }
+                }
+            },
+
+            unset: {
+                value: function(name, value){
+                    JSFormFieldMap.prototype.unset.call(this, name);
+                    url._encodedQuery = this.urlEncoded();
+                    if (url._encodedQuery.length === 0){
+                        url._encodedQuery = null;
+                    }
+                }
+            }
+
+        });
+        JSFormFieldMap.call(query, other);
+        return query;
+    },
+
     getQuery: function(){
         if (this._query === null){
-            this._query = JSFormFieldMap();
+            this._query = this._createQuery();
             if (this._encodedQuery !== null){
                 this._query.decode(this._encodedQuery, true);
             }
@@ -373,9 +412,9 @@ JSClass("JSURL", JSObject, {
 
     setQuery: function(query){
         if (query === null){
-            this._query = JSFormFieldMap();
+            this._query = this._createQuery();
         }else{
-            this._query = JSFormFieldMap(query);
+            this._query = this._createQuery(query);
         }
         this._encodedQuery = this._query.urlEncoded();
         if (this._encodedQuery.length === 0){

package/Root/Frameworks/ImageKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ImageKit
-JSBundleVersion: 2021.36.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.36.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.36.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.36.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.36.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.36.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.36.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.36.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.36.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/ServerKit/SKValidatingObject.js

@@ -84,6 +84,10 @@ JSClass("SKValidatingObjectPropertyProvider", JSObject, {
         return null;
     },
 
+    getKeys: function(){
+        return Object.keys(this.obj);
+    }
+
 });
 
 JSClass("SKValidatingObjectFormFieldProvider", JSObject, {
@@ -159,6 +163,14 @@ JSClass("SKValidatingObjectFormFieldProvider", JSObject, {
 
     getLength: function(){
         return null;
+    },
+
+    getKeys: function(){
+        var keys = [];
+        for (var i = 0, l = this.form.fields.length; i < l; ++i){
+            keys.push(this.form.fields[i].name);
+        }
+        return keys;
     }
 
 });
@@ -190,6 +202,10 @@ JSClass("SKValidatingObjectFormFieldArrayProvider", SKValidatingObjectFormFieldP
 
     getLength: function(){
         return this.array.length;
+    },
+
+    getKeys: function(){
+        return Object.keys(this.array);
     }
 
 });
@@ -197,6 +213,7 @@ JSClass("SKValidatingObjectFormFieldArrayProvider", SKValidatingObjectFormFieldP
 JSClass("SKValidatingObject", JSObject, {
 
     length: JSReadOnlyProperty(),
+    keys: JSReadOnlyProperty(),
 
     initWithObject: function(obj){
         this.initWithValueProvider(SKValidatingObjectPropertyProvider.initWithObject(obj));
@@ -216,6 +233,10 @@ JSClass("SKValidatingObject", JSObject, {
         return this.valueProvider.getLength();
     },
 
+    getKeys: function(){
+        return this.valueProvider.getKeys();
+    },
+
     numberForKey: function(key, defaultValue, validator){
         var n = this.valueProvider.numberForKey(key);
         if (typeof(defaultValue) == 'function'){

package/Root/Frameworks/ServerKitTesting/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.ServerKitTesting
-JSBundleVersion: 2021.36.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.36.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.36.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;
         },