From 3947c8c69f5940e74962b15852751f6467ad8b58 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Tue, 4 Jan 2022 17:20:30 -0300 Subject: [PATCH 01/20] logo refinement --- docs/public/static/logo.svg | 5 ++++- docs/src/icons/SvgMuiLogo.tsx | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/public/static/logo.svg b/docs/public/static/logo.svg index dea1f22374461e..b284583364ddba 100644 --- a/docs/public/static/logo.svg +++ b/docs/public/static/logo.svg @@ -1 +1,4 @@ - + + + + \ No newline at end of file diff --git a/docs/src/icons/SvgMuiLogo.tsx b/docs/src/icons/SvgMuiLogo.tsx index 5f926ed03a6169..7de5734fedc0b7 100644 --- a/docs/src/icons/SvgMuiLogo.tsx +++ b/docs/src/icons/SvgMuiLogo.tsx @@ -5,16 +5,16 @@ export default function SvgMuiLogo(props: RootSvgProps) { return ( From db1d0d7e9c9c3c212a9cb8919645171abbcc8063 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 13:18:57 -0300 Subject: [PATCH 02/20] tweaks to the switch and input - initiating the select --- .../selects/UnstyledSelectSimple.js | 97 ++++++++++++++----- .../components/switches/UnstyledSwitches.js | 9 +- .../components/switches/UseSwitchesBasic.js | 9 +- .../components/text-fields/UnstyledInput.js | 1 - .../pages/components/text-fields/UseInput.js | 1 - 5 files changed, 84 insertions(+), 33 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js index 35dd64bdf590e5..d9de96dc0cb741 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.js +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -4,23 +4,56 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#99CCF3', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); min-width: 200px; - background: #fff; - border: 1px solid #ccc; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { @@ -35,54 +68,65 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; margin: 0; - background-color: #fff; min-width: 200px; - border: 1px solid #ccc; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0 0 0.75em 0.75em; border-top: none; - color: #000; -`; - -const StyledOption = styled(OptionUnstyled)` + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; @@ -105,6 +149,9 @@ export default function UnstyledSelectSimple() { Ten Twenty Thirty + + Forty + ); } diff --git a/docs/src/pages/components/switches/UnstyledSwitches.js b/docs/src/pages/components/switches/UnstyledSwitches.js index c075ffaa667fbc..346e952653d2ad 100644 --- a/docs/src/pages/components/switches/UnstyledSwitches.js +++ b/docs/src/pages/components/switches/UnstyledSwitches.js @@ -9,9 +9,11 @@ const blue = { const grey = { 400: '#BFC7CF', 500: '#AAB4BE', + 600: '#6F7E8C', }; -const Root = styled('span')` +const Root = styled('span')( + ({ theme }) => ` font-size: 0; position: relative; display: inline-block; @@ -26,7 +28,7 @@ const Root = styled('span')` } & .${switchUnstyledClasses.track} { - background: ${grey[400]}; + background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; border-radius: 10px; display: block; height: 100%; @@ -74,7 +76,8 @@ const Root = styled('span')` z-index: 1; margin: 0; } -`; + `, +); export default function UnstyledSwitches() { const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } }; diff --git a/docs/src/pages/components/switches/UseSwitchesBasic.js b/docs/src/pages/components/switches/UseSwitchesBasic.js index ae34c00b282e17..dd047a6a03cf7f 100644 --- a/docs/src/pages/components/switches/UseSwitchesBasic.js +++ b/docs/src/pages/components/switches/UseSwitchesBasic.js @@ -10,16 +10,18 @@ const blue = { const grey = { 400: '#BFC7CF', 500: '#AAB4BE', + 600: '#6F7E8C', }; -const BasicSwitchRoot = styled('span')` +const BasicSwitchRoot = styled('span')( + ({ theme }) => ` font-size: 0; position: relative; display: inline-block; width: 40px; height: 20px; margin: 10px; - background: ${grey[400]}; + background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; border-radius: 10px; cursor: pointer; @@ -31,7 +33,8 @@ const BasicSwitchRoot = styled('span')` &.Switch-checked { background: ${blue[500]}; } -`; + `, +); const BasicSwitchInput = styled('input')` cursor: inherit; diff --git a/docs/src/pages/components/text-fields/UnstyledInput.js b/docs/src/pages/components/text-fields/UnstyledInput.js index c5bde13b81ecba..82254a98e30456 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.js +++ b/docs/src/pages/components/text-fields/UnstyledInput.js @@ -32,7 +32,6 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 150ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; diff --git a/docs/src/pages/components/text-fields/UseInput.js b/docs/src/pages/components/text-fields/UseInput.js index 1e65998f7fab0f..8feda8f3dee273 100644 --- a/docs/src/pages/components/text-fields/UseInput.js +++ b/docs/src/pages/components/text-fields/UseInput.js @@ -32,7 +32,6 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 200ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? null : grey[100]}; From 18a228edfe2507c5352a7e1d36dec51a833fa5af Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 15:34:10 -0300 Subject: [PATCH 03/20] upgrade select demo styles --- .../selects/UnstyledSelectControlled.js | 97 +++++++++++------ .../UnstyledSelectCustomRenderValue.js | 97 +++++++++++------ .../selects/UnstyledSelectGrouping.js | 102 ++++++++++++------ .../selects/UnstyledSelectMultiple.js | 97 +++++++++++------ .../selects/UnstyledSelectObjectValues.js | 97 +++++++++++------ .../selects/UnstyledSelectRichOptions.js | 92 +++++++++++----- .../selects/UnstyledSelectSimple.js | 25 ++--- .../src/pages/components/selects/UseSelect.js | 88 +++++++++++---- 8 files changed, 482 insertions(+), 213 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.js b/docs/src/pages/components/selects/UnstyledSelectControlled.js index 4a81c962ec6d06..cdcae48c2fb6a0 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.js +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.js @@ -5,28 +5,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -36,54 +60,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js index 14de6667a80d97..70c59468d024eb 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js @@ -5,28 +5,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -36,54 +60,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.js b/docs/src/pages/components/selects/UnstyledSelectGrouping.js index 6df0e1caa58a00..a7db7c2d3f4e9a 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.js +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.js @@ -6,28 +6,52 @@ import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -37,54 +61,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledGroupRoot = styled('li')` list-style: none; @@ -92,9 +129,12 @@ const StyledGroupRoot = styled('li')` const StyledGroupHeader = styled('span')` display: block; - padding: 10px 10px 4px 10px; + padding: 15px 0px 5px 10px; font-size: 0.75em; + font-weight: 600; text-transform: uppercase; + letter-spacing: 0.05rem; + color: ${grey[600]}; `; const StyledGroupOptions = styled('ul')` diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.js b/docs/src/pages/components/selects/UnstyledSelectMultiple.js index 34062011453907..6bebc6272661d4 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.js +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.js @@ -6,28 +6,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -37,54 +61,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js index aac4c55e6ad7bf..1ae78625f274cc 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js @@ -5,28 +5,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -36,54 +60,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js index dca3802a524759..a6814943f69ace 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js @@ -5,28 +5,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import { styled } from '@mui/system'; import { PopperUnstyled } from '@mui/base'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); min-width: 480px; - background: #fff; - border: 1px solid #ccc; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -40,60 +64,72 @@ const StyledButton = styled('button')` & img { margin-right: 10px; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; + margin: 10px 0; min-width: 480px; - border: 1px solid #ccc; - border-top: none; - color: #000; max-height: 400px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; -`; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } & img { margin-right: 10px; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js index d9de96dc0cb741..7b3eda187e4463 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.js +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -5,20 +5,13 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { - 50: '#F0F7FF', - 100: '#C2E0FF', 200: '#99CCF3', - 300: '#66B2FF', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', - 700: '#0059B2', - 800: '#004C99', - 900: '#003A75', }; const grey = { - 50: '#F3F6F9', 100: '#E7EBF0', 200: '#E0E3E7', 300: '#CDD2D7', @@ -36,7 +29,7 @@ const StyledButton = styled('button')( font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; + min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; @@ -57,8 +50,6 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -77,16 +68,18 @@ const StyledListbox = styled('ul')( font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - min-width: 200px; + margin: 10px 0; + min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; - border-radius: 0 0 0.75em 0.75em; - border-top: none; + border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } `, ); diff --git a/docs/src/pages/components/selects/UseSelect.js b/docs/src/pages/components/selects/UseSelect.js index b6949b99e992fa..22ea6bac3659e7 100644 --- a/docs/src/pages/components/selects/UseSelect.js +++ b/docs/src/pages/components/selects/UseSelect.js @@ -3,6 +3,25 @@ import PropTypes from 'prop-types'; import { useSelect } from '@mui/base'; import { styled } from '@mui/system'; +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + const Root = styled('div')` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -12,34 +31,66 @@ const Root = styled('div')` color: #000; `; -const Toggle = styled('div')` - min-width: 150px; - min-height: calc(1.5em + 10px); - padding: 5px; - background-color: var(--color, #333); - box-shadow: 0 5px 13px -3px var(--color, #333); +const Toggle = styled('div')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 320px; + background: var(--color, ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}); + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0 5px 13px -3px rgba(0,0,0,0.4)` + : `0 5px 13px -3px ${grey[200]}` + }; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; display: inline-flex; align-items: center; justify-content: center; - color: #fff; cursor: default; transition: background-color 0.2s ease, box-shadow 0.2s ease; & .placeholder { opacity: 0.8; } -`; + `, +); -const Listbox = styled('ul')` - background: #eee; - list-style: none; +const Listbox = styled('ul')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; padding: 0; - margin: 10px 0 0 0; + margin: 5px 0 0 0; + list-style: none; position: absolute; height: auto; transition: opacity 0.1s ease; width: 100%; - box-shadow: 0 5px 13px -3px #333; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0 5px 13px -3px rgba(0,0,0,0.4)` + : `0 5px 13px -3px ${grey[200]}` + }; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + border-top: none; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + z-index: 1; + + &:focus { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } &.hidden { opacity: 0; @@ -51,14 +102,15 @@ const Listbox = styled('ul')` padding: 5px; &:hover { - background: #ccc; + background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; } &[aria-selected='true'] { - background: #ccc; + background: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; } } -`; + `, +); function CustomSelect({ options, placeholder }) { const listboxRef = React.useRef(null); @@ -114,11 +166,11 @@ const options = [ }, { label: 'Green', - value: '#4CAF50', + value: '#178D46', }, { label: 'Blue', - value: '#2196F3', + value: '#0072E5', }, ]; From 155022ff990a457c974859b7b3feae8303320a01 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 15:40:14 -0300 Subject: [PATCH 04/20] update the tsx files --- .../selects/UnstyledSelectControlled.tsx | 97 +++++++++++------ .../UnstyledSelectCustomRenderValue.tsx | 97 +++++++++++------ .../selects/UnstyledSelectGrouping.tsx | 102 ++++++++++++------ .../selects/UnstyledSelectMultiple.tsx | 97 +++++++++++------ .../selects/UnstyledSelectObjectValues.tsx | 97 +++++++++++------ .../selects/UnstyledSelectRichOptions.tsx | 92 +++++++++++----- .../selects/UnstyledSelectSimple.tsx | 97 +++++++++++------ .../pages/components/selects/UseSelect.tsx | 84 ++++++++++++--- 8 files changed, 538 insertions(+), 225 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx index 77a97c27758f12..4f28a18526733b 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx @@ -7,28 +7,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -38,54 +62,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx index f7d140b88485ca..40215fddc460b6 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -8,28 +8,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -39,54 +63,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx index 3941e1e4e3cffb..3156d24eb3d390 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx @@ -10,28 +10,52 @@ import OptionGroupUnstyled, { import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -41,54 +65,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption: typeof OptionUnstyled = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledGroupRoot = styled('li')` list-style: none; @@ -96,9 +133,12 @@ const StyledGroupRoot = styled('li')` const StyledGroupHeader = styled('span')` display: block; - padding: 10px 10px 4px 10px; + padding: 15px 0px 5px 10px; font-size: 0.75em; + font-weight: 600; text-transform: uppercase; + letter-spacing: 0.05rem; + color: ${grey[600]}; `; const StyledGroupOptions = styled('ul')` diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx index 84b134d5c81f17..89dcd6df043d7d 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx @@ -7,28 +7,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -38,54 +62,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx index c246ae9befb4e3..4a8406d24356a7 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx @@ -7,28 +7,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -38,54 +62,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx index 02d8e3341a3c59..d82b1ea4a82980 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx @@ -7,28 +7,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import { styled } from '@mui/system'; import { PopperUnstyled } from '@mui/base'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); min-width: 480px; - background: #fff; - border: 1px solid #ccc; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -42,60 +66,72 @@ const StyledButton = styled('button')` & img { margin-right: 10px; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; + margin: 10px 0; min-width: 480px; - border: 1px solid #ccc; - border-top: none; - color: #000; max-height: 400px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; -`; -const StyledOption = styled(OptionUnstyled)` + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); + +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } & img { margin-right: 10px; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx index 4168de092201e5..ca169dd04eaec2 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx @@ -7,28 +7,52 @@ import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled' import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; -const StyledButton = styled('button')` +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +const StyledButton = styled('button')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 200px; - background: #fff; - border: 1px solid #ccc; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; margin: 0.5em; padding: 10px; text-align: left; line-height: 1.5; - color: #000; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + + &:hover { + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } &.${selectUnstyledClasses.focusVisible} { - outline: 4px solid rgba(100, 100, 100, 0.3); + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${selectUnstyledClasses.expanded} { - border-radius: 0.75em 0.75em 0 0; - &::after { content: '▴'; } @@ -38,54 +62,67 @@ const StyledButton = styled('button')` content: '▾'; float: right; } -`; + `, +); -const StyledListbox = styled('ul')` +const StyledListbox = styled('ul')( + ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; padding: 0; - margin: 0; - background-color: #fff; - min-width: 200px; - border: 1px solid #ccc; - border-top: none; - color: #000; -`; + margin: 10px 0; + min-width: 320px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + + &.${selectUnstyledClasses.focusVisible} { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; + } + `, +); -const StyledOption = styled(OptionUnstyled)` +const StyledOption = styled(OptionUnstyled)( + ({ theme }) => ` list-style: none; - padding: 4px 10px; + padding: 5px 10px; margin: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; &:last-of-type { border-bottom: none; } - &.${optionUnstyledClasses.disabled} { - color: #888; - } - &.${optionUnstyledClasses.selected} { - background-color: rgba(25, 118, 210, 0.08); + background-color: ${blue[500]}; + color: #fff; } &.${optionUnstyledClasses.highlighted} { - background-color: #16d; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: #05e; + background-color: ${blue[600]}; color: #fff; } + &.${optionUnstyledClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + &:hover:not(.${optionUnstyledClasses.disabled}) { - background-color: #39e; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } -`; + `, +); const StyledPopper = styled(PopperUnstyled)` z-index: 1; diff --git a/docs/src/pages/components/selects/UseSelect.tsx b/docs/src/pages/components/selects/UseSelect.tsx index 0ceaef16a6f8e4..71d47cce2697e9 100644 --- a/docs/src/pages/components/selects/UseSelect.tsx +++ b/docs/src/pages/components/selects/UseSelect.tsx @@ -2,6 +2,25 @@ import * as React from 'react'; import { useSelect, SelectOption } from '@mui/base'; import { styled } from '@mui/system'; +const blue = { + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', +}; + +const grey = { + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + const Root = styled('div')` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -11,34 +30,66 @@ const Root = styled('div')` color: #000; `; -const Toggle = styled('div')` - min-width: 150px; - min-height: calc(1.5em + 10px); - padding: 5px; - background-color: var(--color, #333); - box-shadow: 0 5px 13px -3px var(--color, #333); +const Toggle = styled('div')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 320px; + background: var(--color, ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}); + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0 5px 13px -3px rgba(0,0,0,0.4)` + : `0 5px 13px -3px ${grey[200]}` + }; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; display: inline-flex; align-items: center; justify-content: center; - color: #fff; cursor: default; transition: background-color 0.2s ease, box-shadow 0.2s ease; & .placeholder { opacity: 0.8; } -`; + `, +); -const Listbox = styled('ul')` - background: #eee; - list-style: none; +const Listbox = styled('ul')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; padding: 0; - margin: 10px 0 0 0; + margin: 5px 0 0 0; + list-style: none; position: absolute; height: auto; transition: opacity 0.1s ease; width: 100%; - box-shadow: 0 5px 13px -3px #333; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0 5px 13px -3px rgba(0,0,0,0.4)` + : `0 5px 13px -3px ${grey[200]}` + }; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + border-radius: 0.75em; + border-top: none; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + overflow: auto; + z-index: 1; + + &:focus { + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + } &.hidden { opacity: 0; @@ -50,14 +101,15 @@ const Listbox = styled('ul')` padding: 5px; &:hover { - background: #ccc; + background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; } &[aria-selected='true'] { - background: #ccc; + background: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; } } -`; + `, +); interface Props { options: SelectOption[]; From 917a0c9600462df6b769d51de5139936e243e15d Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 15:42:52 -0300 Subject: [PATCH 05/20] remaining tsx files --- docs/src/pages/components/switches/UnstyledSwitches.tsx | 9 ++++++--- docs/src/pages/components/switches/UseSwitchesBasic.tsx | 9 ++++++--- docs/src/pages/components/text-fields/UnstyledInput.tsx | 1 - docs/src/pages/components/text-fields/UseInput.tsx | 1 - 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/components/switches/UnstyledSwitches.tsx b/docs/src/pages/components/switches/UnstyledSwitches.tsx index c075ffaa667fbc..346e952653d2ad 100644 --- a/docs/src/pages/components/switches/UnstyledSwitches.tsx +++ b/docs/src/pages/components/switches/UnstyledSwitches.tsx @@ -9,9 +9,11 @@ const blue = { const grey = { 400: '#BFC7CF', 500: '#AAB4BE', + 600: '#6F7E8C', }; -const Root = styled('span')` +const Root = styled('span')( + ({ theme }) => ` font-size: 0; position: relative; display: inline-block; @@ -26,7 +28,7 @@ const Root = styled('span')` } & .${switchUnstyledClasses.track} { - background: ${grey[400]}; + background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; border-radius: 10px; display: block; height: 100%; @@ -74,7 +76,8 @@ const Root = styled('span')` z-index: 1; margin: 0; } -`; + `, +); export default function UnstyledSwitches() { const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } }; diff --git a/docs/src/pages/components/switches/UseSwitchesBasic.tsx b/docs/src/pages/components/switches/UseSwitchesBasic.tsx index 1a3abd9c971530..927ec6d45feef6 100644 --- a/docs/src/pages/components/switches/UseSwitchesBasic.tsx +++ b/docs/src/pages/components/switches/UseSwitchesBasic.tsx @@ -10,16 +10,18 @@ const blue = { const grey = { 400: '#BFC7CF', 500: '#AAB4BE', + 600: '#6F7E8C', }; -const BasicSwitchRoot = styled('span')` +const BasicSwitchRoot = styled('span')( + ({ theme }) => ` font-size: 0; position: relative; display: inline-block; width: 40px; height: 20px; margin: 10px; - background: ${grey[400]}; + background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; border-radius: 10px; cursor: pointer; @@ -31,7 +33,8 @@ const BasicSwitchRoot = styled('span')` &.Switch-checked { background: ${blue[500]}; } -`; + `, +); const BasicSwitchInput = styled('input')` cursor: inherit; diff --git a/docs/src/pages/components/text-fields/UnstyledInput.tsx b/docs/src/pages/components/text-fields/UnstyledInput.tsx index eca21555424606..5f58e2fbb94ab4 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.tsx +++ b/docs/src/pages/components/text-fields/UnstyledInput.tsx @@ -32,7 +32,6 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 150ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; diff --git a/docs/src/pages/components/text-fields/UseInput.tsx b/docs/src/pages/components/text-fields/UseInput.tsx index 56715b18d50e56..037aa39b88d441 100644 --- a/docs/src/pages/components/text-fields/UseInput.tsx +++ b/docs/src/pages/components/text-fields/UseInput.tsx @@ -32,7 +32,6 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 200ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? null : grey[100]}; From 7d5b72dd27f5ac19322db6249163c6ad0f36d476 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 15:45:30 -0300 Subject: [PATCH 06/20] reverse leaked logo changes --- docs/public/static/logo.svg | 2 +- docs/src/icons/SvgMuiLogo.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/public/static/logo.svg b/docs/public/static/logo.svg index dea1f22374461e..5cb3a1e389ce63 100644 --- a/docs/public/static/logo.svg +++ b/docs/public/static/logo.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/docs/src/icons/SvgMuiLogo.tsx b/docs/src/icons/SvgMuiLogo.tsx index 7de5734fedc0b7..5f926ed03a6169 100644 --- a/docs/src/icons/SvgMuiLogo.tsx +++ b/docs/src/icons/SvgMuiLogo.tsx @@ -5,16 +5,16 @@ export default function SvgMuiLogo(props: RootSvgProps) { return ( From fd2fce1c3d27de0c8a37d433421175ac25766099 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 15:52:48 -0300 Subject: [PATCH 07/20] docs:typescript:formatted --- docs/src/pages/components/selects/UnstyledSelectSimple.js | 3 --- docs/src/pages/components/selects/UseSelect.js | 4 ++-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js index 7b3eda187e4463..0991c8f348db95 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.js +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -142,9 +142,6 @@ export default function UnstyledSelectSimple() { Ten Twenty Thirty - - Forty - ); } diff --git a/docs/src/pages/components/selects/UseSelect.js b/docs/src/pages/components/selects/UseSelect.js index 22ea6bac3659e7..2654fa2f00244f 100644 --- a/docs/src/pages/components/selects/UseSelect.js +++ b/docs/src/pages/components/selects/UseSelect.js @@ -166,11 +166,11 @@ const options = [ }, { label: 'Green', - value: '#178D46', + value: '#4CAF50', }, { label: 'Blue', - value: '#0072E5', + value: '#2196F3', }, ]; From 230f65332358b3d115e41b0824d54cc532335efc Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 2 Feb 2022 16:03:27 -0300 Subject: [PATCH 08/20] fix lint --- docs/src/pages/components/selects/UnstyledSelectGrouping.js | 2 +- docs/src/pages/components/selects/UnstyledSelectGrouping.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.js b/docs/src/pages/components/selects/UnstyledSelectGrouping.js index a7db7c2d3f4e9a..70fdb22634082b 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.js +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.js @@ -129,7 +129,7 @@ const StyledGroupRoot = styled('li')` const StyledGroupHeader = styled('span')` display: block; - padding: 15px 0px 5px 10px; + padding: 15px 0 5px 10px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx index 3156d24eb3d390..79e8d255064e82 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx @@ -133,7 +133,7 @@ const StyledGroupRoot = styled('li')` const StyledGroupHeader = styled('span')` display: block; - padding: 15px 0px 5px 10px; + padding: 15px 0 5px 10px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; From 65ad7e0c6fa9adfdd9e404957c44b725f4cde804 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 11:44:48 -0300 Subject: [PATCH 09/20] fix one demo broken on mobile --- .../src/pages/components/selects/UnstyledSelectRichOptions.js | 4 ++-- .../pages/components/selects/UnstyledSelectRichOptions.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js index a6814943f69ace..a25b4023b81222 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js @@ -30,7 +30,7 @@ const StyledButton = styled('button')( font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 480px; + min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; @@ -74,7 +74,7 @@ const StyledListbox = styled('ul')( box-sizing: border-box; padding: 0; margin: 10px 0; - min-width: 480px; + min-width: 320px; max-height: 400px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx index d82b1ea4a82980..ba78806409d2b6 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx @@ -32,7 +32,7 @@ const StyledButton = styled('button')( font-size: 0.875rem; box-sizing: border-box; min-height: calc(1.5em + 22px); - min-width: 480px; + min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; @@ -76,7 +76,7 @@ const StyledListbox = styled('ul')( box-sizing: border-box; padding: 0; margin: 10px 0; - min-width: 480px; + min-width: 320px; max-height: 400px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; From e8c91449abbc2b5a228c957797bfa9e4498def0b Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 11:53:15 -0300 Subject: [PATCH 10/20] fix focus state --- docs/src/pages/components/selects/UnstyledSelectControlled.js | 2 +- docs/src/pages/components/selects/UnstyledSelectControlled.tsx | 2 +- .../pages/components/selects/UnstyledSelectCustomRenderValue.js | 2 +- .../components/selects/UnstyledSelectCustomRenderValue.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectGrouping.js | 2 +- docs/src/pages/components/selects/UnstyledSelectGrouping.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectMultiple.js | 2 +- docs/src/pages/components/selects/UnstyledSelectMultiple.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectObjectValues.js | 2 +- .../src/pages/components/selects/UnstyledSelectObjectValues.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectRichOptions.js | 2 +- docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectSimple.js | 2 +- docs/src/pages/components/selects/UnstyledSelectSimple.tsx | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.js b/docs/src/pages/components/selects/UnstyledSelectControlled.js index cdcae48c2fb6a0..24c68c7e28ea78 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.js +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.js @@ -77,7 +77,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx index 4f28a18526733b..fc752b6953ce2c 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx @@ -79,7 +79,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js index 70c59468d024eb..235971a65722bd 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js @@ -77,7 +77,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx index 40215fddc460b6..aaeb78d5e54800 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -80,7 +80,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.js b/docs/src/pages/components/selects/UnstyledSelectGrouping.js index 70fdb22634082b..7860ee3763a862 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.js +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.js @@ -78,7 +78,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx index 79e8d255064e82..7a50f5b8eb20bb 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx @@ -82,7 +82,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.js b/docs/src/pages/components/selects/UnstyledSelectMultiple.js index 6bebc6272661d4..e920564cac1557 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.js +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.js @@ -78,7 +78,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx index 89dcd6df043d7d..64d0508f232525 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx @@ -79,7 +79,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js index 1ae78625f274cc..7eb9109d58e94e 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js @@ -77,7 +77,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx index 4a8406d24356a7..83eb3b9c6f5e30 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx @@ -79,7 +79,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js index a25b4023b81222..cbbaa662acd8f4 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js @@ -82,7 +82,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx index ba78806409d2b6..9a9c3a4445131f 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx @@ -84,7 +84,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js index 0991c8f348db95..5d3266f0c91f1e 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.js +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -76,7 +76,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx index ca169dd04eaec2..c2827c4bfd6741 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx @@ -79,7 +79,7 @@ const StyledListbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - &.${selectUnstyledClasses.focusVisible} { + &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; outline-offset: 2px; } From 82ffcefecaef06091ff9a3428243f703efc792ab Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 11:57:45 -0300 Subject: [PATCH 11/20] tweak padding on listbox --- docs/src/pages/components/selects/UnstyledSelectControlled.js | 2 +- docs/src/pages/components/selects/UnstyledSelectControlled.tsx | 2 +- .../pages/components/selects/UnstyledSelectCustomRenderValue.js | 2 +- .../components/selects/UnstyledSelectCustomRenderValue.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectGrouping.js | 2 +- docs/src/pages/components/selects/UnstyledSelectGrouping.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectMultiple.js | 2 +- docs/src/pages/components/selects/UnstyledSelectMultiple.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectObjectValues.js | 2 +- .../src/pages/components/selects/UnstyledSelectObjectValues.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectRichOptions.js | 2 +- docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx | 2 +- docs/src/pages/components/selects/UnstyledSelectSimple.js | 2 +- docs/src/pages/components/selects/UnstyledSelectSimple.tsx | 2 +- docs/src/pages/components/selects/UseSelect.js | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.js b/docs/src/pages/components/selects/UnstyledSelectControlled.js index 24c68c7e28ea78..b7174995caf3c9 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.js +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.js @@ -87,7 +87,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx index fc752b6953ce2c..821f935ecf3c07 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx @@ -89,7 +89,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js index 235971a65722bd..3496a872586c5b 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js @@ -87,7 +87,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx index aaeb78d5e54800..7eb3d511167125 100644 --- a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -90,7 +90,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.js b/docs/src/pages/components/selects/UnstyledSelectGrouping.js index 7860ee3763a862..79fcedc827e979 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.js +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.js @@ -88,7 +88,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx index 7a50f5b8eb20bb..f408568a21bdc8 100644 --- a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx @@ -92,7 +92,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.js b/docs/src/pages/components/selects/UnstyledSelectMultiple.js index e920564cac1557..b468901a0c6222 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.js +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.js @@ -88,7 +88,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx index 64d0508f232525..90a8536986495f 100644 --- a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx @@ -89,7 +89,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js index 7eb9109d58e94e..3ee422297bd260 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js @@ -87,7 +87,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx index 83eb3b9c6f5e30..8aef8dae4b3224 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx @@ -89,7 +89,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js index cbbaa662acd8f4..0955796bbce7a7 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js @@ -92,7 +92,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx index 9a9c3a4445131f..8c4a067231622d 100644 --- a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx @@ -94,7 +94,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js index 5d3266f0c91f1e..495f6ba9a60375 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.js +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -86,7 +86,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx index c2827c4bfd6741..4d53a0a4cb254c 100644 --- a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx @@ -89,7 +89,7 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 5px 10px; + padding: 10px; margin: 0; border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; cursor: default; diff --git a/docs/src/pages/components/selects/UseSelect.js b/docs/src/pages/components/selects/UseSelect.js index 2654fa2f00244f..36cd0f11007477 100644 --- a/docs/src/pages/components/selects/UseSelect.js +++ b/docs/src/pages/components/selects/UseSelect.js @@ -99,7 +99,7 @@ const Listbox = styled('ul')( } & > li { - padding: 5px; + padding: 10px; &:hover { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; From 76455ef72e1326bb10c65f0e15ca5781c3c4319b Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 12:03:32 -0300 Subject: [PATCH 12/20] fix types --- docs/src/pages/components/selects/UseSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/selects/UseSelect.tsx b/docs/src/pages/components/selects/UseSelect.tsx index 71d47cce2697e9..b3bb8238ac1e0f 100644 --- a/docs/src/pages/components/selects/UseSelect.tsx +++ b/docs/src/pages/components/selects/UseSelect.tsx @@ -98,7 +98,7 @@ const Listbox = styled('ul')( } & > li { - padding: 5px; + padding: 10px; &:hover { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; From 30be99c4ec5fc0b8da83f7d8786fa3b0dc8ffd85 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 13:58:38 -0300 Subject: [PATCH 13/20] little details --- .../selects/UnstyledSelectControlled.js | 11 ++++++- .../selects/UnstyledSelectControlled.tsx | 11 ++++++- .../selects/UnstyledSelectObjectValues.js | 29 +++++++++++++++++-- .../selects/UnstyledSelectObjectValues.tsx | 29 +++++++++++++++++-- 4 files changed, 74 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.js b/docs/src/pages/components/selects/UnstyledSelectControlled.js index b7174995caf3c9..8c1aa4ae63cd77 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.js +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.js @@ -126,6 +126,15 @@ const StyledPopper = styled(PopperUnstyled)` z-index: 1; `; +const Paragraph = styled('p')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + margin: 10px 0; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + function CustomSelect(props) { const components = { Root: StyledButton, @@ -160,7 +169,7 @@ export default function UnstyledSelectsMultiple() { Thirty -

Selected value: {value}

+ Selected value: {value} ); } diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx index 821f935ecf3c07..5d0e7d56cbf25b 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx @@ -128,6 +128,15 @@ const StyledPopper = styled(PopperUnstyled)` z-index: 1; `; +const Paragraph = styled('p')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + margin: 10px 0; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + function CustomSelect(props: SelectUnstyledProps) { const components: SelectUnstyledProps['components'] = { Root: StyledButton, @@ -149,7 +158,7 @@ export default function UnstyledSelectsMultiple() { Thirty -

Selected value: {value}

+ Selected value: {value} ); } diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js index 3ee422297bd260..05ec57e2152124 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js @@ -10,9 +10,11 @@ const blue = { 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 800: '#001E3C', }; const grey = { + 50: '#F3F6F9', 100: '#E7EBF0', 200: '#E0E3E7', 300: '#CDD2D7', @@ -126,6 +128,29 @@ const StyledPopper = styled(PopperUnstyled)` z-index: 1; `; +const Paragraph = styled('p')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + margin: 10px 0; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + +const Pre = styled('pre')( + ({ theme }) => ` + font-family: monospace; + font-size: 0.875rem; + margin: 0px; + padding: 5px 10px; + border-radius: 10px; + background-color: ${ + theme.palette.mode === 'dark' ? 'rgba(0, 30, 60, 0.5)' : grey[50] + }; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + function CustomSelect(props) { const components = { Root: StyledButton, @@ -170,8 +195,8 @@ export default function UnstyledSelectObjectValues() { ))} -

Selected character:

- 
{JSON.stringify(character, null, 2)}
+ Selected character: + 
{JSON.stringify(character, null, 2)}
); } diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx index 8aef8dae4b3224..4827e5ff420c8f 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx @@ -12,9 +12,11 @@ const blue = { 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 800: '#001E3C', }; const grey = { + 50: '#F3F6F9', 100: '#E7EBF0', 200: '#E0E3E7', 300: '#CDD2D7', @@ -128,6 +130,29 @@ const StyledPopper = styled(PopperUnstyled)` z-index: 1; `; +const Paragraph = styled('p')( + ({ theme }) => ` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + margin: 10px 0; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + +const Pre = styled('pre')( + ({ theme }) => ` + font-family: monospace; + font-size: 0.875rem; + margin: 0px; + padding: 5px 10px; + border-radius: 10px; + background-color: ${ + theme.palette.mode === 'dark' ? 'rgba(0, 30, 60, 0.5)' : grey[50] + }; + color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]}; + `, +); + function CustomSelect(props: SelectUnstyledProps) { const components: SelectUnstyledProps['components'] = { Root: StyledButton, @@ -164,8 +189,8 @@ export default function UnstyledSelectObjectValues() { ))} -

Selected character:

- 
{JSON.stringify(character, null, 2)}
+ Selected character: + 
{JSON.stringify(character, null, 2)}
); } From c7d83f901e860d7cedd7f2e3d4a079e93d26b643 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 3 Feb 2022 14:08:47 -0300 Subject: [PATCH 14/20] docs:typescript:formatted --- .../components/selects/UnstyledSelectControlled.tsx.preview | 2 +- .../components/selects/UnstyledSelectObjectValues.tsx.preview | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview index 320b97c61c39e0..9646f31cc06562 100644 --- a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview @@ -4,4 +4,4 @@ Thirty -

Selected value: {value}

\ No newline at end of file +Selected value: {value} \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview index 13b0bbf0ae77c3..9731942fbac299 100644 --- a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview @@ -6,5 +6,5 @@ ))} -

Selected character:

-
{JSON.stringify(character, null, 2)}
\ No newline at end of file +Selected character: +
{JSON.stringify(character, null, 2)}
\ No newline at end of file From 1a5920c38708e1a995850583f509807740c47118 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Mon, 7 Feb 2022 10:45:16 -0300 Subject: [PATCH 15/20] remove focus from listbox --- .../material/components/selects/UnstyledSelectControlled.js | 5 ----- .../material/components/selects/UnstyledSelectControlled.tsx | 5 ----- .../components/selects/UnstyledSelectCustomRenderValue.js | 5 ----- .../components/selects/UnstyledSelectCustomRenderValue.tsx | 5 ----- .../material/components/selects/UnstyledSelectGrouping.js | 5 ----- .../material/components/selects/UnstyledSelectGrouping.tsx | 5 ----- .../material/components/selects/UnstyledSelectMultiple.js | 5 ----- .../material/components/selects/UnstyledSelectMultiple.tsx | 5 ----- .../components/selects/UnstyledSelectObjectValues.js | 5 ----- .../components/selects/UnstyledSelectObjectValues.tsx | 5 ----- .../material/components/selects/UnstyledSelectRichOptions.js | 5 ----- .../components/selects/UnstyledSelectRichOptions.tsx | 5 ----- .../data/material/components/selects/UnstyledSelectSimple.js | 5 ----- .../material/components/selects/UnstyledSelectSimple.tsx | 5 ----- docs/data/material/components/selects/UseSelect.js | 4 ---- docs/data/material/components/selects/UseSelect.tsx | 4 ---- 16 files changed, 78 deletions(-) diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.js b/docs/data/material/components/selects/UnstyledSelectControlled.js index 8c1aa4ae63cd77..f218b536c8b391 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.js +++ b/docs/data/material/components/selects/UnstyledSelectControlled.js @@ -76,11 +76,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx b/docs/data/material/components/selects/UnstyledSelectControlled.tsx index 5d0e7d56cbf25b..f39a1ff17fb25a 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.tsx +++ b/docs/data/material/components/selects/UnstyledSelectControlled.tsx @@ -78,11 +78,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js index 3496a872586c5b..92eacbc9c00ab7 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js @@ -76,11 +76,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx index 7eb3d511167125..8d85332a2fd0a3 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -79,11 +79,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.js b/docs/data/material/components/selects/UnstyledSelectGrouping.js index 79fcedc827e979..0f9c8a168c24af 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.js +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.js @@ -77,11 +77,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx index f408568a21bdc8..bd843a848eec26 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx @@ -81,11 +81,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.js b/docs/data/material/components/selects/UnstyledSelectMultiple.js index b468901a0c6222..82d90cb2c76f69 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.js +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.js @@ -77,11 +77,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx index 90a8536986495f..ca109df610ffe4 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx @@ -78,11 +78,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.js b/docs/data/material/components/selects/UnstyledSelectObjectValues.js index 05ec57e2152124..182a312dc06c77 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.js +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.js @@ -78,11 +78,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx index 4827e5ff420c8f..26755a98a09a58 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx @@ -80,11 +80,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.js b/docs/data/material/components/selects/UnstyledSelectRichOptions.js index 0955796bbce7a7..0576723a590cb7 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.js +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.js @@ -81,11 +81,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx index 8c4a067231622d..88b5adb118a9ad 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx @@ -83,11 +83,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.js b/docs/data/material/components/selects/UnstyledSelectSimple.js index 495f6ba9a60375..4e08c0d830c436 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.js +++ b/docs/data/material/components/selects/UnstyledSelectSimple.js @@ -75,11 +75,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.tsx b/docs/data/material/components/selects/UnstyledSelectSimple.tsx index 4d53a0a4cb254c..c91082d285f9f1 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectSimple.tsx @@ -78,11 +78,6 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; - } `, ); diff --git a/docs/data/material/components/selects/UseSelect.js b/docs/data/material/components/selects/UseSelect.js index 36cd0f11007477..5cc4486b88eaeb 100644 --- a/docs/data/material/components/selects/UseSelect.js +++ b/docs/data/material/components/selects/UseSelect.js @@ -87,10 +87,6 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - } &.hidden { opacity: 0; diff --git a/docs/data/material/components/selects/UseSelect.tsx b/docs/data/material/components/selects/UseSelect.tsx index b3bb8238ac1e0f..03f78f65003728 100644 --- a/docs/data/material/components/selects/UseSelect.tsx +++ b/docs/data/material/components/selects/UseSelect.tsx @@ -86,10 +86,6 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; - - &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - } &.hidden { opacity: 0; From a20837c654c3f76368cce2744204a5fbbb68b875 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Mon, 7 Feb 2022 12:04:27 -0300 Subject: [PATCH 16/20] fix lint --- docs/data/material/components/selects/UseSelect.js | 7 ------- docs/data/material/components/selects/UseSelect.tsx | 7 ------- 2 files changed, 14 deletions(-) diff --git a/docs/data/material/components/selects/UseSelect.js b/docs/data/material/components/selects/UseSelect.js index 5cc4486b88eaeb..040f366fb0721b 100644 --- a/docs/data/material/components/selects/UseSelect.js +++ b/docs/data/material/components/selects/UseSelect.js @@ -3,13 +3,6 @@ import PropTypes from 'prop-types'; import { useSelect } from '@mui/base'; import { styled } from '@mui/system'; -const blue = { - 200: '#99CCF3', - 400: '#3399FF', - 500: '#007FFF', - 600: '#0072E5', -}; - const grey = { 100: '#E7EBF0', 200: '#E0E3E7', diff --git a/docs/data/material/components/selects/UseSelect.tsx b/docs/data/material/components/selects/UseSelect.tsx index 03f78f65003728..413b5a51b8ad4b 100644 --- a/docs/data/material/components/selects/UseSelect.tsx +++ b/docs/data/material/components/selects/UseSelect.tsx @@ -2,13 +2,6 @@ import * as React from 'react'; import { useSelect, SelectOption } from '@mui/base'; import { styled } from '@mui/system'; -const blue = { - 200: '#99CCF3', - 400: '#3399FF', - 500: '#007FFF', - 600: '#0072E5', -}; - const grey = { 100: '#E7EBF0', 200: '#E0E3E7', From 0ec791ee1d49622bbc5c9555e80ce69e4a7ce807 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Mon, 7 Feb 2022 19:01:29 -0300 Subject: [PATCH 17/20] outline: 0px; --- .../data/material/components/selects/UnstyledSelectControlled.js | 1 + .../material/components/selects/UnstyledSelectControlled.tsx | 1 + .../components/selects/UnstyledSelectCustomRenderValue.js | 1 + .../components/selects/UnstyledSelectCustomRenderValue.tsx | 1 + docs/data/material/components/selects/UnstyledSelectGrouping.js | 1 + docs/data/material/components/selects/UnstyledSelectGrouping.tsx | 1 + docs/data/material/components/selects/UnstyledSelectMultiple.js | 1 + docs/data/material/components/selects/UnstyledSelectMultiple.tsx | 1 + .../material/components/selects/UnstyledSelectObjectValues.js | 1 + .../material/components/selects/UnstyledSelectObjectValues.tsx | 1 + .../material/components/selects/UnstyledSelectRichOptions.js | 1 + .../material/components/selects/UnstyledSelectRichOptions.tsx | 1 + docs/data/material/components/selects/UnstyledSelectSimple.js | 1 + docs/data/material/components/selects/UnstyledSelectSimple.tsx | 1 + docs/data/material/components/selects/UseSelect.js | 1 + docs/data/material/components/selects/UseSelect.tsx | 1 + 16 files changed, 16 insertions(+) diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.js b/docs/data/material/components/selects/UnstyledSelectControlled.js index f218b536c8b391..589c8f9e866d57 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.js +++ b/docs/data/material/components/selects/UnstyledSelectControlled.js @@ -76,6 +76,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx b/docs/data/material/components/selects/UnstyledSelectControlled.tsx index f39a1ff17fb25a..7d71bb4991f3b2 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.tsx +++ b/docs/data/material/components/selects/UnstyledSelectControlled.tsx @@ -78,6 +78,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js index 92eacbc9c00ab7..756368469a133e 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js @@ -76,6 +76,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx index 8d85332a2fd0a3..ba3d7c7e59cc5b 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -79,6 +79,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.js b/docs/data/material/components/selects/UnstyledSelectGrouping.js index 0f9c8a168c24af..1add5aa3a6f382 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.js +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.js @@ -77,6 +77,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx index bd843a848eec26..54e55437871e69 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx @@ -81,6 +81,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.js b/docs/data/material/components/selects/UnstyledSelectMultiple.js index 82d90cb2c76f69..a1a38e6f179e14 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.js +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.js @@ -77,6 +77,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx index ca109df610ffe4..cb0ffbfae4a08c 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx @@ -78,6 +78,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.js b/docs/data/material/components/selects/UnstyledSelectObjectValues.js index 182a312dc06c77..5f939ff272d4f7 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.js +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.js @@ -78,6 +78,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx index 26755a98a09a58..60ea5748dbda05 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx @@ -80,6 +80,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.js b/docs/data/material/components/selects/UnstyledSelectRichOptions.js index 0576723a590cb7..d04348c27dc8db 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.js +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.js @@ -81,6 +81,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx index 88b5adb118a9ad..06a38d0c40beff 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx @@ -83,6 +83,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.js b/docs/data/material/components/selects/UnstyledSelectSimple.js index 4e08c0d830c436..4f2b279a57cb18 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.js +++ b/docs/data/material/components/selects/UnstyledSelectSimple.js @@ -75,6 +75,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.tsx b/docs/data/material/components/selects/UnstyledSelectSimple.tsx index c91082d285f9f1..024e8b3f44caa5 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectSimple.tsx @@ -78,6 +78,7 @@ const StyledListbox = styled('ul')( border-radius: 0.75em; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; + outline: 0px; `, ); diff --git a/docs/data/material/components/selects/UseSelect.js b/docs/data/material/components/selects/UseSelect.js index 040f366fb0721b..a230620fb4e48a 100644 --- a/docs/data/material/components/selects/UseSelect.js +++ b/docs/data/material/components/selects/UseSelect.js @@ -80,6 +80,7 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; + outline: 0px; &.hidden { opacity: 0; diff --git a/docs/data/material/components/selects/UseSelect.tsx b/docs/data/material/components/selects/UseSelect.tsx index 413b5a51b8ad4b..e3907c1c17d3bc 100644 --- a/docs/data/material/components/selects/UseSelect.tsx +++ b/docs/data/material/components/selects/UseSelect.tsx @@ -79,6 +79,7 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; + outline: 0px; &.hidden { opacity: 0; From 01010c192cbf5a36ec0ffd4b835068a39b2178da Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 9 Feb 2022 20:04:43 -0300 Subject: [PATCH 18/20] polishing up after a few days of chewing on it --- .../selects/UnstyledSelectControlled.js | 22 +++++++++---------- .../selects/UnstyledSelectControlled.tsx | 20 ++++++++--------- .../UnstyledSelectCustomRenderValue.js | 20 ++++++++--------- .../UnstyledSelectCustomRenderValue.tsx | 20 ++++++++--------- .../selects/UnstyledSelectGrouping.js | 20 ++++++++--------- .../selects/UnstyledSelectGrouping.tsx | 20 ++++++++--------- .../selects/UnstyledSelectMultiple.js | 20 ++++++++--------- .../selects/UnstyledSelectMultiple.tsx | 20 ++++++++--------- .../selects/UnstyledSelectObjectValues.js | 21 +++++++++--------- .../selects/UnstyledSelectObjectValues.tsx | 21 +++++++++--------- .../selects/UnstyledSelectRichOptions.js | 20 ++++++++--------- .../selects/UnstyledSelectRichOptions.tsx | 20 ++++++++--------- .../selects/UnstyledSelectSimple.js | 20 ++++++++--------- .../selects/UnstyledSelectSimple.tsx | 20 ++++++++--------- .../material/components/selects/UseSelect.js | 6 ++--- .../material/components/selects/UseSelect.tsx | 6 ++--- 16 files changed, 147 insertions(+), 149 deletions(-) diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.js b/docs/data/material/components/selects/UnstyledSelectControlled.js index 589c8f9e866d57..52ab3668c070e4 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.js +++ b/docs/data/material/components/selects/UnstyledSelectControlled.js @@ -6,10 +6,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -34,7 +36,7 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; - margin: 0.5em; + margin-top: 0.5em; padding: 10px; text-align: left; line-height: 1.5; @@ -46,8 +48,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -68,7 +69,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -83,9 +84,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -93,8 +93,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -103,8 +103,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx b/docs/data/material/components/selects/UnstyledSelectControlled.tsx index 7d71bb4991f3b2..eeb47c3e190f7a 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.tsx +++ b/docs/data/material/components/selects/UnstyledSelectControlled.tsx @@ -8,10 +8,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -48,8 +50,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -70,7 +71,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -85,9 +86,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -95,8 +95,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -105,8 +105,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js index 756368469a133e..e3175706a893c4 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js @@ -6,10 +6,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -46,8 +48,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -68,7 +69,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -83,9 +84,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -93,8 +93,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -103,8 +103,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx index ba3d7c7e59cc5b..d5b7b81fcb9a9f 100644 --- a/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx +++ b/docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -9,10 +9,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -49,8 +51,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -71,7 +72,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -86,9 +87,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -96,8 +96,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -106,8 +106,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.js b/docs/data/material/components/selects/UnstyledSelectGrouping.js index 1add5aa3a6f382..49a6bf71cd0779 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.js +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.js @@ -7,10 +7,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -47,8 +49,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -69,7 +70,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -84,9 +85,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -94,8 +94,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -104,8 +104,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx index 54e55437871e69..47593a1f04e3ef 100644 --- a/docs/data/material/components/selects/UnstyledSelectGrouping.tsx +++ b/docs/data/material/components/selects/UnstyledSelectGrouping.tsx @@ -11,10 +11,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -51,8 +53,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -73,7 +74,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -88,9 +89,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -98,8 +98,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -108,8 +108,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.js b/docs/data/material/components/selects/UnstyledSelectMultiple.js index a1a38e6f179e14..98765c997c25d3 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.js +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.js @@ -7,10 +7,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -47,8 +49,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -69,7 +70,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -84,9 +85,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -94,8 +94,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -104,8 +104,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx index cb0ffbfae4a08c..8e7bc4196b93e5 100644 --- a/docs/data/material/components/selects/UnstyledSelectMultiple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectMultiple.tsx @@ -8,10 +8,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -48,8 +50,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -70,7 +71,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -85,9 +86,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -95,8 +95,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -105,8 +105,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.js b/docs/data/material/components/selects/UnstyledSelectObjectValues.js index 5f939ff272d4f7..d0d8c82c451e01 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.js +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.js @@ -6,11 +6,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', - 800: '#001E3C', + 900: '#003A75', }; const grey = { @@ -48,8 +49,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -70,7 +70,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -85,9 +85,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -95,8 +94,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -105,8 +104,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx index 60ea5748dbda05..1b7898e17f05c3 100644 --- a/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx +++ b/docs/data/material/components/selects/UnstyledSelectObjectValues.tsx @@ -8,11 +8,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', - 800: '#001E3C', + 900: '#003A75', }; const grey = { @@ -50,8 +51,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -72,7 +72,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -87,9 +87,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -97,8 +96,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -107,8 +106,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.js b/docs/data/material/components/selects/UnstyledSelectRichOptions.js index d04348c27dc8db..90e18299f1ea02 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.js +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.js @@ -6,10 +6,12 @@ import { styled } from '@mui/system'; import { PopperUnstyled } from '@mui/base'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -46,8 +48,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -72,7 +73,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; max-height: 400px; @@ -88,9 +89,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -98,8 +98,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -108,8 +108,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx index 06a38d0c40beff..2cb09dcc6efa46 100644 --- a/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx +++ b/docs/data/material/components/selects/UnstyledSelectRichOptions.tsx @@ -8,10 +8,12 @@ import { styled } from '@mui/system'; import { PopperUnstyled } from '@mui/base'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -48,8 +50,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -74,7 +75,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; max-height: 400px; @@ -90,9 +91,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -100,8 +100,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -110,8 +110,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.js b/docs/data/material/components/selects/UnstyledSelectSimple.js index 4f2b279a57cb18..83d1ecbe19ca5d 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.js +++ b/docs/data/material/components/selects/UnstyledSelectSimple.js @@ -5,10 +5,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -45,8 +47,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -67,7 +68,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -82,9 +83,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -92,8 +92,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -102,8 +102,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.tsx b/docs/data/material/components/selects/UnstyledSelectSimple.tsx index 024e8b3f44caa5..5343c5d6ea114d 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectSimple.tsx @@ -8,10 +8,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#99CCF3', 400: '#3399FF', 500: '#007FFF', 600: '#0072E5', + 900: '#003A75', }; const grey = { @@ -48,8 +50,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[100]}; } &.${selectUnstyledClasses.expanded} { @@ -70,7 +71,7 @@ const StyledListbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 10px 0; min-width: 320px; background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; @@ -85,9 +86,8 @@ const StyledListbox = styled('ul')( const StyledOption = styled(OptionUnstyled)( ({ theme }) => ` list-style: none; - padding: 10px; - margin: 0; - border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; + padding: 8px; + border-radius: 0.45em; cursor: default; &:last-of-type { @@ -95,8 +95,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.selected} { - background-color: ${blue[500]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.highlighted} { @@ -105,8 +105,8 @@ const StyledOption = styled(OptionUnstyled)( } &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { - background-color: ${blue[600]}; - color: #fff; + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } &.${optionUnstyledClasses.disabled} { diff --git a/docs/data/material/components/selects/UseSelect.js b/docs/data/material/components/selects/UseSelect.js index a230620fb4e48a..47a7ce2dda825f 100644 --- a/docs/data/material/components/selects/UseSelect.js +++ b/docs/data/material/components/selects/UseSelect.js @@ -61,7 +61,7 @@ const Listbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 5px 0 0 0; list-style: none; position: absolute; @@ -76,7 +76,6 @@ const Listbox = styled('ul')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; - border-top: none; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; @@ -89,7 +88,8 @@ const Listbox = styled('ul')( } & > li { - padding: 10px; + padding: 8px; + border-radius: 0.45em; &:hover { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; diff --git a/docs/data/material/components/selects/UseSelect.tsx b/docs/data/material/components/selects/UseSelect.tsx index e3907c1c17d3bc..1c0ac192a6f97a 100644 --- a/docs/data/material/components/selects/UseSelect.tsx +++ b/docs/data/material/components/selects/UseSelect.tsx @@ -60,7 +60,7 @@ const Listbox = styled('ul')( font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; box-sizing: border-box; - padding: 0; + padding: 5px; margin: 5px 0 0 0; list-style: none; position: absolute; @@ -75,7 +75,6 @@ const Listbox = styled('ul')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; - border-top: none; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; overflow: auto; z-index: 1; @@ -88,7 +87,8 @@ const Listbox = styled('ul')( } & > li { - padding: 10px; + padding: 8px; + border-radius: 0.45em; &:hover { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; From 6a1746c464eb484247974534fe2ed13470ad992c Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 9 Feb 2022 20:07:17 -0300 Subject: [PATCH 19/20] yarn docs:typescript:formatted --- .../material/components/selects/UnstyledSelectControlled.tsx | 2 +- docs/data/material/components/selects/UnstyledSelectSimple.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/selects/UnstyledSelectControlled.tsx b/docs/data/material/components/selects/UnstyledSelectControlled.tsx index eeb47c3e190f7a..40661033d06598 100644 --- a/docs/data/material/components/selects/UnstyledSelectControlled.tsx +++ b/docs/data/material/components/selects/UnstyledSelectControlled.tsx @@ -38,7 +38,7 @@ const StyledButton = styled('button')( background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 0.75em; - margin: 0.5em; + margin-top: 0.5em; padding: 10px; text-align: left; line-height: 1.5; diff --git a/docs/data/material/components/selects/UnstyledSelectSimple.tsx b/docs/data/material/components/selects/UnstyledSelectSimple.tsx index 5343c5d6ea114d..28cdc0baa39fa8 100644 --- a/docs/data/material/components/selects/UnstyledSelectSimple.tsx +++ b/docs/data/material/components/selects/UnstyledSelectSimple.tsx @@ -50,7 +50,7 @@ const StyledButton = styled('button')( } &.${selectUnstyledClasses.focusVisible} { - outline: 3px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[100]}; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } &.${selectUnstyledClasses.expanded} { From 132a5389f2cd1039d5baf4d39c3fc56e749e3a4d Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 10 Feb 2022 08:32:35 -0300 Subject: [PATCH 20/20] make text-field outline style consistent with the select --- docs/data/material/components/text-fields/UnstyledInput.js | 5 +++-- docs/data/material/components/text-fields/UnstyledInput.tsx | 5 +++-- docs/data/material/components/text-fields/UseInput.js | 5 +++-- docs/data/material/components/text-fields/UseInput.tsx | 5 +++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/data/material/components/text-fields/UnstyledInput.js b/docs/data/material/components/text-fields/UnstyledInput.js index 82254a98e30456..1e73317bd29bac 100644 --- a/docs/data/material/components/text-fields/UnstyledInput.js +++ b/docs/data/material/components/text-fields/UnstyledInput.js @@ -3,8 +3,10 @@ import InputUnstyled from '@mui/base/InputUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#80BFFF', 400: '#3399FF', + 600: '#0072E5', }; const grey = { @@ -39,8 +41,7 @@ const StyledInputElement = styled('input')( } &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } `, ); diff --git a/docs/data/material/components/text-fields/UnstyledInput.tsx b/docs/data/material/components/text-fields/UnstyledInput.tsx index 5f58e2fbb94ab4..3a0b4279973828 100644 --- a/docs/data/material/components/text-fields/UnstyledInput.tsx +++ b/docs/data/material/components/text-fields/UnstyledInput.tsx @@ -3,8 +3,10 @@ import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#80BFFF', 400: '#3399FF', + 600: '#0072E5', }; const grey = { @@ -39,8 +41,7 @@ const StyledInputElement = styled('input')( } &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } `, ); diff --git a/docs/data/material/components/text-fields/UseInput.js b/docs/data/material/components/text-fields/UseInput.js index 8feda8f3dee273..22b6115c184608 100644 --- a/docs/data/material/components/text-fields/UseInput.js +++ b/docs/data/material/components/text-fields/UseInput.js @@ -3,8 +3,10 @@ import { useInput } from '@mui/base'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#80BFFF', 400: '#3399FF', + 600: '#0072E5', }; const grey = { @@ -39,8 +41,7 @@ const StyledInputElement = styled('input')( } &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } `, ); diff --git a/docs/data/material/components/text-fields/UseInput.tsx b/docs/data/material/components/text-fields/UseInput.tsx index 037aa39b88d441..855dfe0adef6e7 100644 --- a/docs/data/material/components/text-fields/UseInput.tsx +++ b/docs/data/material/components/text-fields/UseInput.tsx @@ -3,8 +3,10 @@ import { useInput } from '@mui/base'; import { styled } from '@mui/system'; const blue = { + 100: '#DAECFF', 200: '#80BFFF', 400: '#3399FF', + 600: '#0072E5', }; const grey = { @@ -39,8 +41,7 @@ const StyledInputElement = styled('input')( } &:focus { - outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; - outline-offset: 2px; + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]}; } `, );