KOA-6066 Introduce new color token (#1649)

* Add new color

* Add new example swatch

Backpack-SwiftUI/Color/Classes/Generated/BPKDynamicColors.swift

@@ -88,21 +88,26 @@ public extension BPKColor {
     static let statusWarningFillColor = BPKColor(red:1.000, green:0.969, blue:0.812, alpha:1)
         .darkVariant(BPKColor(red:0.984, green:0.945, blue:0.733, alpha:1))
 
-    /// The `surfaceContrastColor` dynamic color from the Backpack palette.
-
-    static let surfaceContrastColor = BPKColor(red:0.020, green:0.125, blue:0.235, alpha:1)
-        .darkVariant(BPKColor(red:0.004, green:0.035, blue:0.075, alpha:1))
-
     /// The `surfaceDefaultColor` dynamic color from the Backpack palette.
 
     static let surfaceDefaultColor = BPKColor(red:1.000, green:1.000, blue:1.000, alpha:1)
         .darkVariant(BPKColor(red:0.075, green:0.114, blue:0.169, alpha:1))
 
+    /// The `surfaceContrastColor` dynamic color from the Backpack palette.
+
+    static let surfaceContrastColor = BPKColor(red:0.020, green:0.125, blue:0.235, alpha:1)
+        .darkVariant(BPKColor(red:0.004, green:0.035, blue:0.075, alpha:1))
+
     /// The `surfaceElevatedColor` dynamic color from the Backpack palette.
 
     static let surfaceElevatedColor = BPKColor(red:1.000, green:1.000, blue:1.000, alpha:1)
         .darkVariant(BPKColor(red:0.141, green:0.200, blue:0.275, alpha:1))
 
+    /// The `surfaceSubtleColor` dynamic color from the Backpack palette.
+
+    static let surfaceSubtleColor = BPKColor(red:0.890, green:0.941, blue:1.000, alpha:1)
+        .darkVariant(BPKColor(red:0.141, green:0.200, blue:0.275, alpha:1))
+
     /// The `surfaceHighlightColor` dynamic color from the Backpack palette.
 
     static let surfaceHighlightColor = BPKColor(red:0.878, green:0.890, blue:0.898, alpha:1)

Backpack/Color/Classes/Generated/BPKColor.h

@@ -623,18 +623,18 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, class, readonly) UIColor * statusWarningFillColor;
 
 /**
- * The `surfaceContrastColor` dynamic color from the Backpack palette.
+ * The `surfaceDefaultColor` dynamic color from the Backpack palette.
  *
- * <div style="width: 100px; height: 100px; background-color: #05203cff; background: linear-gradient(0.375turn, #05203cff 49%, #010913ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+ * <div style="width: 100px; height: 100px; background-color: #ffffffff; background: linear-gradient(0.375turn, #ffffffff 49%, #131d2bff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
 */
-@property(nonatomic, class, readonly) UIColor * surfaceContrastColor;
+@property(nonatomic, class, readonly) UIColor * surfaceDefaultColor;
 
 /**
- * The `surfaceDefaultColor` dynamic color from the Backpack palette.
+ * The `surfaceContrastColor` dynamic color from the Backpack palette.
  *
- * <div style="width: 100px; height: 100px; background-color: #ffffffff; background: linear-gradient(0.375turn, #ffffffff 49%, #131d2bff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+ * <div style="width: 100px; height: 100px; background-color: #05203cff; background: linear-gradient(0.375turn, #05203cff 49%, #010913ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
 */
-@property(nonatomic, class, readonly) UIColor * surfaceDefaultColor;
+@property(nonatomic, class, readonly) UIColor * surfaceContrastColor;
 
 /**
  * The `surfaceElevatedColor` dynamic color from the Backpack palette.
@@ -643,6 +643,13 @@ NS_ASSUME_NONNULL_BEGIN
 */
 @property(nonatomic, class, readonly) UIColor * surfaceElevatedColor;
 
+/**
+ * The `surfaceSubtleColor` dynamic color from the Backpack palette.
+ *
+ * <div style="width: 100px; height: 100px; background-color: #e3f0ffff; background: linear-gradient(0.375turn, #e3f0ffff 49%, #243346ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+*/
+@property(nonatomic, class, readonly) UIColor * surfaceSubtleColor;
+
 /**
  * The `surfaceHighlightColor` dynamic color from the Backpack palette.
  *

Backpack/Color/Classes/Generated/BPKColor.m

@@ -371,18 +371,23 @@ + (UIColor *)statusWarningFillColor {
                                           darkVariant:[UIColor colorWithRed:0.984 green:0.945 blue:0.733 alpha:1]];
 }
 
++ (UIColor *)surfaceDefaultColor {
+    return [[self class] dynamicColorWithLightVariant:[UIColor colorWithRed:1.000 green:1.000 blue:1.000 alpha:1] 
+                                          darkVariant:[UIColor colorWithRed:0.075 green:0.114 blue:0.169 alpha:1]];
+}
+
 + (UIColor *)surfaceContrastColor {
     return [[self class] dynamicColorWithLightVariant:[UIColor colorWithRed:0.020 green:0.125 blue:0.235 alpha:1] 
                                           darkVariant:[UIColor colorWithRed:0.004 green:0.035 blue:0.075 alpha:1]];
 }
 
-+ (UIColor *)surfaceDefaultColor {
++ (UIColor *)surfaceElevatedColor {
     return [[self class] dynamicColorWithLightVariant:[UIColor colorWithRed:1.000 green:1.000 blue:1.000 alpha:1] 
-                                          darkVariant:[UIColor colorWithRed:0.075 green:0.114 blue:0.169 alpha:1]];
+                                          darkVariant:[UIColor colorWithRed:0.141 green:0.200 blue:0.275 alpha:1]];
 }
 
-+ (UIColor *)surfaceElevatedColor {
-    return [[self class] dynamicColorWithLightVariant:[UIColor colorWithRed:1.000 green:1.000 blue:1.000 alpha:1] 
++ (UIColor *)surfaceSubtleColor {
+    return [[self class] dynamicColorWithLightVariant:[UIColor colorWithRed:0.890 green:0.941 blue:1.000 alpha:1] 
                                           darkVariant:[UIColor colorWithRed:0.141 green:0.200 blue:0.275 alpha:1]];
 }
 

Backpack/Color/Classes/Generated/UIColor+Backpack.h

@@ -621,18 +621,18 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, class, readonly) UIColor * bpk_statusWarningFillColor;
 
 /**
- * The `surfaceContrastColor` dynamic color from the Backpack palette.
+ * The `surfaceDefaultColor` dynamic color from the Backpack palette.
  *
- * <div style="width: 100px; height: 100px; background-color: #05203cff; background: linear-gradient(0.375turn, #05203cff 49%, #010913ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+ * <div style="width: 100px; height: 100px; background-color: #ffffffff; background: linear-gradient(0.375turn, #ffffffff 49%, #131d2bff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
 */
-@property(nonatomic, class, readonly) UIColor * bpk_surfaceContrastColor;
+@property(nonatomic, class, readonly) UIColor * bpk_surfaceDefaultColor;
 
 /**
- * The `surfaceDefaultColor` dynamic color from the Backpack palette.
+ * The `surfaceContrastColor` dynamic color from the Backpack palette.
  *
- * <div style="width: 100px; height: 100px; background-color: #ffffffff; background: linear-gradient(0.375turn, #ffffffff 49%, #131d2bff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+ * <div style="width: 100px; height: 100px; background-color: #05203cff; background: linear-gradient(0.375turn, #05203cff 49%, #010913ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
 */
-@property(nonatomic, class, readonly) UIColor * bpk_surfaceDefaultColor;
+@property(nonatomic, class, readonly) UIColor * bpk_surfaceContrastColor;
 
 /**
  * The `surfaceElevatedColor` dynamic color from the Backpack palette.
@@ -641,6 +641,13 @@ NS_ASSUME_NONNULL_BEGIN
 */
 @property(nonatomic, class, readonly) UIColor * bpk_surfaceElevatedColor;
 
+/**
+ * The `surfaceSubtleColor` dynamic color from the Backpack palette.
+ *
+ * <div style="width: 100px; height: 100px; background-color: #e3f0ffff; background: linear-gradient(0.375turn, #e3f0ffff 49%, #243346ff 50%); box-shadow: 0px 1px 3px 0px rgba(37,32,31,.3); border-radius: 6px;"></div>
+*/
+@property(nonatomic, class, readonly) UIColor * bpk_surfaceSubtleColor;
+
 /**
  * The `surfaceHighlightColor` dynamic color from the Backpack palette.
  *

Backpack/Color/Classes/Generated/UIColor+Backpack.m

@@ -358,18 +358,22 @@ + (UIColor *)bpk_statusWarningFillColor {
     return BPKColor.statusWarningFillColor;
 }
 
-+ (UIColor *)bpk_surfaceContrastColor {
-    return BPKColor.surfaceContrastColor;
-}
-
 + (UIColor *)bpk_surfaceDefaultColor {
     return BPKColor.surfaceDefaultColor;
 }
 
++ (UIColor *)bpk_surfaceContrastColor {
+    return BPKColor.surfaceContrastColor;
+}
+
 + (UIColor *)bpk_surfaceElevatedColor {
     return BPKColor.surfaceElevatedColor;
 }
 
++ (UIColor *)bpk_surfaceSubtleColor {
+    return BPKColor.surfaceSubtleColor;
+}
+
 + (UIColor *)bpk_surfaceHighlightColor {
     return BPKColor.surfaceHighlightColor;
 }

Example/Backpack/SwiftUI/Tokens/ColorTokensView.swift

@@ -67,7 +67,8 @@ struct ColorTokens {
             .init(color: .surfaceDefaultColor, name: ".surfaceDefaultColor"),
             .init(color: .surfaceElevatedColor, name: ".surfaceElevatedColor"),
             .init(color: .surfaceContrastColor, name: ".surfaceContrastColor"),
-            .init(color: .surfaceHighlightColor, name: ".surfaceHighlightColor")
+            .init(color: .surfaceHighlightColor, name: ".surfaceHighlightColor"),
+            .init(color: .surfaceSubtleColor, name: ".surfaceSubtleColor")
         ]),
         .init(name: "Canvas", colors: [
             .init(color: .canvasColor, name: ".canvasColor"),

package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
-    "@skyscanner/bpk-foundations-ios": "^6.0.0",
+    "@skyscanner/bpk-foundations-ios": "^6.1.0",
     "@skyscanner/bpk-svgs": "^16.3.0",
     "babel-eslint": "^10.1.0",
     "danger": "^11.0.2",