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

[docs][base-ui] Overall demos design review #38820

Merged
merged 93 commits into from
Oct 18, 2023
Merged

[docs][base-ui] Overall demos design review #38820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
93 commits
Select commit Hold shift + click to select a range
70fa5ba
Fix Autocomplete shadows
zanivan Sep 5, 2023
a91897d
Standardizing the design of the snackbar
zanivan Sep 5, 2023
0a64f0f
Run yarn docs:typescript:formatted
zanivan Sep 5, 2023
32e308f
Standardizing the design of the Menu
zanivan Sep 5, 2023
9313e05
Standardizing button design on other demos
zanivan Sep 5, 2023
c494e33
Fix indentation
zanivan Sep 5, 2023
6f18aee
Fix errors
zanivan Sep 8, 2023
3d19e2e
Fix lint
zanivan Sep 8, 2023
2ee393d
More fixes
zanivan Sep 8, 2023
eb75c6d
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Sep 8, 2023
a794668
Run yarn prettier
zanivan Sep 8, 2023
5d64dc3
Refine switch demos
zanivan Sep 11, 2023
799bb92
Standardize Number Input
zanivan Sep 11, 2023
0fa7a04
Refined Modal demos
zanivan Sep 11, 2023
9ad9b35
Run yarn docs:typescript:formatted
zanivan Sep 11, 2023
8a8f10b
Fix NumberInput demo
zanivan Sep 11, 2023
917bc74
Polish bg color modal, popper,popup and snackbar
zanivan Sep 11, 2023
84a818b
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Sep 12, 2023
7f185c7
Fix eslint
zanivan Sep 12, 2023
8207ace
Make Autocomplete shadow subtler
zanivan Sep 15, 2023
6115f21
Standardize focus on input-like components
zanivan Sep 15, 2023
94739ad
Refine Form Control demos
zanivan Sep 15, 2023
95e0ff9
Fix outline focus
zanivan Sep 15, 2023
3f45d89
Make textArea denser
zanivan Sep 15, 2023
46d8c66
Polishing on switch
zanivan Sep 15, 2023
9369e14
Tweak button design
zanivan Sep 18, 2023
4a78eb8
Change Button style
zanivan Sep 27, 2023
e06e986
Change TriggerButton of Snackbar demos
zanivan Sep 27, 2023
30bd5f0
Change TriggerButton of Menu demos
zanivan Sep 27, 2023
541c3fd
Change TriggerButton of Modal demos
zanivan Sep 27, 2023
fe184b0
Change TriggerButton of Popper demos
zanivan Sep 27, 2023
11e88c5
Change TriggerButton of Popup demos
zanivan Sep 27, 2023
4c96484
yarn docs:typescript:formatted
zanivan Sep 27, 2023
6b3e9d8
Changed buttons shadows on intro demos
zanivan Sep 27, 2023
acc859a
button with Tailwind
danilo-leal Sep 27, 2023
9b7dae6
Switch light touches
danilo-leal Sep 27, 2023
660bee8
testing switch styles
danilo-leal Sep 27, 2023
7f1e29e
Add Tailwind Button variant
zanivan Sep 28, 2023
05318f3
Update Button style on Select demo
zanivan Sep 28, 2023
3fd71dd
Refine number input demos
zanivan Sep 28, 2023
6877736
Update Tailwind numberInput basic
zanivan Sep 28, 2023
51f5e62
Run yarn docs:typescript:formatted
zanivan Sep 28, 2023
ca6443f
Fix Tailwind's border issue
mnajdova Sep 29, 2023
e8f45b8
Update Tailwind numberInput demos
zanivan Sep 29, 2023
11fcffc
Changed some Select icons
zanivan Sep 29, 2023
1e060b1
Revert Buttons to outlined
zanivan Sep 29, 2023
28797be
Run yarn docs:typescript:formatted
zanivan Sep 29, 2023
0eb0bf2
Updated Tailwind intro demos
zanivan Sep 29, 2023
bf4c802
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Oct 2, 2023
d7e39c3
Fix Tailwind NumberInput demos
zanivan Oct 2, 2023
51880b2
Update NumberInputAdornments.tsx
zanivan Oct 2, 2023
e5fcdca
Tweaks to the badge demo
zanivan Oct 2, 2023
8d20e2d
Run yarn docs:typescript:formatted
zanivan Oct 2, 2023
646a57c
standardize select icon throughout the page
danilo-leal Oct 2, 2023
fa0b72f
use fewer Material UI components in the Badge example
danilo-leal Oct 2, 2023
b0aee82
run yarn docs:typescript:formatted
danilo-leal Oct 2, 2023
ea25b8d
Fix test_types
zanivan Oct 3, 2023
b7882ed
Fix shadows on Select demos
zanivan Oct 3, 2023
ba23950
Fix Slider thumb color
zanivan Oct 3, 2023
5ec6691
Improved contrast Switch Tailwind intro demo
zanivan Oct 3, 2023
fe4d1fe
Fix button shadow on TransitionComponentSnackbar
zanivan Oct 3, 2023
101238c
Run yarn docs:typescript:formatted
zanivan Oct 3, 2023
e27b1e6
adjust button borders in Tailwind demos
danilo-leal Oct 3, 2023
1fe8ada
docs:typescript:formatted
danilo-leal Oct 3, 2023
6afd9d1
Add border-solid to Tailwind buttons
zanivan Oct 3, 2023
e08df96
Run typescript:formatted
zanivan Oct 3, 2023
6101d43
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Oct 4, 2023
6e3e3d6
Fix hover on disabled Tailwind button
zanivan Oct 4, 2023
505c416
Redesigned disabled buttons
zanivan Oct 4, 2023
804a581
Fix button styling
zanivan Oct 4, 2023
e00a517
Fix checks
zanivan Oct 4, 2023
bc581a1
Fix Tailwind buttons
zanivan Oct 5, 2023
1e92f38
Run yarn docs:typescript:formatted
zanivan Oct 5, 2023
67b7a5a
Fix hover on FormControl Tailwind demo
zanivan Oct 10, 2023
570ed4f
Fix inconsistent focus on buttons
zanivan Oct 10, 2023
0746cae
Fix NumberInput demos
zanivan Oct 10, 2023
399c175
Fix text color on popper and popup demos
zanivan Oct 10, 2023
871c712
Add focus to Tailwind Switch demo
zanivan Oct 10, 2023
01cfbfd
Run yarn docs:typescript:formatted
zanivan Oct 10, 2023
ad681c2
Fix focus-visible
zanivan Oct 11, 2023
fac5962
Run yarn docs:typescript:formatted
zanivan Oct 11, 2023
d7afa8d
Fix Tailwind slider
zanivan Oct 11, 2023
1ce3201
FIx active button styles
zanivan Oct 11, 2023
0b1822c
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Oct 11, 2023
5ab4672
Merge remote-tracking branch 'upstream/master' into base-ui-design-re…
zanivan Oct 16, 2023
29e30d2
Run docs:typescript
zanivan Oct 16, 2023
69c13b8
Fixes after updated from main
zanivan Oct 16, 2023
704b081
Improve Slider focus ring contrast
zanivan Oct 16, 2023
07248a5
Run yarn docs:typescript:formatted
zanivan Oct 16, 2023
7e0ba8b
Merge branch 'master' into pr/38820
danilo-leal Oct 16, 2023
4d35a87
general revision
danilo-leal Oct 16, 2023
aff2056
fix lint errors and typescript:formatted
danilo-leal Oct 16, 2023
f05c487
tailwind switch focus state doesn't work
danilo-leal Oct 16, 2023
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
9 changes: 5 additions & 4 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -146,8 +147,8 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
Expand All @@ -157,7 +158,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -211,7 +212,7 @@ const StyledListbox = styled('ul')(
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.3)' : 'rgba(0,0,0, 0.05)'
};
`,
);
Expand Down
9 changes: 5 additions & 4 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -129,8 +130,8 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
Expand All @@ -140,7 +141,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -194,7 +195,7 @@ const StyledListbox = styled('ul')(
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.3)' : 'rgba(0,0,0, 0.05)'
};
`,
);
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
/>
</Button>
</div>
{anchorEl ? (
{anchorEl && (
<Popper
open={popupOpen}
anchorEl={anchorEl}
Expand Down Expand Up @@ -115,7 +115,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
)}
</ul>
</Popper>
) : null}
)}
</React.Fragment>
);
});
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
/>
</Button>
</div>
{anchorEl ? (
{anchorEl && (
<Popper
open={popupOpen}
anchorEl={anchorEl}
Expand Down Expand Up @@ -116,7 +116,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
)}
</ul>
</Popper>
) : null}
)}
</React.Fragment>
);
});
Expand Down
18 changes: 13 additions & 5 deletions docs/data/base/components/autocomplete/ControlledStates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -74,7 +75,6 @@ const grey = {

const StyledAutocomplete = styled('div')`
position: relative;
margin: 1.5rem 0;
`;

const StyledInputRoot = styled('div')(
Expand All @@ -85,7 +85,9 @@ const StyledInputRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -94,7 +96,7 @@ const StyledInputRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -142,7 +144,9 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
);

Expand Down Expand Up @@ -187,12 +191,16 @@ const StyledOption = styled('li')(
const Layout = styled('div')`
display: flex;
flex-flow: column nowrap;
gap: 4px;
`;

const Pre = styled('pre')(({ theme }) => ({
margin: '0.5rem 0',
fontSize: '0.75rem',
'& code': {
backgroundColor: theme.palette.mode === 'light' ? '#ebebef' : '#25252d',
backgroundColor: theme.palette.mode === 'light' ? grey[100] : grey[900],
border: '1px solid',
borderColor: theme.palette.mode === 'light' ? grey[300] : grey[700],
color: theme.palette.mode === 'light' ? '#000' : '#fff',
padding: '0.125rem 0.25rem',
borderRadius: 3,
Expand Down
18 changes: 13 additions & 5 deletions docs/data/base/components/autocomplete/ControlledStates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -74,7 +75,6 @@ const grey = {

const StyledAutocomplete = styled('div')`
position: relative;
margin: 1.5rem 0;
`;

const StyledInputRoot = styled('div')(
Expand All @@ -85,7 +85,9 @@ const StyledInputRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -94,7 +96,7 @@ const StyledInputRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -142,7 +144,9 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
);

Expand Down Expand Up @@ -187,12 +191,16 @@ const StyledOption = styled('li')(
const Layout = styled('div')`
display: flex;
flex-flow: column nowrap;
gap: 4px;
`;

const Pre = styled('pre')(({ theme }) => ({
margin: '0.5rem 0',
fontSize: '0.75rem',
'& code': {
backgroundColor: theme.palette.mode === 'light' ? '#ebebef' : '#25252d',
backgroundColor: theme.palette.mode === 'light' ? grey[100] : grey[900],
border: '1px solid',
borderColor: theme.palette.mode === 'light' ? grey[300] : grey[700],
color: theme.palette.mode === 'light' ? '#000' : '#fff',
padding: '0.125rem 0.25rem',
borderRadius: 3,
Expand Down
9 changes: 6 additions & 3 deletions docs/data/base/components/autocomplete/UseAutocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand Down Expand Up @@ -81,7 +82,9 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -90,7 +93,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -136,7 +139,7 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
box-shadow: 0px 2px 3px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
Expand Down
9 changes: 6 additions & 3 deletions docs/data/base/components/autocomplete/UseAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand Down Expand Up @@ -83,7 +84,9 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -92,7 +95,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -138,7 +141,7 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
box-shadow: 0px 2px 3px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
Expand Down
11 changes: 8 additions & 3 deletions docs/data/base/components/autocomplete/UseAutocompletePopper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -93,7 +94,9 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -103,7 +106,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -155,7 +158,9 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
);

Expand Down
11 changes: 8 additions & 3 deletions docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
900: '#003A75',
};

Expand All @@ -101,7 +102,9 @@ const StyledAutocompleteRoot = styled('div')(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
box-shadow: 0px 2px 4px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
};
display: flex;
gap: 5px;
padding-right: 5px;
Expand All @@ -111,7 +114,7 @@ const StyledAutocompleteRoot = styled('div')(

&.focused {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
}

&:hover {
Expand Down Expand Up @@ -163,7 +166,9 @@ const StyledListbox = styled('ul')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
);

Expand Down
Loading