LUNA-1231: addtokens segmented control (#325)

Co-authored-by: Maggie Pentcheva <[email protected]>
Skyscanner · May 31, 2024 · d4e253e · d4e253e
1 parent 4c32c66
commit d4e253e
Show file tree

Hide file tree

Showing 28 changed files with 680 additions and 14 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -0,0 +1,8 @@
+**Added:**
+`@skyscanner/bpk-foundations-android`: 7.10.0 => 7.11.0 </br>
+`@skyscanner/bpk-foundations-common`: 6.10.0 => 6.11.0 </br>
+`@skyscanner/bpk-foundations-ios`: 6.10.0 => 6.11.0 </br>
+`@skyscanner/bpk-foundations-react-native`: 4.10.0 => 4.11.0 </br>
+`@skyscanner/bpk-foundations-web`: 17.9.0 => 17.14.0 </br>
+
+- Added tokens for BpkSegmentedControl
diff --git a/packages/bpk-foundations-android/package-lock.json b/packages/bpk-foundations-android/package-lock.json
diff --git a/packages/bpk-foundations-android/tokens/base.raw.android.json b/packages/bpk-foundations-android/tokens/base.raw.android.json
@@ -3256,6 +3256,48 @@
       "originalValue": "{!BLACK_ALPHA_80}",
       "name": "PRIVATE_CARD_BUTTON_CONTAINED_FILL_NIGHT"
     },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#054184ff",
+      "originalValue": "{!NIGHT_SKY}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT"
+    },
     "ANIMATION_DURATION_XS": {
       "type": "duration",
       "value": "50ms",
@@ -4346,6 +4388,33 @@
       "name": "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR",
       "darkValue": "#000000cc",
       "originalDarkValue": "{!BLACK_ALPHA_80}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR",
+      "darkValue": "#054184ff",
+      "originalDarkValue": "{!NIGHT_SKY}"
     }
   },
   "propKeys": [
@@ -4735,6 +4804,12 @@
     "PRIVATE_NAVIGATION_TAB_OUTLINE_NIGHT",
     "PRIVATE_CARD_BUTTON_CONTAINED_FILL_DAY",
     "PRIVATE_CARD_BUTTON_CONTAINED_FILL_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT",
     "ANIMATION_DURATION_XS",
     "ANIMATION_DURATION_SM",
     "ANIMATION_DURATION_BASE",
@@ -4862,6 +4937,9 @@
     "PRIVATE_SPONSORED_BANNER_BACKGROUND_COLOR",
     "PRIVATE_NAVIGATION_TAB_HOVER_COLOR",
     "PRIVATE_NAVIGATION_TAB_OUTLINE_COLOR",
-    "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR"
+    "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR"
   ]
 }
diff --git a/packages/bpk-foundations-common/base/colors.json b/packages/bpk-foundations-common/base/colors.json
@@ -17,6 +17,7 @@
     "./colors/skeleton.json",
     "./colors/sponsored-banner.json",
     "./colors/navigation-tab.json",
-    "./colors/card-button.json"
+    "./colors/card-button.json",
+    "./colors/segmented-control.json"
   ]
 }
diff --git a/packages/bpk-foundations-common/base/colors/segmented-control.json b/packages/bpk-foundations-common/base/colors/segmented-control.json
@@ -0,0 +1,27 @@
+{
+  "imports": ["./aliases.json"],
+  "global": {
+    "type": "color",
+    "category": "segmented-control-colors"
+  },
+  "props": {
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY": {
+      "value": "{!GREY_10}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT": {
+      "value": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY": {
+      "value": "{!WHITE_ALPHA_10}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT": {
+      "value": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY": {
+      "value": "{!SKY_BLUE_85}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT": {
+      "value": "{!NIGHT_SKY}"
+    }
+  }
+}
diff --git a/packages/bpk-foundations-common/package-lock.json b/packages/bpk-foundations-common/package-lock.json
diff --git a/packages/bpk-foundations-ios/package-lock.json b/packages/bpk-foundations-ios/package-lock.json
diff --git a/packages/bpk-foundations-ios/tokens/base.ios.json b/packages/bpk-foundations-ios/tokens/base.ios.json
@@ -2819,6 +2819,48 @@
       "originalValue": "{!BLACK_ALPHA_80}",
       "name": "privateCardButtonContainedFillNight"
     },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "privateSegmentedControlCanvasDefaultDay"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "privateSegmentedControlCanvasDefaultNight"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "privateSegmentedControlSurfaceContrastDay"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "privateSegmentedControlSurfaceContrastNight"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "privateSegmentedControlSurfaceContrastOnDay"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#054184ff",
+      "originalValue": "{!NIGHT_SKY}",
+      "name": "privateSegmentedControlSurfaceContrastOnNight"
+    },
     {
       "type": "duration",
       "value": "50ms",
@@ -4113,6 +4155,33 @@
       "name": "privateCardButtonContainedFillColor",
       "darkValue": "#000000cc",
       "originalDarkValue": "{!BLACK_ALPHA_80}"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "privateSegmentedControlCanvasDefaultColor",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "privateSegmentedControlSurfaceContrastColor",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "privateSegmentedControlSurfaceContrastOnColor",
+      "darkValue": "#054184ff",
+      "originalDarkValue": "{!NIGHT_SKY}"
     }
   ]
 }
diff --git a/packages/bpk-foundations-ios/tokens/base.raw.ios.json b/packages/bpk-foundations-ios/tokens/base.raw.ios.json
@@ -3256,6 +3256,48 @@
       "originalValue": "{!BLACK_ALPHA_80}",
       "name": "PRIVATE_CARD_BUTTON_CONTAINED_FILL_NIGHT"
     },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#131d2bff",
+      "originalValue": "{!NIGHT_GREY_20}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#054184ff",
+      "originalValue": "{!NIGHT_SKY}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT"
+    },
     "ANIMATION_DURATION_XS": {
       "type": "duration",
       "value": "50ms",
@@ -4550,6 +4592,33 @@
       "name": "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR",
       "darkValue": "#000000cc",
       "originalDarkValue": "{!BLACK_ALPHA_80}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#eff3f8ff",
+      "originalValue": "{!GREY_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#ffffff1a",
+      "originalValue": "{!WHITE_ALPHA_10}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR",
+      "darkValue": "#131d2bff",
+      "originalDarkValue": "{!NIGHT_GREY_20}"
+    },
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR": {
+      "type": "color",
+      "category": "segmented-control-colors",
+      "value": "#024dafff",
+      "originalValue": "{!SKY_BLUE_85}",
+      "name": "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR",
+      "darkValue": "#054184ff",
+      "originalDarkValue": "{!NIGHT_SKY}"
     }
   },
   "propKeys": [
@@ -4939,6 +5008,12 @@
     "PRIVATE_NAVIGATION_TAB_OUTLINE_NIGHT",
     "PRIVATE_CARD_BUTTON_CONTAINED_FILL_DAY",
     "PRIVATE_CARD_BUTTON_CONTAINED_FILL_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_NIGHT",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_DAY",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_NIGHT",
     "ANIMATION_DURATION_XS",
     "ANIMATION_DURATION_SM",
     "ANIMATION_DURATION_BASE",
@@ -5095,6 +5170,9 @@
     "PRIVATE_SPONSORED_BANNER_BACKGROUND_COLOR",
     "PRIVATE_NAVIGATION_TAB_HOVER_COLOR",
     "PRIVATE_NAVIGATION_TAB_OUTLINE_COLOR",
-    "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR"
+    "PRIVATE_CARD_BUTTON_CONTAINED_FILL_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_CANVAS_DEFAULT_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_COLOR",
+    "PRIVATE_SEGMENTED_CONTROL_SURFACE_CONTRAST_ON_COLOR"
   ]
 }
diff --git a/packages/bpk-foundations-react-native/package-lock.json b/packages/bpk-foundations-react-native/package-lock.json
diff --git a/packages/bpk-foundations-react-native/tokens/android/base.react.native.common.js b/packages/bpk-foundations-react-native/tokens/android/base.react.native.common.js
@@ -267,6 +267,12 @@ module.exports = {
   privateNavigationTabOutlineNight: "rgb(255, 255, 255)",
   privateCardButtonContainedFillDay: "rgba(255, 255, 255, 0.8)",
   privateCardButtonContainedFillNight: "rgba(0, 0, 0, 0.8)",
+  privateSegmentedControlCanvasDefaultDay: "rgb(239, 243, 248)",
+  privateSegmentedControlCanvasDefaultNight: "rgb(19, 29, 43)",
+  privateSegmentedControlSurfaceContrastDay: "rgba(255, 255, 255, 0.1)",
+  privateSegmentedControlSurfaceContrastNight: "rgb(19, 29, 43)",
+  privateSegmentedControlSurfaceContrastOnDay: "rgb(2, 77, 175)",
+  privateSegmentedControlSurfaceContrastOnNight: "rgb(5, 65, 132)",
   animationDurationXs: 50,
   animationDurationSm: 200,
   animationDurationBase: 400,