m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Fixing broken responsive box background color prop and color fix (#18978)

Browse Source
This commit is contained in:
George Marshall 2023-05-03 06:18:56 -07:00 committed by GitHub
parent 98cb3381e6
commit 56e48a7e55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/ui/box/box.scss
View File

@ -376,7 +376,7 @@ $attributesToApplyExtraProperties: margin;
@each $breakpoint, $min-width in $screen-sizes-map {
@each $variant, $color in design-system.$color-map {
@media screen and (min-width: $min-width) {
&--#{$breakpoint}\background-color-#{$variant} {
&--#{$breakpoint}\:background-color-#{$variant} {
background-color: var($color);
}
}

25
ui/components/ui/box/box.stories.tsx
View File

@ -606,21 +606,30 @@ export const ResponsiveProps = () => {
>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={[
BackgroundColor.backgroundAlternative,
BackgroundColor.primaryMuted,
]}
borderColor={BorderColor.borderMuted}
>
responsive
</Box>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={[
BackgroundColor.backgroundAlternative,
BackgroundColor.primaryMuted,
]}
borderColor={BorderColor.borderMuted}
>
props
</Box>
<Box
padding={[4, 8]}
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={[
BackgroundColor.backgroundAlternative,
BackgroundColor.primaryMuted,
]}
borderColor={BorderColor.borderMuted}
>
example
@ -633,7 +642,10 @@ export const ResponsiveProps = () => {
BorderRadius.MD,
BorderRadius.LG,
]}
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={[
BackgroundColor.backgroundAlternative,
BackgroundColor.primaryMuted,
]}
borderColor={BorderColor.borderMuted}
>
Responsive Border Radius 1
@ -646,7 +658,10 @@ export const ResponsiveProps = () => {
BorderRadius.none,
BorderRadius.full,
]}
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={[
BackgroundColor.backgroundAlternative,
BackgroundColor.primaryMuted,
]}
borderColor={BorderColor.borderMuted}
>
Responsive Border Radius 2

2
ui/helpers/constants/design-system.ts
View File

@ -63,7 +63,7 @@ export enum BackgroundColor {
primaryAlternative = 'primary-alternative',
primaryMuted = 'primary-muted',
errorDefault = 'error-default',
errorAlternative = 'error-Alternative',
errorAlternative = 'error-alternative',
errorMuted = 'error-muted',
warningDefault = 'warning-default',
warningAlternative = 'warning-alternative',