@skyscanner/bpk-foundations-common 2.2.1 → 2.4.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 (13) hide show
  1. package/.DS_Store +0 -0
  2. package/app/typography.json +15 -0
  3. package/base/colors/aliases.json +76 -0
  4. package/base/colors/base.json +225 -0
  5. package/base/colors/canvas.json +23 -0
  6. package/base/colors/core.json +29 -0
  7. package/base/colors/other.json +135 -0
  8. package/base/colors/status.json +47 -0
  9. package/base/colors/surface.json +35 -0
  10. package/base/colors/text.json +66 -0
  11. package/base/colors.json +9 -41
  12. package/package.json +2 -2
  13. package/app/colors.json +0 -352
package/.DS_Store ADDED
Binary file
package/app/typography.json CHANGED
@@ -202,6 +202,21 @@
202
202
  "type": "size",
203
203
  "category": "typesettings"
204
204
  },
205
+ "TEXT_LABEL-3_FONT_SIZE": {
206
+ "value": "{!FONT_SIZE_XS}",
207
+ "type": "font-size",
208
+ "category": "font-sizes"
209
+ },
210
+ "TEXT_LABEL-3_FONT_WEIGHT": {
211
+ "value": "{!FONT_WEIGHT_BOLD}",
212
+ "type": "string",
213
+ "category": "font-weights"
214
+ },
215
+ "TEXT_LABEL-3_LINE_HEIGHT": {
216
+ "value": "{!LINE_HEIGHT_XS}",
217
+ "type": "size",
218
+ "category": "typesettings"
219
+ },
205
220
  "TEXT_LABEL-2_FONT_SIZE": {
206
221
  "value": "{!FONT_SIZE_SM}",
207
222
  "type": "font-size",
package/base/colors/aliases.json ADDED
@@ -0,0 +1,76 @@
1
+ {
2
+ "aliases": {
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",
41
+ "PRIMARY_GRADIENT_LIGHT": "#02DDD8",
42
+ "DARK_SKY": "#02122C",
43
+ "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",
55
+ "NIGHT_SKY": "#054184",
56
+ "NIGHT_BLUE": "#6D9FEB",
57
+ "NIGHT_GREEN_SPOT": "#00A698",
58
+ "NIGHT_GREEN_FILL": "#B1FFE7",
59
+ "NIGHT_YELLOW_SPOT": "#FFB54D",
60
+ "NIGHT_YELLOW_FILL": "#FBF1BB",
61
+ "NIGHT_BERRY": "#D1435B",
62
+ "NIGHT_PINK": "#FFCADD",
63
+ "NIGHT_GREY_10": "#000000",
64
+ "NIGHT_GREY_20": "#2C2C2E",
65
+ "NIGHT_GREY_25": "#1B2839",
66
+ "NIGHT_GREY_30": "#48484A",
67
+ "NIGHT_GREY_40": "#8E8E93",
68
+ "BLUE_BRIGHT": "#A1EEFF",
69
+ "BLUE_MUTED": "#D9F8FF",
70
+ "GREEN_BRIGHT": "#93FFDE",
71
+ "PURPLE": "#8E47BA",
72
+ "PINK": "#FFA3E5",
73
+ "ORANGE": "#FF7B59",
74
+ "YELLOW": "#FEEB87"
75
+ }
76
+ }
package/base/colors/base.json ADDED
@@ -0,0 +1,225 @@
1
+ {
2
+ "imports": ["./aliases.json"],
3
+ "global": {
4
+ "type": "color",
5
+ "category": "colors"
6
+ },
7
+ "props": {
8
+ "COLOR_WHITE": {
9
+ "value": "{!WHITE}"
10
+ },
11
+ "COLOR_SKY_BLUE": {
12
+ "value": "{!SKY_BLUE}"
13
+ },
14
+ "COLOR_MONTEVERDE": {
15
+ "value": "{!MONTEVERDE}"
16
+ },
17
+ "COLOR_GLENCOE": {
18
+ "value": "{!GLENCOE}"
19
+ },
20
+ "COLOR_SAGANO": {
21
+ "value": "{!SAGANO}"
22
+ },
23
+ "COLOR_KOLKATA": {
24
+ "value": "{!KOLKATA}"
25
+ },
26
+ "COLOR_ERFOUD": {
27
+ "value": "{!ERFOUD}"
28
+ },
29
+ "COLOR_BAGAN": {
30
+ "value": "{!BAGAN}"
31
+ },
32
+ "COLOR_BUNOL": {
33
+ "value": "{!BUNOL}"
34
+ },
35
+ "COLOR_PETRA": {
36
+ "value": "{!PETRA}"
37
+ },
38
+ "COLOR_NARA": {
39
+ "value": "{!NARA}"
40
+ },
41
+ "COLOR_ABISKO": {
42
+ "value": "{!ABISKO}"
43
+ },
44
+ "COLOR_VALENSOLE": {
45
+ "value": "{!VALENSOLE}"
46
+ },
47
+ "COLOR_TOCHIGI": {
48
+ "value": "{!TOCHIGI}"
49
+ },
50
+ "COLOR_PANJIN": {
51
+ "value": "{!PANJIN}"
52
+ },
53
+ "COLOR_HILLIER": {
54
+ "value": "{!HILLIER}"
55
+ },
56
+ "COLOR_HARBOUR": {
57
+ "value": "{!HARBOUR}"
58
+ },
59
+ "COLOR_SKY_BLUE_SHADE_03": {
60
+ "value": "{!SKY_BLUE_SHADE_03}"
61
+ },
62
+ "COLOR_SKY_BLUE_SHADE_02": {
63
+ "value": "{!SKY_BLUE_SHADE_02}"
64
+ },
65
+ "COLOR_SKY_BLUE_SHADE_01": {
66
+ "value": "{!SKY_BLUE_SHADE_01}"
67
+ },
68
+ "COLOR_SKY_BLUE_TINT_01": {
69
+ "value": "{!SKY_BLUE_TINT_01}"
70
+ },
71
+ "COLOR_SKY_BLUE_TINT_02": {
72
+ "value": "{!SKY_BLUE_TINT_02}"
73
+ },
74
+ "COLOR_SKY_BLUE_TINT_03": {
75
+ "value": "{!SKY_BLUE_TINT_03}"
76
+ },
77
+ "COLOR_SKY_GRAY_TINT_07": {
78
+ "value": "{!SKY_GRAY_TINT_07}"
79
+ },
80
+ "COLOR_SKY_GRAY_TINT_06": {
81
+ "value": "{!SKY_GRAY_TINT_06}"
82
+ },
83
+ "COLOR_SKY_GRAY_TINT_05": {
84
+ "value": "{!SKY_GRAY_TINT_05}"
85
+ },
86
+ "COLOR_SKY_GRAY_TINT_04": {
87
+ "value": "{!SKY_GRAY_TINT_04}"
88
+ },
89
+ "COLOR_SKY_GRAY_TINT_03": {
90
+ "value": "{!SKY_GRAY_TINT_03}"
91
+ },
92
+ "COLOR_SKY_GRAY_TINT_02": {
93
+ "value": "{!SKY_GRAY_TINT_02}"
94
+ },
95
+ "COLOR_SKY_GRAY_TINT_01": {
96
+ "value": "{!SKY_GRAY_TINT_01}"
97
+ },
98
+ "COLOR_SKY_GRAY": {
99
+ "value": "{!SKY_GRAY}"
100
+ },
101
+ "COLOR_PRIMARY_GRADIENT_LIGHT": {
102
+ "value": "{!SKY_BLUE}"
103
+ },
104
+ "COLOR_BLACK": {
105
+ "value": "{!BLACK}"
106
+ },
107
+ "COLOR_BLACK_TINT_01": {
108
+ "value": "{!BLACK_TINT_01}"
109
+ },
110
+ "COLOR_BLACK_TINT_02": {
111
+ "value": "{!BLACK_TINT_02}"
112
+ },
113
+ "COLOR_BLACK_TINT_03": {
114
+ "value": "{!BLACK_TINT_03}"
115
+ },
116
+ "COLOR_BLACK_TINT_04": {
117
+ "value": "{!BLACK_TINT_04}"
118
+ },
119
+ "COLOR_BLACK_TINT_05": {
120
+ "value": "{!BLACK_TINT_05}"
121
+ },
122
+ "COLOR_BLACK_TINT_06": {
123
+ "value": "{!BLACK_TINT_06}"
124
+ },
125
+ "COLOR_DARK_SKY": {
126
+ "value": "{!DARK_SKY}"
127
+ },
128
+ "COLOR_ECO_GREEN": {
129
+ "value": "{!ECO_GREEN}"
130
+ },
131
+ "COLOR_GREEN_SPOT": {
132
+ "value": "{!GREEN_SPOT}"
133
+ },
134
+ "COLOR_GREEN_MUTED": {
135
+ "value": "{!GREEN_MUTED}"
136
+ },
137
+ "COLOR_AMBER_SPOT": {
138
+ "value": "{!AMBER_SPOT}"
139
+ },
140
+ "COLOR_YELLOW_MUTED": {
141
+ "value": "{!YELLOW_MUTED}"
142
+ },
143
+ "COLOR_BERRY": {
144
+ "value": "{!BERRY}"
145
+ },
146
+ "COLOR_PINK_MUTED": {
147
+ "value": "{!PINK_MUTED}"
148
+ },
149
+ "COLOR_GREY_10": {
150
+ "value": "{!GREY_10}"
151
+ },
152
+ "COLOR_GREY_20": {
153
+ "value": "{!GREY_20}"
154
+ },
155
+ "COLOR_GREY_30": {
156
+ "value": "{!GREY_30}"
157
+ },
158
+ "COLOR_GREY_40": {
159
+ "value": "{!GREY_40}"
160
+ },
161
+ "COLOR_CHARCOAL": {
162
+ "value": "{!CHARCOAL}"
163
+ },
164
+ "COLOR_NIGHT_SKY": {
165
+ "value": "{!NIGHT_SKY}"
166
+ },
167
+ "COLOR_NIGHT_BLUE": {
168
+ "value": "{!NIGHT_BLUE}"
169
+ },
170
+ "COLOR_NIGHT_GREEN_SPOT": {
171
+ "value": "{!NIGHT_GREEN_SPOT}"
172
+ },
173
+ "COLOR_NIGHT_GREEN_FILL": {
174
+ "value": "{!NIGHT_GREEN_FILL}"
175
+ },
176
+ "COLOR_NIGHT_YELLOW_SPOT": {
177
+ "value": "{!NIGHT_YELLOW_SPOT}"
178
+ },
179
+ "COLOR_NIGHT_YELLOW_FILL": {
180
+ "value": "{!NIGHT_YELLOW_FILL}"
181
+ },
182
+ "COLOR_NIGHT_BERRY": {
183
+ "value": "{!NIGHT_BERRY}"
184
+ },
185
+ "COLOR_NIGHT_PINK": {
186
+ "value": "{!NIGHT_PINK}"
187
+ },
188
+ "COLOR_NIGHT_GREY_10": {
189
+ "value": "{!NIGHT_GREY_10}"
190
+ },
191
+ "COLOR_NIGHT_GREY_20": {
192
+ "value": "{!NIGHT_GREY_20}"
193
+ },
194
+ "COLOR_NIGHT_GREY_25": {
195
+ "value": "{!NIGHT_GREY_25}"
196
+ },
197
+ "COLOR_NIGHT_GREY_30": {
198
+ "value": "{!NIGHT_GREY_30}"
199
+ },
200
+ "COLOR_NIGHT_GREY_40": {
201
+ "value": "{!NIGHT_GREY_40}"
202
+ },
203
+ "COLOR_BLUE_BRIGHT": {
204
+ "value": "{!BLUE_BRIGHT}"
205
+ },
206
+ "COLOR_BLUE_MUTED": {
207
+ "value": "{!BLUE_MUTED}"
208
+ },
209
+ "COLOR_GREEN_BRIGHT": {
210
+ "value": "{!GREEN_BRIGHT}"
211
+ },
212
+ "COLOR_PURPLE": {
213
+ "value": "{!PURPLE}"
214
+ },
215
+ "COLOR_PINK": {
216
+ "value": "{!PINK}"
217
+ },
218
+ "COLOR_ORANGE": {
219
+ "value": "{!ORANGE}"
220
+ },
221
+ "COLOR_YELLOW": {
222
+ "value": "{!YELLOW}"
223
+ }
224
+ }
225
+ }
package/base/colors/canvas.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "imports": [
3
+ "./aliases.json"
4
+ ],
5
+ "global": {
6
+ "type": "color",
7
+ "category": "canvas-colors"
8
+ },
9
+ "props": {
10
+ "CANVAS_DAY": {
11
+ "value": "{!WHITE}"
12
+ },
13
+ "CANVAS_NIGHT": {
14
+ "value": "{!NIGHT_GREY_10}"
15
+ },
16
+ "CANVAS_CONTRAST_DAY": {
17
+ "value": "{!GREY_10}"
18
+ },
19
+ "CANVAS_CONTRAST_NIGHT": {
20
+ "value": "{!NIGHT_GREY_20}"
21
+ }
22
+ }
23
+ }
package/base/colors/core.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "imports": [
3
+ "./aliases.json"
4
+ ],
5
+ "global": {
6
+ "type": "color",
7
+ "category": "core-colors"
8
+ },
9
+ "props": {
10
+ "CORE_ECO_DAY": {
11
+ "value": "{!ECO_GREEN}"
12
+ },
13
+ "CORE_ECO_NIGHT": {
14
+ "value": "{!ECO_GREEN}"
15
+ },
16
+ "CORE_ACCENT_DAY": {
17
+ "value": "{!SKY_BLUE}"
18
+ },
19
+ "CORE_ACCENT_NIGHT": {
20
+ "value": "{!NIGHT_BLUE}"
21
+ },
22
+ "CORE_PRIMARY_DAY": {
23
+ "value": "{!DARK_SKY}"
24
+ },
25
+ "CORE_PRIMARY_NIGHT": {
26
+ "value": "{!NIGHT_SKY}"
27
+ }
28
+ }
29
+ }
package/base/colors/other.json ADDED
@@ -0,0 +1,135 @@
1
+ {
2
+ "imports": ["./aliases.json"],
3
+ "props": {
4
+ "COLOR_SYSTEM_RED": {
5
+ "type": "color",
6
+ "category": "colors",
7
+ "value": "{!PANJIN}"
8
+ },
9
+ "COLOR_SYSTEM_GREEN": {
10
+ "type": "color",
11
+ "category": "colors",
12
+ "value": "{!MONTEVERDE}"
13
+ },
14
+ "LINE_LIGHT_COLOR": {
15
+ "type": "color",
16
+ "category": "colors",
17
+ "value": "{!SKY_GRAY_TINT_05}"
18
+ },
19
+ "LINE_DARK_COLOR": {
20
+ "type": "color",
21
+ "category": "colors",
22
+ "value": "{!BLACK_TINT_04}"
23
+ },
24
+ "LINE_DAY": {
25
+ "type": "color",
26
+ "category": "line-colors",
27
+ "value": "{!GREY_30}"
28
+ },
29
+ "LINE_NIGHT": {
30
+ "type": "color",
31
+ "category": "line-colors",
32
+ "value": "{!NIGHT_GREY_30}"
33
+ },
34
+ "SCRIM_DAY": {
35
+ "type": "color",
36
+ "category": "scrim-colors",
37
+ "value": "{!GREY_30}"
38
+ },
39
+ "SCRIM_NIGHT": {
40
+ "type": "color",
41
+ "category": "scrim-colors",
42
+ "value": "{!NIGHT_GREY_30}"
43
+ },
44
+ "PRIMARY_LIGHT_COLOR": {
45
+ "type": "color",
46
+ "category": "colors",
47
+ "value": "{!SKY_BLUE}"
48
+ },
49
+ "PRIMARY_DARK_COLOR": {
50
+ "type": "color",
51
+ "category": "colors",
52
+ "value": "{!SKY_BLUE_TINT_01}"
53
+ },
54
+ "BACKGROUND_LIGHT_COLOR": {
55
+ "type": "color",
56
+ "category": "colors",
57
+ "value": "{!WHITE}"
58
+ },
59
+ "BACKGROUND_DARK_COLOR": {
60
+ "type": "color",
61
+ "category": "colors",
62
+ "value": "{!BLACK}"
63
+ },
64
+ "BACKGROUND_ALTERNATIVE_LIGHT_COLOR": {
65
+ "type": "color",
66
+ "category": "colors",
67
+ "value": "{!SKY_GRAY_TINT_07}"
68
+ },
69
+ "BACKGROUND_ALTERNATIVE_DARK_COLOR": {
70
+ "type": "color",
71
+ "category": "colors",
72
+ "value": "{!BLACK}"
73
+ },
74
+ "BACKGROUND_SECONDARY_LIGHT_COLOR": {
75
+ "type": "color",
76
+ "category": "colors",
77
+ "value": "{!SKY_GRAY_TINT_07}"
78
+ },
79
+ "BACKGROUND_SECONDARY_DARK_COLOR": {
80
+ "type": "color",
81
+ "category": "colors",
82
+ "value": "{!BLACK_TINT_01}"
83
+ },
84
+ "BACKGROUND_ALTERNATIVE_SECONDARY_LIGHT_COLOR": {
85
+ "type": "color",
86
+ "category": "colors",
87
+ "value": "{!WHITE}"
88
+ },
89
+ "BACKGROUND_ALTERNATIVE_SECONDARY_DARK_COLOR": {
90
+ "type": "color",
91
+ "category": "colors",
92
+ "value": "{!BLACK_TINT_01}"
93
+ },
94
+ "BACKGROUND_TERTIARY_LIGHT_COLOR": {
95
+ "type": "color",
96
+ "category": "colors",
97
+ "value": "{!WHITE}"
98
+ },
99
+ "BACKGROUND_TERTIARY_DARK_COLOR": {
100
+ "type": "color",
101
+ "category": "colors",
102
+ "value": "{!BLACK_TINT_02}"
103
+ },
104
+ "BACKGROUND_ELEVATION_01_LIGHT_COLOR": {
105
+ "type": "color",
106
+ "category": "text-colors",
107
+ "value": "{!WHITE}"
108
+ },
109
+ "BACKGROUND_ELEVATION_01_DARK_COLOR": {
110
+ "type": "color",
111
+ "category": "text-colors",
112
+ "value": "{!BLACK_TINT_01}"
113
+ },
114
+ "BACKGROUND_ELEVATION_02_LIGHT_COLOR": {
115
+ "type": "color",
116
+ "category": "text-colors",
117
+ "value": "{!WHITE}"
118
+ },
119
+ "BACKGROUND_ELEVATION_02_DARK_COLOR": {
120
+ "type": "color",
121
+ "category": "text-colors",
122
+ "value": "{!BLACK_TINT_02}"
123
+ },
124
+ "BACKGROUND_ELEVATION_03_LIGHT_COLOR": {
125
+ "type": "color",
126
+ "category": "text-colors",
127
+ "value": "{!WHITE}"
128
+ },
129
+ "BACKGROUND_ELEVATION_03_DARK_COLOR": {
130
+ "type": "color",
131
+ "category": "text-colors",
132
+ "value": "{!BLACK_TINT_03}"
133
+ }
134
+ }
135
+ }
package/base/colors/status.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "imports": [
3
+ "./aliases.json"
4
+ ],
5
+ "global": {
6
+ "type": "color",
7
+ "category": "status-colors"
8
+ },
9
+ "props": {
10
+ "STATUS_DANGER_FILL_DAY": {
11
+ "value": "{!PINK_MUTED}"
12
+ },
13
+ "STATUS_DANGER_FILL_NIGHT": {
14
+ "value": "{!NIGHT_PINK}"
15
+ },
16
+ "STATUS_DANGER_SPOT_DAY": {
17
+ "value": "{!BERRY}"
18
+ },
19
+ "STATUS_DANGER_SPOT_NIGHT": {
20
+ "value": "{!NIGHT_BERRY}"
21
+ },
22
+ "STATUS_SUCCESS_FILL_DAY": {
23
+ "value": "{!GREEN_MUTED}"
24
+ },
25
+ "STATUS_SUCCESS_FILL_NIGHT": {
26
+ "value": "{!NIGHT_GREEN_FILL}"
27
+ },
28
+ "STATUS_SUCCESS_SPOT_DAY": {
29
+ "value": "{!GREEN_SPOT}"
30
+ },
31
+ "STATUS_SUCCESS_SPOT_NIGHT": {
32
+ "value": "{!NIGHT_GREEN_SPOT}"
33
+ },
34
+ "STATUS_WARNING_FILL_DAY": {
35
+ "value": "{!YELLOW_MUTED}"
36
+ },
37
+ "STATUS_WARNING_FILL_NIGHT": {
38
+ "value": "{!NIGHT_YELLOW_FILL}"
39
+ },
40
+ "STATUS_WARNING_SPOT_DAY": {
41
+ "value": "{!AMBER_SPOT}"
42
+ },
43
+ "STATUS_WARNING_SPOT_NIGHT": {
44
+ "value": "{!NIGHT_YELLOW_SPOT}"
45
+ }
46
+ }
47
+ }
package/base/colors/surface.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "imports": [
3
+ "./aliases.json"
4
+ ],
5
+ "global": {
6
+ "type": "color",
7
+ "category": "surface-colors"
8
+ },
9
+ "props": {
10
+ "SURFACE_CONTRAST_DAY": {
11
+ "value": "{!DARK_SKY}"
12
+ },
13
+ "SURFACE_CONTRAST_NIGHT": {
14
+ "value": "{!NIGHT_GREY_20}"
15
+ },
16
+ "SURFACE_DEFAULT_DAY": {
17
+ "value": "{!WHITE}"
18
+ },
19
+ "SURFACE_DEFAULT_NIGHT": {
20
+ "value": "{!NIGHT_GREY_20}"
21
+ },
22
+ "SURFACE_ELEVATED_DAY": {
23
+ "value": "{!WHITE}"
24
+ },
25
+ "SURFACE_ELEVATED_NIGHT": {
26
+ "value": "{!NIGHT_GREY_25}"
27
+ },
28
+ "SURFACE_HIGHLIGHT_DAY": {
29
+ "value": "{!GREY_20}"
30
+ },
31
+ "SURFACE_HIGHLIGHT_NIGHT": {
32
+ "value": "{!NIGHT_GREEN_FILL}"
33
+ }
34
+ }
35
+ }
package/base/colors/text.json ADDED
@@ -0,0 +1,66 @@
1
+ {
2
+ "imports": [
3
+ "./aliases.json"
4
+ ],
5
+ "global": {
6
+ "type": "color",
7
+ "category": "text-colors"
8
+ },
9
+ "props": {
10
+ "TEXT_PRIMARY_LIGHT_COLOR": {
11
+ "value": "{!SKY_GRAY}"
12
+ },
13
+ "TEXT_SECONDARY_LIGHT_COLOR": {
14
+ "value": "{!SKY_GRAY_TINT_02}"
15
+ },
16
+ "TEXT_TERTIARY_LIGHT_COLOR": {
17
+ "value": "{!SKY_GRAY_TINT_03}"
18
+ },
19
+ "TEXT_QUATERNARY_LIGHT_COLOR": {
20
+ "value": "{!SKY_GRAY_TINT_03}"
21
+ },
22
+ "TEXT_PRIMARY_DARK_COLOR": {
23
+ "value": "{!WHITE}"
24
+ },
25
+ "TEXT_SECONDARY_DARK_COLOR": {
26
+ "value": "{!SKY_GRAY_TINT_04}"
27
+ },
28
+ "TEXT_TERTIARY_DARK_COLOR": {
29
+ "value": "{!BLACK_TINT_06}"
30
+ },
31
+ "TEXT_QUATERNARY_DARK_COLOR": {
32
+ "value": "{!BLACK_TINT_06}"
33
+ },
34
+ "TEXT_PRIMARY_DAY": {
35
+ "value": "{!CHARCOAL}"
36
+ },
37
+ "TEXT_PRIMARY_NIGHT": {
38
+ "value": "{!WHITE}"
39
+ },
40
+ "TEXT_SECONDARY_DAY": {
41
+ "value": "{!GREY_40}"
42
+ },
43
+ "TEXT_SECONDARY_NIGHT": {
44
+ "value": "{!SKY_GRAY_TINT_04}",
45
+ "comment": "This colour needs to be changed to NIGHT_GREY_40 when we set the new hex values"
46
+ },
47
+ "TEXT_DISABLED_DAY": {
48
+ "value": "{!BLACK}"
49
+ },
50
+ "TEXT_DISABLED_NIGHT": {
51
+ "value": "{!WHITE}"
52
+ },
53
+ "TEXT_ERROR_DAY": {
54
+ "value": "{!BERRY}"
55
+ },
56
+ "TEXT_ERROR_NIGHT": {
57
+ "value": "{!NIGHT_BERRY}"
58
+ },
59
+ "TEXT_LINK_DAY": {
60
+ "value": "{!SKY_BLUE}"
61
+ },
62
+ "TEXT_LINK_NIGHT": {
63
+ "value": "{!NIGHT_BLUE}"
64
+ }
65
+ }
66
+ }
package/base/colors.json CHANGED
@@ -1,43 +1,11 @@
1
1
  {
2
- "aliases": {
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",
41
- "PRIMARY_GRADIENT_LIGHT": "#02DDD8"
42
- }
2
+ "imports": [
3
+ "./colors/base.json",
4
+ "./colors/canvas.json",
5
+ "./colors/core.json",
6
+ "./colors/status.json",
7
+ "./colors/surface.json",
8
+ "./colors/text.json",
9
+ "./colors/other.json"
10
+ ]
43
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/bpk-foundations-common",
3
- "version": "2.2.1",
3
+ "version": "2.4.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": "7314b42f84779b5fc82841473e68dc2a6e7183b9"
23
+ "gitHead": "1cbebbbd25cbe52f8516c8e0fe7cf5be8ab80780"
24
24
  }
package/app/colors.json DELETED
@@ -1,352 +0,0 @@
1
- {
2
- "imports": [
3
- "../base/colors.json"
4
- ],
5
- "props": {
6
- "LINE_LIGHT_COLOR": {
7
- "type": "color",
8
- "category": "colors",
9
- "value": "{!SKY_GRAY_TINT_05}"
10
- },
11
- "LINE_DARK_COLOR": {
12
- "type": "color",
13
- "category": "colors",
14
- "value": "{!BLACK_TINT_04}"
15
- },
16
- "PRIMARY_LIGHT_COLOR": {
17
- "type": "color",
18
- "category": "colors",
19
- "value": "{!SKY_BLUE}"
20
- },
21
- "PRIMARY_DARK_COLOR": {
22
- "type": "color",
23
- "category": "colors",
24
- "value": "{!SKY_BLUE_TINT_01}"
25
- },
26
- "BACKGROUND_LIGHT_COLOR": {
27
- "type": "color",
28
- "category": "colors",
29
- "value": "{!WHITE}"
30
- },
31
- "BACKGROUND_DARK_COLOR": {
32
- "type": "color",
33
- "category": "colors",
34
- "value": "{!BLACK}"
35
- },
36
- "BACKGROUND_ALTERNATIVE_LIGHT_COLOR": {
37
- "type": "color",
38
- "category": "colors",
39
- "value": "{!SKY_GRAY_TINT_07}"
40
- },
41
- "BACKGROUND_ALTERNATIVE_DARK_COLOR": {
42
- "type": "color",
43
- "category": "colors",
44
- "value": "{!BLACK}"
45
- },
46
- "BACKGROUND_SECONDARY_LIGHT_COLOR": {
47
- "type": "color",
48
- "category": "colors",
49
- "value": "{!SKY_GRAY_TINT_07}"
50
- },
51
- "BACKGROUND_SECONDARY_DARK_COLOR": {
52
- "type": "color",
53
- "category": "colors",
54
- "value": "{!BLACK_TINT_01}"
55
- },
56
- "BACKGROUND_ALTERNATIVE_SECONDARY_LIGHT_COLOR": {
57
- "type": "color",
58
- "category": "colors",
59
- "value": "{!WHITE}"
60
- },
61
- "BACKGROUND_ALTERNATIVE_SECONDARY_DARK_COLOR": {
62
- "type": "color",
63
- "category": "colors",
64
- "value": "{!BLACK_TINT_01}"
65
- },
66
- "BACKGROUND_TERTIARY_LIGHT_COLOR": {
67
- "type": "color",
68
- "category": "colors",
69
- "value": "{!WHITE}"
70
- },
71
- "BACKGROUND_TERTIARY_DARK_COLOR": {
72
- "type": "color",
73
- "category": "colors",
74
- "value": "{!BLACK_TINT_02}"
75
- },
76
- "BACKGROUND_ELEVATION_01_LIGHT_COLOR": {
77
- "type": "color",
78
- "category": "text-colors",
79
- "value": "{!WHITE}"
80
- },
81
- "BACKGROUND_ELEVATION_01_DARK_COLOR": {
82
- "type": "color",
83
- "category": "text-colors",
84
- "value": "{!BLACK_TINT_01}"
85
- },
86
- "BACKGROUND_ELEVATION_02_LIGHT_COLOR": {
87
- "type": "color",
88
- "category": "text-colors",
89
- "value": "{!WHITE}"
90
- },
91
- "BACKGROUND_ELEVATION_02_DARK_COLOR": {
92
- "type": "color",
93
- "category": "text-colors",
94
- "value": "{!BLACK_TINT_02}"
95
- },
96
- "BACKGROUND_ELEVATION_03_LIGHT_COLOR": {
97
- "type": "color",
98
- "category": "text-colors",
99
- "value": "{!WHITE}"
100
- },
101
- "BACKGROUND_ELEVATION_03_DARK_COLOR": {
102
- "type": "color",
103
- "category": "text-colors",
104
- "value": "{!BLACK_TINT_03}"
105
- },
106
- "COLOR_WHITE": {
107
- "type": "color",
108
- "category": "colors",
109
- "value": "{!WHITE}"
110
- },
111
- "COLOR_SYSTEM_RED": {
112
- "type": "color",
113
- "category": "colors",
114
- "value": "{!PANJIN}"
115
- },
116
- "COLOR_SYSTEM_GREEN": {
117
- "type": "color",
118
- "category": "colors",
119
- "value": "{!MONTEVERDE}"
120
- },
121
- "COLOR_SKY_BLUE": {
122
- "type": "color",
123
- "category": "colors",
124
- "value": "{!SKY_BLUE}"
125
- },
126
- "COLOR_MONTEVERDE": {
127
- "type": "color",
128
- "category": "colors",
129
- "value": "{!MONTEVERDE}"
130
- },
131
- "COLOR_GLENCOE": {
132
- "type": "color",
133
- "category": "colors",
134
- "value": "{!GLENCOE}"
135
- },
136
- "COLOR_SAGANO": {
137
- "type": "color",
138
- "category": "colors",
139
- "value": "{!SAGANO}"
140
- },
141
- "COLOR_KOLKATA": {
142
- "type": "color",
143
- "category": "colors",
144
- "value": "{!KOLKATA}"
145
- },
146
- "COLOR_ERFOUD": {
147
- "type": "color",
148
- "category": "colors",
149
- "value": "{!ERFOUD}"
150
- },
151
- "COLOR_BAGAN": {
152
- "type": "color",
153
- "category": "colors",
154
- "value": "{!BAGAN}"
155
- },
156
- "COLOR_BUNOL": {
157
- "type": "color",
158
- "category": "colors",
159
- "value": "{!BUNOL}"
160
- },
161
- "COLOR_PETRA": {
162
- "type": "color",
163
- "category": "colors",
164
- "value": "{!PETRA}"
165
- },
166
- "COLOR_NARA": {
167
- "type": "color",
168
- "category": "colors",
169
- "value": "{!NARA}"
170
- },
171
- "COLOR_ABISKO": {
172
- "type": "color",
173
- "category": "colors",
174
- "value": "{!ABISKO}"
175
- },
176
- "COLOR_VALENSOLE": {
177
- "type": "color",
178
- "category": "colors",
179
- "value": "{!VALENSOLE}"
180
- },
181
- "COLOR_TOCHIGI": {
182
- "type": "color",
183
- "category": "colors",
184
- "value": "{!TOCHIGI}"
185
- },
186
- "COLOR_PANJIN": {
187
- "type": "color",
188
- "category": "colors",
189
- "value": "{!PANJIN}"
190
- },
191
- "COLOR_HILLIER": {
192
- "type": "color",
193
- "category": "colors",
194
- "value": "{!HILLIER}"
195
- },
196
- "COLOR_HARBOUR": {
197
- "type": "color",
198
- "category": "colors",
199
- "value": "{!HARBOUR}"
200
- },
201
- "COLOR_SKY_BLUE_SHADE_03": {
202
- "type": "color",
203
- "category": "colors",
204
- "value": "{!SKY_BLUE_SHADE_03}"
205
- },
206
- "COLOR_SKY_BLUE_SHADE_02": {
207
- "type": "color",
208
- "category": "colors",
209
- "value": "{!SKY_BLUE_SHADE_02}"
210
- },
211
- "COLOR_SKY_BLUE_SHADE_01": {
212
- "type": "color",
213
- "category": "colors",
214
- "value": "{!SKY_BLUE_SHADE_01}"
215
- },
216
- "COLOR_SKY_BLUE_TINT_01": {
217
- "type": "color",
218
- "category": "colors",
219
- "value": "{!SKY_BLUE_TINT_01}"
220
- },
221
- "COLOR_SKY_BLUE_TINT_02": {
222
- "type": "color",
223
- "category": "colors",
224
- "value": "{!SKY_BLUE_TINT_02}"
225
- },
226
- "COLOR_SKY_BLUE_TINT_03": {
227
- "type": "color",
228
- "category": "colors",
229
- "value": "{!SKY_BLUE_TINT_03}"
230
- },
231
- "COLOR_SKY_GRAY_TINT_07": {
232
- "type": "color",
233
- "category": "colors",
234
- "value": "{!SKY_GRAY_TINT_07}"
235
- },
236
- "COLOR_SKY_GRAY_TINT_06": {
237
- "type": "color",
238
- "category": "colors",
239
- "value": "{!SKY_GRAY_TINT_06}"
240
- },
241
- "COLOR_SKY_GRAY_TINT_05": {
242
- "type": "color",
243
- "category": "colors",
244
- "value": "{!SKY_GRAY_TINT_05}"
245
- },
246
- "COLOR_SKY_GRAY_TINT_04": {
247
- "type": "color",
248
- "category": "colors",
249
- "value": "{!SKY_GRAY_TINT_04}"
250
- },
251
- "COLOR_SKY_GRAY_TINT_03": {
252
- "type": "color",
253
- "category": "colors",
254
- "value": "{!SKY_GRAY_TINT_03}"
255
- },
256
- "COLOR_SKY_GRAY_TINT_02": {
257
- "type": "color",
258
- "category": "colors",
259
- "value": "{!SKY_GRAY_TINT_02}"
260
- },
261
- "COLOR_SKY_GRAY_TINT_01": {
262
- "type": "color",
263
- "category": "colors",
264
- "value": "{!SKY_GRAY_TINT_01}"
265
- },
266
- "COLOR_SKY_GRAY": {
267
- "type": "color",
268
- "category": "colors",
269
- "value": "{!SKY_GRAY}"
270
- },
271
- "COLOR_PRIMARY_GRADIENT_LIGHT": {
272
- "type": "color",
273
- "category": "colors",
274
- "value": "{!SKY_BLUE}"
275
- },
276
- "COLOR_BLACK": {
277
- "type": "color",
278
- "category": "colors",
279
- "value": "{!BLACK}"
280
- },
281
- "COLOR_BLACK_TINT_01": {
282
- "type": "color",
283
- "category": "colors",
284
- "value": "{!BLACK_TINT_01}"
285
- },
286
- "COLOR_BLACK_TINT_02": {
287
- "type": "color",
288
- "category": "colors",
289
- "value": "{!BLACK_TINT_02}"
290
- },
291
- "COLOR_BLACK_TINT_03": {
292
- "type": "color",
293
- "category": "colors",
294
- "value": "{!BLACK_TINT_03}"
295
- },
296
- "COLOR_BLACK_TINT_04": {
297
- "type": "color",
298
- "category": "colors",
299
- "value": "{!BLACK_TINT_04}"
300
- },
301
- "COLOR_BLACK_TINT_05": {
302
- "type": "color",
303
- "category": "colors",
304
- "value": "{!BLACK_TINT_05}"
305
- },
306
- "COLOR_BLACK_TINT_06": {
307
- "type": "color",
308
- "category": "colors",
309
- "value": "{!BLACK_TINT_06}"
310
- },
311
- "TEXT_PRIMARY_LIGHT_COLOR": {
312
- "value": "{!SKY_GRAY}",
313
- "type": "color",
314
- "category": "text-colors"
315
- },
316
- "TEXT_SECONDARY_LIGHT_COLOR": {
317
- "value": "{!SKY_GRAY_TINT_02}",
318
- "type": "color",
319
- "category": "text-colors"
320
- },
321
- "TEXT_TERTIARY_LIGHT_COLOR": {
322
- "value": "{!SKY_GRAY_TINT_03}",
323
- "type": "color",
324
- "category": "text-colors"
325
- },
326
- "TEXT_QUATERNARY_LIGHT_COLOR": {
327
- "value": "{!SKY_GRAY_TINT_03}",
328
- "type": "color",
329
- "category": "text-colors"
330
- },
331
- "TEXT_PRIMARY_DARK_COLOR": {
332
- "value": "{!WHITE}",
333
- "type": "color",
334
- "category": "text-colors"
335
- },
336
- "TEXT_SECONDARY_DARK_COLOR": {
337
- "value": "{!SKY_GRAY_TINT_04}",
338
- "type": "color",
339
- "category": "text-colors"
340
- },
341
- "TEXT_TERTIARY_DARK_COLOR": {
342
- "value": "{!BLACK_TINT_06}",
343
- "type": "color",
344
- "category": "text-colors"
345
- },
346
- "TEXT_QUATERNARY_DARK_COLOR": {
347
- "value": "{!BLACK_TINT_06}",
348
- "type": "color",
349
- "category": "text-colors"
350
- }
351
- }
352
- }