@box/blueprint-web-assets 4.121.8 → 4.122.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/dist/tokens/BP2/dark_mode_value/px-tokens.d.ts +41 -0
- package/dist/tokens/BP2/dark_mode_value/px-tokens.js +45 -4
- package/dist/tokens/BP2/dark_mode_value/tokens.css +45 -4
- package/dist/tokens/BP2/dark_mode_value/tokens.d.ts +41 -0
- package/dist/tokens/BP2/dark_mode_value/tokens.js +45 -4
- package/dist/tokens/BP2/dark_mode_value/tokens.json +45 -4
- package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts +41 -0
- package/dist/tokens/BP2/light_mode_value/px-tokens.js +47 -6
- package/dist/tokens/BP2/light_mode_value/tokens.css +47 -6
- package/dist/tokens/BP2/light_mode_value/tokens.d.ts +41 -0
- package/dist/tokens/BP2/light_mode_value/tokens.js +47 -6
- package/dist/tokens/BP2/light_mode_value/tokens.json +47 -6
- package/dist/tokens/px-tokens.d.ts +41 -0
- package/dist/tokens/px-tokens.js +41 -6
- package/dist/tokens/tokens-css-vars.scss +47 -6
- package/dist/tokens/tokens.d.ts +41 -0
- package/dist/tokens/tokens.js +41 -6
- package/dist/tokens/tokens.json +47 -6
- package/package.json +2 -2
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const bpBackgroundBackgroundLightBlue: string;
|
|
6
|
+
export const bpBackgroundBackgroundLightDarkBlue: string;
|
|
7
|
+
export const bpBackgroundBackgroundLightGreen: string;
|
|
8
|
+
export const bpBackgroundBackgroundLightGrimace: string;
|
|
9
|
+
export const bpBorderAccordionBorder: string;
|
|
5
10
|
export const bpBorderAccordionBorderHover: string;
|
|
11
|
+
export const bpBorderAccordionBorderOutlined: string;
|
|
6
12
|
export const bpBorderAvatarBorderHover: string;
|
|
7
13
|
export const bpBorderAvatarBorderPressed: string;
|
|
8
14
|
export const bpBorderBadgeBorder: string;
|
|
@@ -140,10 +146,14 @@ export const bpIconNavIconOnLight: string;
|
|
|
140
146
|
export const bpIconNavIconOnLightFocus: string;
|
|
141
147
|
export const bpIconNavIconOnLightHover: string;
|
|
142
148
|
export const bpIconNavIconOnLightSelected: string;
|
|
149
|
+
export const bpIconIconAnnotation: string;
|
|
143
150
|
export const bpIconIconBlue: string;
|
|
151
|
+
export const bpIconIconDarkBlue: string;
|
|
144
152
|
export const bpIconIconDestructiveOnLight: string;
|
|
145
153
|
export const bpIconIconErrorOnColor: string;
|
|
146
154
|
export const bpIconIconErrorOnLight: string;
|
|
155
|
+
export const bpIconIconGreen: string;
|
|
156
|
+
export const bpIconIconGrimace: string;
|
|
147
157
|
export const bpIconIconIllustrator: string;
|
|
148
158
|
export const bpIconIconIndesign: string;
|
|
149
159
|
export const bpIconIconInfoOnColor: string;
|
|
@@ -154,6 +164,7 @@ export const bpIconIconOnLightTertiary: string;
|
|
|
154
164
|
export const bpIconIconPhotoshop: string;
|
|
155
165
|
export const bpIconIconRequiredOnLight: string;
|
|
156
166
|
export const bpIconIconSuccessOnColor: string;
|
|
167
|
+
export const bpIconIconVariable: string;
|
|
157
168
|
export const bpIconIconWarningOnColor: string;
|
|
158
169
|
export const bpOutlineFocusOnDark: string;
|
|
159
170
|
export const bpOutlineFocusOnLight: string;
|
|
@@ -163,6 +174,7 @@ export const bpSurfaceAccordionSurfaceCollapsed: string;
|
|
|
163
174
|
export const bpSurfaceAccordionSurfaceCollapsedHover: string;
|
|
164
175
|
export const bpSurfaceAccordionSurfaceExpanded: string;
|
|
165
176
|
export const bpSurfaceAccordionSurfaceExpandedHover: string;
|
|
177
|
+
export const bpSurfaceAccordionSurfaceExpandedOutlined: string;
|
|
166
178
|
export const bpSurfaceBadgeSurfaceAdmin: string;
|
|
167
179
|
export const bpSurfaceBadgeSurfaceAlert: string;
|
|
168
180
|
export const bpSurfaceBadgeSurfaceAnnotation: string;
|
|
@@ -175,6 +187,7 @@ export const bpSurfaceBadgeSurfaceCoadmin: string;
|
|
|
175
187
|
export const bpSurfaceBadgeSurfaceCode: string;
|
|
176
188
|
export const bpSurfaceBadgeSurfaceCollection: string;
|
|
177
189
|
export const bpSurfaceBadgeSurfaceCompleted: string;
|
|
190
|
+
export const bpSurfaceBadgeSurfaceContentOffline: string;
|
|
178
191
|
export const bpSurfaceBadgeSurfaceDefault: string;
|
|
179
192
|
export const bpSurfaceBadgeSurfaceDocs: string;
|
|
180
193
|
export const bpSurfaceBadgeSurfaceDrawing: string;
|
|
@@ -198,6 +211,7 @@ export const bpSurfaceBadgeSurfaceOffline: string;
|
|
|
198
211
|
export const bpSurfaceBadgeSurfaceOnline: string;
|
|
199
212
|
export const bpSurfaceBadgeSurfacePages: string;
|
|
200
213
|
export const bpSurfaceBadgeSurfacePdf: string;
|
|
214
|
+
export const bpSurfaceBadgeSurfacePending: string;
|
|
201
215
|
export const bpSurfaceBadgeSurfacePhotoshop: string;
|
|
202
216
|
export const bpSurfaceBadgeSurfacePin: string;
|
|
203
217
|
export const bpSurfaceBadgeSurfacePowerpoint: string;
|
|
@@ -285,6 +299,8 @@ export const bpSurfaceDatePickerSurfaceDisabled: string;
|
|
|
285
299
|
export const bpSurfaceDatePickerSurfaceError: string;
|
|
286
300
|
export const bpSurfaceDatePickerSurfaceFocus: string;
|
|
287
301
|
export const bpSurfaceDatePickerSurfaceHover: string;
|
|
302
|
+
export const bpSurfaceDropdownQuaternarySurfaceHover: string;
|
|
303
|
+
export const bpSurfaceDropdownQuaternarySurfacePressed: string;
|
|
288
304
|
export const bpSurfaceDropdownSecondarySurface: string;
|
|
289
305
|
export const bpSurfaceDropdownSecondarySurfaceHover: string;
|
|
290
306
|
export const bpSurfaceDropdownSecondarySurfacePressed: string;
|
|
@@ -344,8 +360,15 @@ export const bpSurfaceInputSurfaceFocus: string;
|
|
|
344
360
|
export const bpSurfaceInputSurfaceHover: string;
|
|
345
361
|
export const bpSurfaceInputSurfaceReadOnly: string;
|
|
346
362
|
export const bpSurfaceInputChipSurface: string;
|
|
363
|
+
export const bpSurfaceInputChipSurfaceAnnotation: string;
|
|
364
|
+
export const bpSurfaceInputChipSurfaceAnnotationHover: string;
|
|
365
|
+
export const bpSurfaceInputChipSurfaceAnnotationPressed: string;
|
|
366
|
+
export const bpSurfaceInputChipSurfaceDisabled: string;
|
|
347
367
|
export const bpSurfaceInputChipSurfaceError: string;
|
|
348
368
|
export const bpSurfaceInputChipSurfaceHover: string;
|
|
369
|
+
export const bpSurfaceInputChipSurfaceVariable: string;
|
|
370
|
+
export const bpSurfaceInputChipSurfaceVariableHover: string;
|
|
371
|
+
export const bpSurfaceInputChipSurfaceVariablePressed: string;
|
|
349
372
|
export const bpSurfaceItemSmallSurface: string;
|
|
350
373
|
export const bpSurfaceItemSmallSurfaceHover: string;
|
|
351
374
|
export const bpSurfaceItemSmallSurfaceSelected: string;
|
|
@@ -493,6 +516,9 @@ export const bpTextCtaLinkSecondary: string;
|
|
|
493
516
|
export const bpTextCtaLinkSecondaryHover: string;
|
|
494
517
|
export const bpTextCtaLinkSecondaryPressed: string;
|
|
495
518
|
export const bpTextCtaPromo: string;
|
|
519
|
+
export const bpTextCtaSecondary: string;
|
|
520
|
+
export const bpTextCtaSecondaryHover: string;
|
|
521
|
+
export const bpTextCtaSecondaryPressed: string;
|
|
496
522
|
export const bpTextNavTextOnDark: string;
|
|
497
523
|
export const bpTextNavTextOnDarkFocus: string;
|
|
498
524
|
export const bpTextNavTextOnDarkHover: string;
|
|
@@ -502,6 +528,7 @@ export const bpTextNavTextOnLightFocus: string;
|
|
|
502
528
|
export const bpTextNavTextOnLightHover: string;
|
|
503
529
|
export const bpTextNavTextOnLightSelected: string;
|
|
504
530
|
export const bpTextToggleTextText: string;
|
|
531
|
+
export const bpTextTextAnnotationOnColor: string;
|
|
505
532
|
export const bpTextTextBrandOnColor: string;
|
|
506
533
|
export const bpTextTextDestructiveOnLight: string;
|
|
507
534
|
export const bpTextTextErrorOnColor: string;
|
|
@@ -514,6 +541,7 @@ export const bpTextTextOnLightSecondary: string;
|
|
|
514
541
|
export const bpTextTextOnLightSecondaryHover: string;
|
|
515
542
|
export const bpTextTextOnLightTertiary: string;
|
|
516
543
|
export const bpTextTextSuccessOnColor: string;
|
|
544
|
+
export const bpTextTextVariableOnColor: string;
|
|
517
545
|
export const bpTextTextWarningOnColor: string;
|
|
518
546
|
export const bpBoxBlue10: string;
|
|
519
547
|
export const bpBoxBlue20: string;
|
|
@@ -1000,6 +1028,19 @@ export const bpOrangeOpacity90: string;
|
|
|
1000
1028
|
export const bpOrangeOpacity00: string;
|
|
1001
1029
|
export const bpOrangeOpacity04: string;
|
|
1002
1030
|
export const bpOrangeOpacity08: string;
|
|
1031
|
+
export const bpPurpleRainOpacity12: string;
|
|
1032
|
+
export const bpPurpleRainOpacity16: string;
|
|
1033
|
+
export const bpPurpleRainOpacity20: string;
|
|
1034
|
+
export const bpPurpleRainOpacity24: string;
|
|
1035
|
+
export const bpPurpleRainOpacity30: string;
|
|
1036
|
+
export const bpPurpleRainOpacity50: string;
|
|
1037
|
+
export const bpPurpleRainOpacity60: string;
|
|
1038
|
+
export const bpPurpleRainOpacity70: string;
|
|
1039
|
+
export const bpPurpleRainOpacity80: string;
|
|
1040
|
+
export const bpPurpleRainOpacity90: string;
|
|
1041
|
+
export const bpPurpleRainOpacity00: string;
|
|
1042
|
+
export const bpPurpleRainOpacity04: string;
|
|
1043
|
+
export const bpPurpleRainOpacity08: string;
|
|
1003
1044
|
export const bpWatermelonRedOpacity12: string;
|
|
1004
1045
|
export const bpWatermelonRedOpacity16: string;
|
|
1005
1046
|
export const bpWatermelonRedOpacity20: string;
|
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const bpBackgroundBackgroundLightBlue = '#e5effa';
|
|
6
|
+
export const bpBackgroundBackgroundLightDarkBlue = '#e5ebf2';
|
|
7
|
+
export const bpBackgroundBackgroundLightGreen = '#e9f8f2';
|
|
8
|
+
export const bpBackgroundBackgroundLightGrimace = '#ece9f8';
|
|
9
|
+
export const bpBorderAccordionBorder = '#e8e8e8';
|
|
5
10
|
export const bpBorderAccordionBorderHover = '#e8e8e8';
|
|
11
|
+
export const bpBorderAccordionBorderOutlined = '#0061d5';
|
|
6
12
|
export const bpBorderAvatarBorderHover = 'rgba(0, 0, 0, 0.04)';
|
|
7
13
|
export const bpBorderAvatarBorderPressed = 'rgba(0, 0, 0, 0.08)';
|
|
8
14
|
export const bpBorderBadgeBorder = '#ffffff';
|
|
@@ -140,10 +146,14 @@ export const bpIconNavIconOnLight = '#222222';
|
|
|
140
146
|
export const bpIconNavIconOnLightFocus = '#222222';
|
|
141
147
|
export const bpIconNavIconOnLightHover = '#222222';
|
|
142
148
|
export const bpIconNavIconOnLightSelected = '#222222';
|
|
149
|
+
export const bpIconIconAnnotation = '#0057c0';
|
|
143
150
|
export const bpIconIconBlue = '#0061d5';
|
|
151
|
+
export const bpIconIconDarkBlue = '#003677';
|
|
144
152
|
export const bpIconIconDestructiveOnLight = '#d5324e';
|
|
145
153
|
export const bpIconIconErrorOnColor = '#821e30';
|
|
146
154
|
export const bpIconIconErrorOnLight = '#d5324e';
|
|
155
|
+
export const bpIconIconGreen = '#1e9b67';
|
|
156
|
+
export const bpIconIconGrimace = '#4122af';
|
|
147
157
|
export const bpIconIconIllustrator = '#ff9400';
|
|
148
158
|
export const bpIconIconIndesign = '#ff57a1';
|
|
149
159
|
export const bpIconIconInfoOnColor = '#00316b';
|
|
@@ -154,15 +164,17 @@ export const bpIconIconOnLightTertiary = 'rgba(0, 0, 0, 0.5)';
|
|
|
154
164
|
export const bpIconIconPhotoshop = '#26c9ff';
|
|
155
165
|
export const bpIconIconRequiredOnLight = '#d5324e';
|
|
156
166
|
export const bpIconIconSuccessOnColor = '#0f4e34';
|
|
167
|
+
export const bpIconIconVariable = '#8f39d5';
|
|
157
168
|
export const bpIconIconWarningOnColor = '#62480b';
|
|
158
169
|
export const bpOutlineFocusOnDark = '#ffffff';
|
|
159
170
|
export const bpOutlineFocusOnLight = '#2486fc';
|
|
160
171
|
export const bpOverlayModalOverlay = 'rgba(0, 0, 0, 0.5)';
|
|
161
172
|
export const bpOverlaySidePanelOverlay = 'rgba(0, 0, 0, 0.5)';
|
|
162
|
-
export const bpSurfaceAccordionSurfaceCollapsed = '
|
|
173
|
+
export const bpSurfaceAccordionSurfaceCollapsed = '#ffffff';
|
|
163
174
|
export const bpSurfaceAccordionSurfaceCollapsedHover = 'rgba(0, 0, 0, 0.08)';
|
|
164
175
|
export const bpSurfaceAccordionSurfaceExpanded = '#ffffff';
|
|
165
176
|
export const bpSurfaceAccordionSurfaceExpandedHover = '#ffffff';
|
|
177
|
+
export const bpSurfaceAccordionSurfaceExpandedOutlined = '#fafcfe';
|
|
166
178
|
export const bpSurfaceBadgeSurfaceAdmin = '#003c84';
|
|
167
179
|
export const bpSurfaceBadgeSurfaceAlert = '#d97417';
|
|
168
180
|
export const bpSurfaceBadgeSurfaceAnnotation = '#f5b31b';
|
|
@@ -175,6 +187,7 @@ export const bpSurfaceBadgeSurfaceCoadmin = '#9f3fed';
|
|
|
175
187
|
export const bpSurfaceBadgeSurfaceCode = '#ed3757';
|
|
176
188
|
export const bpSurfaceBadgeSurfaceCollection = '#e8e8e8';
|
|
177
189
|
export const bpSurfaceBadgeSurfaceCompleted = '#1e9b67';
|
|
190
|
+
export const bpSurfaceBadgeSurfaceContentOffline = '#20a56e';
|
|
178
191
|
export const bpSurfaceBadgeSurfaceDefault = '#6f6f6f';
|
|
179
192
|
export const bpSurfaceBadgeSurfaceDocs = '#4083f7';
|
|
180
193
|
export const bpSurfaceBadgeSurfaceDrawing = '#009aed';
|
|
@@ -198,6 +211,7 @@ export const bpSurfaceBadgeSurfaceOffline = '#26c281';
|
|
|
198
211
|
export const bpSurfaceBadgeSurfaceOnline = '#1e9b67';
|
|
199
212
|
export const bpSurfaceBadgeSurfacePages = '#ff9500';
|
|
200
213
|
export const bpSurfaceBadgeSurfacePdf = '#d0021b';
|
|
214
|
+
export const bpSurfaceBadgeSurfacePending = '#d97417';
|
|
201
215
|
export const bpSurfaceBadgeSurfacePhotoshop = '#131415';
|
|
202
216
|
export const bpSurfaceBadgeSurfacePin = '#e8e8e8';
|
|
203
217
|
export const bpSurfaceBadgeSurfacePowerpoint = '#c43e1c';
|
|
@@ -285,6 +299,8 @@ export const bpSurfaceDatePickerSurfaceDisabled = '#ffffff';
|
|
|
285
299
|
export const bpSurfaceDatePickerSurfaceError = '#ffffff';
|
|
286
300
|
export const bpSurfaceDatePickerSurfaceFocus = '#ffffff';
|
|
287
301
|
export const bpSurfaceDatePickerSurfaceHover = '#ffffff';
|
|
302
|
+
export const bpSurfaceDropdownQuaternarySurfaceHover = 'rgba(255, 255, 255, 0.04)';
|
|
303
|
+
export const bpSurfaceDropdownQuaternarySurfacePressed = 'rgba(255, 255, 255, 0.08)';
|
|
288
304
|
export const bpSurfaceDropdownSecondarySurface = 'rgba(255, 255, 255, 0.7)';
|
|
289
305
|
export const bpSurfaceDropdownSecondarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
|
|
290
306
|
export const bpSurfaceDropdownSecondarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
|
|
@@ -344,8 +360,15 @@ export const bpSurfaceInputSurfaceFocus = '#ffffff';
|
|
|
344
360
|
export const bpSurfaceInputSurfaceHover = '#ffffff';
|
|
345
361
|
export const bpSurfaceInputSurfaceReadOnly = '#fbfbfb';
|
|
346
362
|
export const bpSurfaceInputChipSurface = '#e8e8e8';
|
|
363
|
+
export const bpSurfaceInputChipSurfaceAnnotation = 'rgba(0, 97, 213, 0.08)';
|
|
364
|
+
export const bpSurfaceInputChipSurfaceAnnotationHover = 'rgba(0, 97, 213, 0.12)';
|
|
365
|
+
export const bpSurfaceInputChipSurfaceAnnotationPressed = 'rgba(0, 97, 213, 0.16)';
|
|
366
|
+
export const bpSurfaceInputChipSurfaceDisabled = 'rgba(0, 0, 0, 0.04)';
|
|
347
367
|
export const bpSurfaceInputChipSurfaceError = '#fdebee';
|
|
348
368
|
export const bpSurfaceInputChipSurfaceHover = '#e8e8e8';
|
|
369
|
+
export const bpSurfaceInputChipSurfaceVariable = 'rgba(159, 63, 237, 0.08)';
|
|
370
|
+
export const bpSurfaceInputChipSurfaceVariableHover = 'rgba(159, 63, 237, 0.12)';
|
|
371
|
+
export const bpSurfaceInputChipSurfaceVariablePressed = 'rgba(159, 63, 237, 0.16)';
|
|
349
372
|
export const bpSurfaceItemSmallSurface = '#ffffff';
|
|
350
373
|
export const bpSurfaceItemSmallSurfaceHover = '#f4f4f4';
|
|
351
374
|
export const bpSurfaceItemSmallSurfaceSelected = '#f2f7fd';
|
|
@@ -493,6 +516,9 @@ export const bpTextCtaLinkSecondary = '#6f6f6f';
|
|
|
493
516
|
export const bpTextCtaLinkSecondaryHover = '#6f6f6f';
|
|
494
517
|
export const bpTextCtaLinkSecondaryPressed = '#6f6f6f';
|
|
495
518
|
export const bpTextCtaPromo = '#4826c2';
|
|
519
|
+
export const bpTextCtaSecondary = '#6f6f6f';
|
|
520
|
+
export const bpTextCtaSecondaryHover = '#4e4e4e';
|
|
521
|
+
export const bpTextCtaSecondaryPressed = '#4e4e4e';
|
|
496
522
|
export const bpTextNavTextOnDark = '#ffffff';
|
|
497
523
|
export const bpTextNavTextOnDarkFocus = '#ffffff';
|
|
498
524
|
export const bpTextNavTextOnDarkHover = '#ffffff';
|
|
@@ -502,6 +528,7 @@ export const bpTextNavTextOnLightFocus = '#ffffff';
|
|
|
502
528
|
export const bpTextNavTextOnLightHover = '#ffffff';
|
|
503
529
|
export const bpTextNavTextOnLightSelected = '#ffffff';
|
|
504
530
|
export const bpTextToggleTextText = '#004eaa';
|
|
531
|
+
export const bpTextTextAnnotationOnColor = '#0057c0';
|
|
505
532
|
export const bpTextTextBrandOnColor = '#ffffff';
|
|
506
533
|
export const bpTextTextDestructiveOnLight = '#d5324e';
|
|
507
534
|
export const bpTextTextErrorOnColor = '#821e30';
|
|
@@ -514,6 +541,7 @@ export const bpTextTextOnLightSecondary = '#6f6f6f';
|
|
|
514
541
|
export const bpTextTextOnLightSecondaryHover = '#4e4e4e';
|
|
515
542
|
export const bpTextTextOnLightTertiary = '#909090';
|
|
516
543
|
export const bpTextTextSuccessOnColor = '#0f4e34';
|
|
544
|
+
export const bpTextTextVariableOnColor = '#8f39d5';
|
|
517
545
|
export const bpTextTextWarningOnColor = '#62480b';
|
|
518
546
|
export const bpBoxBlue10 = '#e5effa';
|
|
519
547
|
export const bpBoxBlue20 = '#ccdff7';
|
|
@@ -1000,6 +1028,19 @@ export const bpOrangeOpacity90 = 'rgba(245, 179, 27, 0.9)';
|
|
|
1000
1028
|
export const bpOrangeOpacity00 = 'rgba(245, 179, 27, 0)';
|
|
1001
1029
|
export const bpOrangeOpacity04 = 'rgba(245, 179, 27, 0.04)';
|
|
1002
1030
|
export const bpOrangeOpacity08 = 'rgba(245, 179, 27, 0.08)';
|
|
1031
|
+
export const bpPurpleRainOpacity12 = 'rgba(159, 63, 237, 0.12)';
|
|
1032
|
+
export const bpPurpleRainOpacity16 = 'rgba(159, 63, 237, 0.16)';
|
|
1033
|
+
export const bpPurpleRainOpacity20 = 'rgba(159, 63, 237, 0.2)';
|
|
1034
|
+
export const bpPurpleRainOpacity24 = 'rgba(159, 63, 237, 0.24)';
|
|
1035
|
+
export const bpPurpleRainOpacity30 = 'rgba(159, 63, 237, 0.3)';
|
|
1036
|
+
export const bpPurpleRainOpacity50 = 'rgba(159, 63, 237, 0.5)';
|
|
1037
|
+
export const bpPurpleRainOpacity60 = 'rgba(159, 63, 237, 0.6)';
|
|
1038
|
+
export const bpPurpleRainOpacity70 = 'rgba(159, 63, 237, 0.7)';
|
|
1039
|
+
export const bpPurpleRainOpacity80 = 'rgba(159, 63, 237, 0.8)';
|
|
1040
|
+
export const bpPurpleRainOpacity90 = 'rgba(159, 63, 237, 0.9)';
|
|
1041
|
+
export const bpPurpleRainOpacity00 = 'rgba(159, 63, 237, 0)';
|
|
1042
|
+
export const bpPurpleRainOpacity04 = 'rgba(159, 63, 237, 0.04)';
|
|
1043
|
+
export const bpPurpleRainOpacity08 = 'rgba(159, 63, 237, 0.08)';
|
|
1003
1044
|
export const bpWatermelonRedOpacity12 = 'rgba(237, 55, 87, 0.12)';
|
|
1004
1045
|
export const bpWatermelonRedOpacity16 = 'rgba(237, 55, 87, 0.16)';
|
|
1005
1046
|
export const bpWatermelonRedOpacity20 = 'rgba(237, 55, 87, 0.2)';
|
|
@@ -1067,6 +1108,6 @@ export const bpDurationMedium = '150ms';
|
|
|
1067
1108
|
export const bpDurationShort = '100ms';
|
|
1068
1109
|
export const bpOpacityHidden = '0';
|
|
1069
1110
|
export const bpOpacityVisible = '1';
|
|
1070
|
-
export const bpScaleDefault = '
|
|
1071
|
-
export const bpScaleLarge = '
|
|
1072
|
-
export const bpScaleSmall = '
|
|
1111
|
+
export const bpScaleDefault = '1.00';
|
|
1112
|
+
export const bpScaleLarge = '1.12';
|
|
1113
|
+
export const bpScaleSmall = '0.98';
|
|
@@ -526,6 +526,19 @@
|
|
|
526
526
|
--bp-orange-opacity-00: rgba(245, 179, 27, 0);
|
|
527
527
|
--bp-orange-opacity-04: rgba(245, 179, 27, 0.04);
|
|
528
528
|
--bp-orange-opacity-08: rgba(245, 179, 27, 0.08);
|
|
529
|
+
--bp-purple-rain-opacity-12: rgba(159, 63, 237, 0.12);
|
|
530
|
+
--bp-purple-rain-opacity-16: rgba(159, 63, 237, 0.16);
|
|
531
|
+
--bp-purple-rain-opacity-20: rgba(159, 63, 237, 0.2);
|
|
532
|
+
--bp-purple-rain-opacity-24: rgba(159, 63, 237, 0.24);
|
|
533
|
+
--bp-purple-rain-opacity-30: rgba(159, 63, 237, 0.3);
|
|
534
|
+
--bp-purple-rain-opacity-50: rgba(159, 63, 237, 0.5);
|
|
535
|
+
--bp-purple-rain-opacity-60: rgba(159, 63, 237, 0.6);
|
|
536
|
+
--bp-purple-rain-opacity-70: rgba(159, 63, 237, 0.7);
|
|
537
|
+
--bp-purple-rain-opacity-80: rgba(159, 63, 237, 0.8);
|
|
538
|
+
--bp-purple-rain-opacity-90: rgba(159, 63, 237, 0.9);
|
|
539
|
+
--bp-purple-rain-opacity-00: rgba(159, 63, 237, 0);
|
|
540
|
+
--bp-purple-rain-opacity-04: rgba(159, 63, 237, 0.04);
|
|
541
|
+
--bp-purple-rain-opacity-08: rgba(159, 63, 237, 0.08);
|
|
529
542
|
--bp-watermelon-red-opacity-12: rgba(237, 55, 87, 0.12);
|
|
530
543
|
--bp-watermelon-red-opacity-16: rgba(237, 55, 87, 0.16);
|
|
531
544
|
--bp-watermelon-red-opacity-20: rgba(237, 55, 87, 0.2);
|
|
@@ -593,10 +606,16 @@
|
|
|
593
606
|
--bp-duration-short: 100ms;
|
|
594
607
|
--bp-opacity-hidden: 0;
|
|
595
608
|
--bp-opacity-visible: 1;
|
|
596
|
-
--bp-scale-default:
|
|
597
|
-
--bp-scale-large:
|
|
598
|
-
--bp-scale-small:
|
|
609
|
+
--bp-scale-default: 1;
|
|
610
|
+
--bp-scale-large: 1.12;
|
|
611
|
+
--bp-scale-small: 0.98;
|
|
612
|
+
--bp-background-background-light-blue: var(--bp-box-blue-10);
|
|
613
|
+
--bp-background-background-light-dark-blue: var(--bp-dark-blue-10);
|
|
614
|
+
--bp-background-background-light-green: var(--bp-green-light-10);
|
|
615
|
+
--bp-background-background-light-grimace: var(--bp-grimace-10);
|
|
616
|
+
--bp-border-accordion-border: var(--bp-gray-10);
|
|
599
617
|
--bp-border-accordion-border-hover: var(--bp-gray-10);
|
|
618
|
+
--bp-border-accordion-border-outlined: var(--bp-box-blue-100);
|
|
600
619
|
--bp-border-avatar-border-hover: var(--bp-black-opacity-04);
|
|
601
620
|
--bp-border-avatar-border-pressed: var(--bp-black-opacity-08);
|
|
602
621
|
--bp-border-badge-border: var(--bp-gray-white);
|
|
@@ -722,10 +741,14 @@
|
|
|
722
741
|
--bp-icon-nav-icon-on-light-focus: var(--bp-gray-100);
|
|
723
742
|
--bp-icon-nav-icon-on-light-hover: var(--bp-gray-100);
|
|
724
743
|
--bp-icon-nav-icon-on-light-selected: var(--bp-gray-100);
|
|
744
|
+
--bp-icon-icon-annotation: var(--bp-box-blue-110);
|
|
725
745
|
--bp-icon-icon-blue: var(--bp-box-blue-100);
|
|
746
|
+
--bp-icon-icon-dark-blue: var(--bp-dark-blue-110);
|
|
726
747
|
--bp-icon-icon-destructive-on-light: var(--bp-watermelon-red-110);
|
|
727
748
|
--bp-icon-icon-error-on-color: var(--bp-watermelon-red-145);
|
|
728
749
|
--bp-icon-icon-error-on-light: var(--bp-watermelon-red-110);
|
|
750
|
+
--bp-icon-icon-green: var(--bp-green-light-120);
|
|
751
|
+
--bp-icon-icon-grimace: var(--bp-grimace-110);
|
|
729
752
|
--bp-icon-icon-info-on-color: var(--bp-box-blue-150);
|
|
730
753
|
--bp-icon-icon-on-dark: var(--bp-gray-white);
|
|
731
754
|
--bp-icon-icon-on-light: var(--bp-black-opacity-90);
|
|
@@ -733,15 +756,17 @@
|
|
|
733
756
|
--bp-icon-icon-on-light-tertiary: var(--bp-black-opacity-50);
|
|
734
757
|
--bp-icon-icon-required-on-light: var(--bp-watermelon-red-110);
|
|
735
758
|
--bp-icon-icon-success-on-color: var(--bp-green-light-160);
|
|
759
|
+
--bp-icon-icon-variable: var(--bp-purple-rain-110);
|
|
736
760
|
--bp-icon-icon-warning-on-color: var(--bp-yellorange-160);
|
|
737
761
|
--bp-outline-focus-on-dark: var(--bp-gray-white);
|
|
738
762
|
--bp-outline-focus-on-light: var(--bp-light-blue-100);
|
|
739
763
|
--bp-overlay-modal-overlay: var(--bp-black-opacity-50);
|
|
740
764
|
--bp-overlay-side-panel-overlay: var(--bp-black-opacity-50);
|
|
741
|
-
--bp-surface-accordion-surface-collapsed: var(--bp-
|
|
765
|
+
--bp-surface-accordion-surface-collapsed: var(--bp-gray-white);
|
|
742
766
|
--bp-surface-accordion-surface-collapsed-hover: var(--bp-black-opacity-08);
|
|
743
767
|
--bp-surface-accordion-surface-expanded: var(--bp-gray-white);
|
|
744
768
|
--bp-surface-accordion-surface-expanded-hover: var(--bp-gray-white);
|
|
769
|
+
--bp-surface-accordion-surface-expanded-outlined: var(--bp-box-blue-02);
|
|
745
770
|
--bp-surface-badge-surface-admin: var(--bp-dark-blue-100);
|
|
746
771
|
--bp-surface-badge-surface-alert: var(--bp-orange-110);
|
|
747
772
|
--bp-surface-badge-surface-annotation: var(--bp-yellorange-100);
|
|
@@ -754,6 +779,7 @@
|
|
|
754
779
|
--bp-surface-badge-surface-code: var(--bp-watermelon-red-100);
|
|
755
780
|
--bp-surface-badge-surface-collection: var(--bp-gray-10);
|
|
756
781
|
--bp-surface-badge-surface-completed: var(--bp-green-light-120);
|
|
782
|
+
--bp-surface-badge-surface-content-offline: var(--bp-green-light-115);
|
|
757
783
|
--bp-surface-badge-surface-default: var(--bp-gray-65);
|
|
758
784
|
--bp-surface-badge-surface-error: var(--bp-watermelon-red-110);
|
|
759
785
|
--bp-surface-badge-surface-external: var(--bp-gray-50);
|
|
@@ -768,6 +794,7 @@
|
|
|
768
794
|
--bp-surface-badge-surface-notification: var(--bp-watermelon-red-110);
|
|
769
795
|
--bp-surface-badge-surface-offline: var(--bp-green-light-100);
|
|
770
796
|
--bp-surface-badge-surface-online: var(--bp-green-light-120);
|
|
797
|
+
--bp-surface-badge-surface-pending: var(--bp-orange-110);
|
|
771
798
|
--bp-surface-badge-surface-pin: var(--bp-gray-10);
|
|
772
799
|
--bp-surface-badge-surface-presentation: var(--bp-orange-110);
|
|
773
800
|
--bp-surface-badge-surface-progress: var(--bp-yellorange-100);
|
|
@@ -847,6 +874,8 @@
|
|
|
847
874
|
--bp-surface-date-picker-surface-error: var(--bp-gray-white);
|
|
848
875
|
--bp-surface-date-picker-surface-focus: var(--bp-gray-white);
|
|
849
876
|
--bp-surface-date-picker-surface-hover: var(--bp-gray-white);
|
|
877
|
+
--bp-surface-dropdown-quaternary-surface-hover: var(--bp-white-opacity-04);
|
|
878
|
+
--bp-surface-dropdown-quaternary-surface-pressed: var(--bp-white-opacity-08);
|
|
850
879
|
--bp-surface-dropdown-secondary-surface: var(--bp-white-opacity-70);
|
|
851
880
|
--bp-surface-dropdown-secondary-surface-hover: var(--bp-black-opacity-04);
|
|
852
881
|
--bp-surface-dropdown-secondary-surface-pressed: var(--bp-black-opacity-08);
|
|
@@ -906,8 +935,15 @@
|
|
|
906
935
|
--bp-surface-input-surface-hover: var(--bp-gray-white);
|
|
907
936
|
--bp-surface-input-surface-read-only: var(--bp-gray-02);
|
|
908
937
|
--bp-surface-input-chip-surface: var(--bp-gray-10);
|
|
938
|
+
--bp-surface-input-chip-surface-annotation: var(--bp-box-blue-opacity-08);
|
|
939
|
+
--bp-surface-input-chip-surface-annotation-hover: var(--bp-box-blue-opacity-12);
|
|
940
|
+
--bp-surface-input-chip-surface-annotation-pressed: var(--bp-box-blue-opacity-16);
|
|
941
|
+
--bp-surface-input-chip-surface-disabled: var(--bp-black-opacity-04);
|
|
909
942
|
--bp-surface-input-chip-surface-error: var(--bp-watermelon-red-10);
|
|
910
943
|
--bp-surface-input-chip-surface-hover: var(--bp-gray-10);
|
|
944
|
+
--bp-surface-input-chip-surface-variable: var(--bp-purple-rain-opacity-08);
|
|
945
|
+
--bp-surface-input-chip-surface-variable-hover: var(--bp-purple-rain-opacity-12);
|
|
946
|
+
--bp-surface-input-chip-surface-variable-pressed: var(--bp-purple-rain-opacity-16);
|
|
911
947
|
--bp-surface-item-small-surface: var(--bp-gray-white);
|
|
912
948
|
--bp-surface-item-small-surface-hover: var(--bp-gray-05);
|
|
913
949
|
--bp-surface-item-small-surface-selected: var(--bp-box-blue-05);
|
|
@@ -1049,6 +1085,9 @@
|
|
|
1049
1085
|
--bp-text-cta-link-secondary-hover: var(--bp-gray-65);
|
|
1050
1086
|
--bp-text-cta-link-secondary-pressed: var(--bp-gray-65);
|
|
1051
1087
|
--bp-text-cta-promo: var(--bp-grimace-100);
|
|
1088
|
+
--bp-text-cta-secondary: var(--bp-gray-65);
|
|
1089
|
+
--bp-text-cta-secondary-hover: var(--bp-gray-80);
|
|
1090
|
+
--bp-text-cta-secondary-pressed: var(--bp-gray-80);
|
|
1052
1091
|
--bp-text-nav-text-on-dark: var(--bp-gray-white);
|
|
1053
1092
|
--bp-text-nav-text-on-dark-focus: var(--bp-gray-white);
|
|
1054
1093
|
--bp-text-nav-text-on-dark-hover: var(--bp-gray-white);
|
|
@@ -1058,6 +1097,7 @@
|
|
|
1058
1097
|
--bp-text-nav-text-on-light-hover: var(--bp-gray-white);
|
|
1059
1098
|
--bp-text-nav-text-on-light-selected: var(--bp-gray-white);
|
|
1060
1099
|
--bp-text-toggle-text-text: var(--bp-box-blue-120);
|
|
1100
|
+
--bp-text-text-annotation-on-color: var(--bp-box-blue-110);
|
|
1061
1101
|
--bp-text-text-brand-on-color: var(--bp-gray-white);
|
|
1062
1102
|
--bp-text-text-destructive-on-light: var(--bp-watermelon-red-110);
|
|
1063
1103
|
--bp-text-text-error-on-color: var(--bp-watermelon-red-145);
|
|
@@ -1070,5 +1110,6 @@
|
|
|
1070
1110
|
--bp-text-text-on-light-secondary-hover: var(--bp-gray-80);
|
|
1071
1111
|
--bp-text-text-on-light-tertiary: var(--bp-gray-50);
|
|
1072
1112
|
--bp-text-text-success-on-color: var(--bp-green-light-160);
|
|
1113
|
+
--bp-text-text-variable-on-color: var(--bp-purple-rain-110);
|
|
1073
1114
|
--bp-text-text-warning-on-color: var(--bp-yellorange-160);
|
|
1074
1115
|
}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
+
export const bpBackgroundBackgroundLightBlue: string;
|
|
2
|
+
export const bpBackgroundBackgroundLightDarkBlue: string;
|
|
3
|
+
export const bpBackgroundBackgroundLightGreen: string;
|
|
4
|
+
export const bpBackgroundBackgroundLightGrimace: string;
|
|
5
|
+
export const bpBorderAccordionBorder: string;
|
|
1
6
|
export const bpBorderAccordionBorderHover: string;
|
|
7
|
+
export const bpBorderAccordionBorderOutlined: string;
|
|
2
8
|
export const bpBorderAvatarBorderHover: string;
|
|
3
9
|
export const bpBorderAvatarBorderPressed: string;
|
|
4
10
|
export const bpBorderBadgeBorder: string;
|
|
@@ -136,10 +142,14 @@ export const bpIconNavIconOnLight: string;
|
|
|
136
142
|
export const bpIconNavIconOnLightFocus: string;
|
|
137
143
|
export const bpIconNavIconOnLightHover: string;
|
|
138
144
|
export const bpIconNavIconOnLightSelected: string;
|
|
145
|
+
export const bpIconIconAnnotation: string;
|
|
139
146
|
export const bpIconIconBlue: string;
|
|
147
|
+
export const bpIconIconDarkBlue: string;
|
|
140
148
|
export const bpIconIconDestructiveOnLight: string;
|
|
141
149
|
export const bpIconIconErrorOnColor: string;
|
|
142
150
|
export const bpIconIconErrorOnLight: string;
|
|
151
|
+
export const bpIconIconGreen: string;
|
|
152
|
+
export const bpIconIconGrimace: string;
|
|
143
153
|
export const bpIconIconIllustrator: string;
|
|
144
154
|
export const bpIconIconIndesign: string;
|
|
145
155
|
export const bpIconIconInfoOnColor: string;
|
|
@@ -150,6 +160,7 @@ export const bpIconIconOnLightTertiary: string;
|
|
|
150
160
|
export const bpIconIconPhotoshop: string;
|
|
151
161
|
export const bpIconIconRequiredOnLight: string;
|
|
152
162
|
export const bpIconIconSuccessOnColor: string;
|
|
163
|
+
export const bpIconIconVariable: string;
|
|
153
164
|
export const bpIconIconWarningOnColor: string;
|
|
154
165
|
export const bpOutlineFocusOnDark: string;
|
|
155
166
|
export const bpOutlineFocusOnLight: string;
|
|
@@ -159,6 +170,7 @@ export const bpSurfaceAccordionSurfaceCollapsed: string;
|
|
|
159
170
|
export const bpSurfaceAccordionSurfaceCollapsedHover: string;
|
|
160
171
|
export const bpSurfaceAccordionSurfaceExpanded: string;
|
|
161
172
|
export const bpSurfaceAccordionSurfaceExpandedHover: string;
|
|
173
|
+
export const bpSurfaceAccordionSurfaceExpandedOutlined: string;
|
|
162
174
|
export const bpSurfaceBadgeSurfaceAdmin: string;
|
|
163
175
|
export const bpSurfaceBadgeSurfaceAlert: string;
|
|
164
176
|
export const bpSurfaceBadgeSurfaceAnnotation: string;
|
|
@@ -171,6 +183,7 @@ export const bpSurfaceBadgeSurfaceCoadmin: string;
|
|
|
171
183
|
export const bpSurfaceBadgeSurfaceCode: string;
|
|
172
184
|
export const bpSurfaceBadgeSurfaceCollection: string;
|
|
173
185
|
export const bpSurfaceBadgeSurfaceCompleted: string;
|
|
186
|
+
export const bpSurfaceBadgeSurfaceContentOffline: string;
|
|
174
187
|
export const bpSurfaceBadgeSurfaceDefault: string;
|
|
175
188
|
export const bpSurfaceBadgeSurfaceDocs: string;
|
|
176
189
|
export const bpSurfaceBadgeSurfaceDrawing: string;
|
|
@@ -194,6 +207,7 @@ export const bpSurfaceBadgeSurfaceOffline: string;
|
|
|
194
207
|
export const bpSurfaceBadgeSurfaceOnline: string;
|
|
195
208
|
export const bpSurfaceBadgeSurfacePages: string;
|
|
196
209
|
export const bpSurfaceBadgeSurfacePdf: string;
|
|
210
|
+
export const bpSurfaceBadgeSurfacePending: string;
|
|
197
211
|
export const bpSurfaceBadgeSurfacePhotoshop: string;
|
|
198
212
|
export const bpSurfaceBadgeSurfacePin: string;
|
|
199
213
|
export const bpSurfaceBadgeSurfacePowerpoint: string;
|
|
@@ -281,6 +295,8 @@ export const bpSurfaceDatePickerSurfaceDisabled: string;
|
|
|
281
295
|
export const bpSurfaceDatePickerSurfaceError: string;
|
|
282
296
|
export const bpSurfaceDatePickerSurfaceFocus: string;
|
|
283
297
|
export const bpSurfaceDatePickerSurfaceHover: string;
|
|
298
|
+
export const bpSurfaceDropdownQuaternarySurfaceHover: string;
|
|
299
|
+
export const bpSurfaceDropdownQuaternarySurfacePressed: string;
|
|
284
300
|
export const bpSurfaceDropdownSecondarySurface: string;
|
|
285
301
|
export const bpSurfaceDropdownSecondarySurfaceHover: string;
|
|
286
302
|
export const bpSurfaceDropdownSecondarySurfacePressed: string;
|
|
@@ -340,8 +356,15 @@ export const bpSurfaceInputSurfaceFocus: string;
|
|
|
340
356
|
export const bpSurfaceInputSurfaceHover: string;
|
|
341
357
|
export const bpSurfaceInputSurfaceReadOnly: string;
|
|
342
358
|
export const bpSurfaceInputChipSurface: string;
|
|
359
|
+
export const bpSurfaceInputChipSurfaceAnnotation: string;
|
|
360
|
+
export const bpSurfaceInputChipSurfaceAnnotationHover: string;
|
|
361
|
+
export const bpSurfaceInputChipSurfaceAnnotationPressed: string;
|
|
362
|
+
export const bpSurfaceInputChipSurfaceDisabled: string;
|
|
343
363
|
export const bpSurfaceInputChipSurfaceError: string;
|
|
344
364
|
export const bpSurfaceInputChipSurfaceHover: string;
|
|
365
|
+
export const bpSurfaceInputChipSurfaceVariable: string;
|
|
366
|
+
export const bpSurfaceInputChipSurfaceVariableHover: string;
|
|
367
|
+
export const bpSurfaceInputChipSurfaceVariablePressed: string;
|
|
345
368
|
export const bpSurfaceItemSmallSurface: string;
|
|
346
369
|
export const bpSurfaceItemSmallSurfaceHover: string;
|
|
347
370
|
export const bpSurfaceItemSmallSurfaceSelected: string;
|
|
@@ -489,6 +512,9 @@ export const bpTextCtaLinkSecondary: string;
|
|
|
489
512
|
export const bpTextCtaLinkSecondaryHover: string;
|
|
490
513
|
export const bpTextCtaLinkSecondaryPressed: string;
|
|
491
514
|
export const bpTextCtaPromo: string;
|
|
515
|
+
export const bpTextCtaSecondary: string;
|
|
516
|
+
export const bpTextCtaSecondaryHover: string;
|
|
517
|
+
export const bpTextCtaSecondaryPressed: string;
|
|
492
518
|
export const bpTextNavTextOnDark: string;
|
|
493
519
|
export const bpTextNavTextOnDarkFocus: string;
|
|
494
520
|
export const bpTextNavTextOnDarkHover: string;
|
|
@@ -498,6 +524,7 @@ export const bpTextNavTextOnLightFocus: string;
|
|
|
498
524
|
export const bpTextNavTextOnLightHover: string;
|
|
499
525
|
export const bpTextNavTextOnLightSelected: string;
|
|
500
526
|
export const bpTextToggleTextText: string;
|
|
527
|
+
export const bpTextTextAnnotationOnColor: string;
|
|
501
528
|
export const bpTextTextBrandOnColor: string;
|
|
502
529
|
export const bpTextTextDestructiveOnLight: string;
|
|
503
530
|
export const bpTextTextErrorOnColor: string;
|
|
@@ -510,6 +537,7 @@ export const bpTextTextOnLightSecondary: string;
|
|
|
510
537
|
export const bpTextTextOnLightSecondaryHover: string;
|
|
511
538
|
export const bpTextTextOnLightTertiary: string;
|
|
512
539
|
export const bpTextTextSuccessOnColor: string;
|
|
540
|
+
export const bpTextTextVariableOnColor: string;
|
|
513
541
|
export const bpTextTextWarningOnColor: string;
|
|
514
542
|
export const bpBoxBlue10: string;
|
|
515
543
|
export const bpBoxBlue20: string;
|
|
@@ -996,6 +1024,19 @@ export const bpOrangeOpacity90: string;
|
|
|
996
1024
|
export const bpOrangeOpacity00: string;
|
|
997
1025
|
export const bpOrangeOpacity04: string;
|
|
998
1026
|
export const bpOrangeOpacity08: string;
|
|
1027
|
+
export const bpPurpleRainOpacity12: string;
|
|
1028
|
+
export const bpPurpleRainOpacity16: string;
|
|
1029
|
+
export const bpPurpleRainOpacity20: string;
|
|
1030
|
+
export const bpPurpleRainOpacity24: string;
|
|
1031
|
+
export const bpPurpleRainOpacity30: string;
|
|
1032
|
+
export const bpPurpleRainOpacity50: string;
|
|
1033
|
+
export const bpPurpleRainOpacity60: string;
|
|
1034
|
+
export const bpPurpleRainOpacity70: string;
|
|
1035
|
+
export const bpPurpleRainOpacity80: string;
|
|
1036
|
+
export const bpPurpleRainOpacity90: string;
|
|
1037
|
+
export const bpPurpleRainOpacity00: string;
|
|
1038
|
+
export const bpPurpleRainOpacity04: string;
|
|
1039
|
+
export const bpPurpleRainOpacity08: string;
|
|
999
1040
|
export const bpWatermelonRedOpacity12: string;
|
|
1000
1041
|
export const bpWatermelonRedOpacity16: string;
|
|
1001
1042
|
export const bpWatermelonRedOpacity20: string;
|