@skyscanner/bpk-foundations-common 3.2.1 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/base/colors/aliases.json +69 -62
  2. package/base/colors/button.json +54 -54
  3. package/base/colors/chip.json +12 -12
  4. package/base/colors/marcomms.json +12 -11
  5. package/base/colors/other.json +26 -16
  6. package/base/colors/skeleton.json +0 -1
  7. package/base/colors/text.json +9 -10
  8. package/package.json +2 -2
package/base/colors/aliases.json CHANGED
@@ -1,73 +1,80 @@
1
1
  {
2
2
  "aliases": {
3
3
  "WHITE": "#ffffff",
4
- "SKY_BLUE": "#0770e3",
5
- "MONTEVERDE": "#00a698",
6
- "GLENCOE": "#73cec6",
7
- "SAGANO": "#d0eeec",
8
- "KOLKATA": "#ff9400",
9
- "ERFOUD": "#ffb54d",
10
- "BAGAN": "#ffebd0",
11
- "BUNOL": "#ff7b59",
12
- "PETRA": "#ffab95",
13
- "NARA": "#ffe7e0",
14
- "ABISKO": "#5a489b",
15
- "VALENSOLE": "#a59bc8",
16
- "TOCHIGI": "#e1ddec",
17
- "PANJIN": "#d1435b",
18
- "HILLIER": "#e18b96",
19
- "HARBOUR": "#f6dde1",
20
- "SKY_BLUE_SHADE_03": "#02122c",
21
- "SKY_BLUE_SHADE_02": "#042759",
22
- "SKY_BLUE_SHADE_01": "#084eb2",
23
- "SKY_BLUE_TINT_01": "#6d9feb",
24
- "SKY_BLUE_TINT_02": "#9dc0f2",
25
- "SKY_BLUE_TINT_03": "#cddff8",
26
- "SKY_GRAY_TINT_07": "#F1F2F8",
27
- "SKY_GRAY_TINT_06": "#DDDDE5",
28
- "SKY_GRAY_TINT_05": "#CDCDD7",
29
- "SKY_GRAY_TINT_04": "#B2B2BF",
30
- "SKY_GRAY_TINT_03": "#8f90a0",
31
- "SKY_GRAY_TINT_02": "#68697F",
32
- "SKY_GRAY_TINT_01": "#444560",
33
- "SKY_GRAY": "#111236",
34
- "BLACK": "#000000",
35
- "BLACK_TINT_01": "#1D1B20",
36
- "BLACK_TINT_02": "#2C2C2E",
37
- "BLACK_TINT_03": "#3A3A3C",
38
- "BLACK_TINT_04": "#48484A",
39
- "BLACK_TINT_05": "#636366",
40
- "BLACK_TINT_06": "#8E8E93",
4
+ "SKY_BLUE": "#0062E3",
5
+ "SKY_BLUE_85": "#024DAF",
6
+ "MONTEVERDE": "#0C838A",
7
+ "GLENCOE": "#62F1C6",
8
+ "SAGANO": "#D4FFF2",
9
+ "KOLKATA": "#F55D42",
10
+ "ERFOUD": "#FEEB87",
11
+ "BAGAN": "#FFF7CF",
12
+ "BUNOL": "#F55D42",
13
+ "PETRA": "#FEEB87",
14
+ "NARA": "#FFF7CF",
15
+ "ABISKO": "#05203C",
16
+ "VALENSOLE": "#E0E3E5",
17
+ "TOCHIGI": "#EFF1F2",
18
+ "PANJIN": "#E70866",
19
+ "HILLIER": "#FF649C",
20
+ "HARBOUR": "#FFE9F9",
21
+ "SKY_BLUE_SHADE_03": "#05203C",
22
+ "SKY_BLUE_SHADE_02": "#05203C",
23
+ "SKY_BLUE_SHADE_01": "#0062E3",
24
+ "SKY_BLUE_TINT_01": "#84E9FF",
25
+ "SKY_BLUE_TINT_02": "#E0E3E5",
26
+ "SKY_BLUE_TINT_03": "#E0E3E5",
27
+ "SKY_GRAY_TINT_07": "#EFF1F2",
28
+ "SKY_GRAY_TINT_06": "#E0E3E5",
29
+ "SKY_GRAY_TINT_05": "#C2C9CD",
30
+ "SKY_GRAY_TINT_04": "#C2C9CD",
31
+ "SKY_GRAY_TINT_03": "#545860",
32
+ "SKY_GRAY_TINT_02": "#545860",
33
+ "SKY_GRAY_TINT_01": "#545860",
34
+ "SKY_GRAY": "#161616",
35
+ "BLACK": "#010913",
36
+ "BLACK_TINT_01": "#131D2B",
37
+ "BLACK_TINT_02": "#131D2B",
38
+ "BLACK_TINT_03": "#243346",
39
+ "BLACK_TINT_04": "#44505F",
40
+ "BLACK_TINT_05": "#44505F",
41
+ "BLACK_TINT_06": "#BDC4CB",
41
42
  "PRIMARY_GRADIENT_LIGHT": "#02DDD8",
42
- "DARK_SKY": "#02122C",
43
+ "DARK_SKY": "#05203C",
44
+ "DARK_SKY_85": "#154679",
43
45
  "ECO_GREEN": "#0FA1A9",
44
- "GREEN_SPOT": "#00A698",
45
- "GREEN_MUTED": "#D0EEEC",
46
- "AMBER_SPOT": "#FF9400",
47
- "YELLOW_MUTED": "#FFEBD0",
48
- "BERRY": "#D1435B",
49
- "PINK_MUTED": "#F6DDE1",
50
- "GREY_10": "#F1F2F8",
51
- "GREY_20": "#DDDDE5",
52
- "GREY_30": "#CDCDD7",
53
- "GREY_40": "#68697F",
54
- "CHARCOAL": "#111236",
46
+ "GREEN_SPOT": "#0C838A",
47
+ "GREEN_MUTED": "#D4FFF2",
48
+ "AMBER_SPOT": "#F55D42",
49
+ "YELLOW_MUTED": "#FFF7CF",
50
+ "BERRY": "#E70866",
51
+ "BERRY_75": "#C80456",
52
+ "PINK_MUTED": "#FFE9F9",
53
+ "GREY_10": "#EFF1F2",
54
+ "GREY_20": "#E0E3E5",
55
+ "GREY_30": "#C2C9CD",
56
+ "GREY_40": "#545860",
57
+ "CHARCOAL": "#161616",
55
58
  "NIGHT_SKY": "#054184",
56
- "NIGHT_BLUE": "#6D9FEB",
57
- "NIGHT_GREEN_SPOT": "#00A698",
59
+ "NIGHT_BLUE": "#84E9FF",
60
+ "NIGHT_BLUE_20": "#D1F7FF",
61
+ "NIGHT_BLUE_100": "#002B5B",
62
+ "NIGHT_GREEN_SPOT": "#62F1C6",
58
63
  "NIGHT_GREEN_FILL": "#B1FFE7",
59
- "NIGHT_YELLOW_SPOT": "#FFB54D",
64
+ "NIGHT_YELLOW_SPOT": "#FEEB87",
60
65
  "NIGHT_YELLOW_FILL": "#FBF1BB",
61
- "NIGHT_BERRY": "#D1435B",
66
+ "NIGHT_BERRY": "#FF649C",
62
67
  "NIGHT_PINK": "#FFCADD",
63
- "NIGHT_GREY_10": "#000000",
64
- "NIGHT_GREY_20": "#1D1B20",
65
- "NIGHT_GREY_25": "#2C2C2E",
66
- "NIGHT_GREY_30": "#48484A",
67
- "NIGHT_GREY_40": "#8E8E93",
68
- "WHITE_ALPHA_20": "#8E8E93",
69
- "WHITE_ALPHA_80": "#8E8E93",
70
- "BLACK_ALPHA_20": "#B2B2BF",
71
- "BLACK_ALPHA_70": "#02122c"
68
+ "NIGHT_GREY_00": "#0B121D",
69
+ "NIGHT_GREY_10": "#010913",
70
+ "NIGHT_GREY_20": "#131D2B",
71
+ "NIGHT_GREY_25": "#243346",
72
+ "NIGHT_GREY_30": "#44505F",
73
+ "NIGHT_GREY_40": "#BDC4CB",
74
+ "WHITE_ALPHA_20": "#FFFFFF33",
75
+ "WHITE_ALPHA_50": "#FFFFFF80",
76
+ "WHITE_ALPHA_80": "#FFFFFFCC",
77
+ "BLACK_ALPHA_20": "#00000033",
78
+ "BLACK_ALPHA_70": "#000000B3"
72
79
  }
73
80
  }
package/base/colors/button.json CHANGED
@@ -6,166 +6,166 @@
6
6
  },
7
7
  "props": {
8
8
  "PRIVATE_BUTTON_DISABLED_BACKGROUND_DAY": {
9
- "value": "#DDE1E4"
9
+ "value": "{!GREY_20}"
10
10
  },
11
11
  "PRIVATE_BUTTON_DISABLED_BACKGROUND_NIGHT": {
12
- "value": "#0B111A"
12
+ "value": "{!NIGHT_GREY_00}"
13
13
  },
14
14
  "PRIVATE_BUTTON_PRIMARY_NORMAL_BACKGROUND_DAY": {
15
- "value": "#05203C"
15
+ "value": "{!DARK_SKY}"
16
16
  },
17
17
  "PRIVATE_BUTTON_PRIMARY_NORMAL_BACKGROUND_NIGHT": {
18
- "value": "#054184"
18
+ "value": "{!NIGHT_SKY}"
19
19
  },
20
20
  "PRIVATE_BUTTON_PRIMARY_PRESSED_BACKGROUND_DAY": {
21
- "value": "#154679"
21
+ "value": "{!DARK_SKY_85}"
22
22
  },
23
23
  "PRIVATE_BUTTON_PRIMARY_PRESSED_BACKGROUND_NIGHT": {
24
- "value": "#154679"
24
+ "value": "{!NIGHT_BLUE_100}"
25
25
  },
26
26
  "PRIVATE_BUTTON_SECONDARY_NORMAL_BACKGROUND_DAY": {
27
- "value": "#E0E3E5"
27
+ "value": "{!GREY_20}"
28
28
  },
29
29
  "PRIVATE_BUTTON_SECONDARY_NORMAL_BACKGROUND_NIGHT": {
30
- "value": "#243346"
30
+ "value": "{!NIGHT_GREY_25}"
31
31
  },
32
32
  "PRIVATE_BUTTON_SECONDARY_PRESSED_BACKGROUND_DAY": {
33
- "value": "#C6CCD4"
33
+ "value": "{!GREY_30}"
34
34
  },
35
35
  "PRIVATE_BUTTON_SECONDARY_PRESSED_BACKGROUND_NIGHT": {
36
- "value": "#010913"
36
+ "value": "{!NIGHT_GREY_10}"
37
37
  },
38
38
  "PRIVATE_BUTTON_FEATURED_NORMAL_BACKGROUND_DAY": {
39
- "value": "#0062E3"
39
+ "value": "{!SKY_BLUE}"
40
40
  },
41
41
  "PRIVATE_BUTTON_FEATURED_NORMAL_BACKGROUND_NIGHT": {
42
- "value": "#84E9FF"
42
+ "value": "{!NIGHT_BLUE}"
43
43
  },
44
44
  "PRIVATE_BUTTON_FEATURED_PRESSED_BACKGROUND_DAY": {
45
- "value": "#024DAF"
45
+ "value": "{!SKY_BLUE_85}"
46
46
  },
47
47
  "PRIVATE_BUTTON_FEATURED_PRESSED_BACKGROUND_NIGHT": {
48
- "value": "#D1F7FF"
48
+ "value": "{!NIGHT_BLUE_20}"
49
49
  },
50
50
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_NORMAL_BACKGROUND_DAY": {
51
- "value": "#FFFFFF"
51
+ "value": "{!WHITE}"
52
52
  },
53
53
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_NORMAL_BACKGROUND_NIGHT": {
54
- "value": "#FFFFFF"
54
+ "value": "{!WHITE}"
55
55
  },
56
56
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_PRESSED_BACKGROUND_DAY": {
57
- "value": "#CBCED2"
57
+ "value": "{!GREY_30}"
58
58
  },
59
59
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_PRESSED_BACKGROUND_NIGHT": {
60
- "value": "#CBCED2"
60
+ "value": "{!GREY_30}"
61
61
  },
62
62
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_NORMAL_BACKGROUND_DAY": {
63
- "value": "#05203C"
63
+ "value": "{!DARK_SKY}"
64
64
  },
65
65
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_NORMAL_BACKGROUND_NIGHT": {
66
- "value": "#05203C"
66
+ "value": "{!DARK_SKY}"
67
67
  },
68
68
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_PRESSED_BACKGROUND_DAY": {
69
- "value": "#154679"
69
+ "value": "{!DARK_SKY_85}"
70
70
  },
71
71
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_PRESSED_BACKGROUND_NIGHT": {
72
- "value": "#154679"
72
+ "value": "{!DARK_SKY_85}"
73
73
  },
74
74
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_DISABLED_BACKGROUND_DAY": {
75
- "value": "#DDE1E4"
75
+ "value": "{!GREY_20}"
76
76
  },
77
77
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_DISABLED_BACKGROUND_NIGHT": {
78
- "value": "#DDE1E4"
78
+ "value": "{!GREY_20}"
79
79
  },
80
80
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_DISABLED_FOREGROUND_DAY": {
81
- "value": "#00000033"
81
+ "value": "{!BLACK_ALPHA_20}"
82
82
  },
83
83
  "PRIVATE_BUTTON_PRIMARY_ON_DARK_DISABLED_FOREGROUND_NIGHT": {
84
- "value": "#00000033"
84
+ "value": "{!BLACK_ALPHA_20}"
85
85
  },
86
86
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_BACKGROUND_DAY": {
87
- "value": "#DDE1E4"
87
+ "value": "{!GREY_20}"
88
88
  },
89
89
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_BACKGROUND_NIGHT": {
90
- "value": "#DDE1E4"
90
+ "value": "{!GREY_20}"
91
91
  },
92
92
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_FOREGROUND_DAY": {
93
- "value": "#00000033"
93
+ "value": "{!BLACK_ALPHA_20}"
94
94
  },
95
95
  "PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_FOREGROUND_NIGHT": {
96
- "value": "#00000033"
96
+ "value": "{!BLACK_ALPHA_20}"
97
97
  },
98
98
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_NORMAL_BACKGROUND_DAY": {
99
- "value": "#243346"
99
+ "value": "{!NIGHT_GREY_25}"
100
100
  },
101
101
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_NORMAL_BACKGROUND_NIGHT": {
102
- "value": "#243346"
102
+ "value": "{!NIGHT_GREY_25}"
103
103
  },
104
104
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_DAY": {
105
- "value": "#010913"
105
+ "value": "{!NIGHT_GREY_10}"
106
106
  },
107
107
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_NIGHT": {
108
- "value": "#010913"
108
+ "value": "{!NIGHT_GREY_10}"
109
109
  },
110
110
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_DISABLED_FOREGROUND_DAY": {
111
- "value": "#FFFFFF33"
111
+ "value": "{!WHITE_ALPHA_20}"
112
112
  },
113
113
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_DISABLED_FOREGROUND_NIGHT": {
114
- "value": "#FFFFFF33"
114
+ "value": "{!WHITE_ALPHA_20}"
115
115
  },
116
116
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_DISABLED_BACKGROUND_DAY": {
117
- "value": "#0B111A"
117
+ "value": "{!NIGHT_GREY_00}"
118
118
  },
119
119
  "PRIVATE_BUTTON_SECONDARY_ON_DARK_DISABLED_BACKGROUND_NIGHT": {
120
- "value": "#0B111A"
120
+ "value": "{!NIGHT_GREY_00}"
121
121
  },
122
122
  "PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_BACKGROUND_DAY": {
123
- "value": "#E0E3E5"
123
+ "value": "{!GREY_20}"
124
124
  },
125
125
  "PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_BACKGROUND_NIGHT": {
126
- "value": "#243346"
126
+ "value": "{!NIGHT_GREY_25}"
127
127
  },
128
128
  "PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_FOREGROUND_DAY": {
129
- "value": "#C80456"
129
+ "value": "{!BERRY_75}"
130
130
  },
131
131
  "PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_FOREGROUND_NIGHT": {
132
- "value": "#FF649C"
132
+ "value": "{!NIGHT_BERRY}"
133
133
  },
134
134
  "PRIVATE_BUTTON_DESTRUCTIVE_PRESSED_BACKGROUND_DAY": {
135
- "value": "#E70866"
135
+ "value": "{!BERRY_75}"
136
136
  },
137
137
  "PRIVATE_BUTTON_DESTRUCTIVE_PRESSED_BACKGROUND_NIGHT": {
138
- "value": "#FF649C"
138
+ "value": "{!NIGHT_BERRY}"
139
139
  },
140
140
  "PRIVATE_BUTTON_LINK_NORMAL_FOREGROUND_DAY": {
141
- "value": "#0062E3"
141
+ "value": "{!SKY_BLUE}"
142
142
  },
143
143
  "PRIVATE_BUTTON_LINK_NORMAL_FOREGROUND_NIGHT": {
144
- "value": "#84E9FF"
144
+ "value": "{!NIGHT_BLUE}"
145
145
  },
146
146
  "PRIVATE_BUTTON_LINK_PRESSED_FOREGROUND_DAY": {
147
- "value": "#154679"
147
+ "value": "{!DARK_SKY_85}"
148
148
  },
149
149
  "PRIVATE_BUTTON_LINK_PRESSED_FOREGROUND_NIGHT": {
150
- "value": "#D1F7FF"
150
+ "value": "{!NIGHT_BLUE_20}"
151
151
  },
152
152
  "PRIVATE_BUTTON_LINK_ON_DARK_NORMAL_FOREGROUND_DAY": {
153
- "value": "#FFFFFF"
153
+ "value": "{!WHITE}"
154
154
  },
155
155
  "PRIVATE_BUTTON_LINK_ON_DARK_NORMAL_FOREGROUND_NIGHT": {
156
- "value": "#FFFFFF"
156
+ "value": "{!WHITE}"
157
157
  },
158
158
  "PRIVATE_BUTTON_LINK_ON_DARK_PRESSED_FOREGROUND_DAY": {
159
- "value": "#FFFFFF80"
159
+ "value": "{!WHITE_ALPHA_50}"
160
160
  },
161
161
  "PRIVATE_BUTTON_LINK_ON_DARK_PRESSED_FOREGROUND_NIGHT": {
162
- "value": "#FFFFFF80"
162
+ "value": "{!WHITE_ALPHA_50}"
163
163
  },
164
164
  "PRIVATE_BUTTON_LINK_ON_DARK_DISABLED_FOREGROUND_DAY": {
165
- "value": "#FFFFFF33"
165
+ "value": "{!WHITE_ALPHA_20}"
166
166
  },
167
167
  "PRIVATE_BUTTON_LINK_ON_DARK_DISABLED_FOREGROUND_NIGHT": {
168
- "value": "#FFFFFF33"
168
+ "value": "{!WHITE_ALPHA_20}"
169
169
  }
170
170
  }
171
171
  }
package/base/colors/chip.json CHANGED
@@ -9,43 +9,43 @@
9
9
  "value": "{!GREY_20}"
10
10
  },
11
11
  "PRIVATE_CHIP_DEFAULT_NORMAL_BACKGROUND_NIGHT": {
12
- "value": "#0B121D"
12
+ "value": "{!NIGHT_GREY_25}"
13
13
  },
14
14
  "PRIVATE_CHIP_DEFAULT_PRESSED_BACKGROUND_DAY": {
15
- "value": "#C6CCD4"
15
+ "value": "{!GREY_30}"
16
16
  },
17
17
  "PRIVATE_CHIP_DEFAULT_PRESSED_BACKGROUND_NIGHT": {
18
- "value": "#002854"
18
+ "value": "{!NIGHT_BLUE_100}"
19
19
  },
20
20
  "PRIVATE_CHIP_DEFAULT_ON_BACKGROUND_DAY": {
21
- "value": "#05203C"
21
+ "value": "{!DARK_SKY}"
22
22
  },
23
23
  "PRIVATE_CHIP_DEFAULT_ON_BACKGROUND_NIGHT": {
24
- "value": "#054184"
24
+ "value": "{!NIGHT_SKY}"
25
25
  },
26
26
  "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY": {
27
- "value": "#DDE1E4"
27
+ "value": "{!GREY_20}"
28
28
  },
29
29
  "PRIVATE_CHIP_DISABLED_BACKGROUND_NIGHT": {
30
- "value": "#0B111A"
30
+ "value": "{!NIGHT_GREY_00}"
31
31
  },
32
32
  "PRIVATE_CHIP_ON_DARK_NORMAL_BACKGROUND_DAY": {
33
- "value": "#FFFFFF33"
33
+ "value": "{!WHITE_ALPHA_20}"
34
34
  },
35
35
  "PRIVATE_CHIP_ON_DARK_NORMAL_BACKGROUND_NIGHT": {
36
- "value": "#0B121D"
36
+ "value": "{!NIGHT_GREY_25}"
37
37
  },
38
38
  "PRIVATE_CHIP_ON_DARK_PRESSED_BACKGROUND_DAY": {
39
- "value": "#C6CCD4"
39
+ "value": "{!GREY_30}"
40
40
  },
41
41
  "PRIVATE_CHIP_ON_DARK_PRESSED_BACKGROUND_NIGHT": {
42
- "value": "#002854"
42
+ "value": "{!NIGHT_BLUE_100}"
43
43
  },
44
44
  "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_DAY": {
45
45
  "value": "{!WHITE}"
46
46
  },
47
47
  "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT": {
48
- "value": "#054184"
48
+ "value": "{!NIGHT_SKY}"
49
49
  }
50
50
  }
51
51
  }
package/base/colors/marcomms.json CHANGED
@@ -1,14 +1,15 @@
1
1
  {
2
+ "imports": ["./aliases.json"],
2
3
  "global": {
3
4
  "type": "color",
4
5
  "category": "marcomms-colors"
5
6
  },
6
7
  "props": {
7
8
  "MARCOMMS_DARK_SKY": {
8
- "value": "#02122C"
9
+ "value": "{!DARK_SKY}"
9
10
  },
10
11
  "MARCOMMS_SKY_BLUE": {
11
- "value": "#0770e3"
12
+ "value": "{!SKY_BLUE}"
12
13
  },
13
14
  "MARCOMMS_BLUE_BRIGHT": {
14
15
  "value": "#A1EEFF"
@@ -17,13 +18,13 @@
17
18
  "value": "#D9F8FF"
18
19
  },
19
20
  "MARCOMMS_ECO_GREEN": {
20
- "value": "#0FA1A9"
21
+ "value": "{!ECO_GREEN}"
21
22
  },
22
23
  "MARCOMMS_GREEN_BRIGHT": {
23
24
  "value": "#93FFDE"
24
25
  },
25
26
  "MARCOMMS_GREEN_MUTED": {
26
- "value": "#D0EEEC"
27
+ "value": "{!GREEN_MUTED}"
27
28
  },
28
29
  "MARCOMMS_PURPLE": {
29
30
  "value": "#8E47BA"
@@ -32,10 +33,10 @@
32
33
  "value": "#FFA3E5"
33
34
  },
34
35
  "MARCOMMS_PINK_MUTED": {
35
- "value": "#F6DDE1"
36
+ "value": "{!PINK_MUTED}"
36
37
  },
37
38
  "MARCOMMS_BERRY": {
38
- "value": "#D1435B"
39
+ "value": "{!BERRY}"
39
40
  },
40
41
  "MARCOMMS_ORANGE": {
41
42
  "value": "#FF7B59"
@@ -44,16 +45,16 @@
44
45
  "value": "#FEEB87"
45
46
  },
46
47
  "MARCOMMS_YELLOW_MUTED": {
47
- "value": "#FFEBD0"
48
+ "value": "{!YELLOW_MUTED}"
48
49
  },
49
50
  "MARCOMMS_WHITE": {
50
- "value": "#ffffff"
51
+ "value": "{!WHITE}"
51
52
  },
52
53
  "MARCOMMS_CHARCOAL": {
53
- "value": "#111236"
54
+ "value": "{!CHARCOAL}"
54
55
  },
55
56
  "MARCOMMS_GREY_40": {
56
- "value": "#68697F"
57
+ "value": "{!GREY_40}"
57
58
  }
58
59
  }
59
- }
60
+ }
package/base/colors/other.json CHANGED
@@ -4,25 +4,25 @@
4
4
  "COLOR_SYSTEM_RED": {
5
5
  "type": "color",
6
6
  "category": "colors",
7
- "value": "{!PANJIN}",
7
+ "value": "{!BERRY}",
8
8
  "deprecated": true
9
9
  },
10
10
  "COLOR_SYSTEM_GREEN": {
11
11
  "type": "color",
12
12
  "category": "colors",
13
- "value": "{!MONTEVERDE}",
13
+ "value": "{!GREEN_SPOT}",
14
14
  "deprecated": true
15
15
  },
16
16
  "LINE_LIGHT_COLOR": {
17
17
  "type": "color",
18
18
  "category": "colors",
19
- "value": "{!SKY_GRAY_TINT_05}",
19
+ "value": "{!GREY_30}",
20
20
  "deprecated": true
21
21
  },
22
22
  "LINE_DARK_COLOR": {
23
23
  "type": "color",
24
24
  "category": "colors",
25
- "value": "{!BLACK_TINT_04}",
25
+ "value": "{!NIGHT_GREY_30}",
26
26
  "deprecated": true
27
27
  },
28
28
  "LINE_DAY": {
@@ -35,6 +35,16 @@
35
35
  "category": "line-colors",
36
36
  "value": "{!NIGHT_GREY_30}"
37
37
  },
38
+ "LINE_ON_DARK_DAY": {
39
+ "type": "color",
40
+ "category": "line-colors",
41
+ "value": "{!WHITE_ALPHA_50}"
42
+ },
43
+ "LINE_ON_DARK_NIGHT": {
44
+ "type": "color",
45
+ "category": "line-colors",
46
+ "value": "{!NIGHT_GREY_30}"
47
+ },
38
48
  "SCRIM_DAY": {
39
49
  "type": "color",
40
50
  "category": "scrim-colors",
@@ -54,7 +64,7 @@
54
64
  "PRIMARY_DARK_COLOR": {
55
65
  "type": "color",
56
66
  "category": "colors",
57
- "value": "{!SKY_BLUE_TINT_01}",
67
+ "value": "{!NIGHT_BLUE}",
58
68
  "deprecated": true
59
69
  },
60
70
  "BACKGROUND_LIGHT_COLOR": {
@@ -66,31 +76,31 @@
66
76
  "BACKGROUND_DARK_COLOR": {
67
77
  "type": "color",
68
78
  "category": "colors",
69
- "value": "{!BLACK}",
79
+ "value": "{!NIGHT_GREY_10}",
70
80
  "deprecated": true
71
81
  },
72
82
  "BACKGROUND_ALTERNATIVE_LIGHT_COLOR": {
73
83
  "type": "color",
74
84
  "category": "colors",
75
- "value": "{!SKY_GRAY_TINT_07}",
85
+ "value": "{!GREY_10}",
76
86
  "deprecated": true
77
87
  },
78
88
  "BACKGROUND_ALTERNATIVE_DARK_COLOR": {
79
89
  "type": "color",
80
90
  "category": "colors",
81
- "value": "{!BLACK}",
91
+ "value": "{!NIGHT_GREY_20}",
82
92
  "deprecated": true
83
93
  },
84
94
  "BACKGROUND_SECONDARY_LIGHT_COLOR": {
85
95
  "type": "color",
86
96
  "category": "colors",
87
- "value": "{!SKY_GRAY_TINT_07}",
97
+ "value": "{!GREY_10}",
88
98
  "deprecated": true
89
99
  },
90
100
  "BACKGROUND_SECONDARY_DARK_COLOR": {
91
101
  "type": "color",
92
102
  "category": "colors",
93
- "value": "{!BLACK_TINT_01}",
103
+ "value": "{!NIGHT_GREY_20}",
94
104
  "deprecated": true
95
105
  },
96
106
  "BACKGROUND_ALTERNATIVE_SECONDARY_LIGHT_COLOR": {
@@ -102,7 +112,7 @@
102
112
  "BACKGROUND_ALTERNATIVE_SECONDARY_DARK_COLOR": {
103
113
  "type": "color",
104
114
  "category": "colors",
105
- "value": "{!BLACK_TINT_01}",
115
+ "value": "{!NIGHT_GREY_10}",
106
116
  "deprecated": true
107
117
  },
108
118
  "BACKGROUND_TERTIARY_LIGHT_COLOR": {
@@ -114,7 +124,7 @@
114
124
  "BACKGROUND_TERTIARY_DARK_COLOR": {
115
125
  "type": "color",
116
126
  "category": "colors",
117
- "value": "{!BLACK_TINT_02}",
127
+ "value": "{!NIGHT_GREY_10}",
118
128
  "deprecated": true
119
129
  },
120
130
  "BACKGROUND_ELEVATION_01_LIGHT_COLOR": {
@@ -126,7 +136,7 @@
126
136
  "BACKGROUND_ELEVATION_01_DARK_COLOR": {
127
137
  "type": "color",
128
138
  "category": "text-colors",
129
- "value": "{!BLACK_TINT_01}",
139
+ "value": "{!NIGHT_GREY_20}",
130
140
  "deprecated": true
131
141
  },
132
142
  "BACKGROUND_ELEVATION_02_LIGHT_COLOR": {
@@ -138,7 +148,7 @@
138
148
  "BACKGROUND_ELEVATION_02_DARK_COLOR": {
139
149
  "type": "color",
140
150
  "category": "text-colors",
141
- "value": "{!BLACK_TINT_02}",
151
+ "value": "{!NIGHT_GREY_25}",
142
152
  "deprecated": true
143
153
  },
144
154
  "BACKGROUND_ELEVATION_03_LIGHT_COLOR": {
@@ -150,8 +160,8 @@
150
160
  "BACKGROUND_ELEVATION_03_DARK_COLOR": {
151
161
  "type": "color",
152
162
  "category": "text-colors",
153
- "value": "{!BLACK_TINT_03}",
163
+ "value": "{!NIGHT_GREY_25}",
154
164
  "deprecated": true
155
165
  }
156
166
  }
157
- }
167
+ }
package/base/colors/skeleton.json CHANGED
@@ -1,5 +1,4 @@
1
1
  {
2
- "imports": ["./aliases.json"],
3
2
  "global": {
4
3
  "type": "color",
5
4
  "category": "skeleton-colors"
package/base/colors/text.json CHANGED
@@ -8,19 +8,19 @@
8
8
  },
9
9
  "props": {
10
10
  "TEXT_PRIMARY_LIGHT_COLOR": {
11
- "value": "{!SKY_GRAY}",
11
+ "value": "{!CHARCOAL}",
12
12
  "deprecated": true
13
13
  },
14
14
  "TEXT_SECONDARY_LIGHT_COLOR": {
15
- "value": "{!SKY_GRAY_TINT_02}",
15
+ "value": "{!GREY_40}",
16
16
  "deprecated": true
17
17
  },
18
18
  "TEXT_TERTIARY_LIGHT_COLOR": {
19
- "value": "{!SKY_GRAY_TINT_03}",
19
+ "value": "{!BLACK_ALPHA_20}",
20
20
  "deprecated": true
21
21
  },
22
22
  "TEXT_QUATERNARY_LIGHT_COLOR": {
23
- "value": "{!SKY_GRAY_TINT_03}",
23
+ "value": "{!BLACK_ALPHA_20}",
24
24
  "deprecated": true
25
25
  },
26
26
  "TEXT_PRIMARY_DARK_COLOR": {
@@ -28,15 +28,15 @@
28
28
  "deprecated": true
29
29
  },
30
30
  "TEXT_SECONDARY_DARK_COLOR": {
31
- "value": "{!SKY_GRAY_TINT_04}",
31
+ "value": "{!NIGHT_GREY_40}",
32
32
  "deprecated": true
33
33
  },
34
34
  "TEXT_TERTIARY_DARK_COLOR": {
35
- "value": "{!BLACK_TINT_06}",
35
+ "value": "{!WHITE_ALPHA_20}",
36
36
  "deprecated": true
37
37
  },
38
38
  "TEXT_QUATERNARY_DARK_COLOR": {
39
- "value": "{!BLACK_TINT_06}",
39
+ "value": "{!WHITE_ALPHA_20}",
40
40
  "deprecated": true
41
41
  },
42
42
  "TEXT_PRIMARY_DAY": {
@@ -55,8 +55,7 @@
55
55
  "value": "{!GREY_40}"
56
56
  },
57
57
  "TEXT_SECONDARY_NIGHT": {
58
- "value": "{!SKY_GRAY_TINT_04}",
59
- "comment": "This colour needs to be changed to NIGHT_GREY_40 when we set the new hex values"
58
+ "value": "{!NIGHT_GREY_40}"
60
59
  },
61
60
  "TEXT_DISABLED_DAY": {
62
61
  "value": "{!BLACK_ALPHA_20}"
@@ -90,4 +89,4 @@
90
89
  }
91
90
 
92
91
  }
93
- }
92
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/bpk-foundations-common",
3
- "version": "3.2.1",
3
+ "version": "4.0.1",
4
4
  "description": "Common Backpack design tokens for colors, spacing, font, etc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -20,5 +20,5 @@
20
20
  "color": "^3.0.0"
21
21
  },
22
22
  "type": "module",
23
- "gitHead": "d4572b3a2b37080165107c478d7f653d246dde3a"
23
+ "gitHead": "82a68e3a828fd80cdddfd55697df4e40b74cc315"
24
24
  }