Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(all): refactor components and colors based on latest figma changes #902

Merged
merged 7 commits into from
Nov 26, 2024
Merged

refactor(all): refactor components and colors based on latest figma changes #902

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
219bc48
refactor(all): refactor components and colors based on latest figma c…
masoudmanson Nov 22, 2024
21c352c
refactor(rest): fix the rest of the components
masoudmanson Nov 22, 2024
779e88e
Merge branch 'main' of https://github.com/chanzuckerberg/sci-componen…
masoudmanson Nov 22, 2024
adbc85f
feat(all): refactored all components and variables
masoudmanson Nov 22, 2024
df250b3
fix(snapshots): fix test snapshots and a11y errors
masoudmanson Nov 22, 2024
961c55e
refactor(design-tokens): update design tokens based on figma changes
masoudmanson Nov 22, 2024
de8224f
fix(button): fic active state styles for the button
masoudmanson Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import CustomSvgIcon from "./customSvgIcon";

export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
{
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
name: "Column One",
options: [
{
Expand Down Expand Up @@ -35,7 +35,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
width: 260,
},
{
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
name: "Column Two",
options: [
{
Expand Down Expand Up @@ -68,14 +68,12 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
name: "Column Three",
options: [
{
icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
name: "Custom SDS Icon",
section: "With Icon",
},
{
icon: (
<CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />
),
icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
name: "Custom SVG Icon",
section: "With Icon",
},
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
section: "name with details",
},
{
icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
name: "Custom SDS Icon",
section: "With Icon",
},
{
icon: <CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />,
icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
name: "Custom SVG Icon",
section: "With Icon",
},
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/common/storybook/customSdsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ import Icon, { IconProps } from "../../core/Icon";
function CustomSdsIcon(props: {
sdsIcon?: IconProps<"Bacteria">["sdsIcon"];
sdsSize?: IconProps<"Bacteria">["sdsSize"];
sdsType?: IconProps<"Bacteria">["sdsType"];
color?: IconProps<"Bacteria">["color"];
shade?: IconProps<"Bacteria">["shade"];
}) {
const {
sdsIcon = "Bacteria",
sdsSize = "l",
sdsType = "static",
color = "blue",
shade = 400,
...rest
Expand All @@ -24,7 +22,6 @@ function CustomSdsIcon(props: {
<Icon
sdsIcon={sdsIcon}
sdsSize={sdsSize}
sdsType={sdsType}
color={color}
shade={shade}
{...rest}
Expand Down
7 changes: 3 additions & 4 deletions packages/components/src/common/storybook/customSvgIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import { SvgIcon, SvgIconProps } from "@mui/material";

function CustomSvgIcon(props: SvgIconProps) {
return (
<SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
<path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62C6.28 8.13 5 9.92 5 12c0 2.76 2.24 5 5 5v2z"></path>
<path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.59 1.62.94-.34.34.94 1.88-.68-.34-.94.94-.34-2.74-7.53-.94.34-.34-.94-1.88.68.34.94-.94.35z"></path>
<circle cx="10.5" cy="8" r="1.5"></circle>
<SvgIcon color="primary" viewBox="0 0 512 512" {...props}>
<path d="M458.872,256.078c-17.529-26.644-41.771-52.681-70.79-76.4c-3.469-21.271-8.392-41.554-14.672-60.373 c53.195-0.169,87.024,22.59,72.415,73.747c-0.631,2.21-0.052,4.584,1.508,6.27c6.904,7.458,13.366,15.038,19.341,22.705 c3.073,3.943,9.293,3.121,11.202-1.498c32.302-78.145-10.047-146.718-120.43-140.279c-0.031,0.001-0.062,0.004-0.093,0.007 c-0.013-0.028-0.028-0.055-0.041-0.083c-53.56-106.69-148.783-106.875-202.496-0.688C40.555,73.469-15.599,151.807,52.904,255.924 c0.018,0.028,0.038,0.055,0.056,0.084c-67.012,100.563-16.503,183.6,101.482,175.776c0.008,0.016,0.014,0.03,0.022,0.046 c53.515,106.6,148.97,107.133,202.766,0.164C470.406,437.597,528.418,361.778,458.872,256.078z M138.187,119.848 c-6.226,18.763-11.107,38.972-14.546,60.159c-16.562,13.617-31.69,28.038-44.907,42.876 C38.058,152.559,74.283,120.168,138.187,119.848z M117.998,274.703c-5.69-6.007-11.138-12.226-16.31-18.65 c5.142-6.327,10.591-12.465,16.297-18.416C117.543,249.588,117.518,261.961,117.998,274.703z M78.682,289.361 c13.172,14.872,28.299,29.301,45.012,42.962c3.477,21.316,8.412,41.64,14.711,60.491 C67.963,392.674,43.078,352.627,78.682,289.361z M333.074,123.155c2.657,7.176,5.083,14.639,7.271,22.352 c-9.094-5.698-18.999-11.49-30.114-17.469C317.999,126.092,325.631,124.461,333.074,123.155z M315.549,85.768 c-19.762,3.974-39.653,9.827-59.258,17.221c-20.847-8.122-40.797-14.035-59.637-17.942 C232.529,25.172,278.658,23.544,315.549,85.768z M178.643,123.321c7.447,1.231,15.082,2.784,22.854,4.655 c-10.25,5.498-20.295,11.364-30.069,17.544C173.601,137.861,176.01,130.45,178.643,123.321z M178.794,389.096 c-2.692-7.253-5.148-14.8-7.362-22.603c9.524,5.966,19.569,11.81,30.503,17.666C194.064,386.139,186.334,387.787,178.794,389.096z M196.051,425.931c19.213-4.025,38.998-9.881,58.808-17.323c21.078,8.168,41.325,14.107,60.474,17.991 C278.773,487.933,232.398,487.509,196.051,425.931z M333.091,388.798c-7.661-1.267-15.52-2.879-23.521-4.823 c10.453-5.508,20.759-11.419,30.837-17.698C338.208,374.051,335.765,381.569,333.091,388.798z M351.321,311.775 c-29.889,22.661-63.024,41.092-95.899,54.615c-32.493-13.173-65.228-31.205-94.845-53.695 c-4.587-35.626-4.895-74.801-0.105-112.588c29.851-22.504,63.071-40.834,96.05-54.314c32.446,13.161,65.124,31.155,94.688,53.581 C355.863,235.562,356.016,274.655,351.321,311.775z M410.019,255.868c-5.135,6.281-10.554,12.377-16.218,18.285 c0.449-12.289,0.444-24.538-0.018-36.832C399.446,243.294,404.869,249.48,410.019,255.868z M373.55,392.273 c6.215-18.706,11.092-38.85,14.536-59.969c16.428-13.394,31.608-27.808,45.054-43.017 C473.701,359.55,437.451,391.95,373.55,392.273z" />{" "}
<path d="M255.888,202.24c-29.643,0-53.76,24.117-53.76,53.76c0,29.643,24.117,53.76,53.76,53.76s53.76-24.117,53.76-53.76 C309.649,226.357,285.531,202.24,255.888,202.24z" />{" "}
</SvgIcon>
);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/common/svgs/IconCheckboxChecked.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<Accordion /> Default story renders snapshot 1`] = `
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1z99gw-MuiPaper-root-MuiAccordion-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-11n92rv-MuiPaper-root-MuiAccordion-root"
>
<div
aria-controls="undefined-header-panel-content"
Expand All @@ -25,7 +25,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconChevronDownSmall"
data-testid="IconChevronDownSmall"
fillcontrast="white"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const AccordionHeader = (props: AccordionHeaderProps) => {
<StyledAccordionHeader
aria-controls={`${id}-panel-content`}
id={id}
expandIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="static" />}
expandIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" />}
>
{children}
{subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/core/Accordion/components/AccordionHeader/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ export const StyledAccordionHeader = styled(AccordionSummary)`
align-self: center;

svg {
color: ${semanticColors?.base?.iconPrimary};
color: ${semanticColors?.base?.ornamentSecondary};
}
}

&:hover {
& .${accordionSummaryClasses.expandIconWrapper} {
svg {
color: ${semanticColors?.base?.iconPrimaryHover};
color: ${semanticColors?.base?.ornamentSecondaryHover};
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions packages/components/src/core/Accordion/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
fontBodyXs,
getBorders,
getIconSizes,
getSemanticColors,
getShadows,
getSpaces,
getTypography,
Expand All @@ -38,11 +37,10 @@ export const StyledAccordion = styled(Accordion, {
const typography = getTypography(props);
const borders = getBorders(props);
const spaces = getSpaces(props);
const semanticColors = getSemanticColors(props);

return css`
&.${accordionClasses.root} {
background-color: ${semanticColors?.base?.surfaceBackground};
background-color: transparent;
background-image: none;
box-shadow: ${shadows?.none};
font-family: ${typography?.fontFamily?.body};
Expand Down
20 changes: 10 additions & 10 deletions packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
Search by label
</label>
<div
class="MuiFormControl-root MuiTextField-root css-1fp04lp-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-y1vhlm-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
Expand All @@ -38,7 +38,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconSearchSmall"
data-testid="IconSearchSmall"
fillcontrast="white"
Expand Down Expand Up @@ -108,7 +108,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconChevronRightSmall"
data-testid="IconChevronRightSmall"
fillcontrast="white"
Expand Down Expand Up @@ -141,7 +141,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
<div
aria-hidden="true"
aria-label="Search Input"
class="MuiFormControl-root MuiTextField-root css-ubyh96-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconSearchSmall"
data-testid="IconSearchSmall"
fillcontrast="white"
Expand Down Expand Up @@ -523,7 +523,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconChevronRightSmall"
data-testid="IconChevronRightSmall"
fillcontrast="white"
Expand Down Expand Up @@ -556,7 +556,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
<div
aria-hidden="true"
aria-label="Search Input"
class="MuiFormControl-root MuiTextField-root css-ubyh96-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
tabindex="-1"
>
<div
Expand Down Expand Up @@ -586,7 +586,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconSearchSmall"
data-testid="IconSearchSmall"
fillcontrast="white"
Expand Down Expand Up @@ -982,7 +982,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
<div
aria-hidden="false"
aria-label="Search Input"
class="MuiFormControl-root MuiTextField-root css-q18d0e-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-gl2zcs-MuiFormControl-root-MuiTextField-root"
tabindex="0"
>
<div
Expand Down Expand Up @@ -1011,7 +1011,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
data-file-name="IconSearchSmall"
data-testid="IconSearchSmall"
fillcontrast="white"
Expand Down
8 changes: 1 addition & 7 deletions packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,9 +265,6 @@ const AutocompleteBase = <
sdsType="tertiary"
sdsSize="small"
sdsStyle="icon"
sdsIconProps={{
sdsType: "iconButton",
}}
icon="XMarkCircle"
/>
)}
Expand All @@ -288,13 +285,9 @@ const AutocompleteBase = <
tabIndex={search ? 0 : -1}
aria-hidden={!search}
disabled={!search}
onClick={clearInput}
sdsType="tertiary"
sdsSize="small"
sdsStyle="icon"
sdsIconProps={{
sdsType: "interactive",
}}
icon="Search"
/>
</StyledInputAdornment>
Expand Down Expand Up @@ -425,6 +418,7 @@ const AutocompleteBase = <
isMultiSelect={multiple}
selected={selected}
{...optionProps}
key={option.name}
>
{MenuItemContent}
</MenuItem>
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,19 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
min-height: unset;

&.${autocompleteClasses.focused} {
background-color: ${semanticColors?.base?.surfaceSecondary};
background-color: ${semanticColors?.base?.fillHover};
}

&[aria-selected="true"] {
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
}

&[aria-disabled="true"] {
opacity: 1;
}

&[aria-selected="true"].${autocompleteClasses.focused} {
background-color: ${semanticColors?.base?.surfaceSecondary};
background-color: ${semanticColors?.base?.fillHover};
}
}

Expand All @@ -102,7 +102,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
.${autocompleteClasses.groupLabel} {
top: 0;
color: ${semanticColors?.base?.textSecondary};
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
padding: ${spaces?.xxs}px ${spaces?.s}px;
}

Expand Down Expand Up @@ -176,7 +176,7 @@ export const StyledPaper = styled(Paper)`
return `
background-image: none;
padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px ;
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
border: ${borders?.none};
border-radius: ${corners?.m}px;
box-shadow: ${shadows?.m};
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,14 @@ export const StyledColumnIcon = styled("span")`
const semanticColors = getSemanticColors(props);

return `
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
position: absolute;
right: -${spaces?.xs}px;
top: -2px;
padding-bottom: 2px;

svg {
color: ${semanticColors?.base?.iconPrimary};
color: ${semanticColors?.base?.ornamentSecondary};
width: ${iconSizes?.xs.width}px;
height: ${iconSizes?.xs.height}px;
}
Expand Down
6 changes: 0 additions & 6 deletions packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,9 +232,6 @@ const AutocompleteMultiColumn = <
sdsType="tertiary"
sdsSize="small"
sdsStyle="icon"
sdsIconProps={{
sdsType: "iconButton",
}}
icon="XMarkCircle"
onClick={clearInput}
/>
Expand All @@ -253,9 +250,6 @@ const AutocompleteMultiColumn = <
sdsType="tertiary"
sdsSize="small"
sdsStyle="icon"
sdsIconProps={{
sdsType: "interactive",
}}
icon="Search"
/>
</StyledInputAdornment>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const StyledPopper = styled(Popper, {
const semanticColors = getSemanticColors(props);

return `
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
background-image: none;
border: ${borders?.none};
border-radius: ${corners?.m}px;
Expand Down Expand Up @@ -72,7 +72,7 @@ export const StyledPaper = styled(Paper, {
const semanticColors = getSemanticColors(props);

return `
background-color: ${semanticColors?.base?.surfacePrimary};
background-color: ${semanticColors?.base?.surface};
background-image: none;
box-shadow: ${shadows?.none};
margin: 0;
Expand Down
Loading
Loading