@skyscanner/bpk-foundations-common 2.2.0 → 2.4.0
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.
- package/.DS_Store +0 -0
- package/app/legacy-typography.json +102 -51
- package/app/typography.json +15 -0
- package/base/colors/aliases.json +76 -0
- package/base/colors/base.json +222 -0
- package/base/colors/canvas.json +23 -0
- package/base/colors/core.json +29 -0
- package/base/colors/other.json +135 -0
- package/base/colors/status.json +47 -0
- package/base/colors/surface.json +35 -0
- package/base/colors/text.json +66 -0
- package/base/colors.json +9 -41
- package/package.json +2 -2
- package/app/colors.json +0 -352
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
-
"
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
|
|
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.
|
|
3
|
+
"version": "2.4.0",
|
|
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": "
|
|
23
|
+
"gitHead": "7ea179bc17d38de5d6af941c6e5324125643b13d"
|
|
24
24
|
}
|