[NO JIRA]: Adding more colours (#100)

Skyscanner · Jul 27, 2022 · f8b9fae · f8b9fae
1 parent c4174e6
commit f8b9fae
Show file tree

Hide file tree

Showing 31 changed files with 3,213 additions and 172 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -0,0 +1,10 @@
+**Added:**
+
+`@skyscanner/bpk-foundations-common`<br />
+`@skyscanner/bpk-foundations-android`<br />
+`@skyscanner/bpk-foundations-ios`<br />
+`@skyscanner/bpk-foundations-react-native`<br />
+`@skyscanner/bpk-foundations-web`<br />
+  - Added new alpha colours and scrim colour
+  - Updated `TEXT_DISABLED_DAY` & `TEXT_DISABLED_NIGHT` colours to correct colours
+  - Added text on contrast colours.
diff --git a/packages/bpk-foundations-android/tokens/base.raw.android.json b/packages/bpk-foundations-android/tokens/base.raw.android.json
@@ -24,6 +24,9 @@
     "BLACK": {
       "value": "#000000"
     },
+    "BLACK_ALPHA_20": {
+      "value": "#B2B2BF"
+    },
     "BLACK_TINT_01": {
       "value": "#1D1B20"
     },
@@ -321,6 +324,9 @@
     "SAGANO": {
       "value": "#d0eeec"
     },
+    "SCRIM": {
+      "value": "02122c"
+    },
     "SKY_BLUE": {
       "value": "#0770e3"
     },
@@ -396,6 +402,12 @@
     "WHITE": {
       "value": "#ffffff"
     },
+    "WHITE_ALPHA_20": {
+      "value": "#8E8E93"
+    },
+    "WHITE_ALPHA_80": {
+      "value": "#8E8E93"
+    },
     "YELLOW": {
       "value": "#FEEB87"
     },
@@ -712,6 +724,13 @@
       "originalValue": "{!BLACK}",
       "name": "COLOR_BLACK"
     },
+    "COLOR_BLACK_ALPHA_20": {
+      "type": "color",
+      "category": "colors",
+      "value": "#b2b2bfff",
+      "originalValue": "{!BLACK_ALPHA_20}",
+      "name": "COLOR_BLACK_ALPHA_20"
+    },
     "COLOR_BLACK_TINT_01": {
       "type": "color",
       "category": "colors",
@@ -1041,6 +1060,13 @@
       "originalValue": "{!SAGANO}",
       "name": "COLOR_SAGANO"
     },
+    "COLOR_SCRIM": {
+      "type": "color",
+      "category": "colors",
+      "value": "#02122cff",
+      "originalValue": "{!SCRIM}",
+      "name": "COLOR_SCRIM"
+    },
     "COLOR_SKY_BLUE": {
       "type": "color",
       "category": "colors",
@@ -1181,6 +1207,20 @@
       "originalValue": "{!WHITE}",
       "name": "COLOR_WHITE"
     },
+    "COLOR_WHITE_ALPHA_20": {
+      "type": "color",
+      "category": "colors",
+      "value": "#8e8e93ff",
+      "originalValue": "{!WHITE_ALPHA_20}",
+      "name": "COLOR_WHITE_ALPHA_20"
+    },
+    "COLOR_WHITE_ALPHA_80": {
+      "type": "color",
+      "category": "colors",
+      "value": "#8e8e93ff",
+      "originalValue": "{!WHITE_ALPHA_80}",
+      "name": "COLOR_WHITE_ALPHA_80"
+    },
     "COLOR_YELLOW": {
       "type": "color",
       "category": "colors",
@@ -1549,15 +1589,15 @@
     "SCRIM_DAY": {
       "type": "color",
       "category": "scrim-colors",
-      "value": "#cdcdd7ff",
-      "originalValue": "{!GREY_30}",
+      "value": "#02122cff",
+      "originalValue": "{!SCRIM}",
       "name": "SCRIM_DAY"
     },
     "SCRIM_NIGHT": {
       "type": "color",
       "category": "scrim-colors",
-      "value": "#48484aff",
-      "originalValue": "{!NIGHT_GREY_30}",
+      "value": "#02122cff",
+      "originalValue": "{!SCRIM}",
       "name": "SCRIM_NIGHT"
     },
     "SPACING_BASE": {
@@ -1902,15 +1942,15 @@
     "TEXT_DISABLED_DAY": {
       "type": "color",
       "category": "text-colors",
-      "value": "#000000ff",
-      "originalValue": "{!BLACK}",
+      "value": "#b2b2bfff",
+      "originalValue": "{!BLACK_ALPHA_20}",
       "name": "TEXT_DISABLED_DAY"
     },
     "TEXT_DISABLED_NIGHT": {
       "type": "color",
       "category": "text-colors",
-      "value": "#ffffffff",
-      "originalValue": "{!WHITE}",
+      "value": "#8e8e93ff",
+      "originalValue": "{!WHITE_ALPHA_20}",
       "name": "TEXT_DISABLED_NIGHT"
     },
     "TEXT_ERROR_DAY": {
@@ -2346,6 +2386,20 @@
       "originalValue": "{!WHITE}",
       "name": "TEXT_PRIMARY_NIGHT"
     },
+    "TEXT_PRIMARY_ON_CONTRAST_DAY": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#ffffffff",
+      "originalValue": "{!WHITE}",
+      "name": "TEXT_PRIMARY_ON_CONTRAST_DAY"
+    },
+    "TEXT_PRIMARY_ON_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#ffffffff",
+      "originalValue": "{!WHITE}",
+      "name": "TEXT_PRIMARY_ON_CONTRAST_NIGHT"
+    },
     "TEXT_QUATERNARY_DARK_COLOR": {
       "type": "color",
       "category": "text-colors",
@@ -2389,6 +2443,21 @@
       "originalValue": "{!SKY_GRAY_TINT_04}",
       "name": "TEXT_SECONDARY_NIGHT"
     },
+    "TEXT_SECONDARY_ON_CONTRAST_DAY": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#8e8e93ff",
+      "comment": "This colour needs to be apply opacity to it but needs a better solution but shouldn't be in use in product so safe to leave as is",
+      "originalValue": "{!WHITE_ALPHA_80}",
+      "name": "TEXT_SECONDARY_ON_CONTRAST_DAY"
+    },
+    "TEXT_SECONDARY_ON_CONTRAST_NIGHT": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#8e8e93ff",
+      "originalValue": "{!NIGHT_GREY_40}",
+      "name": "TEXT_SECONDARY_ON_CONTRAST_NIGHT"
+    },
     "TEXT_SM-EMPHASIZED_FONT_SIZE": {
       "value": "14",
       "type": "font-size",
@@ -2834,11 +2903,11 @@
     "SCRIM_COLOR": {
       "type": "color",
       "category": "scrim-colors",
-      "value": "#cdcdd7ff",
-      "originalValue": "{!GREY_30}",
+      "value": "#02122cff",
+      "originalValue": "{!SCRIM}",
       "name": "SCRIM_COLOR",
-      "darkValue": "#48484aff",
-      "originalDarkValue": "{!NIGHT_GREY_30}"
+      "darkValue": "#02122cff",
+      "originalDarkValue": "{!SCRIM}"
     },
     "STATUS_DANGER_FILL_COLOR": {
       "type": "color",
@@ -2933,11 +3002,11 @@
     "TEXT_DISABLED_COLOR": {
       "type": "color",
       "category": "text-colors",
-      "value": "#000000ff",
-      "originalValue": "{!BLACK}",
+      "value": "#b2b2bfff",
+      "originalValue": "{!BLACK_ALPHA_20}",
       "name": "TEXT_DISABLED_COLOR",
-      "darkValue": "#ffffffff",
-      "originalDarkValue": "{!WHITE}"
+      "darkValue": "#8e8e93ff",
+      "originalDarkValue": "{!WHITE_ALPHA_20}"
     },
     "TEXT_ERROR_COLOR": {
       "type": "color",
@@ -2966,6 +3035,15 @@
       "darkValue": "#ffffffff",
       "originalDarkValue": "{!WHITE}"
     },
+    "TEXT_PRIMARY_ON_CONTRAST_COLOR": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#ffffffff",
+      "originalValue": "{!WHITE}",
+      "name": "TEXT_PRIMARY_ON_CONTRAST_COLOR",
+      "darkValue": "#ffffffff",
+      "originalDarkValue": "{!WHITE}"
+    },
     "TEXT_QUATERNARY_COLOR": {
       "type": "color",
       "category": "text-colors",
@@ -2984,6 +3062,16 @@
       "darkValue": "#b2b2bfff",
       "originalDarkValue": "{!SKY_GRAY_TINT_04}"
     },
+    "TEXT_SECONDARY_ON_CONTRAST_COLOR": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "#8e8e93ff",
+      "comment": "This colour needs to be apply opacity to it but needs a better solution but shouldn't be in use in product so safe to leave as is",
+      "originalValue": "{!WHITE_ALPHA_80}",
+      "name": "TEXT_SECONDARY_ON_CONTRAST_COLOR",
+      "darkValue": "#8e8e93ff",
+      "originalDarkValue": "{!NIGHT_GREY_40}"
+    },
     "TEXT_TERTIARY_COLOR": {
       "type": "color",
       "category": "text-colors",
@@ -3039,6 +3127,7 @@
     "COLOR_BAGAN",
     "COLOR_BERRY",
     "COLOR_BLACK",
+    "COLOR_BLACK_ALPHA_20",
     "COLOR_BLACK_TINT_01",
     "COLOR_BLACK_TINT_02",
     "COLOR_BLACK_TINT_03",
@@ -3086,6 +3175,7 @@
     "COLOR_PRIMARY_GRADIENT_LIGHT",
     "COLOR_PURPLE",
     "COLOR_SAGANO",
+    "COLOR_SCRIM",
     "COLOR_SKY_BLUE",
     "COLOR_SKY_BLUE_SHADE_01",
     "COLOR_SKY_BLUE_SHADE_02",
@@ -3106,6 +3196,8 @@
     "COLOR_TOCHIGI",
     "COLOR_VALENSOLE",
     "COLOR_WHITE",
+    "COLOR_WHITE_ALPHA_20",
+    "COLOR_WHITE_ALPHA_80",
     "COLOR_YELLOW",
     "COLOR_YELLOW_MUTED",
     "CORE_ACCENT_DAY",
@@ -3270,12 +3362,16 @@
     "TEXT_PRIMARY_DAY",
     "TEXT_PRIMARY_LIGHT_COLOR",
     "TEXT_PRIMARY_NIGHT",
+    "TEXT_PRIMARY_ON_CONTRAST_DAY",
+    "TEXT_PRIMARY_ON_CONTRAST_NIGHT",
     "TEXT_QUATERNARY_DARK_COLOR",
     "TEXT_QUATERNARY_LIGHT_COLOR",
     "TEXT_SECONDARY_DARK_COLOR",
     "TEXT_SECONDARY_DAY",
     "TEXT_SECONDARY_LIGHT_COLOR",
     "TEXT_SECONDARY_NIGHT",
+    "TEXT_SECONDARY_ON_CONTRAST_DAY",
+    "TEXT_SECONDARY_ON_CONTRAST_NIGHT",
     "TEXT_SM-EMPHASIZED_FONT_SIZE",
     "TEXT_SM-EMPHASIZED_FONT_WEIGHT",
     "TEXT_SM-EMPHASIZED_LINE_HEIGHT",
@@ -3345,8 +3441,10 @@
     "TEXT_ERROR_COLOR",
     "TEXT_LINK_COLOR",
     "TEXT_PRIMARY_COLOR",
+    "TEXT_PRIMARY_ON_CONTRAST_COLOR",
     "TEXT_QUATERNARY_COLOR",
     "TEXT_SECONDARY_COLOR",
+    "TEXT_SECONDARY_ON_CONTRAST_COLOR",
     "TEXT_TERTIARY_COLOR"
   ]
 }
diff --git a/packages/bpk-foundations-common/base/colors/aliases.json b/packages/bpk-foundations-common/base/colors/aliases.json
@@ -65,6 +65,10 @@
     "NIGHT_GREY_25": "#1B2839",
     "NIGHT_GREY_30": "#48484A",
     "NIGHT_GREY_40": "#8E8E93",
+    "WHITE_ALPHA_20": "#8E8E93",
+    "WHITE_ALPHA_80": "#8E8E93",
+    "BLACK_ALPHA_20": "#B2B2BF",
+    "SCRIM": "02122c",
     "BLUE_BRIGHT": "#A1EEFF",
     "BLUE_MUTED": "#D9F8FF",
     "GREEN_BRIGHT": "#93FFDE",

diff --git a/packages/bpk-foundations-common/base/colors/base.json b/packages/bpk-foundations-common/base/colors/base.json
@@ -200,6 +200,18 @@
     "COLOR_NIGHT_GREY_40": {
       "value": "{!NIGHT_GREY_40}"
     },
+    "COLOR_WHITE_ALPHA_20": {
+      "value": "{!WHITE_ALPHA_20}"
+    },
+    "COLOR_WHITE_ALPHA_80": {
+      "value": "{!WHITE_ALPHA_80}"
+    },
+    "COLOR_BLACK_ALPHA_20": {
+      "value": "{!BLACK_ALPHA_20}"
+    },
+    "COLOR_SCRIM": {
+      "value": "{!SCRIM}"
+    },
     "COLOR_BLUE_BRIGHT": {
       "value": "{!BLUE_BRIGHT}"
     },

diff --git a/packages/bpk-foundations-common/base/colors/other.json b/packages/bpk-foundations-common/base/colors/other.json
@@ -34,12 +34,12 @@
     "SCRIM_DAY": {
       "type": "color",
       "category": "scrim-colors",
-      "value": "{!GREY_30}"
+      "value": "{!SCRIM}"
     },
     "SCRIM_NIGHT": {
       "type": "color",
       "category": "scrim-colors",
-      "value": "{!NIGHT_GREY_30}"
+      "value": "{!SCRIM}"
     },
     "PRIMARY_LIGHT_COLOR": {
       "type": "color",

diff --git a/packages/bpk-foundations-common/base/colors/text.json b/packages/bpk-foundations-common/base/colors/text.json
@@ -37,18 +37,31 @@
     "TEXT_PRIMARY_NIGHT": {
       "value": "{!WHITE}"
     },
+    "TEXT_PRIMARY_ON_CONTRAST_DAY": {
+      "value": "{!WHITE}"
+    },
+    "TEXT_PRIMARY_ON_CONTRAST_NIGHT": {
+      "value": "{!WHITE}"
+    },
     "TEXT_SECONDARY_DAY": {
       "value": "{!GREY_40}"
     },
     "TEXT_SECONDARY_NIGHT": {
       "value": "{!SKY_GRAY_TINT_04}",
       "comment": "This colour needs to be changed to NIGHT_GREY_40 when we set the new hex values"
     },
+    "TEXT_SECONDARY_ON_CONTRAST_DAY": {
+      "value": "{!WHITE_ALPHA_80}",
+      "comment": "This colour needs to be apply opacity to it but needs a better solution but shouldn't be in use in product so safe to leave as is"
+    },
+    "TEXT_SECONDARY_ON_CONTRAST_NIGHT": {
+      "value": "{!NIGHT_GREY_40}"
+    },
     "TEXT_DISABLED_DAY": {
-      "value": "{!BLACK}"
+      "value": "{!BLACK_ALPHA_20}"
     },
     "TEXT_DISABLED_NIGHT": {
-      "value": "{!WHITE}"
+      "value": "{!WHITE_ALPHA_20}"
     },
     "TEXT_ERROR_DAY": {
       "value": "{!BERRY}"