m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +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 $breakpoint, $min-width in $screen-sizes-map {
@each $variant, $color in design-system.$color-map { @each $variant, $color in design-system.$color-map {
@media screen and (min-width: $min-width) { @media screen and (min-width: $min-width) {
&--#{$breakpoint}\background-color-#{$variant} { &--#{$breakpoint}\:background-color-#{$variant} {
background-color: var($color); background-color: var($color);
} }
} }

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

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

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

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