@skyscanner/bpk-foundations-web 23.0.0 → 24.0.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/package.json +3 -3
- package/tokens/base.common.js +10 -8
- package/tokens/base.default.scss +12 -8
- package/tokens/base.es6.d.ts +18 -14
- package/tokens/base.es6.js +18 -14
- package/tokens/base.raw.json +48 -24
- package/tokens/base.scss +12 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/bpk-foundations-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "24.0.0",
|
|
4
4
|
"description": "Common Backpack design tokens for colors, spacing, font, etc.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"tokens": "gulp"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@skyscanner/bpk-foundations-common": "^
|
|
20
|
+
"@skyscanner/bpk-foundations-common": "^24.0.0",
|
|
21
21
|
"color": "^5.0.0"
|
|
22
22
|
},
|
|
23
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "c0b09255d56f00c139988461085774835a0d573b"
|
|
24
24
|
}
|
package/tokens/base.common.js
CHANGED
|
@@ -118,14 +118,16 @@ module.exports = {
|
|
|
118
118
|
marcommsGreenMuted: "rgb(212, 255, 242)",
|
|
119
119
|
marcommsBlueMuted: "rgb(217, 248, 255)",
|
|
120
120
|
marcommsEcoGreen: "rgb(15, 161, 169)",
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
privateChipOnDarkOnBackgroundDay: "rgb(255, 255, 255)",
|
|
121
|
+
privateChipOnDarkOnFillDay: "rgb(21, 70, 121)",
|
|
122
|
+
privateChipOnDarkOnDismissIconNight: "rgba(255, 255, 255, 0.5)",
|
|
124
123
|
privateChipOnDarkOnBackgroundNight: "rgb(5, 65, 132)",
|
|
125
|
-
|
|
126
|
-
privateChipDisabledBackgroundNight: "rgb(11, 18, 29)",
|
|
124
|
+
privateChipOnDarkOnBackgroundDay: "rgb(255, 255, 255)",
|
|
127
125
|
privateChipOnDarkOnDismissIconDay: "rgb(98, 105, 113)",
|
|
128
|
-
|
|
126
|
+
privateChipOnDarkPressedStrokeNight: "rgb(5, 65, 132)",
|
|
127
|
+
privateChipOnDarkPressedStrokeDay: "rgb(255, 255, 255)",
|
|
128
|
+
privateChipDisabledBackgroundNight: "rgb(11, 18, 29)",
|
|
129
|
+
privateChipDisabledBackgroundDay: "rgb(224, 228, 233)",
|
|
130
|
+
privateChipOnDarkOnFillNight: "rgb(2, 77, 175)",
|
|
129
131
|
privateMapPreviousSelectionDay: "rgb(207, 228, 255)",
|
|
130
132
|
privateMapClusterPinNight: "rgb(255, 255, 255)",
|
|
131
133
|
privateMapClusterPinPreviousSelectionNight: "rgb(148, 195, 255)",
|
|
@@ -157,12 +159,12 @@ module.exports = {
|
|
|
157
159
|
privateButtonFeaturedPressedBackgroundDay: "rgb(2, 77, 175)",
|
|
158
160
|
privateButtonPrimaryOnDarkDisabledForegroundNight: "rgba(255, 255, 255, 0.2)",
|
|
159
161
|
privateButtonSecondaryOnDarkDisabledBackgroundDay: "rgb(11, 18, 29)",
|
|
160
|
-
privateButtonSecondaryOnDarkPressedBackgroundNight: "
|
|
162
|
+
privateButtonSecondaryOnDarkPressedBackgroundNight: "rgba(255, 255, 255, 0.2)",
|
|
161
163
|
privateButtonDestructiveNormalForegroundDay: "rgb(231, 8, 102)",
|
|
162
164
|
privateButtonPrimaryOnDarkNormalBackgroundDay: "rgb(255, 255, 255)",
|
|
163
165
|
privateButtonPrimaryOnDarkDisabledForegroundDay: "rgba(0, 0, 0, 0.2)",
|
|
164
166
|
privateButtonLinkPressedForegroundNight: "rgb(209, 247, 255)",
|
|
165
|
-
privateButtonSecondaryOnDarkPressedBackgroundDay: "rgb(
|
|
167
|
+
privateButtonSecondaryOnDarkPressedBackgroundDay: "rgb(4, 24, 45)",
|
|
166
168
|
privateButtonPrimaryOnLightDisabledBackgroundNight: "rgb(11, 18, 29)",
|
|
167
169
|
privateButtonLinkPressedForegroundDay: "rgb(2, 77, 175)",
|
|
168
170
|
privateButtonDestructiveNormalBackgroundNight: "rgb(36, 51, 70)",
|
package/tokens/base.default.scss
CHANGED
|
@@ -216,21 +216,25 @@ $bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;
|
|
|
216
216
|
/// @group marcomms-colors
|
|
217
217
|
$bpk-marcomms-eco-green: rgb(15, 161, 169) !default;
|
|
218
218
|
/// @group chip-colors
|
|
219
|
-
$bpk-private-chip-on-dark-
|
|
219
|
+
$bpk-private-chip-on-dark-on-fill-day: rgb(21, 70, 121) !default;
|
|
220
220
|
/// @group chip-colors
|
|
221
|
-
$bpk-private-chip-on-dark-
|
|
221
|
+
$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;
|
|
222
|
+
/// @group chip-colors
|
|
223
|
+
$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;
|
|
222
224
|
/// @group chip-colors
|
|
223
225
|
$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;
|
|
224
226
|
/// @group chip-colors
|
|
225
|
-
$bpk-private-chip-on-dark-on-
|
|
227
|
+
$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113) !default;
|
|
226
228
|
/// @group chip-colors
|
|
227
|
-
$bpk-private-chip-
|
|
229
|
+
$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;
|
|
230
|
+
/// @group chip-colors
|
|
231
|
+
$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;
|
|
228
232
|
/// @group chip-colors
|
|
229
233
|
$bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;
|
|
230
234
|
/// @group chip-colors
|
|
231
|
-
$bpk-private-chip-
|
|
235
|
+
$bpk-private-chip-disabled-background-day: rgb(224, 228, 233) !default;
|
|
232
236
|
/// @group chip-colors
|
|
233
|
-
$bpk-private-chip-on-dark-on-
|
|
237
|
+
$bpk-private-chip-on-dark-on-fill-night: rgb(2, 77, 175) !default;
|
|
234
238
|
/// @group map-marker-colors
|
|
235
239
|
$bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;
|
|
236
240
|
/// @group map-marker-colors
|
|
@@ -294,7 +298,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 25
|
|
|
294
298
|
/// @group button-colors
|
|
295
299
|
$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;
|
|
296
300
|
/// @group button-colors
|
|
297
|
-
$bpk-private-button-secondary-on-dark-pressed-background-night:
|
|
301
|
+
$bpk-private-button-secondary-on-dark-pressed-background-night: rgba(255, 255, 255, 0.2) !default;
|
|
298
302
|
/// @group button-colors
|
|
299
303
|
$bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102) !default;
|
|
300
304
|
/// @group button-colors
|
|
@@ -304,7 +308,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2)
|
|
|
304
308
|
/// @group button-colors
|
|
305
309
|
$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !default;
|
|
306
310
|
/// @group button-colors
|
|
307
|
-
$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(
|
|
311
|
+
$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(4, 24, 45) !default;
|
|
308
312
|
/// @group button-colors
|
|
309
313
|
$bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29) !default;
|
|
310
314
|
/// @group button-colors
|
package/tokens/base.es6.d.ts
CHANGED
|
@@ -116,14 +116,16 @@ export declare const marcommsPinkMuted = "rgb(255, 233, 249)" as const;
|
|
|
116
116
|
export declare const marcommsGreenMuted = "rgb(212, 255, 242)" as const;
|
|
117
117
|
export declare const marcommsBlueMuted = "rgb(217, 248, 255)" as const;
|
|
118
118
|
export declare const marcommsEcoGreen = "rgb(15, 161, 169)" as const;
|
|
119
|
-
export declare const
|
|
120
|
-
export declare const
|
|
121
|
-
export declare const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)" as const;
|
|
119
|
+
export declare const privateChipOnDarkOnFillDay = "rgb(21, 70, 121)" as const;
|
|
120
|
+
export declare const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)" as const;
|
|
122
121
|
export declare const privateChipOnDarkOnBackgroundNight = "rgb(5, 65, 132)" as const;
|
|
123
|
-
export declare const
|
|
124
|
-
export declare const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
|
|
122
|
+
export declare const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)" as const;
|
|
125
123
|
export declare const privateChipOnDarkOnDismissIconDay = "rgb(98, 105, 113)" as const;
|
|
126
|
-
export declare const
|
|
124
|
+
export declare const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)" as const;
|
|
125
|
+
export declare const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)" as const;
|
|
126
|
+
export declare const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
|
|
127
|
+
export declare const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)" as const;
|
|
128
|
+
export declare const privateChipOnDarkOnFillNight = "rgb(2, 77, 175)" as const;
|
|
127
129
|
export declare const privateMapPreviousSelectionDay = "rgb(207, 228, 255)" as const;
|
|
128
130
|
export declare const privateMapClusterPinNight = "rgb(255, 255, 255)" as const;
|
|
129
131
|
export declare const privateMapClusterPinPreviousSelectionNight = "rgb(148, 195, 255)" as const;
|
|
@@ -155,12 +157,12 @@ export declare const privateButtonPrimaryOnDarkNormalBackgroundNight = "rgb(255,
|
|
|
155
157
|
export declare const privateButtonFeaturedPressedBackgroundDay = "rgb(2, 77, 175)" as const;
|
|
156
158
|
export declare const privateButtonPrimaryOnDarkDisabledForegroundNight = "rgba(255, 255, 255, 0.2)" as const;
|
|
157
159
|
export declare const privateButtonSecondaryOnDarkDisabledBackgroundDay = "rgb(11, 18, 29)" as const;
|
|
158
|
-
export declare const privateButtonSecondaryOnDarkPressedBackgroundNight = "
|
|
160
|
+
export declare const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgba(255, 255, 255, 0.2)" as const;
|
|
159
161
|
export declare const privateButtonDestructiveNormalForegroundDay = "rgb(231, 8, 102)" as const;
|
|
160
162
|
export declare const privateButtonPrimaryOnDarkNormalBackgroundDay = "rgb(255, 255, 255)" as const;
|
|
161
163
|
export declare const privateButtonPrimaryOnDarkDisabledForegroundDay = "rgba(0, 0, 0, 0.2)" as const;
|
|
162
164
|
export declare const privateButtonLinkPressedForegroundNight = "rgb(209, 247, 255)" as const;
|
|
163
|
-
export declare const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(
|
|
165
|
+
export declare const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(4, 24, 45)" as const;
|
|
164
166
|
export declare const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(11, 18, 29)" as const;
|
|
165
167
|
export declare const privateButtonLinkPressedForegroundDay = "rgb(2, 77, 175)" as const;
|
|
166
168
|
export declare const privateButtonDestructiveNormalBackgroundNight = "rgb(36, 51, 70)" as const;
|
|
@@ -536,14 +538,16 @@ cardBackgroundColor,
|
|
|
536
538
|
cardPadding,
|
|
537
539
|
} as const;
|
|
538
540
|
export declare const chipColors = {
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
privateChipOnDarkOnBackgroundDay,
|
|
541
|
+
privateChipOnDarkOnFillDay,
|
|
542
|
+
privateChipOnDarkOnDismissIconNight,
|
|
542
543
|
privateChipOnDarkOnBackgroundNight,
|
|
543
|
-
|
|
544
|
-
privateChipDisabledBackgroundNight,
|
|
544
|
+
privateChipOnDarkOnBackgroundDay,
|
|
545
545
|
privateChipOnDarkOnDismissIconDay,
|
|
546
|
-
|
|
546
|
+
privateChipOnDarkPressedStrokeNight,
|
|
547
|
+
privateChipOnDarkPressedStrokeDay,
|
|
548
|
+
privateChipDisabledBackgroundNight,
|
|
549
|
+
privateChipDisabledBackgroundDay,
|
|
550
|
+
privateChipOnDarkOnFillNight,
|
|
547
551
|
} as const;
|
|
548
552
|
export declare const colors = {
|
|
549
553
|
colorSkyBlueShade03,
|
package/tokens/base.es6.js
CHANGED
|
@@ -116,14 +116,16 @@ export const marcommsPinkMuted = "rgb(255, 233, 249)";
|
|
|
116
116
|
export const marcommsGreenMuted = "rgb(212, 255, 242)";
|
|
117
117
|
export const marcommsBlueMuted = "rgb(217, 248, 255)";
|
|
118
118
|
export const marcommsEcoGreen = "rgb(15, 161, 169)";
|
|
119
|
-
export const
|
|
120
|
-
export const
|
|
121
|
-
export const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)";
|
|
119
|
+
export const privateChipOnDarkOnFillDay = "rgb(21, 70, 121)";
|
|
120
|
+
export const privateChipOnDarkOnDismissIconNight = "rgba(255, 255, 255, 0.5)";
|
|
122
121
|
export const privateChipOnDarkOnBackgroundNight = "rgb(5, 65, 132)";
|
|
123
|
-
export const
|
|
124
|
-
export const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)";
|
|
122
|
+
export const privateChipOnDarkOnBackgroundDay = "rgb(255, 255, 255)";
|
|
125
123
|
export const privateChipOnDarkOnDismissIconDay = "rgb(98, 105, 113)";
|
|
126
|
-
export const
|
|
124
|
+
export const privateChipOnDarkPressedStrokeNight = "rgb(5, 65, 132)";
|
|
125
|
+
export const privateChipOnDarkPressedStrokeDay = "rgb(255, 255, 255)";
|
|
126
|
+
export const privateChipDisabledBackgroundNight = "rgb(11, 18, 29)";
|
|
127
|
+
export const privateChipDisabledBackgroundDay = "rgb(224, 228, 233)";
|
|
128
|
+
export const privateChipOnDarkOnFillNight = "rgb(2, 77, 175)";
|
|
127
129
|
export const privateMapPreviousSelectionDay = "rgb(207, 228, 255)";
|
|
128
130
|
export const privateMapClusterPinNight = "rgb(255, 255, 255)";
|
|
129
131
|
export const privateMapClusterPinPreviousSelectionNight = "rgb(148, 195, 255)";
|
|
@@ -155,12 +157,12 @@ export const privateButtonPrimaryOnDarkNormalBackgroundNight = "rgb(255, 255, 25
|
|
|
155
157
|
export const privateButtonFeaturedPressedBackgroundDay = "rgb(2, 77, 175)";
|
|
156
158
|
export const privateButtonPrimaryOnDarkDisabledForegroundNight = "rgba(255, 255, 255, 0.2)";
|
|
157
159
|
export const privateButtonSecondaryOnDarkDisabledBackgroundDay = "rgb(11, 18, 29)";
|
|
158
|
-
export const privateButtonSecondaryOnDarkPressedBackgroundNight = "
|
|
160
|
+
export const privateButtonSecondaryOnDarkPressedBackgroundNight = "rgba(255, 255, 255, 0.2)";
|
|
159
161
|
export const privateButtonDestructiveNormalForegroundDay = "rgb(231, 8, 102)";
|
|
160
162
|
export const privateButtonPrimaryOnDarkNormalBackgroundDay = "rgb(255, 255, 255)";
|
|
161
163
|
export const privateButtonPrimaryOnDarkDisabledForegroundDay = "rgba(0, 0, 0, 0.2)";
|
|
162
164
|
export const privateButtonLinkPressedForegroundNight = "rgb(209, 247, 255)";
|
|
163
|
-
export const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(
|
|
165
|
+
export const privateButtonSecondaryOnDarkPressedBackgroundDay = "rgb(4, 24, 45)";
|
|
164
166
|
export const privateButtonPrimaryOnLightDisabledBackgroundNight = "rgb(11, 18, 29)";
|
|
165
167
|
export const privateButtonLinkPressedForegroundDay = "rgb(2, 77, 175)";
|
|
166
168
|
export const privateButtonDestructiveNormalBackgroundNight = "rgb(36, 51, 70)";
|
|
@@ -536,14 +538,16 @@ cardBackgroundColor,
|
|
|
536
538
|
cardPadding,
|
|
537
539
|
};
|
|
538
540
|
export const chipColors = {
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
privateChipOnDarkOnBackgroundDay,
|
|
541
|
+
privateChipOnDarkOnFillDay,
|
|
542
|
+
privateChipOnDarkOnDismissIconNight,
|
|
542
543
|
privateChipOnDarkOnBackgroundNight,
|
|
543
|
-
|
|
544
|
-
privateChipDisabledBackgroundNight,
|
|
544
|
+
privateChipOnDarkOnBackgroundDay,
|
|
545
545
|
privateChipOnDarkOnDismissIconDay,
|
|
546
|
-
|
|
546
|
+
privateChipOnDarkPressedStrokeNight,
|
|
547
|
+
privateChipOnDarkPressedStrokeDay,
|
|
548
|
+
privateChipDisabledBackgroundNight,
|
|
549
|
+
privateChipDisabledBackgroundDay,
|
|
550
|
+
privateChipOnDarkOnFillNight,
|
|
547
551
|
};
|
|
548
552
|
export const colors = {
|
|
549
553
|
colorSkyBlueShade03,
|
package/tokens/base.raw.json
CHANGED
|
@@ -72,6 +72,9 @@
|
|
|
72
72
|
"WHITE_ALPHA_50": {
|
|
73
73
|
"value": "#FFFFFF80"
|
|
74
74
|
},
|
|
75
|
+
"MIDNIGHT_SKY": {
|
|
76
|
+
"value": "#04182D"
|
|
77
|
+
},
|
|
75
78
|
"NIGHT_BLUE_100": {
|
|
76
79
|
"value": "#002B5B"
|
|
77
80
|
},
|
|
@@ -108,6 +111,9 @@
|
|
|
108
111
|
"NIGHT_GREY_10": {
|
|
109
112
|
"value": "#010913"
|
|
110
113
|
},
|
|
114
|
+
"BABY_BLUE_30": {
|
|
115
|
+
"value": "#B4D7FF"
|
|
116
|
+
},
|
|
111
117
|
"BLACK_ALPHA_80": {
|
|
112
118
|
"value": "#000000CC"
|
|
113
119
|
},
|
|
@@ -519,6 +525,7 @@
|
|
|
519
525
|
"type": "color",
|
|
520
526
|
"category": "core-colors",
|
|
521
527
|
"value": "rgb(15, 161, 169)",
|
|
528
|
+
"deprecated": true,
|
|
522
529
|
"originalValue": "{!ECO_GREEN}",
|
|
523
530
|
"name": "CORE_ECO_DAY"
|
|
524
531
|
},
|
|
@@ -526,6 +533,7 @@
|
|
|
526
533
|
"type": "color",
|
|
527
534
|
"category": "core-colors",
|
|
528
535
|
"value": "rgb(15, 161, 169)",
|
|
536
|
+
"deprecated": true,
|
|
529
537
|
"originalValue": "{!ECO_GREEN}",
|
|
530
538
|
"name": "CORE_ECO_NIGHT"
|
|
531
539
|
},
|
|
@@ -785,6 +793,7 @@
|
|
|
785
793
|
"type": "color",
|
|
786
794
|
"category": "text-colors",
|
|
787
795
|
"value": "rgb(132, 233, 255)",
|
|
796
|
+
"deprecated": true,
|
|
788
797
|
"originalValue": "{!NIGHT_BLUE}",
|
|
789
798
|
"name": "TEXT_LINK_NIGHT"
|
|
790
799
|
},
|
|
@@ -806,6 +815,7 @@
|
|
|
806
815
|
"type": "color",
|
|
807
816
|
"category": "text-colors",
|
|
808
817
|
"value": "rgb(0, 98, 227)",
|
|
818
|
+
"deprecated": true,
|
|
809
819
|
"originalValue": "{!SKY_BLUE}",
|
|
810
820
|
"name": "TEXT_LINK_DAY"
|
|
811
821
|
},
|
|
@@ -1166,19 +1176,26 @@
|
|
|
1166
1176
|
"originalValue": "{!ECO_GREEN}",
|
|
1167
1177
|
"name": "MARCOMMS_ECO_GREEN"
|
|
1168
1178
|
},
|
|
1169
|
-
"
|
|
1179
|
+
"PRIVATE_CHIP_ON_DARK_ON_FILL_DAY": {
|
|
1170
1180
|
"type": "color",
|
|
1171
1181
|
"category": "chip-colors",
|
|
1172
|
-
"value": "rgb(
|
|
1173
|
-
"originalValue": "{!
|
|
1174
|
-
"name": "
|
|
1182
|
+
"value": "rgb(21, 70, 121)",
|
|
1183
|
+
"originalValue": "{!DARK_SKY_85}",
|
|
1184
|
+
"name": "PRIVATE_CHIP_ON_DARK_ON_FILL_DAY"
|
|
1175
1185
|
},
|
|
1176
|
-
"
|
|
1186
|
+
"PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT": {
|
|
1187
|
+
"type": "color",
|
|
1188
|
+
"category": "chip-colors",
|
|
1189
|
+
"value": "rgba(255, 255, 255, 0.5)",
|
|
1190
|
+
"originalValue": "{!WHITE_ALPHA_50}",
|
|
1191
|
+
"name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_NIGHT"
|
|
1192
|
+
},
|
|
1193
|
+
"PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT": {
|
|
1177
1194
|
"type": "color",
|
|
1178
1195
|
"category": "chip-colors",
|
|
1179
1196
|
"value": "rgb(5, 65, 132)",
|
|
1180
1197
|
"originalValue": "{!NIGHT_SKY}",
|
|
1181
|
-
"name": "
|
|
1198
|
+
"name": "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_NIGHT"
|
|
1182
1199
|
},
|
|
1183
1200
|
"PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_DAY": {
|
|
1184
1201
|
"type": "color",
|
|
@@ -1187,19 +1204,26 @@
|
|
|
1187
1204
|
"originalValue": "{!WHITE}",
|
|
1188
1205
|
"name": "PRIVATE_CHIP_ON_DARK_ON_BACKGROUND_DAY"
|
|
1189
1206
|
},
|
|
1190
|
-
"
|
|
1207
|
+
"PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY": {
|
|
1208
|
+
"type": "color",
|
|
1209
|
+
"category": "chip-colors",
|
|
1210
|
+
"value": "rgb(98, 105, 113)",
|
|
1211
|
+
"originalValue": "{!GREY_40}",
|
|
1212
|
+
"name": "PRIVATE_CHIP_ON_DARK_ON_DISMISS_ICON_DAY"
|
|
1213
|
+
},
|
|
1214
|
+
"PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT": {
|
|
1191
1215
|
"type": "color",
|
|
1192
1216
|
"category": "chip-colors",
|
|
1193
1217
|
"value": "rgb(5, 65, 132)",
|
|
1194
1218
|
"originalValue": "{!NIGHT_SKY}",
|
|
1195
|
-
"name": "
|
|
1219
|
+
"name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_NIGHT"
|
|
1196
1220
|
},
|
|
1197
|
-
"
|
|
1221
|
+
"PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY": {
|
|
1198
1222
|
"type": "color",
|
|
1199
1223
|
"category": "chip-colors",
|
|
1200
|
-
"value": "rgb(
|
|
1201
|
-
"originalValue": "{!
|
|
1202
|
-
"name": "
|
|
1224
|
+
"value": "rgb(255, 255, 255)",
|
|
1225
|
+
"originalValue": "{!WHITE}",
|
|
1226
|
+
"name": "PRIVATE_CHIP_ON_DARK_PRESSED_STROKE_DAY"
|
|
1203
1227
|
},
|
|
1204
1228
|
"PRIVATE_CHIP_DISABLED_BACKGROUND_NIGHT": {
|
|
1205
1229
|
"type": "color",
|
|
@@ -1208,19 +1232,19 @@
|
|
|
1208
1232
|
"originalValue": "{!NIGHT_GREY_00}",
|
|
1209
1233
|
"name": "PRIVATE_CHIP_DISABLED_BACKGROUND_NIGHT"
|
|
1210
1234
|
},
|
|
1211
|
-
"
|
|
1235
|
+
"PRIVATE_CHIP_DISABLED_BACKGROUND_DAY": {
|
|
1212
1236
|
"type": "color",
|
|
1213
1237
|
"category": "chip-colors",
|
|
1214
|
-
"value": "rgb(
|
|
1215
|
-
"originalValue": "{!
|
|
1216
|
-
"name": "
|
|
1238
|
+
"value": "rgb(224, 228, 233)",
|
|
1239
|
+
"originalValue": "{!GREY_20}",
|
|
1240
|
+
"name": "PRIVATE_CHIP_DISABLED_BACKGROUND_DAY"
|
|
1217
1241
|
},
|
|
1218
|
-
"
|
|
1242
|
+
"PRIVATE_CHIP_ON_DARK_ON_FILL_NIGHT": {
|
|
1219
1243
|
"type": "color",
|
|
1220
1244
|
"category": "chip-colors",
|
|
1221
|
-
"value": "
|
|
1222
|
-
"originalValue": "{!
|
|
1223
|
-
"name": "
|
|
1245
|
+
"value": "rgb(2, 77, 175)",
|
|
1246
|
+
"originalValue": "{!NIGHT_SKY_85}",
|
|
1247
|
+
"name": "PRIVATE_CHIP_ON_DARK_ON_FILL_NIGHT"
|
|
1224
1248
|
},
|
|
1225
1249
|
"PRIVATE_MAP_PREVIOUS_SELECTION_DAY": {
|
|
1226
1250
|
"type": "color",
|
|
@@ -1442,8 +1466,8 @@
|
|
|
1442
1466
|
"PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_NIGHT": {
|
|
1443
1467
|
"type": "color",
|
|
1444
1468
|
"category": "button-colors",
|
|
1445
|
-
"value": "
|
|
1446
|
-
"originalValue": "{!
|
|
1469
|
+
"value": "rgba(255, 255, 255, 0.2)",
|
|
1470
|
+
"originalValue": "{!WHITE_ALPHA_20}",
|
|
1447
1471
|
"name": "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_NIGHT"
|
|
1448
1472
|
},
|
|
1449
1473
|
"PRIVATE_BUTTON_DESTRUCTIVE_NORMAL_FOREGROUND_DAY": {
|
|
@@ -1477,8 +1501,8 @@
|
|
|
1477
1501
|
"PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_DAY": {
|
|
1478
1502
|
"type": "color",
|
|
1479
1503
|
"category": "button-colors",
|
|
1480
|
-
"value": "rgb(
|
|
1481
|
-
"originalValue": "{!
|
|
1504
|
+
"value": "rgb(4, 24, 45)",
|
|
1505
|
+
"originalValue": "{!MIDNIGHT_SKY}",
|
|
1482
1506
|
"name": "PRIVATE_BUTTON_SECONDARY_ON_DARK_PRESSED_BACKGROUND_DAY"
|
|
1483
1507
|
},
|
|
1484
1508
|
"PRIVATE_BUTTON_PRIMARY_ON_LIGHT_DISABLED_BACKGROUND_NIGHT": {
|
package/tokens/base.scss
CHANGED
|
@@ -216,21 +216,25 @@ $bpk-marcomms-blue-muted: rgb(217, 248, 255);
|
|
|
216
216
|
/// @group marcomms-colors
|
|
217
217
|
$bpk-marcomms-eco-green: rgb(15, 161, 169);
|
|
218
218
|
/// @group chip-colors
|
|
219
|
-
$bpk-private-chip-on-dark-
|
|
219
|
+
$bpk-private-chip-on-dark-on-fill-day: rgb(21, 70, 121);
|
|
220
220
|
/// @group chip-colors
|
|
221
|
-
$bpk-private-chip-on-dark-
|
|
221
|
+
$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5);
|
|
222
|
+
/// @group chip-colors
|
|
223
|
+
$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132);
|
|
222
224
|
/// @group chip-colors
|
|
223
225
|
$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255);
|
|
224
226
|
/// @group chip-colors
|
|
225
|
-
$bpk-private-chip-on-dark-on-
|
|
227
|
+
$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(98, 105, 113);
|
|
226
228
|
/// @group chip-colors
|
|
227
|
-
$bpk-private-chip-
|
|
229
|
+
$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132);
|
|
230
|
+
/// @group chip-colors
|
|
231
|
+
$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255);
|
|
228
232
|
/// @group chip-colors
|
|
229
233
|
$bpk-private-chip-disabled-background-night: rgb(11, 18, 29);
|
|
230
234
|
/// @group chip-colors
|
|
231
|
-
$bpk-private-chip-
|
|
235
|
+
$bpk-private-chip-disabled-background-day: rgb(224, 228, 233);
|
|
232
236
|
/// @group chip-colors
|
|
233
|
-
$bpk-private-chip-on-dark-on-
|
|
237
|
+
$bpk-private-chip-on-dark-on-fill-night: rgb(2, 77, 175);
|
|
234
238
|
/// @group map-marker-colors
|
|
235
239
|
$bpk-private-map-previous-selection-day: rgb(207, 228, 255);
|
|
236
240
|
/// @group map-marker-colors
|
|
@@ -294,7 +298,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(255, 255, 25
|
|
|
294
298
|
/// @group button-colors
|
|
295
299
|
$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29);
|
|
296
300
|
/// @group button-colors
|
|
297
|
-
$bpk-private-button-secondary-on-dark-pressed-background-night:
|
|
301
|
+
$bpk-private-button-secondary-on-dark-pressed-background-night: rgba(255, 255, 255, 0.2);
|
|
298
302
|
/// @group button-colors
|
|
299
303
|
$bpk-private-button-destructive-normal-foreground-day: rgb(231, 8, 102);
|
|
300
304
|
/// @group button-colors
|
|
@@ -304,7 +308,7 @@ $bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2);
|
|
|
304
308
|
/// @group button-colors
|
|
305
309
|
$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255);
|
|
306
310
|
/// @group button-colors
|
|
307
|
-
$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(
|
|
311
|
+
$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(4, 24, 45);
|
|
308
312
|
/// @group button-colors
|
|
309
313
|
$bpk-private-button-primary-on-light-disabled-background-night: rgb(11, 18, 29);
|
|
310
314
|
/// @group button-colors
|