@box/blueprint-web-assets 4.49.3 → 4.51.1

package/dist/tokens/tokens.d.ts

@@ -687,11 +687,46 @@ export const Space15: string;
 export const Space16: string;
 export const Space18: string;
 export const Space20: string;
-export const Dropshadow3: { x: string; y: string; blur: string; spread: string; color: string; type: string };
-export const Dropshadow3Inverse: { x: string; y: string; blur: string; spread: string; color: string; type: string };
-export const Dropshadow2: { x: string; y: string; blur: string; spread: string; color: string; type: string };
-export const Dropshadow1: { x: string; y: string; blur: string; spread: string; color: string; type: string };
-export const Innershadow1: { x: string; y: string; blur: string; spread: string; color: string; type: string };
+export const Dropshadow3: {
+    x: string;
+    y: string;
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+};
+export const Dropshadow3Inverse: {
+    x: string;
+    y: string;
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+};
+export const Dropshadow2: {
+    x: string;
+    y: string;
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+};
+export const Dropshadow1: {
+    x: string;
+    y: string;
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+};
+export const Innershadow1: {
+    x: string;
+    y: string;
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+};
 export const BlackOpacity80: string;
 export const BlackOpacity60: string;
 export const BlackOpacity50: string;

package/dist/tokens/tokens.js

@@ -14,12 +14,12 @@ export const SurfaceMenuSurface = '#ffffff';
 export const SurfaceMenuSurfaceHover = '#f4f4f4';
 export const SurfaceMenuSurfacePressed = '#f4f4f4';
 export const SurfaceMenuSurfaceFocus = '#f4f4f4';
-export const SurfaceSurfaceBrand = '#0061D5';
-export const SurfaceSurfaceBrandHover = '#006AE9';
-export const SurfaceSurfaceBrandPressed = '#004EAC';
+export const SurfaceSurfaceBrand = '#0061d5';
+export const SurfaceSurfaceBrandHover = '#006ae9';
+export const SurfaceSurfaceBrandPressed = '#004eac';
 export const SurfaceSurfaceBrandSecondary = '#e5effa';
-export const SurfaceSurfaceBrandBusy = '#0061D5';
-export const SurfaceSurfaceBrandDisabled = '#0061D5';
+export const SurfaceSurfaceBrandBusy = '#0061d5';
+export const SurfaceSurfaceBrandDisabled = '#0061d5';
 export const SurfaceCtaSurfaceSecondary = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryBusy = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryDisabled = '#ffffff';
@@ -70,13 +70,13 @@ export const SurfaceStatusSurfacePending = '#a7a7a7';
 export const SurfaceStatusSurfaceScheduled = '#9f3fed';
 export const SurfaceStatusSurfaceUploading = '#0061d5';
 export const SurfaceStatusSurfaceInprogress = '#f5b31b';
-export const SurfaceCtaSurfaceOutline = 'rgba(0,0,0,0)';
-export const SurfaceCtaSurfaceOutlineHover = 'rgba(0,0,0,0.04)';
-export const SurfaceCtaSurfaceOutlinePressed = 'rgba(0,0,0,0.08)';
-export const SurfaceCtaSurfaceIcon = 'rgba(0,0,0,0)';
-export const SurfaceCtaSurfaceIconDisabled = 'rgba(0,0,0,0)';
-export const SurfaceCtaSurfaceIconHover = 'rgba(0,0,0,0.04)';
-export const SurfaceCtaSurfaceIconPressed = 'rgba(0,0,0,0.08)';
+export const SurfaceCtaSurfaceOutline = 'rgba(0, 0, 0, 0)';
+export const SurfaceCtaSurfaceOutlineHover = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceCtaSurfaceOutlinePressed = 'rgba(0, 0, 0, 0.08)';
+export const SurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
+export const SurfaceCtaSurfaceIconDisabled = 'rgba(0, 0, 0, 0)';
+export const SurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
 export const SurfaceCtaSurfaceIconUtility = '#e8e8e8';
 export const SurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
 export const SurfaceCtaSurfaceIconUtilityPressed = '#bcbcbc';
@@ -125,32 +125,32 @@ export const SurfaceSwitchSurfaceHover = '#ffffff';
 export const SurfaceSwitchSurfaceOff = '#d3d3d3';
 export const SurfaceSwitchSurfaceOffHover = '#bcbcbc';
 export const SurfaceSwitchSurfaceOn = '#0061d5';
-export const SurfaceSwitchSurfaceOnHover = '#2079E3';
+export const SurfaceSwitchSurfaceOnHover = '#2079e3';
 export const SurfaceRadioSurface = '#ffffff';
 export const SurfaceRadioSurfaceHover = '#ffffff';
 export const SurfaceRadioSurfaceSelected = '#0061d5';
-export const SurfaceRadioSurfaceSelectedHover = '#2079E3';
+export const SurfaceRadioSurfaceSelectedHover = '#2079e3';
 export const SurfaceCheckboxSurface = '#ffffff';
 export const SurfaceCheckboxSurfaceHover = '#ffffff';
 export const SurfaceCheckboxSurfaceSelected = '#0061d5';
-export const SurfaceCheckboxSurfaceSelectedHover = '#2079E3';
+export const SurfaceCheckboxSurfaceSelectedHover = '#2079e3';
 export const SurfaceGhostSurface = '#fbfbfb';
 export const SurfaceGhostSurfaceSecondary = '#f4f4f4';
 export const SurfaceInputchipSurface = '#e8e8e8';
 export const SurfaceInputchipSurfaceHover = '#e8e8e8';
 export const SurfaceInputchipSurfaceError = '#fdebee';
-export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
+export const SurfaceFilterchipSurfaceMulti = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0, 0, 0, 0.08)';
 export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
 export const SurfaceFilterchipSurfaceMultiOnHover = '#ccdff7';
-export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
+export const SurfaceFilterchipSurfaceSingle = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0, 0, 0, 0.08)';
 export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
 export const SurfaceFilterchipSurfaceSingleOnHover = '#0061d5';
-export const SurfaceSlidertrackSurface = '#6F6F6F';
+export const SurfaceSlidertrackSurface = '#6f6f6f';
 export const SurfaceSliderthumbSurface = '#0061d5';
 export const SurfaceSliderthumbSurfaceHover = '#2486fc';
-export const SurfaceScrollbarSurface = 'rgba(0,0,0,0.5)';
+export const SurfaceScrollbarSurface = 'rgba(0, 0, 0, 0.5)';
 export const SurfaceSearchSurface = '#f4f4f4';
 export const SurfaceSearchGlobalSurface = '#f4f4f4';
 export const SurfaceSearchSurfaceHover = '#fbfbfb';
@@ -166,7 +166,7 @@ export const SurfaceAccordionSurfaceHover = '#f4f4f4';
 export const SurfaceBadgeImageSurface = '#26c281';
 export const SurfaceBadgeCanvasSurface = '#f1811a';
 export const SurfaceBadgeBoxnoteSurface = '#e8e8e8';
-export const SurfaceBadgeFolderexternalSurface = '#6F6F6F';
+export const SurfaceBadgeFolderexternalSurface = '#6f6f6f';
 export const SurfaceBadgeFoldersharedSurface = '#2486fc';
 export const SurfaceBadgeRelaySurface = '#1d6bca';
 export const SurfaceBadgeMentionSurface = '#1d6bca';
@@ -174,8 +174,8 @@ export const SurfaceBadgeTaskSurface = '#2486fc';
 export const SurfaceBadgeTaskapprovalSurface = '#1d6bca';
 export const SurfaceBadgeAnnotationSurface = '#f5b31b';
 export const SurfaceBadgeCompletedSurface = '#26c281';
-export const SurfaceBadgeRejectedSurface = '#D5324E';
-export const SurfaceBadgeErrorSurface = '#D5324E';
+export const SurfaceBadgeRejectedSurface = '#d5324e';
+export const SurfaceBadgeErrorSurface = '#d5324e';
 export const SurfaceBadgeExternalSurface = '#909090';
 export const SurfaceBadgeAdminSurface = '#003c84';
 export const SurfaceBadgeCoadminSurface = '#9f3fed';
@@ -184,18 +184,18 @@ export const SurfaceBadgePinSurface = '#e8e8e8';
 export const SurfaceBadgeCollectionSurface = '#e8e8e8';
 export const SurfaceBadgeOfflineSurface = '#26c281';
 export const SurfaceBadgeProgressSurface = '#f5b31b';
-export const SurfaceBadgeNotificationSurface = '#D5324E';
-export const SurfaceBadgePdfSurface = '#D0021B';
-export const SurfaceBadgeDocsSurface = '#4083F7';
-export const SurfaceBadgeSheetsSurface = '#21A464';
-export const SurfaceBadgePagesSurface = '#FF9500';
-export const SurfaceBadgeKeynoteSurface = '#0A84FF';
-export const SurfaceBadgeVideoSurface = '#009AED';
-export const SurfaceChipButtonSurface = 'rgba(0,0,0,0.04)';
-export const SurfaceChipButtonSurfaceHover = 'rgba(0,0,0,0.08)';
+export const SurfaceBadgeNotificationSurface = '#d5324e';
+export const SurfaceBadgePdfSurface = '#d0021b';
+export const SurfaceBadgeDocsSurface = '#4083f7';
+export const SurfaceBadgeSheetsSurface = '#21a464';
+export const SurfaceBadgePagesSurface = '#ff9500';
+export const SurfaceBadgeKeynoteSurface = '#0a84ff';
+export const SurfaceBadgeVideoSurface = '#009aed';
+export const SurfaceChipButtonSurface = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceChipButtonSurfaceHover = 'rgba(0, 0, 0, 0.08)';
 export const SurfacePageSurface = '#ffffff';
-export const SurfaceOptionGridSurfaceHover = 'rgba(0,0,0,0.04)';
-export const SurfaceOptionGridSurfaceSelected = 'rgba(0,0,0,0.08)';
+export const SurfaceOptionGridSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const SurfaceOptionGridSurfaceSelected = 'rgba(0, 0, 0, 0.08)';
 export const SurfaceDropdownPrimarySurfaceHover = '#f4f4f4';
 export const SurfaceDropdownPrimarySurfacePressed = '#e8e8e8';
 export const SurfaceDropdownSecondarySurface = '#ffffff';
@@ -211,7 +211,7 @@ export const SurfaceProgressbarSurfaceBrand = '#0061d5';
 export const SurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
 export const SurfaceIllustrationSurfaceBox = '#0061d5';
 export const SurfaceUploadSurfaceBrandNeutral = '#0061d5';
-export const SurfaceCtaSurfacePromo = '#4122AF';
+export const SurfaceCtaSurfacePromo = '#4122af';
 export const SurfaceCtaSurfacePromoHover = '#4826c2';
 export const SurfaceCtaSurfacePromoPressed = '#3a1e9b';
 export const SurfaceCtaSurfacePromoFocus = '#4826c2';
@@ -251,13 +251,13 @@ export const BorderMessageBorderWarningSecondary = '#fad98d';
 export const BorderMessageBorderError = '#ed3757';
 export const BorderMessageBorderErrorSecondary = '#f69bab';
 export const BorderInputBorder = '#909090';
-export const BorderInputBorderHover = '#6F6F6F';
+export const BorderInputBorderHover = '#6f6f6f';
 export const BorderInputBorderFocus = '#2486fc';
 export const BorderInputBorderError = '#ed3757';
 export const BorderInputBorderErrorHover = '#ed3757';
 export const BorderInputBorderErrorFocus = '#ed3757';
 export const BorderDropdownBorder = '#bcbcbc';
-export const BorderDropdownBorderHover = '#6F6F6F';
+export const BorderDropdownBorderHover = '#6f6f6f';
 export const BorderDropdownBorderFocus = '#0061d5';
 export const BorderDropdownBorderError = '#ed3757';
 export const BorderDropdownBorderErrorHover = '#ed3757';
@@ -276,22 +276,22 @@ export const BorderItemBorderSelected = '#0061d5';
 export const BorderItemSmallBorderSelected = '#0061d5';
 export const BorderSwitchBorder = '#bcbcbc';
 export const BorderSwitchBorderHover = '#bcbcbc';
-export const BorderRadioBorder = '#6F6F6F';
+export const BorderRadioBorder = '#6f6f6f';
 export const BorderRadioBorderSelected = '#0061d5';
-export const BorderRadioBorderSelectedHover = '#2079E3';
+export const BorderRadioBorderSelectedHover = '#2079e3';
 export const BorderRadioBorderHover = '#4e4e4e';
-export const BorderCheckboxBorder = '#6F6F6F';
+export const BorderCheckboxBorder = '#6f6f6f';
 export const BorderCheckboxBorderHover = '#4e4e4e';
 export const BorderCheckboxBorderSelected = '#0061d5';
-export const BorderCheckboxBorderSelectedHover = '#2079E3';
+export const BorderCheckboxBorderSelectedHover = '#2079e3';
 export const BorderDividerBorder = '#e8e8e8';
 export const BorderCardBorderPressed = '#e8e8e8';
 export const BorderInputchipBorderError = '#ed3757';
-export const BorderAvatarBorderHover = 'rgba(0,0,0,0.04)';
-export const BorderAvatarBorderPressed = 'rgba(0,0,0,0.08)';
-export const BorderStatusBorderHover = 'rgba(0,0,0,0.04)';
+export const BorderAvatarBorderHover = 'rgba(0, 0, 0, 0.04)';
+export const BorderAvatarBorderPressed = 'rgba(0, 0, 0, 0.08)';
+export const BorderStatusBorderHover = 'rgba(0, 0, 0, 0.04)';
 export const BorderSearchBorder = '#f4f4f4';
-export const BorderSearchBorderHover = '#6F6F6F';
+export const BorderSearchBorderHover = '#6f6f6f';
 export const BorderSearchGlobalBorderHover = '#e8e8e8';
 export const BorderGridthumbnailBorder = '#e8e8e8';
 export const BorderFilterchipBorderMultiOn = '#99c0ee';
@@ -322,11 +322,11 @@ export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC
 export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderDividerBorderBrand = '#e8e8e8';
 export const IconIconOnLight = '#222222';
-export const IconIconOnLightSecondary = '#6F6F6F';
+export const IconIconOnLightSecondary = '#6f6f6f';
 export const IconIconOnLightTertiary = '#909090';
 export const IconIconOnDark = '#ffffff';
-export const IconIconErrorOnLight = '#D5324E';
-export const IconIconRequiredOnLight = '#D5324E';
+export const IconIconErrorOnLight = '#d5324e';
+export const IconIconRequiredOnLight = '#d5324e';
 export const IconNavIconOnDark = '#ffffff';
 export const IconNavIconOnDarkHover = '#ffffff';
 export const IconNavIconOnDarkSelected = '#ffffff';
@@ -335,7 +335,7 @@ export const IconNavIconOnLight = '#222222';
 export const IconNavIconOnLightHover = '#222222';
 export const IconNavIconOnLightSelected = '#222222';
 export const IconNavIconOnLightFocus = '#222222';
-export const IconCtaIcon = '#6F6F6F';
+export const IconCtaIcon = '#6f6f6f';
 export const IconCtaIconHover = '#222222';
 export const IconCtaIconPressed = '#222222';
 export const IconCtaIconUtility = '#4e4e4e';
@@ -345,11 +345,11 @@ export const IconCtaIconOnColor = '#000000';
 export const IconCtaIconOnColorHover = '#000000';
 export const IconCtaIconOnColorPressed = '#000000';
 export const IconIconBlue = '#0061d5';
-export const IconIconDestructiveOnLight = '#D5324E';
+export const IconIconDestructiveOnLight = '#d5324e';
 export const OutlineFocusOnLight = '#2486fc';
 export const OutlineFocusOnDark = '#ffffff';
 export const TextTextOnLight = '#222222';
-export const TextTextOnLightSecondary = '#6F6F6F';
+export const TextTextOnLightSecondary = '#6f6f6f';
 export const TextTextOnLightTertiary = '#909090';
 export const TextTextOnLightSecondaryHover = '#4e4e4e';
 export const TextTextOnDark = '#ffffff';
@@ -365,17 +365,17 @@ export const TextNavTextOnLight = '#ffffff';
 export const TextNavTextOnLightHover = '#ffffff';
 export const TextNavTextOnLightSelected = '#ffffff';
 export const TextNavTextOnLightFocus = '#ffffff';
-export const TextTextErrorOnLight = '#D5324E';
-export const TextCtaLinkSecondary = '#6F6F6F';
-export const TextCtaLinkSecondaryPressed = '#6F6F6F';
-export const TextCtaLinkSecondaryHover = '#6F6F6F';
+export const TextTextErrorOnLight = '#d5324e';
+export const TextCtaLinkSecondary = '#6f6f6f';
+export const TextCtaLinkSecondaryPressed = '#6f6f6f';
+export const TextCtaLinkSecondaryHover = '#6f6f6f';
 export const TextCtaPromo = '#4826c2';
 export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
-export const TextToggletextText = '#004EAA';
-export const TextTextDestructiveOnLight = '#D5324E';
-export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
-export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
+export const TextToggletextText = '#004eaa';
+export const TextTextDestructiveOnLight = '#d5324e';
+export const OverlaySidepanelOverlay = 'rgba(0, 0, 0, 0.5)';
+export const OverlayModalOverlay = 'rgba(0, 0, 0, 0.8)';
 export const BrandBoxPrimary = '#0061d5';
 export const BrandBoxSecondary = '#ccdff7';
 export const BrandBoxTertiary = '#e5effa';
@@ -396,7 +396,7 @@ export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';
 export const Gray40 = '#a7a7a7';
 export const Gray50 = '#909090';
-export const Gray65 = '#6F6F6F';
+export const Gray65 = '#6f6f6f';
 export const Gray80 = '#4e4e4e';
 export const Gray90 = '#383838';
 export const Gray100 = '#222222';
@@ -411,12 +411,12 @@ export const BoxBlue40 = '#99c0ee';
 export const BoxBlue50 = '#7fb0ea';
 export const BoxBlue80 = '#3381dd';
 export const BoxBlue100 = '#0061d5';
-export const BoxBlue110 = '#0057C0';
-export const BoxBlue120 = '#004EAA';
-export const BoxBlue150 = '#00316B';
+export const BoxBlue110 = '#0057c0';
+export const BoxBlue120 = '#004eaa';
+export const BoxBlue150 = '#00316b';
 export const BoxBlue160 = '#002755';
-export const BoxBlue170 = '#001D40';
-export const BoxBlue180 = '#00132B';
+export const BoxBlue170 = '#001d40';
+export const BoxBlue180 = '#00132b';
 export const BoxBlue05 = '#f2f7fd';
 export const BoxBlue02 = '#fafcfe';
 export const DarkBlue10 = '#e5ebf2';
@@ -435,7 +435,7 @@ export const LightBlue10 = '#e9f2fe';
 export const LightBlue20 = '#d3e7fe';
 export const LightBlue50 = '#91c2fd';
 export const LightBlue100 = '#2486fc';
-export const LightBlue110 = '#2079E3';
+export const LightBlue110 = '#2079e3';
 export const LightBlue120 = '#1d6bca';
 export const LightBlue150 = '#12437e';
 export const LightBlue160 = '#0e3665';
@@ -447,7 +447,7 @@ export const GreenLight10 = '#e9f8f2';
 export const GreenLight20 = '#d4f3e6';
 export const GreenLight50 = '#92e0c0';
 export const GreenLight100 = '#26c281';
-export const GreenLight110 = '#22AF74';
+export const GreenLight110 = '#22af74';
 export const GreenLight120 = '#1e9b67';
 export const GreenLight150 = '#136140';
 export const GreenLight160 = '#0f4e34';
@@ -459,7 +459,7 @@ export const WatermelonRed10 = '#fdebee';
 export const WatermelonRed20 = '#fbd7dd';
 export const WatermelonRed50 = '#f69bab';
 export const WatermelonRed100 = '#ed3757';
-export const WatermelonRed110 = '#D5324E';
+export const WatermelonRed110 = '#d5324e';
 export const WatermelonRed120 = '#be2c46';
 export const WatermelonRed150 = '#761b2b';
 export const WatermelonRed160 = '#5f1623';
@@ -471,7 +471,7 @@ export const Orange10 = '#fdf2e8';
 export const Orange20 = '#fce6d1';
 export const Orange50 = '#f8c08c';
 export const Orange100 = '#f1811a';
-export const Orange110 = '#D97417';
+export const Orange110 = '#d97417';
 export const Orange120 = '#c16715';
 export const Orange150 = '#78400d';
 export const Orange160 = '#60340a';
@@ -483,7 +483,7 @@ export const Yellorange10 = '#fef7e8';
 export const Yellorange20 = '#fdf0d1';
 export const Yellorange50 = '#fad98d';
 export const Yellorange100 = '#f5b31b';
-export const Yellorange110 = '#DCA118';
+export const Yellorange110 = '#dca118';
 export const Yellorange120 = '#c48f16';
 export const Yellorange150 = '#7a590d';
 export const Yellorange160 = '#62480b';
@@ -495,7 +495,7 @@ export const Yellow10 = '#fffbe5';
 export const Yellow20 = '#fff7cc';
 export const Yellow50 = '#ffeb7f';
 export const Yellow100 = '#ffd700';
-export const Yellow110 = '#E6C100';
+export const Yellow110 = '#e6c100';
 export const Yellow120 = '#ccac00';
 export const Yellow150 = '#806b00';
 export const Yellow160 = '#665600';
@@ -507,7 +507,7 @@ export const PurpleRain10 = '#f5ebfd';
 export const PurpleRain20 = '#ecd9fb';
 export const PurpleRain50 = '#cf9ff6';
 export const PurpleRain100 = '#9f3fed';
-export const PurpleRain110 = '#8F39D5';
+export const PurpleRain110 = '#8f39d5';
 export const PurpleRain120 = '#7f32be';
 export const PurpleRain150 = '#4f1f76';
 export const PurpleRain160 = '#40195f';
@@ -519,7 +519,7 @@ export const Grimace10 = '#ece9f8';
 export const Grimace20 = '#dad4f3';
 export const Grimace50 = '#a392e0';
 export const Grimace100 = '#4826c2';
-export const Grimace110 = '#4122AF';
+export const Grimace110 = '#4122af';
 export const Grimace120 = '#3a1e9b';
 export const Grimace150 = '#241361';
 export const Grimace160 = '#1d0f4e';
@@ -743,12 +743,12 @@ export const Innershadow1 = {
     color: 'rgba(0,0,0,0.1)',
     type: 'innerShadow',
 };
-export const BlackOpacity80 = 'rgba(0,0,0,0.8)';
-export const BlackOpacity60 = 'rgba(0,0,0,0.6)';
-export const BlackOpacity50 = 'rgba(0,0,0,0.5)';
-export const BlackOpacity08 = 'rgba(0,0,0,0.08)';
-export const BlackOpacity04 = 'rgba(0,0,0,0.04)';
-export const BlackOpacity00 = 'rgba(0,0,0,0)';
+export const BlackOpacity80 = 'rgba(0, 0, 0, 0.8)';
+export const BlackOpacity60 = 'rgba(0, 0, 0, 0.6)';
+export const BlackOpacity50 = 'rgba(0, 0, 0, 0.5)';
+export const BlackOpacity08 = 'rgba(0, 0, 0, 0.08)';
+export const BlackOpacity04 = 'rgba(0, 0, 0, 0.04)';
+export const BlackOpacity00 = 'rgba(0, 0, 0, 0)';
 export const Size05 = '0.125rem';
 export const Size1 = '0.25rem';
 export const Size2 = '0.5rem';
@@ -767,8 +767,8 @@ export const Size15 = '3.75rem';
 export const Size16 = '4rem';
 export const Size18 = '4.5rem';
 export const Size20 = '5rem';
-export const WhiteOpacity70 = '#ffffffb3';
-export const WhiteOpacity30 = '#ffffff4d';
+export const WhiteOpacity70 = 'rgba(255, 255, 255, 0.7)';
+export const WhiteOpacity30 = 'rgba(255, 255, 255, 0.3)';
 export const Border4 = '0.25rem';
 export const Border6 = '0.375rem';
 export const Border8 = '0.5rem';