From db6321eb68668fd84aa2f6f301da0d75847b993e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 10:23:05 +0700 Subject: [PATCH 01/38] move to tools --- .../default-theme/default-theme-pt.md | 100 ----------------- .../default-theme/default-theme-zh.md | 100 ----------------- .../default-theme/default-theme.md | 101 ------------------ docs/data/joy/pages.ts | 12 ++- docs/data/joy/tools/default-theme-viewer.md | 3 + .../default-theme-viewer.js} | 2 +- docs/public/_redirects | 2 + 7 files changed, 17 insertions(+), 303 deletions(-) delete mode 100644 docs/data/joy/customization/default-theme/default-theme-pt.md delete mode 100644 docs/data/joy/customization/default-theme/default-theme-zh.md delete mode 100644 docs/data/joy/customization/default-theme/default-theme.md create mode 100644 docs/data/joy/tools/default-theme-viewer.md rename docs/pages/joy-ui/{customization/default-theme.js => tools/default-theme-viewer.js} (63%) diff --git a/docs/data/joy/customization/default-theme/default-theme-pt.md b/docs/data/joy/customization/default-theme/default-theme-pt.md deleted file mode 100644 index b2c7f16bbd37c5..00000000000000 --- a/docs/data/joy/customization/default-theme/default-theme-pt.md +++ /dev/null @@ -1,100 +0,0 @@ -# Default Theme - -

Here's what the theme object looks like with the default values.

- -:::warning -**⚠️ Work in progress:** we're still iterating on the whole Joy UI default theme. -::: - -**Typography-related:** - -```js -extendTheme({ - fontSize: { - xs: '0.75rem', - sm: '0.875rem', - md: '1rem', - lg: '1.25rem', - xl: '1.5rem', - xl2: '1.875rem', - xl3: '2.25rem', - xl4: '3rem', - xl5: '3.75rem', - xl6: '4.5rem', - }, -}); -``` - -```js -extendTheme({ - fontFamily: { - body: '"Public Sans", var(--joy-fontFamily-fallback)', - display: '"Public Sans", var(--joy-fontFamily-fallback)', - code: 'Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace', - fallback: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - }, -}); -``` - -```js -extendTheme({ - fontWeight: { - xs: 200, - sm: 300, - md: 500, - lg: 700, - xl: 800, - }, -}); -``` - -```js -extendTheme({ - lineHeight: { - sm: 1.25, - md: 1.5, - lg: 1.7, - }, -}); -``` - -```js -extendTheme({ - letterSpacing: { - sm: '-0.01em', - md: '0.083em', - lg: '0.125em', - }, -}); -``` - -```js -extendTheme({ - radius: { - xs: '4px', - sm: '8px', - md: '12px', - lg: '16px', - xl: '20px', - }, -}); -} -``` - -**Box shadows:** - -All the shadows are listed [here](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/types/shadow.ts). We recommend to use `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` for creating the shadows because you can customize the shadow color on the component. - -```js -extendTheme({ - shadows: { - // default tokens - xs: 'var(--joy-shadowRing), 0 1px 2px 0 rgba(var(--joy-shadowChannel) / 0.12)', - sm: '...', - md: '...', - lg: '...', - xl: '...', - }, -}); -``` diff --git a/docs/data/joy/customization/default-theme/default-theme-zh.md b/docs/data/joy/customization/default-theme/default-theme-zh.md deleted file mode 100644 index b2c7f16bbd37c5..00000000000000 --- a/docs/data/joy/customization/default-theme/default-theme-zh.md +++ /dev/null @@ -1,100 +0,0 @@ -# Default Theme - -

Here's what the theme object looks like with the default values.

- -:::warning -**⚠️ Work in progress:** we're still iterating on the whole Joy UI default theme. -::: - -**Typography-related:** - -```js -extendTheme({ - fontSize: { - xs: '0.75rem', - sm: '0.875rem', - md: '1rem', - lg: '1.25rem', - xl: '1.5rem', - xl2: '1.875rem', - xl3: '2.25rem', - xl4: '3rem', - xl5: '3.75rem', - xl6: '4.5rem', - }, -}); -``` - -```js -extendTheme({ - fontFamily: { - body: '"Public Sans", var(--joy-fontFamily-fallback)', - display: '"Public Sans", var(--joy-fontFamily-fallback)', - code: 'Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace', - fallback: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - }, -}); -``` - -```js -extendTheme({ - fontWeight: { - xs: 200, - sm: 300, - md: 500, - lg: 700, - xl: 800, - }, -}); -``` - -```js -extendTheme({ - lineHeight: { - sm: 1.25, - md: 1.5, - lg: 1.7, - }, -}); -``` - -```js -extendTheme({ - letterSpacing: { - sm: '-0.01em', - md: '0.083em', - lg: '0.125em', - }, -}); -``` - -```js -extendTheme({ - radius: { - xs: '4px', - sm: '8px', - md: '12px', - lg: '16px', - xl: '20px', - }, -}); -} -``` - -**Box shadows:** - -All the shadows are listed [here](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/types/shadow.ts). We recommend to use `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` for creating the shadows because you can customize the shadow color on the component. - -```js -extendTheme({ - shadows: { - // default tokens - xs: 'var(--joy-shadowRing), 0 1px 2px 0 rgba(var(--joy-shadowChannel) / 0.12)', - sm: '...', - md: '...', - lg: '...', - xl: '...', - }, -}); -``` diff --git a/docs/data/joy/customization/default-theme/default-theme.md b/docs/data/joy/customization/default-theme/default-theme.md deleted file mode 100644 index 574b97e7610123..00000000000000 --- a/docs/data/joy/customization/default-theme/default-theme.md +++ /dev/null @@ -1,101 +0,0 @@ -# Default theme - -

Here's what the theme object looks like with the default values.

- -:::warning -This is a work in progress. We're still iterating on Joy UI's default theme. -::: - -**Typography-related:** - -```js -extendTheme({ - fontSize: { - xs: '0.75rem', - sm: '0.875rem', - md: '1rem', - lg: '1.25rem', - xl: '1.5rem', - xl2: '1.875rem', - xl3: '2.25rem', - xl4: '3rem', - xl5: '3.75rem', - xl6: '4.5rem', - }, -}); -``` - -```js -extendTheme({ - fontFamily: { - body: '"Public Sans", var(--joy-fontFamily-fallback)', - display: '"Public Sans", var(--joy-fontFamily-fallback)', - code: 'Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace', - fallback: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - }, -}); -``` - -```js -extendTheme({ - fontWeight: { - xs: 200, - sm: 300, - md: 500, - lg: 700, - xl: 800, - }, -}); -``` - -```js -extendTheme({ - lineHeight: { - sm: 1.25, - md: 1.5, - lg: 1.7, - }, -}); -``` - -```js -extendTheme({ - letterSpacing: { - sm: '-0.01em', - md: '0.083em', - lg: '0.125em', - }, -}); -``` - -```js -extendTheme({ - radius: { - xs: '4px', - sm: '8px', - md: '12px', - lg: '16px', - xl: '20px', - }, -}); -} -``` - -**Box shadows:** - -All the shadows are listed [here](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/types/shadow.ts). -We recommend to use `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` for creating the shadows because you can customize the shadow color on the component. - -```js -extendTheme({ - shadows: { - // default tokens - xs: 'var(--joy-shadowRing), 0 1px 2px 0 rgba(var(--joy-shadowChannel) / 0.12)', - sm: '...', - md: '...', - lg: '...', - xl: '...', - }, -}); -``` diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 7dee416d1f5d33..323356347d80ed 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -92,13 +92,23 @@ const pages = [ children: [ { pathname: '/joy-ui/customization/approaches' }, { pathname: '/joy-ui/customization/dark-mode' }, - { pathname: '/joy-ui/customization/default-theme' }, { pathname: '/joy-ui/customization/theme-tokens' }, { pathname: '/joy-ui/customization/theme-typography' }, { pathname: '/joy-ui/customization/themed-components' }, { pathname: '/joy-ui/customization/using-css-variables', title: 'Using CSS variables' }, ], }, + { + pathname: '/joy-ui/tools', + title: 'Tools', + icon: 'BuildIcon', + children: [ + { + pathname: '/joy-ui/tools/default-theme-viewer', + title: 'Default theme viewer', + }, + ], + }, { pathname: '/joy-ui/guides', title: 'How To Guides', diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md new file mode 100644 index 00000000000000..25d5af326af094 --- /dev/null +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -0,0 +1,3 @@ +# Default theme viewer + +

Here's what the theme object looks like with the default values.

diff --git a/docs/pages/joy-ui/customization/default-theme.js b/docs/pages/joy-ui/tools/default-theme-viewer.js similarity index 63% rename from docs/pages/joy-ui/customization/default-theme.js rename to docs/pages/joy-ui/tools/default-theme-viewer.js index 4353dab2b0658c..f210f5c364d22e 100644 --- a/docs/pages/joy-ui/customization/default-theme.js +++ b/docs/pages/joy-ui/tools/default-theme-viewer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/default-theme/default-theme.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/tools/default-theme-viewer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/public/_redirects b/docs/public/_redirects index 7a3b4edc3653f2..b3c19123d18c52 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -400,6 +400,8 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /:lang/experimental-api/classname-generator/ /:lang/material-ui/experimental-api/classname-generator/ 301 /experimental-api/css-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 301 /:lang/experimental-api/css-variables/ /:lang/material-ui/experimental-api/css-theme-variables/overview/ 301 +/joy-ui/customization/default-theme/ /joy-ui/tools/default-theme-viewer/ 301 +/:lang/joy-ui/customization/default-theme/ /:lang/joy-ui/tools/default-theme-viewer/ 301 /pt/material-ui/* /material-ui/:splat 301 /zh/material-ui/* /material-ui/:splat 301 /pt/joy-ui/* /joy-ui/:splat 301 From bf77c4d32ba29618345168d67c7e208bafa36ee4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 11:56:10 +0700 Subject: [PATCH 02/38] add PaletteThemeViewer --- docs/data/joy/tools/PaletteThemeViewer.js | 133 ++++++++++++++++++++ docs/data/joy/tools/PaletteThemeViewer.tsx | 133 ++++++++++++++++++++ docs/data/joy/tools/default-theme-viewer.md | 4 + test/regressions/index.js | 1 + 4 files changed, 271 insertions(+) create mode 100644 docs/data/joy/tools/PaletteThemeViewer.js create mode 100644 docs/data/joy/tools/PaletteThemeViewer.tsx diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js new file mode 100644 index 00000000000000..6e952ff5379ffd --- /dev/null +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -0,0 +1,133 @@ +import * as React from 'react'; +import { extendTheme, Palette, styled } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; +import IconButton from '@mui/joy/IconButton'; +import Typography from '@mui/joy/Typography'; +import LightMode from '@mui/icons-material/LightModeOutlined'; +import DarkMode from '@mui/icons-material/DarkModeOutlined'; +import Close from '@mui/icons-material/CloseOutlined'; + +const defaultTheme = extendTheme(); + +const traverseObject = (palette) => { + const result = {}; + const traverse = (object, parts = []) => { + if (object && typeof object === 'object') { + for (const key of Object.keys(object)) { + traverse(object[key], [...parts, key]); + } + } else { + result[parts.join('.')] = object; + } + }; + traverse(palette); + return result; +}; + +// https://stackoverflow.com/a/38641281/559913 +const collator = new Intl.Collator(undefined, { + numeric: true, + sensitivity: 'base', +}); + +const Table = styled('table')({ + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, + td: { + verticalAlign: 'top', + }, +}); + +export default function PaletteThemeViewer() { + const [text, setText] = React.useState(''); + const light = traverseObject(defaultTheme.colorSchemes.light.palette); + const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); + const paletteTokens = Array.from( + new Set([...Object.keys(dark), ...Object.keys(light)]), + ).sort(collator.compare); + const renderSwatch = (colorScheme, token) => ( + + ); + return ( + + setText(event.target.value)} + endDecorator={ + text ? ( + setText('')}> + + + ) : null + } + sx={{ maxWidth: 300, mb: 2 }} + /> + + + + + + + + + + {paletteTokens + .filter((token) => (text ? token.toLowerCase().includes(text) : true)) + .map((token) => ( + + + + + + ))} + +
+ Token + + }> + Light + + + }> + Dark + +
+ {token} + + + {light[token]} + + + + {dark[token]} + +
+ + ); +} diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx new file mode 100644 index 00000000000000..edee2fb3a9e107 --- /dev/null +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import { extendTheme, Palette, styled } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; +import IconButton from '@mui/joy/IconButton'; +import Typography from '@mui/joy/Typography'; +import LightMode from '@mui/icons-material/LightModeOutlined'; +import DarkMode from '@mui/icons-material/DarkModeOutlined'; +import Close from '@mui/icons-material/CloseOutlined'; + +const defaultTheme = extendTheme(); + +const traverseObject = (palette: Palette) => { + const result: Record = {}; + const traverse = (object: any, parts: string[] = []) => { + if (object && typeof object === 'object') { + for (const key of Object.keys(object)) { + traverse(object[key], [...parts, key]); + } + } else { + result[parts.join('.')] = object; + } + }; + traverse(palette); + return result; +}; + +// https://stackoverflow.com/a/38641281/559913 +const collator = new Intl.Collator(undefined, { + numeric: true, + sensitivity: 'base', +}); + +const Table = styled('table')({ + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, + td: { + verticalAlign: 'top', + }, +}); + +export default function PaletteThemeViewer() { + const [text, setText] = React.useState(''); + const light = traverseObject(defaultTheme.colorSchemes.light.palette); + const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); + const paletteTokens = Array.from( + new Set([...Object.keys(dark), ...Object.keys(light)]), + ).sort(collator.compare); + const renderSwatch = (colorScheme: 'light' | 'dark', token: string) => ( + + ); + return ( + + setText(event.target.value)} + endDecorator={ + text ? ( + setText('')}> + + + ) : null + } + sx={{ maxWidth: 300, mb: 2 }} + /> + + + + + + + + + + {paletteTokens + .filter((token) => (text ? token.toLowerCase().includes(text) : true)) + .map((token) => ( + + + + + + ))} + +
+ Token + + }> + Light + + + }> + Dark + +
+ {token} + + + {light[token]} + + + + {dark[token]} + +
+ + ); +} diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 25d5af326af094..5e135eaa78b0d9 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -1,3 +1,7 @@ # Default theme viewer

Here's what the theme object looks like with the default values.

+ +## Palette + +{{"demo": "PaletteThemeViewer.js"}} diff --git a/test/regressions/index.js b/test/regressions/index.js index 7d446dd0458ee7..2720b61fd5958c 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -29,6 +29,7 @@ importRegressionFixtures.keys().forEach((path) => { const blacklist = [ 'docs-joy-getting-started-templates/TemplateCollection.png', 'docs-joy-core-features-automatic-adjustment/ListThemes.png', + 'docs-joy-tools/JoyThemeViewer.png', 'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction 'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components 'docs-components-alert/TransitionAlerts.png', // Needs interaction From 7e7b2734023e60c4ba366e9b9d2fc98af8af95a6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 13:49:33 +0700 Subject: [PATCH 03/38] update viewer --- docs/data/joy/tools/PaletteThemeViewer.js | 2 +- docs/data/joy/tools/PaletteThemeViewer.tsx | 28 ++- docs/data/joy/tools/TypographyThemeViewer.js | 227 +++++++++++++++++ docs/data/joy/tools/TypographyThemeViewer.tsx | 232 ++++++++++++++++++ docs/data/joy/tools/default-theme-viewer.md | 10 + 5 files changed, 497 insertions(+), 2 deletions(-) create mode 100644 docs/data/joy/tools/TypographyThemeViewer.js create mode 100644 docs/data/joy/tools/TypographyThemeViewer.tsx diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index 6e952ff5379ffd..41ebc1334f1450 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { extendTheme, Palette, styled } from '@mui/joy/styles'; +import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Input from '@mui/joy/Input'; import IconButton from '@mui/joy/IconButton'; diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index edee2fb3a9e107..0a51ad5a135113 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -3,10 +3,12 @@ import { extendTheme, Palette, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Input from '@mui/joy/Input'; import IconButton from '@mui/joy/IconButton'; +import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; import Close from '@mui/icons-material/CloseOutlined'; +import InfoOutlined from '@mui/icons-material/InfoOutlined'; const defaultTheme = extendTheme(); @@ -104,7 +106,31 @@ export default function PaletteThemeViewer() { .map((token) => ( - {token} + + To create a translucent color:
+ + rgba(var(--joy-palette-{token.replace('.', '-')}) / + 0.6) + + + } + sx={{ pointerEvents: 'none' }} + > + + + ) : null + } + > + {token} + + value.replace(`var(--joy-${field}-`, '').replace(')', ''); + +export default function FontSizeThemeViewer() { + const levels = Object.keys(defaultTheme.typography); + const renderSwatch = (colorScheme, token) => + token ? ( + + ) : null; + return ( + + + + + + + + + + + + + + {levels.map((level) => ( + + + + + + + + + ))} + +
+ Level + + + Color + + + + Font size + + + + Font weight + + + + Line height + + + + Letter spacing + +
+ Preview} + size="sm" + arrow + variant="outlined" + placement="bottom-start" + sx={{ pointerEvents: 'none' }} + > + {level} + + + + + (light) + + + (dark) + + + } + sx={{ pointerEvents: 'none' }} + > + + {defaultTheme.typography[level].color || '-'} + + + + + + {defaultTheme.typography[level].fontSize || '-'} + + + + + + {defaultTheme.typography[level].fontWeight || '-'} + + + + + + {defaultTheme.typography[level].lineHeight || '-'} + + + + + + {defaultTheme.typography[level].letterSpacing || '-'} + + +
+ + ); +} diff --git a/docs/data/joy/tools/TypographyThemeViewer.tsx b/docs/data/joy/tools/TypographyThemeViewer.tsx new file mode 100644 index 00000000000000..80b64ca4859b08 --- /dev/null +++ b/docs/data/joy/tools/TypographyThemeViewer.tsx @@ -0,0 +1,232 @@ +import * as React from 'react'; +import { + extendTheme, + styled, + TypographySystem, + FontSize, + FontWeight, + LineHeight, + LetterSpacing, +} from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Tooltip from '@mui/joy/Tooltip'; +import Typography from '@mui/joy/Typography'; + +const defaultTheme = extendTheme(); + +const Table = styled('table')({ + width: 'max-content', + borderCollapse: 'separate', + borderSpacing: 12, + thead: { + height: 32, + }, + th: { + textAlign: 'left', + '&:first-child': { + width: 100, + }, + }, + td: { + verticalAlign: 'top', + }, +}); + +const extractFromVar = (value = '', field: string) => + value.replace(`var(--joy-${field}-`, '').replace(')', ''); + +export default function FontSizeThemeViewer() { + const levels = Object.keys(defaultTheme.typography) as Array< + keyof TypographySystem + >; + const renderSwatch = (colorScheme: 'light' | 'dark', token: string) => + token ? ( + + ) : null; + return ( + + + + + + + + + + + + + + {levels.map((level) => ( + + + + + + + + + ))} + +
+ Level + + + Color + + + + Font size + + + + Font weight + + + + Line height + + + + Letter spacing + +
+ Preview} + size="sm" + arrow + variant="outlined" + placement="bottom-start" + sx={{ pointerEvents: 'none' }} + > + {level} + + + + + (light) + + + (dark) + + + } + sx={{ pointerEvents: 'none' }} + > + + {defaultTheme.typography[level].color || '-'} + + + + + + {defaultTheme.typography[level].fontSize || '-'} + + + + + + {defaultTheme.typography[level].fontWeight || '-'} + + + + + + {defaultTheme.typography[level].lineHeight || '-'} + + + + + + {defaultTheme.typography[level].letterSpacing || '-'} + + +
+ + ); +} diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 5e135eaa78b0d9..5bcaebfd7c4116 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -4,4 +4,14 @@ ## Palette +The tokens can be accessed from `theme.vars.palette.{token}`. Each token has both `light` and `dark` values. + {{"demo": "PaletteThemeViewer.js"}} + +## Radius + +## Typography + +{{"demo": "TypographyThemeViewer.js"}} + +## Shadow From 159bca99f8a82b1873316183d947099311e4d794 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 15:08:01 +0700 Subject: [PATCH 04/38] add ShadowThemeViewer --- docs/data/joy/tools/PaletteThemeViewer.js | 30 ++++- docs/data/joy/tools/PaletteThemeViewer.tsx | 1 + docs/data/joy/tools/ShadowThemeViewer.js | 88 ++++++++++++++ docs/data/joy/tools/ShadowThemeViewer.tsx | 87 ++++++++++++++ docs/data/joy/tools/TypographyThemeViewer.js | 98 ++++------------ docs/data/joy/tools/TypographyThemeViewer.tsx | 107 +++++------------- docs/data/joy/tools/default-theme-viewer.md | 2 + 7 files changed, 262 insertions(+), 151 deletions(-) create mode 100644 docs/data/joy/tools/ShadowThemeViewer.js create mode 100644 docs/data/joy/tools/ShadowThemeViewer.tsx diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index 41ebc1334f1450..ccbe5d791ebd05 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -3,10 +3,12 @@ import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Input from '@mui/joy/Input'; import IconButton from '@mui/joy/IconButton'; +import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; import Close from '@mui/icons-material/CloseOutlined'; +import InfoOutlined from '@mui/icons-material/InfoOutlined'; const defaultTheme = extendTheme(); @@ -14,6 +16,7 @@ const traverseObject = (palette) => { const result = {}; const traverse = (object, parts = []) => { if (object && typeof object === 'object') { + // eslint-disable-next-line no-restricted-syntax for (const key of Object.keys(object)) { traverse(object[key], [...parts, key]); } @@ -64,6 +67,7 @@ export default function PaletteThemeViewer() { }} /> ); + return ( ( - {token} + + To create a translucent color:
+ + rgba(var(--joy-palette-{token.replace('.', '-')}) / + 0.6) + + + } + sx={{ pointerEvents: 'none' }} + > + + + ) : null + } + > + {token} + { const result: Record = {}; const traverse = (object: any, parts: string[] = []) => { if (object && typeof object === 'object') { + // eslint-disable-next-line no-restricted-syntax for (const key of Object.keys(object)) { traverse(object[key], [...parts, key]); } diff --git a/docs/data/joy/tools/ShadowThemeViewer.js b/docs/data/joy/tools/ShadowThemeViewer.js new file mode 100644 index 00000000000000..ab00ce8d6c7f47 --- /dev/null +++ b/docs/data/joy/tools/ShadowThemeViewer.js @@ -0,0 +1,88 @@ +import * as React from 'react'; +import { styled, extendTheme } from '@mui/joy/styles'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; +import LightMode from '@mui/icons-material/LightModeOutlined'; +import DarkMode from '@mui/icons-material/DarkModeOutlined'; + +const Table = styled('table')({ + width: '100%', + borderCollapse: 'separate', + borderSpacing: 20, + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, + td: { + verticalAlign: 'top', + }, +}); +const defaultTheme = extendTheme(); + +export default function ShadowThemeViewer() { + const tokens = Object.keys(defaultTheme.shadow); + const formatShadowLayers = (shadow) => + shadow + .split(', ') + .map((token) => `${token},`) + .reduce( + (result, curr, index, array) => + array.length - 1 !== index ? [...result, curr,
] : [...result, curr], + [], + ); + + return ( + + + + + + + + + + + {tokens.map((token) => ( + + + + + + + ))} + +
+ Key + + Value + + }> + Light + + + }> + Dark + +
+ {token} + + + {formatShadowLayers(defaultTheme.shadow[token])} + + + + + +
+ ); +} diff --git a/docs/data/joy/tools/ShadowThemeViewer.tsx b/docs/data/joy/tools/ShadowThemeViewer.tsx new file mode 100644 index 00000000000000..b56ecebcf2cb87 --- /dev/null +++ b/docs/data/joy/tools/ShadowThemeViewer.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { styled, extendTheme, Shadow } from '@mui/joy/styles'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; +import LightMode from '@mui/icons-material/LightModeOutlined'; +import DarkMode from '@mui/icons-material/DarkModeOutlined'; + +const Table = styled('table')({ + width: '100%', + borderCollapse: 'separate', + borderSpacing: 20, + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, + td: { + verticalAlign: 'top', + }, +}); +const defaultTheme = extendTheme(); + +export default function ShadowThemeViewer() { + const tokens = Object.keys(defaultTheme.shadow) as Array; + const formatShadowLayers = (shadow: string) => + shadow + .split(', ') + .map((token) => `${token},`) + .reduce>( + (result, curr, index, array) => + array.length - 1 !== index ? [...result, curr,
] : [...result, curr], + [], + ); + return ( + + + + + + + + + + + {tokens.map((token) => ( + + + + + + + ))} + +
+ Key + + Value + + }> + Light + + + }> + Dark + +
+ {token} + + + {formatShadowLayers(defaultTheme.shadow[token])} + + + + + +
+ ); +} diff --git a/docs/data/joy/tools/TypographyThemeViewer.js b/docs/data/joy/tools/TypographyThemeViewer.js index df3b44cac2c36c..92c6c72f94cc46 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.js +++ b/docs/data/joy/tools/TypographyThemeViewer.js @@ -1,13 +1,8 @@ import * as React from 'react'; -import { extendTheme, Palette, styled } from '@mui/joy/styles'; +import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; -import Input from '@mui/joy/Input'; -import IconButton from '@mui/joy/IconButton'; import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; -import LightMode from '@mui/icons-material/LightModeOutlined'; -import DarkMode from '@mui/icons-material/DarkModeOutlined'; -import Close from '@mui/icons-material/CloseOutlined'; const defaultTheme = extendTheme(); @@ -29,11 +24,12 @@ const Table = styled('table')({ }, }); -const extractFromVar = (value = '', field) => - value.replace(`var(--joy-${field}-`, '').replace(')', ''); +const extractFromVar = (value, field) => + (value || '').replace(`var(--joy-${field}-`, '').replace(')', ''); export default function FontSizeThemeViewer() { const levels = Object.keys(defaultTheme.typography); + const renderSwatch = (colorScheme, token) => token ? ( - - - ( + + - {defaultTheme.typography[level].fontWeight || '-'} - - - - - - - {defaultTheme.typography[level].lineHeight || '-'} - - - - - - - {defaultTheme.typography[level].letterSpacing || '-'} - - - + + {defaultTheme.typography[level][field] || '-'} + + + + ))} ))} diff --git a/docs/data/joy/tools/TypographyThemeViewer.tsx b/docs/data/joy/tools/TypographyThemeViewer.tsx index 80b64ca4859b08..8f6d95f8cfa7b3 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.tsx +++ b/docs/data/joy/tools/TypographyThemeViewer.tsx @@ -1,13 +1,5 @@ import * as React from 'react'; -import { - extendTheme, - styled, - TypographySystem, - FontSize, - FontWeight, - LineHeight, - LetterSpacing, -} from '@mui/joy/styles'; +import { extendTheme, styled, TypographySystem, FontSize } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; @@ -32,8 +24,8 @@ const Table = styled('table')({ }, }); -const extractFromVar = (value = '', field: string) => - value.replace(`var(--joy-${field}-`, '').replace(')', ''); +const extractFromVar = (value: string, field: string) => + (value || '').replace(`var(--joy-${field}-`, '').replace(')', ''); export default function FontSizeThemeViewer() { const levels = Object.keys(defaultTheme.typography) as Array< @@ -109,7 +101,6 @@ export default function FontSizeThemeViewer() { size="sm" arrow variant="outlined" - placement="bottom-start" title={ - - - - {defaultTheme.typography[level].fontWeight || '-'} - - - - - - - {defaultTheme.typography[level].lineHeight || '-'} - - - - - - - {defaultTheme.typography[level].letterSpacing || '-'} - - - + {(['fontWeight', 'lineHeight', 'letterSpacing'] as const).map( + (field) => ( + + )[ + extractFromVar( + defaultTheme.typography[level][field] as string, + field, + ) + ] || 'unset' + } + sx={{ pointerEvents: 'none' }} + > + + {defaultTheme.typography[level][field] || '-'} + + + + ), + )} ))} diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 5bcaebfd7c4116..08d7a9ced47e29 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -15,3 +15,5 @@ The tokens can be accessed from `theme.vars.palette.{token}`. Each token has bot {{"demo": "TypographyThemeViewer.js"}} ## Shadow + +{{"demo": "ShadowThemeViewer.js"}} From 873158805f89102a42db7b469eb589b2ba9f520d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 15:16:14 +0700 Subject: [PATCH 05/38] update types --- docs/data/joy/tools/PaletteThemeViewer.tsx | 12 +++-- docs/data/joy/tools/RadiusThemeViewer.js | 56 +++++++++++++++++++++ docs/data/joy/tools/RadiusThemeViewer.tsx | 56 +++++++++++++++++++++ docs/data/joy/tools/default-theme-viewer.md | 2 + 4 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 docs/data/joy/tools/RadiusThemeViewer.js create mode 100644 docs/data/joy/tools/RadiusThemeViewer.tsx diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index 1fb8920b64da12..1063d29f0ab17f 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -110,17 +110,21 @@ export default function PaletteThemeViewer() { - To create a translucent color:
- + Translucent color usage:
+ rgba(var(--joy-palette-{token.replace('.', '-')}) / 0.6) - + } sx={{ pointerEvents: 'none' }} diff --git a/docs/data/joy/tools/RadiusThemeViewer.js b/docs/data/joy/tools/RadiusThemeViewer.js new file mode 100644 index 00000000000000..d48763a0a2a972 --- /dev/null +++ b/docs/data/joy/tools/RadiusThemeViewer.js @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { styled, extendTheme } from '@mui/joy/styles'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; + +const Table = styled('table')({ + width: '100%', + borderCollapse: 'separate', + borderSpacing: 20, + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, +}); +const defaultTheme = extendTheme(); + +export default function RadiusThemeViewer() { + const tokens = Object.keys(defaultTheme.radius); + return ( + + + + + + + + + + {tokens.map((token) => ( + + + + + + ))} + +
+ Key + + Value + + Preview +
+ {token} + + {defaultTheme.radius[token]} + + +
+ ); +} diff --git a/docs/data/joy/tools/RadiusThemeViewer.tsx b/docs/data/joy/tools/RadiusThemeViewer.tsx new file mode 100644 index 00000000000000..e1052666064409 --- /dev/null +++ b/docs/data/joy/tools/RadiusThemeViewer.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { styled, extendTheme, Radius } from '@mui/joy/styles'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; + +const Table = styled('table')({ + width: '100%', + borderCollapse: 'separate', + borderSpacing: 20, + thead: { + height: 32, + }, + th: { + textAlign: 'left', + }, +}); +const defaultTheme = extendTheme(); + +export default function RadiusThemeViewer() { + const tokens = Object.keys(defaultTheme.radius) as Array; + return ( + + + + + + + + + + {tokens.map((token) => ( + + + + + + ))} + +
+ Key + + Value + + Preview +
+ {token} + + {defaultTheme.radius[token]} + + +
+ ); +} diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 08d7a9ced47e29..f8157413cff904 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -10,6 +10,8 @@ The tokens can be accessed from `theme.vars.palette.{token}`. Each token has bot ## Radius +{{"demo": "RadiusThemeViewer.js"}} + ## Typography {{"demo": "TypographyThemeViewer.js"}} From ada92b8fad23bd57190c4dbc237ac5a526421d14 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 15:54:02 +0700 Subject: [PATCH 06/38] update --- docs/data/joy/tools/PaletteThemeViewer.js | 30 ++++++++++++++----- docs/data/joy/tools/PaletteThemeViewer.tsx | 18 +++++++++-- docs/data/joy/tools/RadiusThemeViewer.js | 2 +- docs/data/joy/tools/RadiusThemeViewer.tsx | 2 +- docs/data/joy/tools/ShadowThemeViewer.js | 28 +++++++++++------ docs/data/joy/tools/ShadowThemeViewer.tsx | 28 +++++++++++------ docs/data/joy/tools/TypographyThemeViewer.js | 4 ++- docs/data/joy/tools/TypographyThemeViewer.tsx | 4 ++- docs/data/joy/tools/default-theme-viewer.md | 8 +++++ 9 files changed, 92 insertions(+), 32 deletions(-) diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index ccbe5d791ebd05..7f317ecc341979 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -58,12 +58,24 @@ export default function PaletteThemeViewer() { component="span" data-joy-color-scheme={colorScheme} sx={{ + position: 'relative', width: '1em', height: '1em', fontSize: 'var(--Icon-fontSize)', borderRadius: '2px', - bgcolor: token, - boxShadow: 'inset 0 0 0 1px #bababa', + backgroundImage: `linear-gradient(90deg, var(--joy-palette-text-tertiary) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, var(--joy-palette-text-tertiary) 50%)`, + backgroundRepeat: 'repeat-x', + backgroundSize: '100% 50%, 100% 50%', + backgroundPosition: '0 0, 0 100%', + '&::after': { + content: '""', + position: 'absolute', + display: 'block', + inset: 0, + bgcolor: token, + borderRadius: 'inherit', + boxShadow: 'inset 0 0 0 1px #bababa', + }, }} /> ); @@ -109,19 +121,23 @@ export default function PaletteThemeViewer() { - To create a translucent color:
- + Translucent color usage:
+ rgba(var(--joy-palette-{token.replace('.', '-')}) / 0.6) - + } sx={{ pointerEvents: 'none' }} diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index 1063d29f0ab17f..61c9d273a6ddb8 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -58,12 +58,24 @@ export default function PaletteThemeViewer() { component="span" data-joy-color-scheme={colorScheme} sx={{ + position: 'relative', width: '1em', height: '1em', fontSize: 'var(--Icon-fontSize)', borderRadius: '2px', - bgcolor: token, - boxShadow: 'inset 0 0 0 1px #bababa', + backgroundImage: `linear-gradient(90deg, var(--joy-palette-text-tertiary) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, var(--joy-palette-text-tertiary) 50%)`, + backgroundRepeat: 'repeat-x', + backgroundSize: '100% 50%, 100% 50%', + backgroundPosition: '0 0, 0 100%', + '&::after': { + content: '""', + position: 'absolute', + display: 'block', + inset: 0, + bgcolor: token, + borderRadius: 'inherit', + boxShadow: 'inset 0 0 0 1px #bababa', + }, }} /> ); @@ -108,7 +120,7 @@ export default function PaletteThemeViewer() { ( - {token} + {token} {defaultTheme.radius[token]} diff --git a/docs/data/joy/tools/RadiusThemeViewer.tsx b/docs/data/joy/tools/RadiusThemeViewer.tsx index e1052666064409..06436cbec0268c 100644 --- a/docs/data/joy/tools/RadiusThemeViewer.tsx +++ b/docs/data/joy/tools/RadiusThemeViewer.tsx @@ -37,7 +37,7 @@ export default function RadiusThemeViewer() { {tokens.map((token) => ( - {token} + {token} {defaultTheme.radius[token]} diff --git a/docs/data/joy/tools/ShadowThemeViewer.js b/docs/data/joy/tools/ShadowThemeViewer.js index ab00ce8d6c7f47..0d6ed6cecc84ac 100644 --- a/docs/data/joy/tools/ShadowThemeViewer.js +++ b/docs/data/joy/tools/ShadowThemeViewer.js @@ -26,10 +26,11 @@ export default function ShadowThemeViewer() { const formatShadowLayers = (shadow) => shadow .split(', ') - .map((token) => `${token},`) .reduce( (result, curr, index, array) => - array.length - 1 !== index ? [...result, curr,
] : [...result, curr], + array.length - 1 !== index + ? [...result, `${curr},`,
] + : [...result, curr], [], ); @@ -59,25 +60,34 @@ export default function ShadowThemeViewer() { {tokens.map((token) => ( - {token} + {token} {formatShadowLayers(defaultTheme.shadow[token])} - + theme.shadow[token], + borderRadius: 'xs', + mr: 2, + }} /> - + theme.shadow[token], + borderRadius: 'xs', + }} /> diff --git a/docs/data/joy/tools/ShadowThemeViewer.tsx b/docs/data/joy/tools/ShadowThemeViewer.tsx index b56ecebcf2cb87..6d72ea65459b6b 100644 --- a/docs/data/joy/tools/ShadowThemeViewer.tsx +++ b/docs/data/joy/tools/ShadowThemeViewer.tsx @@ -26,10 +26,11 @@ export default function ShadowThemeViewer() { const formatShadowLayers = (shadow: string) => shadow .split(', ') - .map((token) => `${token},`) .reduce>( (result, curr, index, array) => - array.length - 1 !== index ? [...result, curr,
] : [...result, curr], + array.length - 1 !== index + ? [...result, `${curr},`,
] + : [...result, curr], [], ); return ( @@ -58,25 +59,34 @@ export default function ShadowThemeViewer() { {tokens.map((token) => ( - {token} + {token} {formatShadowLayers(defaultTheme.shadow[token])} - + theme.shadow[token], + borderRadius: 'xs', + mr: 2, + }} /> - + theme.shadow[token], + borderRadius: 'xs', + }} /> diff --git a/docs/data/joy/tools/TypographyThemeViewer.js b/docs/data/joy/tools/TypographyThemeViewer.js index 92c6c72f94cc46..6121776b656c75 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.js +++ b/docs/data/joy/tools/TypographyThemeViewer.js @@ -92,7 +92,9 @@ export default function FontSizeThemeViewer() { placement="bottom-start" sx={{ pointerEvents: 'none' }} > - {level} + + {level} + diff --git a/docs/data/joy/tools/TypographyThemeViewer.tsx b/docs/data/joy/tools/TypographyThemeViewer.tsx index 8f6d95f8cfa7b3..51ed01f937ab5a 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.tsx +++ b/docs/data/joy/tools/TypographyThemeViewer.tsx @@ -93,7 +93,9 @@ export default function FontSizeThemeViewer() { placement="bottom-start" sx={{ pointerEvents: 'none' }} > - {level} + + {level} + diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index f8157413cff904..da03cee52bb578 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -2,6 +2,10 @@

Here's what the theme object looks like with the default values.

+:::warning +This is a work in progress. We're still iterating on Joy UI's default theme. +::: + ## Palette The tokens can be accessed from `theme.vars.palette.{token}`. Each token has both `light` and `dark` values. @@ -14,8 +18,12 @@ The tokens can be accessed from `theme.vars.palette.{token}`. Each token has bot ## Typography +Joy UI provides 13 built-in typography levels. You can hover on each row to see the preview. + {{"demo": "TypographyThemeViewer.js"}} +To customize the theme typography, see [theme typography customization](/joy-ui/customization/theme-typography/) page. + ## Shadow {{"demo": "ShadowThemeViewer.js"}} From 90f1685fadb7251020c5041f24469c9625235e73 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 15:55:20 +0700 Subject: [PATCH 07/38] update content --- docs/data/joy/tools/default-theme-viewer.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index da03cee52bb578..c6f0fd02662869 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -12,10 +12,14 @@ The tokens can be accessed from `theme.vars.palette.{token}`. Each token has bot {{"demo": "PaletteThemeViewer.js"}} +To customize the theme palette, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. + ## Radius {{"demo": "RadiusThemeViewer.js"}} +To customize the theme radius, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. + ## Typography Joy UI provides 13 built-in typography levels. You can hover on each row to see the preview. @@ -27,3 +31,5 @@ To customize the theme typography, see [theme typography customization](/joy-ui/ ## Shadow {{"demo": "ShadowThemeViewer.js"}} + +To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. From 89d4a91a6cdcc849690b75504be56295a0e28186 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 15:56:37 +0700 Subject: [PATCH 08/38] update --- docs/data/joy/tools/default-theme-viewer.md | 12 ++++++------ test/regressions/index.js | 5 ++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index c6f0fd02662869..59faa20af7432d 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -20,6 +20,12 @@ To customize the theme palette, see [theme tokens customization](/joy-ui/customi To customize the theme radius, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. +## Shadow + +{{"demo": "ShadowThemeViewer.js"}} + +To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. + ## Typography Joy UI provides 13 built-in typography levels. You can hover on each row to see the preview. @@ -27,9 +33,3 @@ Joy UI provides 13 built-in typography levels. You can hover on each row to see {{"demo": "TypographyThemeViewer.js"}} To customize the theme typography, see [theme typography customization](/joy-ui/customization/theme-typography/) page. - -## Shadow - -{{"demo": "ShadowThemeViewer.js"}} - -To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. diff --git a/test/regressions/index.js b/test/regressions/index.js index 2720b61fd5958c..d70705139583dc 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -29,7 +29,10 @@ importRegressionFixtures.keys().forEach((path) => { const blacklist = [ 'docs-joy-getting-started-templates/TemplateCollection.png', 'docs-joy-core-features-automatic-adjustment/ListThemes.png', - 'docs-joy-tools/JoyThemeViewer.png', + 'docs-joy-tools/PaletteThemeViewer.png', + 'docs-joy-tools/RadiusThemeViewer.png', + 'docs-joy-tools/ShadowThemeViewer.png', + 'docs-joy-tools/TypographyThemeViewer.png', 'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction 'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components 'docs-components-alert/TransitionAlerts.png', // Needs interaction From 641508605ffbffd9f2b8c22bc5db09224a86e9f6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 16:12:41 +0700 Subject: [PATCH 09/38] exclude mode --- docs/data/joy/tools/PaletteThemeViewer.js | 1 + docs/data/joy/tools/PaletteThemeViewer.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index 7f317ecc341979..62497fb7ad9fb2 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -116,6 +116,7 @@ export default function PaletteThemeViewer() { {paletteTokens + .filter((token) => token !== 'mode') .filter((token) => (text ? token.toLowerCase().includes(text) : true)) .map((token) => ( diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index 61c9d273a6ddb8..ae528f030e52dc 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -115,6 +115,7 @@ export default function PaletteThemeViewer() { {paletteTokens + .filter((token) => token !== 'mode') .filter((token) => (text ? token.toLowerCase().includes(text) : true)) .map((token) => ( From 074d1e3f1e4b93dfee470e7c96f530700dc9cc05 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 16:15:55 +0700 Subject: [PATCH 10/38] update content --- docs/data/joy/tools/default-theme-viewer.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 59faa20af7432d..c2d5611dcad7ff 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -16,19 +16,23 @@ To customize the theme palette, see [theme tokens customization](/joy-ui/customi ## Radius +The tokens can be accessed from `theme.vars.radius.{token}`. + {{"demo": "RadiusThemeViewer.js"}} To customize the theme radius, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. ## Shadow +The tokens can be accessed from `theme.vars.shadow.{token}`. + {{"demo": "ShadowThemeViewer.js"}} To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. ## Typography -Joy UI provides 13 built-in typography levels. You can hover on each row to see the preview. +Joy UI provides 13 built-in typography levels that can be accessed from `theme.typography.{level}`. You can hover on each row to see the preview. {{"demo": "TypographyThemeViewer.js"}} From 6ad6043b7b08476a92cffd3104d0d754c3b5d472 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Dec 2022 10:12:04 +0700 Subject: [PATCH 11/38] add JoyDefaultTheme explorer --- docs/data/joy/tools/JoyDefaultTheme.js | 262 ++++++++++++++++++++ docs/data/joy/tools/ShadowThemeViewer.tsx | 20 +- docs/data/joy/tools/default-theme-viewer.md | 6 + 3 files changed, 279 insertions(+), 9 deletions(-) create mode 100644 docs/data/joy/tools/JoyDefaultTheme.js diff --git a/docs/data/joy/tools/JoyDefaultTheme.js b/docs/data/joy/tools/JoyDefaultTheme.js new file mode 100644 index 00000000000000..617aac6153d4c8 --- /dev/null +++ b/docs/data/joy/tools/JoyDefaultTheme.js @@ -0,0 +1,262 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import { extendTheme, styled } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import ExpandIcon from '@mui/icons-material/ExpandMore'; +import CollapseIcon from '@mui/icons-material/ChevronRight'; +import TreeView from '@mui/lab/TreeView'; +import MuiTreeItem, { treeItemClasses } from '@mui/lab/TreeItem'; +import { lighten, ThemeProvider, createTheme } from '@mui/material/styles'; + +/** + * @param {unknown} value + */ +function getType(value) { + if (Array.isArray(value)) { + return 'array'; + } + + if (/^(#|rgb|rgba|hsl|hsla)/.test(value)) { + return 'color'; + } + + if (value === null) { + return 'null'; + } + + return typeof value; +} + +/** + * @param {unknown} value + * @param {ReturnType} type + */ +function getLabel(value, type) { + switch (type) { + case 'array': + return `Array(${value.length})`; + case 'null': + return 'null'; + case 'undefined': + return 'undefined'; + case 'function': + return `f ${value.name}()`; + case 'object': + return 'Object'; + case 'string': + return `"${value}"`; + case 'symbol': + return `Symbol(${String(value)})`; + case 'bigint': + case 'boolean': + case 'number': + default: + return String(value); + } +} + +function getTokenType(type) { + switch (type) { + case 'color': + return 'string'; + case 'object': + case 'array': + return 'comment'; + default: + return type; + } +} + +const Color = styled('span')(({ theme }) => ({ + backgroundColor: '#fff', + display: 'inline-block', + marginBottom: -1, + marginRight: theme.spacing(0.5), + border: '1px solid', + backgroundImage: + 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")', +})); + +function ObjectEntryLabel(props) { + const { objectKey, objectValue } = props; + const type = getType(objectValue); + const label = getLabel(objectValue, type); + const tokenType = getTokenType(type); + + return ( + + {`${objectKey}: `} + {type === 'color' ? ( + + + + ) : null} + {label} + + ); +} + +ObjectEntryLabel.propTypes = { + objectKey: PropTypes.any, + objectValue: PropTypes.any, +}; + +const TreeItem = styled(MuiTreeItem)({ + [`&:focus > .${treeItemClasses.content}`]: { + backgroundColor: lighten('#333', 0.08), + outline: `2px dashed ${lighten('#333', 0.3)}`, + }, + [`& .${treeItemClasses.content}`]: { + '&:hover': { + backgroundColor: lighten('#333', 0.08), + }, + }, +}); + +function ObjectEntry(props) { + const { nodeId, objectKey, objectValue } = props; + const keyPrefix = nodeId; + let children = null; + + if ( + (objectValue !== null && typeof objectValue === 'object') || + typeof objectValue === 'function' + ) { + children = + Object.keys(objectValue).length === 0 + ? undefined + : Object.keys(objectValue).map((key) => { + return ( + + ); + }); + } + + return ( + } + > + {children} + + ); +} +ObjectEntry.propTypes = { + nodeId: PropTypes.string.isRequired, + objectKey: PropTypes.any.isRequired, + objectValue: PropTypes.any, +}; + +function Inspector(props) { + const { data, expandPaths = [], ...other } = props; + + const keyPrefix = '$ROOT'; + const defaultExpanded = React.useMemo(() => { + return Array.isArray(expandPaths) + ? expandPaths.map((expandPath) => `${keyPrefix}.${expandPath}`) + : []; + }, [keyPrefix, expandPaths]); + // for default* to take effect we need to remount + const key = React.useMemo(() => defaultExpanded.join(''), [defaultExpanded]); + + return ( + } + defaultEndIcon={
} + defaultExpanded={defaultExpanded} + defaultExpandIcon={} + {...other} + > + {Object.keys(data).map((objectKey) => { + return ( + + ); + })} + + ); +} + +Inspector.propTypes = { + data: PropTypes.any, + expandPaths: PropTypes.arrayOf(PropTypes.string), +}; + +function computeNodeIds(object, prefix) { + if ( + (object !== null && typeof object === 'object') || + typeof object === 'function' + ) { + const ids = []; + Object.keys(object).forEach((key) => { + ids.push( + `${prefix}${key}`, + ...computeNodeIds(object[key], `${prefix}${key}.`), + ); + }); + + return ids; + } + return []; +} + +function useNodeIdsLazy(object) { + const [allNodeIds, setAllNodeIds] = React.useState([]); + // technically we want to compute them lazily until we need them (expand all) + // yielding is good enough. technically we want to schedule the computation + // with low pri and upgrade the priority later + React.useEffect(() => { + setAllNodeIds(computeNodeIds(object, '')); + }, [object]); + + return allNodeIds; +} + +const defaultTheme = extendTheme(); + +function JoyDefaultTheme() { + React.useEffect(() => { + let expandPath; + decodeURI(document.location.search.slice(1)) + .split('&') + .forEach((param) => { + const [name, value] = param.split('='); + if (name === 'expand-path') { + expandPath = value; + } else if (name === 'expend-path' && !expandPath) { + // 'expend-path' is for backwards compatibility of any external links with a prior typo. + expandPath = value; + } + }); + }, []); + + const data = defaultTheme; + const allNodeIds = useNodeIdsLazy(data); + React.useDebugValue(allNodeIds); + + return ( + + createTheme({ palette: { mode: 'dark' } })}> + + + + ); +} + +export default JoyDefaultTheme; diff --git a/docs/data/joy/tools/ShadowThemeViewer.tsx b/docs/data/joy/tools/ShadowThemeViewer.tsx index 6d72ea65459b6b..7c762a29bbcd58 100644 --- a/docs/data/joy/tools/ShadowThemeViewer.tsx +++ b/docs/data/joy/tools/ShadowThemeViewer.tsx @@ -24,15 +24,17 @@ const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { const tokens = Object.keys(defaultTheme.shadow) as Array; const formatShadowLayers = (shadow: string) => - shadow - .split(', ') - .reduce>( - (result, curr, index, array) => - array.length - 1 !== index - ? [...result, `${curr},`,
] - : [...result, curr], - [], - ); + React.Children.toArray( + shadow + .split(', ') + .reduce>( + (result, curr, index, array) => + array.length - 1 !== index + ? [...result, `${curr},`,
] + : [...result, curr], + [], + ), + ); return ( diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index c2d5611dcad7ff..c0fce8e56bb48a 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -6,6 +6,12 @@ This is a work in progress. We're still iterating on Joy UI's default theme. ::: +## Explore + +Explore the default theme object: + +{{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}} + ## Palette The tokens can be accessed from `theme.vars.palette.{token}`. Each token has both `light` and `dark` values. From d55e2413af4119110ce6b5cc9d81043fd0566e56 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Dec 2022 13:43:23 +0700 Subject: [PATCH 12/38] update --- docs/data/joy/tools/PaletteThemeViewer.js | 26 ++------- docs/data/joy/tools/PaletteThemeViewer.tsx | 21 ++----- docs/data/joy/tools/RadiusThemeViewer.js | 56 ------------------- docs/data/joy/tools/RadiusThemeViewer.tsx | 56 ------------------- docs/data/joy/tools/ShadowThemeViewer.js | 20 ++++--- docs/data/joy/tools/TypographyThemeViewer.js | 6 +- docs/data/joy/tools/TypographyThemeViewer.tsx | 6 +- docs/data/joy/tools/default-theme-viewer.md | 26 ++++----- test/regressions/index.js | 1 - 9 files changed, 43 insertions(+), 175 deletions(-) delete mode 100644 docs/data/joy/tools/RadiusThemeViewer.js delete mode 100644 docs/data/joy/tools/RadiusThemeViewer.tsx diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index 62497fb7ad9fb2..62fd1ea807691e 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -1,13 +1,12 @@ import * as React from 'react'; import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; -import Input from '@mui/joy/Input'; -import IconButton from '@mui/joy/IconButton'; + import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; -import Close from '@mui/icons-material/CloseOutlined'; + import InfoOutlined from '@mui/icons-material/InfoOutlined'; const defaultTheme = extendTheme(); @@ -35,6 +34,9 @@ const collator = new Intl.Collator(undefined, { }); const Table = styled('table')({ + borderCollapse: 'separate', + borderSpacing: '8px 0', + margin: '0 -8px', thead: { height: 32, }, @@ -47,7 +49,6 @@ const Table = styled('table')({ }); export default function PaletteThemeViewer() { - const [text, setText] = React.useState(''); const light = traverseObject(defaultTheme.colorSchemes.light.palette); const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); const paletteTokens = Array.from( @@ -81,21 +82,7 @@ export default function PaletteThemeViewer() { ); return ( - - setText(event.target.value)} - endDecorator={ - text ? ( - setText('')}> - - - ) : null - } - sx={{ maxWidth: 300, mb: 2 }} - /> +
@@ -117,7 +104,6 @@ export default function PaletteThemeViewer() { {paletteTokens .filter((token) => token !== 'mode') - .filter((token) => (text ? token.toLowerCase().includes(text) : true)) .map((token) => (
diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index ae528f030e52dc..a996fc2bcf3b4e 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -35,6 +35,9 @@ const collator = new Intl.Collator(undefined, { }); const Table = styled('table')({ + borderCollapse: 'separate', + borderSpacing: '8px 0', + margin: '0 -8px', thead: { height: 32, }, @@ -47,7 +50,6 @@ const Table = styled('table')({ }); export default function PaletteThemeViewer() { - const [text, setText] = React.useState(''); const light = traverseObject(defaultTheme.colorSchemes.light.palette); const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); const paletteTokens = Array.from( @@ -80,21 +82,7 @@ export default function PaletteThemeViewer() { /> ); return ( - - setText(event.target.value)} - endDecorator={ - text ? ( - setText('')}> - - - ) : null - } - sx={{ maxWidth: 300, mb: 2 }} - /> + @@ -116,7 +104,6 @@ export default function PaletteThemeViewer() { {paletteTokens .filter((token) => token !== 'mode') - .filter((token) => (text ? token.toLowerCase().includes(text) : true)) .map((token) => (
diff --git a/docs/data/joy/tools/RadiusThemeViewer.js b/docs/data/joy/tools/RadiusThemeViewer.js deleted file mode 100644 index 4e6b0f88013d21..00000000000000 --- a/docs/data/joy/tools/RadiusThemeViewer.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { styled, extendTheme } from '@mui/joy/styles'; -import Typography from '@mui/joy/Typography'; -import Sheet from '@mui/joy/Sheet'; - -const Table = styled('table')({ - width: '100%', - borderCollapse: 'separate', - borderSpacing: 20, - thead: { - height: 32, - }, - th: { - textAlign: 'left', - }, -}); -const defaultTheme = extendTheme(); - -export default function RadiusThemeViewer() { - const tokens = Object.keys(defaultTheme.radius); - return ( - - - - - - - - - - {tokens.map((token) => ( - - - - - - ))} - -
- Key - - Value - - Preview -
- {token} - - {defaultTheme.radius[token]} - - -
- ); -} diff --git a/docs/data/joy/tools/RadiusThemeViewer.tsx b/docs/data/joy/tools/RadiusThemeViewer.tsx deleted file mode 100644 index 06436cbec0268c..00000000000000 --- a/docs/data/joy/tools/RadiusThemeViewer.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { styled, extendTheme, Radius } from '@mui/joy/styles'; -import Typography from '@mui/joy/Typography'; -import Sheet from '@mui/joy/Sheet'; - -const Table = styled('table')({ - width: '100%', - borderCollapse: 'separate', - borderSpacing: 20, - thead: { - height: 32, - }, - th: { - textAlign: 'left', - }, -}); -const defaultTheme = extendTheme(); - -export default function RadiusThemeViewer() { - const tokens = Object.keys(defaultTheme.radius) as Array; - return ( - - - - - - - - - - {tokens.map((token) => ( - - - - - - ))} - -
- Key - - Value - - Preview -
- {token} - - {defaultTheme.radius[token]} - - -
- ); -} diff --git a/docs/data/joy/tools/ShadowThemeViewer.js b/docs/data/joy/tools/ShadowThemeViewer.js index 0d6ed6cecc84ac..ef83126e495893 100644 --- a/docs/data/joy/tools/ShadowThemeViewer.js +++ b/docs/data/joy/tools/ShadowThemeViewer.js @@ -24,15 +24,17 @@ const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { const tokens = Object.keys(defaultTheme.shadow); const formatShadowLayers = (shadow) => - shadow - .split(', ') - .reduce( - (result, curr, index, array) => - array.length - 1 !== index - ? [...result, `${curr},`,
] - : [...result, curr], - [], - ); + React.Children.toArray( + shadow + .split(', ') + .reduce( + (result, curr, index, array) => + array.length - 1 !== index + ? [...result, `${curr},`,
] + : [...result, curr], + [], + ), + ); return ( diff --git a/docs/data/joy/tools/TypographyThemeViewer.js b/docs/data/joy/tools/TypographyThemeViewer.js index 6121776b656c75..17bab3aaa72179 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.js +++ b/docs/data/joy/tools/TypographyThemeViewer.js @@ -9,7 +9,7 @@ const defaultTheme = extendTheme(); const Table = styled('table')({ width: 'max-content', borderCollapse: 'separate', - borderSpacing: 12, + borderSpacing: '12px 0', thead: { height: 32, }, @@ -21,6 +21,10 @@ const Table = styled('table')({ }, td: { verticalAlign: 'top', + padding: 0, + '& > *': { + padding: '4px 0', + }, }, }); diff --git a/docs/data/joy/tools/TypographyThemeViewer.tsx b/docs/data/joy/tools/TypographyThemeViewer.tsx index 51ed01f937ab5a..36ff93490ae24e 100644 --- a/docs/data/joy/tools/TypographyThemeViewer.tsx +++ b/docs/data/joy/tools/TypographyThemeViewer.tsx @@ -9,7 +9,7 @@ const defaultTheme = extendTheme(); const Table = styled('table')({ width: 'max-content', borderCollapse: 'separate', - borderSpacing: 12, + borderSpacing: '12px 0', thead: { height: 32, }, @@ -21,6 +21,10 @@ const Table = styled('table')({ }, td: { verticalAlign: 'top', + padding: 0, + '& > *': { + padding: '4px 0', + }, }, }); diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index c0fce8e56bb48a..472691f43abc6c 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -8,27 +8,23 @@ This is a work in progress. We're still iterating on Joy UI's default theme. ## Explore -Explore the default theme object: +Explore the default theme: {{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}} -## Palette +## Preview -The tokens can be accessed from `theme.vars.palette.{token}`. Each token has both `light` and `dark` values. +The tables below gives you a quick preview of the default theme properties that are involved in `light` and `dark` color schemes. -{{"demo": "PaletteThemeViewer.js"}} - -To customize the theme palette, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. - -## Radius +### Palette -The tokens can be accessed from `theme.vars.radius.{token}`. +The tokens are generated from `theme.colorSchemes.(light|dark).*` and attached to `theme.vars.*`. -{{"demo": "RadiusThemeViewer.js"}} +{{"demo": "PaletteThemeViewer.js"}} -To customize the theme radius, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. +To customize the theme palette, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. -## Shadow +### Shadow The tokens can be accessed from `theme.vars.shadow.{token}`. @@ -36,9 +32,11 @@ The tokens can be accessed from `theme.vars.shadow.{token}`. To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. -## Typography +### Typography + +Joy UI provides 13 built-in typography levels that can be accessed from `theme.typography.{level}`. -Joy UI provides 13 built-in typography levels that can be accessed from `theme.typography.{level}`. You can hover on each row to see the preview. +You can hover on each cell to see the value preview. {{"demo": "TypographyThemeViewer.js"}} diff --git a/test/regressions/index.js b/test/regressions/index.js index d70705139583dc..71044d71e5eedf 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -30,7 +30,6 @@ const blacklist = [ 'docs-joy-getting-started-templates/TemplateCollection.png', 'docs-joy-core-features-automatic-adjustment/ListThemes.png', 'docs-joy-tools/PaletteThemeViewer.png', - 'docs-joy-tools/RadiusThemeViewer.png', 'docs-joy-tools/ShadowThemeViewer.png', 'docs-joy-tools/TypographyThemeViewer.png', 'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction From 57e46a34c8bfcd488a39fe15e7f1051d454428ca Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Dec 2022 14:00:52 +0700 Subject: [PATCH 13/38] fix lint --- docs/data/joy/tools/PaletteThemeViewer.js | 2 -- docs/data/joy/tools/PaletteThemeViewer.tsx | 3 --- 2 files changed, 5 deletions(-) diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/tools/PaletteThemeViewer.js index 62fd1ea807691e..990907e56c3603 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.js +++ b/docs/data/joy/tools/PaletteThemeViewer.js @@ -1,12 +1,10 @@ import * as React from 'react'; import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; - import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; - import InfoOutlined from '@mui/icons-material/InfoOutlined'; const defaultTheme = extendTheme(); diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/tools/PaletteThemeViewer.tsx index a996fc2bcf3b4e..d09a87a48468ce 100644 --- a/docs/data/joy/tools/PaletteThemeViewer.tsx +++ b/docs/data/joy/tools/PaletteThemeViewer.tsx @@ -1,13 +1,10 @@ import * as React from 'react'; import { extendTheme, Palette, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; -import Input from '@mui/joy/Input'; -import IconButton from '@mui/joy/IconButton'; import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; -import Close from '@mui/icons-material/CloseOutlined'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; const defaultTheme = extendTheme(); From b721d8fbe69485bbd0546db5147c9dd4027bdcd1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 23 Dec 2022 11:40:50 +0700 Subject: [PATCH 14/38] extract ThemeViewer --- docs/data/joy/tools/JoyDefaultTheme.js | 236 +----------------- .../default-theme/DefaultTheme.js | 232 +---------------- docs/src/modules/components/ThemeViewer.tsx | 214 ++++++++++++++++ 3 files changed, 226 insertions(+), 456 deletions(-) create mode 100644 docs/src/modules/components/ThemeViewer.tsx diff --git a/docs/data/joy/tools/JoyDefaultTheme.js b/docs/data/joy/tools/JoyDefaultTheme.js index 617aac6153d4c8..b6625ce18f01bd 100644 --- a/docs/data/joy/tools/JoyDefaultTheme.js +++ b/docs/data/joy/tools/JoyDefaultTheme.js @@ -1,232 +1,10 @@ import * as React from 'react'; -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import { extendTheme, styled } from '@mui/joy/styles'; +import { extendTheme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; -import ExpandIcon from '@mui/icons-material/ExpandMore'; -import CollapseIcon from '@mui/icons-material/ChevronRight'; -import TreeView from '@mui/lab/TreeView'; -import MuiTreeItem, { treeItemClasses } from '@mui/lab/TreeItem'; -import { lighten, ThemeProvider, createTheme } from '@mui/material/styles'; - -/** - * @param {unknown} value - */ -function getType(value) { - if (Array.isArray(value)) { - return 'array'; - } - - if (/^(#|rgb|rgba|hsl|hsla)/.test(value)) { - return 'color'; - } - - if (value === null) { - return 'null'; - } - - return typeof value; -} - -/** - * @param {unknown} value - * @param {ReturnType} type - */ -function getLabel(value, type) { - switch (type) { - case 'array': - return `Array(${value.length})`; - case 'null': - return 'null'; - case 'undefined': - return 'undefined'; - case 'function': - return `f ${value.name}()`; - case 'object': - return 'Object'; - case 'string': - return `"${value}"`; - case 'symbol': - return `Symbol(${String(value)})`; - case 'bigint': - case 'boolean': - case 'number': - default: - return String(value); - } -} - -function getTokenType(type) { - switch (type) { - case 'color': - return 'string'; - case 'object': - case 'array': - return 'comment'; - default: - return type; - } -} - -const Color = styled('span')(({ theme }) => ({ - backgroundColor: '#fff', - display: 'inline-block', - marginBottom: -1, - marginRight: theme.spacing(0.5), - border: '1px solid', - backgroundImage: - 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")', -})); - -function ObjectEntryLabel(props) { - const { objectKey, objectValue } = props; - const type = getType(objectValue); - const label = getLabel(objectValue, type); - const tokenType = getTokenType(type); - - return ( - - {`${objectKey}: `} - {type === 'color' ? ( - - - - ) : null} - {label} - - ); -} - -ObjectEntryLabel.propTypes = { - objectKey: PropTypes.any, - objectValue: PropTypes.any, -}; - -const TreeItem = styled(MuiTreeItem)({ - [`&:focus > .${treeItemClasses.content}`]: { - backgroundColor: lighten('#333', 0.08), - outline: `2px dashed ${lighten('#333', 0.3)}`, - }, - [`& .${treeItemClasses.content}`]: { - '&:hover': { - backgroundColor: lighten('#333', 0.08), - }, - }, -}); - -function ObjectEntry(props) { - const { nodeId, objectKey, objectValue } = props; - const keyPrefix = nodeId; - let children = null; - - if ( - (objectValue !== null && typeof objectValue === 'object') || - typeof objectValue === 'function' - ) { - children = - Object.keys(objectValue).length === 0 - ? undefined - : Object.keys(objectValue).map((key) => { - return ( - - ); - }); - } - - return ( - } - > - {children} - - ); -} -ObjectEntry.propTypes = { - nodeId: PropTypes.string.isRequired, - objectKey: PropTypes.any.isRequired, - objectValue: PropTypes.any, -}; - -function Inspector(props) { - const { data, expandPaths = [], ...other } = props; - - const keyPrefix = '$ROOT'; - const defaultExpanded = React.useMemo(() => { - return Array.isArray(expandPaths) - ? expandPaths.map((expandPath) => `${keyPrefix}.${expandPath}`) - : []; - }, [keyPrefix, expandPaths]); - // for default* to take effect we need to remount - const key = React.useMemo(() => defaultExpanded.join(''), [defaultExpanded]); - - return ( - } - defaultEndIcon={
} - defaultExpanded={defaultExpanded} - defaultExpandIcon={} - {...other} - > - {Object.keys(data).map((objectKey) => { - return ( - - ); - })} - - ); -} - -Inspector.propTypes = { - data: PropTypes.any, - expandPaths: PropTypes.arrayOf(PropTypes.string), -}; - -function computeNodeIds(object, prefix) { - if ( - (object !== null && typeof object === 'object') || - typeof object === 'function' - ) { - const ids = []; - Object.keys(object).forEach((key) => { - ids.push( - `${prefix}${key}`, - ...computeNodeIds(object[key], `${prefix}${key}.`), - ); - }); - - return ids; - } - return []; -} - -function useNodeIdsLazy(object) { - const [allNodeIds, setAllNodeIds] = React.useState([]); - // technically we want to compute them lazily until we need them (expand all) - // yielding is good enough. technically we want to schedule the computation - // with low pri and upgrade the priority later - React.useEffect(() => { - setAllNodeIds(computeNodeIds(object, '')); - }, [object]); - - return allNodeIds; -} +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import ThemeViewer, { + useNodeIdsLazy, +} from 'docs/src/modules/components/ThemeViewer'; const defaultTheme = extendTheme(); @@ -252,8 +30,8 @@ function JoyDefaultTheme() { return ( - createTheme({ palette: { mode: 'dark' } })}> - + createTheme()}> + ); diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js index f4288f285a7571..66d371324c13c8 100644 --- a/docs/data/material/customization/default-theme/DefaultTheme.js +++ b/docs/data/material/customization/default-theme/DefaultTheme.js @@ -1,234 +1,12 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -import ExpandIcon from '@mui/icons-material/ExpandMore'; -import CollapseIcon from '@mui/icons-material/ChevronRight'; -import TreeView from '@mui/lab/TreeView'; -import MuiTreeItem, { treeItemClasses } from '@mui/lab/TreeItem'; -import clsx from 'clsx'; -import { styled, createTheme, lighten } from '@mui/material/styles'; +import { createTheme } from '@mui/material/styles'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; import { useTranslate } from 'docs/src/modules/utils/i18n'; - -/** - * @param {unknown} value - */ -function getType(value) { - if (Array.isArray(value)) { - return 'array'; - } - - if (/^(#|rgb|rgba|hsl|hsla)/.test(value)) { - return 'color'; - } - - if (value === null) { - return 'null'; - } - - return typeof value; -} - -/** - * @param {unknown} value - * @param {ReturnType} type - */ -function getLabel(value, type) { - switch (type) { - case 'array': - return `Array(${value.length})`; - case 'null': - return 'null'; - case 'undefined': - return 'undefined'; - case 'function': - return `f ${value.name}()`; - case 'object': - return 'Object'; - case 'string': - return `"${value}"`; - case 'symbol': - return `Symbol(${String(value)})`; - case 'bigint': - case 'boolean': - case 'number': - default: - return String(value); - } -} - -function getTokenType(type) { - switch (type) { - case 'color': - return 'string'; - case 'object': - case 'array': - return 'comment'; - default: - return type; - } -} - -const Color = styled('span')(({ theme }) => ({ - backgroundColor: '#fff', - display: 'inline-block', - marginBottom: -1, - marginRight: theme.spacing(0.5), - border: '1px solid', - backgroundImage: - 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")', -})); - -function ObjectEntryLabel(props) { - const { objectKey, objectValue } = props; - const type = getType(objectValue); - const label = getLabel(objectValue, type); - const tokenType = getTokenType(type); - - return ( - - {`${objectKey}: `} - {type === 'color' ? ( - - - - ) : null} - {label} - - ); -} - -ObjectEntryLabel.propTypes = { - objectKey: PropTypes.any, - objectValue: PropTypes.any, -}; - -const TreeItem = styled(MuiTreeItem)({ - [`&:focus > .${treeItemClasses.content}`]: { - backgroundColor: lighten('#333', 0.08), - outline: `2px dashed ${lighten('#333', 0.3)}`, - }, - [`& .${treeItemClasses.content}`]: { - '&:hover': { - backgroundColor: lighten('#333', 0.08), - }, - }, -}); - -function ObjectEntry(props) { - const { nodeId, objectKey, objectValue } = props; - const keyPrefix = nodeId; - let children = null; - - if ( - (objectValue !== null && typeof objectValue === 'object') || - typeof objectValue === 'function' - ) { - children = - Object.keys(objectValue).length === 0 - ? undefined - : Object.keys(objectValue).map((key) => { - return ( - - ); - }); - } - - return ( - } - > - {children} - - ); -} -ObjectEntry.propTypes = { - nodeId: PropTypes.string.isRequired, - objectKey: PropTypes.any.isRequired, - objectValue: PropTypes.any, -}; - -function Inspector(props) { - const { data, expandPaths, ...other } = props; - - const keyPrefix = '$ROOT'; - const defaultExpanded = React.useMemo(() => { - return Array.isArray(expandPaths) - ? expandPaths.map((expandPath) => `${keyPrefix}.${expandPath}`) - : []; - }, [keyPrefix, expandPaths]); - // for default* to take effect we need to remount - const key = React.useMemo(() => defaultExpanded.join(''), [defaultExpanded]); - - return ( - } - defaultEndIcon={
} - defaultExpanded={defaultExpanded} - defaultExpandIcon={} - {...other} - > - {Object.keys(data).map((objectKey) => { - return ( - - ); - })} - - ); -} - -Inspector.propTypes = { - data: PropTypes.any, - expandPaths: PropTypes.arrayOf(PropTypes.string), -}; - -function computeNodeIds(object, prefix) { - if ( - (object !== null && typeof object === 'object') || - typeof object === 'function' - ) { - const ids = []; - Object.keys(object).forEach((key) => { - ids.push( - `${prefix}${key}`, - ...computeNodeIds(object[key], `${prefix}${key}.`), - ); - }); - - return ids; - } - return []; -} - -function useNodeIdsLazy(object) { - const [allNodeIds, setAllNodeIds] = React.useState([]); - // technically we want to compute them lazily until we need them (expand all) - // yielding is good enough. technically we want to schedule the computation - // with low pri and upgrade the priority later - React.useEffect(() => { - setAllNodeIds(computeNodeIds(object, '')); - }, [object]); - - return allNodeIds; -} +import ThemeViewer, { + useNodeIdsLazy, +} from 'docs/src/modules/components/ThemeViewer'; function DefaultTheme() { const [checked, setChecked] = React.useState(false); @@ -308,7 +86,7 @@ function DefaultTheme() { } label={t('useDarkTheme')} /> - + ); } diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx new file mode 100644 index 00000000000000..7aa463374778b2 --- /dev/null +++ b/docs/src/modules/components/ThemeViewer.tsx @@ -0,0 +1,214 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { styled } from '@mui/system'; +import Box from '@mui/material/Box'; +import ExpandIcon from '@mui/icons-material/ExpandMore'; +import CollapseIcon from '@mui/icons-material/ChevronRight'; +import TreeView from '@mui/lab/TreeView'; +import MuiTreeItem, { treeItemClasses } from '@mui/lab/TreeItem'; +import { lighten } from '@mui/material/styles'; + +function getType(value: any) { + if (Array.isArray(value)) { + return 'array'; + } + + if (value === null) { + return 'null'; + } + + if (/^(#|rgb|rgba|hsl|hsla)/.test(value)) { + return 'color'; + } + + return typeof value; +} + +/** + * @param {unknown} value + * @param {ReturnType} type + */ +function getLabel(value: any, type: string) { + switch (type) { + case 'array': + return `Array(${value.length})`; + case 'null': + return 'null'; + case 'undefined': + return 'undefined'; + case 'function': + return `f ${value.name}()`; + case 'object': + return 'Object'; + case 'string': + return `"${value}"`; + case 'symbol': + return `Symbol(${String(value)})`; + case 'bigint': + case 'boolean': + case 'number': + default: + return String(value); + } +} + +function getTokenType(type: string) { + switch (type) { + case 'color': + return 'string'; + case 'object': + case 'array': + return 'comment'; + default: + return type; + } +} + +const Color = styled('span')(({ theme }) => ({ + backgroundColor: '#fff', + display: 'inline-block', + marginBottom: -1, + marginRight: theme.spacing(0.5), + border: '1px solid', + backgroundImage: + 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")', +})); + +function ObjectEntryLabel(props: { objectKey: string; objectValue: any }) { + const { objectKey, objectValue } = props; + const type = getType(objectValue); + const label = getLabel(objectValue, type); + const tokenType = getTokenType(type); + + return ( + + {`${objectKey}: `} + {type === 'color' ? ( + + + + ) : null} + {label} + + ); +} + +const TreeItem = styled(MuiTreeItem)({ + [`&:focus > .${treeItemClasses.content}`]: { + backgroundColor: lighten('#333', 0.08), + outline: `2px dashed ${lighten('#333', 0.3)}`, + }, + [`& .${treeItemClasses.content}`]: { + '&:hover': { + backgroundColor: lighten('#333', 0.08), + }, + }, +}); + +function ObjectEntry(props: { nodeId: string; objectKey: string; objectValue: any }) { + const { nodeId, objectKey, objectValue } = props; + const keyPrefix = nodeId; + let children = null; + + if ( + (objectValue !== null && typeof objectValue === 'object') || + typeof objectValue === 'function' + ) { + children = + Object.keys(objectValue).length === 0 + ? undefined + : Object.keys(objectValue).map((key) => { + return ( + + ); + }); + } + + return ( + } + > + {children} + + ); +} + +function computeNodeIds(object: Record, prefix: string) { + if ((object !== null && typeof object === 'object') || typeof object === 'function') { + const ids: Array = []; + Object.keys(object).forEach((key) => { + ids.push(`${prefix}${key}`, ...computeNodeIds(object[key], `${prefix}${key}.`)); + }); + + return ids; + } + return []; +} + +export function useNodeIdsLazy(object: Record) { + const [allNodeIds, setAllNodeIds] = React.useState>([]); + // technically we want to compute them lazily until we need them (expand all) + // yielding is good enough. technically we want to schedule the computation + // with low pri and upgrade the priority later + React.useEffect(() => { + setAllNodeIds(computeNodeIds(object, '')); + }, [object]); + + return allNodeIds; +} + +const keyPrefix = '$ROOT'; + +function ThemeViewer({ + data, + expandPaths = [], + ...other +}: { + data: Record; + expandPaths: Array | null; +}) { + const defaultExpanded = React.useMemo( + () => + Array.isArray(expandPaths) + ? expandPaths.map((expandPath) => `${keyPrefix}.${expandPath}`) + : [], + [expandPaths], + ); + // for default* to take effect we need to remount + const key = React.useMemo(() => defaultExpanded.join(''), [defaultExpanded]); + + return ( + } + defaultEndIcon={
} + defaultExpanded={defaultExpanded} + defaultExpandIcon={} + {...other} + > + {Object.keys(data).map((objectKey) => { + return ( + + ); + })} + + ); +} + +export default ThemeViewer; From 333360c8129b5cb2637b5d34f8c09d165614d359 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 23 Dec 2022 11:57:45 +0700 Subject: [PATCH 15/38] move typography viewer to another page --- .../theme-typography/DefaultTypographySystem.js | 15 --------------- .../theme-typography}/TypographyThemeViewer.js | 0 .../theme-typography}/TypographyThemeViewer.tsx | 0 .../theme-typography/theme-typography.md | 6 +++++- docs/data/joy/tools/default-theme-viewer.md | 10 ---------- test/regressions/index.js | 10 +++++----- 6 files changed, 10 insertions(+), 31 deletions(-) delete mode 100644 docs/data/joy/customization/theme-typography/DefaultTypographySystem.js rename docs/data/joy/{tools => customization/theme-typography}/TypographyThemeViewer.js (100%) rename docs/data/joy/{tools => customization/theme-typography}/TypographyThemeViewer.tsx (100%) diff --git a/docs/data/joy/customization/theme-typography/DefaultTypographySystem.js b/docs/data/joy/customization/theme-typography/DefaultTypographySystem.js deleted file mode 100644 index 1c0d22a152050a..00000000000000 --- a/docs/data/joy/customization/theme-typography/DefaultTypographySystem.js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/joy/styles'; - -export default function DefaultTypographySystem() { - const theme = useTheme(); - return ( -
- {Object.entries(theme.typography).map(([level, style]) => ( -
- {level} -
- ))} -
- ); -} diff --git a/docs/data/joy/tools/TypographyThemeViewer.js b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js similarity index 100% rename from docs/data/joy/tools/TypographyThemeViewer.js rename to docs/data/joy/customization/theme-typography/TypographyThemeViewer.js diff --git a/docs/data/joy/tools/TypographyThemeViewer.tsx b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx similarity index 100% rename from docs/data/joy/tools/TypographyThemeViewer.tsx rename to docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx diff --git a/docs/data/joy/customization/theme-typography/theme-typography.md b/docs/data/joy/customization/theme-typography/theme-typography.md index cd7f7106c5720d..d0de954fcab9bc 100644 --- a/docs/data/joy/customization/theme-typography/theme-typography.md +++ b/docs/data/joy/customization/theme-typography/theme-typography.md @@ -13,7 +13,11 @@ The default system consists of 13 built-in levels: - The `h1` to `h6` levels follow the semantic HTML headings. - The `display1` and `display2` usually appear as taglines for marketing and landing pages. -{{"demo": "DefaultTypographySystem.js"}} +:::info +🔍 You can hover on each cell in the table below to see the preview value. +::: + +{{"demo": "TypographyThemeViewer.js"}} :::info [CSS Baseline](/joy-ui/react-css-baseline/), [Scoped CSS Baseline](/joy-ui/react-css-baseline/#scoping-on-children), and [Typography](/joy-ui/react-typography/) are the only components that consume the theme typography directly. diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/tools/default-theme-viewer.md index 472691f43abc6c..bedf3877815563 100644 --- a/docs/data/joy/tools/default-theme-viewer.md +++ b/docs/data/joy/tools/default-theme-viewer.md @@ -31,13 +31,3 @@ The tokens can be accessed from `theme.vars.shadow.{token}`. {{"demo": "ShadowThemeViewer.js"}} To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. - -### Typography - -Joy UI provides 13 built-in typography levels that can be accessed from `theme.typography.{level}`. - -You can hover on each cell to see the value preview. - -{{"demo": "TypographyThemeViewer.js"}} - -To customize the theme typography, see [theme typography customization](/joy-ui/customization/theme-typography/) page. diff --git a/test/regressions/index.js b/test/regressions/index.js index 71044d71e5eedf..4c4372b37dd6e9 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -27,11 +27,11 @@ importRegressionFixtures.keys().forEach((path) => { }, []); const blacklist = [ - 'docs-joy-getting-started-templates/TemplateCollection.png', - 'docs-joy-core-features-automatic-adjustment/ListThemes.png', - 'docs-joy-tools/PaletteThemeViewer.png', - 'docs-joy-tools/ShadowThemeViewer.png', - 'docs-joy-tools/TypographyThemeViewer.png', + 'docs-joy-getting-started-templates/TemplateCollection.png', // No public components + 'docs-joy-core-features-automatic-adjustment/ListThemes.png', // No public components + 'docs-joy-tools/PaletteThemeViewer.png', // No need for theme tokens + 'docs-joy-tools/ShadowThemeViewer.png', // No need for theme tokens + 'docs-joy-customization-theme-typography/TypographyThemeViewer.png', // No need for theme tokens 'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction 'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components 'docs-components-alert/TransitionAlerts.png', // Needs interaction From 0b6a186f1f55c3b0be7aa35c1ab42f785d977751 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Jan 2023 15:42:42 +0700 Subject: [PATCH 16/38] move to customization --- .../default-theme-viewer}/JoyDefaultTheme.js | 0 .../default-theme-viewer}/PaletteThemeViewer.js | 0 .../default-theme-viewer}/PaletteThemeViewer.tsx | 0 .../default-theme-viewer}/ShadowThemeViewer.js | 0 .../default-theme-viewer}/ShadowThemeViewer.tsx | 0 .../default-theme-viewer}/default-theme-viewer.md | 0 docs/data/joy/pages.ts | 12 +----------- .../{tools => customization}/default-theme-viewer.js | 2 +- 8 files changed, 2 insertions(+), 12 deletions(-) rename docs/data/joy/{tools => customization/default-theme-viewer}/JoyDefaultTheme.js (100%) rename docs/data/joy/{tools => customization/default-theme-viewer}/PaletteThemeViewer.js (100%) rename docs/data/joy/{tools => customization/default-theme-viewer}/PaletteThemeViewer.tsx (100%) rename docs/data/joy/{tools => customization/default-theme-viewer}/ShadowThemeViewer.js (100%) rename docs/data/joy/{tools => customization/default-theme-viewer}/ShadowThemeViewer.tsx (100%) rename docs/data/joy/{tools => customization/default-theme-viewer}/default-theme-viewer.md (100%) rename docs/pages/joy-ui/{tools => customization}/default-theme-viewer.js (60%) diff --git a/docs/data/joy/tools/JoyDefaultTheme.js b/docs/data/joy/customization/default-theme-viewer/JoyDefaultTheme.js similarity index 100% rename from docs/data/joy/tools/JoyDefaultTheme.js rename to docs/data/joy/customization/default-theme-viewer/JoyDefaultTheme.js diff --git a/docs/data/joy/tools/PaletteThemeViewer.js b/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.js similarity index 100% rename from docs/data/joy/tools/PaletteThemeViewer.js rename to docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.js diff --git a/docs/data/joy/tools/PaletteThemeViewer.tsx b/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.tsx similarity index 100% rename from docs/data/joy/tools/PaletteThemeViewer.tsx rename to docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.tsx diff --git a/docs/data/joy/tools/ShadowThemeViewer.js b/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.js similarity index 100% rename from docs/data/joy/tools/ShadowThemeViewer.js rename to docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.js diff --git a/docs/data/joy/tools/ShadowThemeViewer.tsx b/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.tsx similarity index 100% rename from docs/data/joy/tools/ShadowThemeViewer.tsx rename to docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.tsx diff --git a/docs/data/joy/tools/default-theme-viewer.md b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md similarity index 100% rename from docs/data/joy/tools/default-theme-viewer.md rename to docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 6619172ef4fbf3..87b4657dd7c625 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -102,17 +102,7 @@ const pages = [ { pathname: '/joy-ui/customization/theme-typography' }, { pathname: '/joy-ui/customization/themed-components' }, { pathname: '/joy-ui/customization/using-css-variables', title: 'Using CSS variables' }, - ], - }, - { - pathname: '/joy-ui/tools', - title: 'Tools', - icon: 'BuildIcon', - children: [ - { - pathname: '/joy-ui/tools/default-theme-viewer', - title: 'Default theme viewer', - }, + { pathname: '/joy-ui/customization/default-theme-viewer' }, ], }, { diff --git a/docs/pages/joy-ui/tools/default-theme-viewer.js b/docs/pages/joy-ui/customization/default-theme-viewer.js similarity index 60% rename from docs/pages/joy-ui/tools/default-theme-viewer.js rename to docs/pages/joy-ui/customization/default-theme-viewer.js index f210f5c364d22e..f9d7d1f31db2ec 100644 --- a/docs/pages/joy-ui/tools/default-theme-viewer.js +++ b/docs/pages/joy-ui/customization/default-theme-viewer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/tools/default-theme-viewer.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md?@mui/markdown'; export default function Page() { return ; From 35f267e637bc78c3fd839276684f5ee09a3e1918 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Jan 2023 17:39:30 +0700 Subject: [PATCH 17/38] add theme shadow page --- .../theme-colors/theme-colors.md | 13 ++ .../theme-shadow/CustomShadowOnElement.js | 25 ++++ .../theme-shadow/CustomShadowOnElement.tsx | 27 ++++ .../ShadowThemeViewer.js | 2 +- .../ShadowThemeViewer.tsx | 2 +- .../theme-shadow/theme-shadow.md | 139 ++++++++++++++++++ docs/data/joy/pages.ts | 2 + .../joy-ui/customization/theme-colors.js | 7 + .../joy-ui/customization/theme-shadow.js | 7 + 9 files changed, 222 insertions(+), 2 deletions(-) create mode 100644 docs/data/joy/customization/theme-colors/theme-colors.md create mode 100644 docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js create mode 100644 docs/data/joy/customization/theme-shadow/CustomShadowOnElement.tsx rename docs/data/joy/customization/{default-theme-viewer => theme-shadow}/ShadowThemeViewer.js (97%) rename docs/data/joy/customization/{default-theme-viewer => theme-shadow}/ShadowThemeViewer.tsx (97%) create mode 100644 docs/data/joy/customization/theme-shadow/theme-shadow.md create mode 100644 docs/pages/joy-ui/customization/theme-colors.js create mode 100644 docs/pages/joy-ui/customization/theme-shadow.js diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md new file mode 100644 index 00000000000000..bed59af2b157bd --- /dev/null +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -0,0 +1,13 @@ +# Theme colors + +

Learn about the theme's default colors and how to customize them.

+ +## Default tokens + +### Palette + + + +### Global variant tokens + +## Customization diff --git a/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js new file mode 100644 index 00000000000000..baffa2ab9d4b23 --- /dev/null +++ b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Button from '@mui/joy/Button'; + +export default function CustomShadowOnElement() { + return ( + + ); +} diff --git a/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.tsx b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.tsx new file mode 100644 index 00000000000000..831e154568b7df --- /dev/null +++ b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Button from '@mui/joy/Button'; + +export default function CustomShadowOnElement() { + return ( + + ); +} diff --git a/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.js b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js similarity index 97% rename from docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.js rename to docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js index ef83126e495893..57483282aefb1d 100644 --- a/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.js +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js @@ -41,7 +41,7 @@ export default function ShadowThemeViewer() {
diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index bed59af2b157bd..9b3bab20763d92 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -4,10 +4,16 @@ ## Default tokens -### Palette +{{"demo": "PaletteThemeViewer.js", "bg": "inline"}} + +### Customizing the default palette -### Global variant tokens +### Customizing global variant tokens + +### Removing the default palette + +## Adding more colors -## Customization +## Adding more palettes From ac9a5f2d3bdb3248cecd88dfd833233db135a2db Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 5 Jan 2023 14:16:25 +0700 Subject: [PATCH 20/38] complete theme colors --- .../BootstrapVariantTokens.js | 0 .../RemoveActiveTokens.js | 0 .../theme-colors/theme-colors.md | 309 ++++++++++++++- .../theme-shadow/theme-shadow.md | 8 +- .../theme-tokens/CustomVariantStyle.js | 64 --- .../theme-tokens/theme-tokens-pt.md | 355 ----------------- .../theme-tokens/theme-tokens-zh.md | 355 ----------------- .../theme-tokens/theme-tokens.md | 367 ------------------ .../joy-ui/customization/theme-tokens.js | 7 - 9 files changed, 309 insertions(+), 1156 deletions(-) rename docs/data/joy/customization/{theme-tokens => theme-colors}/BootstrapVariantTokens.js (100%) rename docs/data/joy/customization/{theme-tokens => theme-colors}/RemoveActiveTokens.js (100%) delete mode 100644 docs/data/joy/customization/theme-tokens/CustomVariantStyle.js delete mode 100644 docs/data/joy/customization/theme-tokens/theme-tokens-pt.md delete mode 100644 docs/data/joy/customization/theme-tokens/theme-tokens-zh.md delete mode 100644 docs/data/joy/customization/theme-tokens/theme-tokens.md delete mode 100644 docs/pages/joy-ui/customization/theme-tokens.js diff --git a/docs/data/joy/customization/theme-tokens/BootstrapVariantTokens.js b/docs/data/joy/customization/theme-colors/BootstrapVariantTokens.js similarity index 100% rename from docs/data/joy/customization/theme-tokens/BootstrapVariantTokens.js rename to docs/data/joy/customization/theme-colors/BootstrapVariantTokens.js diff --git a/docs/data/joy/customization/theme-tokens/RemoveActiveTokens.js b/docs/data/joy/customization/theme-colors/RemoveActiveTokens.js similarity index 100% rename from docs/data/joy/customization/theme-tokens/RemoveActiveTokens.js rename to docs/data/joy/customization/theme-colors/RemoveActiveTokens.js diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 9b3bab20763d92..18c6343db64b2b 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -4,16 +4,317 @@ ## Default tokens +The table below lists all the default tokens and their values in light and dark color schemes. Some tokens reuse other token's value using the [`var(--*)`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) syntax. + {{"demo": "PaletteThemeViewer.js", "bg": "inline"}} -### Customizing the default palette +### Channel tokens + +The default tokens ended with `Channel` are automatically generated for each palette. +These tokens are useful for creating translucent colors (`rgba`). + +- `lightChannel`: is generated from the palette's `200` token. +- `mainChannel`: is generated from the palette's `500` token. +- `darkChannel`: is generated from the palette's `800` token. + +The example usage is: + +```js +import Typography from '@mui/joy/Typography'; + + ({ + color: `rgba(${theme.vars.palette.primary.mainChannel} / 0.72)`, + })} +> +``` + +### Global variant tokens + +By default, Joy UI has four built-in [global variants](/joy-ui/main-features/global-variants/) tokens: `plain`, `outlined`, `soft`, and `solid`. + +The global variant token is composed of three parts, in the format of **variant type | state | CSS property**. + +For example: + +- `solidBg` refers to the solid variant's background color at initial state. +- `outlinedHoverBorder` refers to the outlined variant's border color on hover state. + +Each palette contains the global variant tokens: + +```js +// theme +{ + colorSchemes: { + light: { + palette: { + primary: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + neutral: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + danger: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + info: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + success: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + warning: { + plainColor: 'valid CSS color', + plainHoverBg: 'valid CSS color', + plainActiveBg: 'valid CSS color', + // ...other variant tokens + }, + } + }, + dark: { + // ...same structure with different values + } + } +} +``` + +## Customizing the default palette + +For each color scheme, the default colors are grouped within the `palette` node. + +For example, the snippet below customizes the primary palette in dark mode: + +```js +import { extendTheme } from '@mui/joy/styles'; + +const theme = extendTheme({ + colorSchemes: { + dark: { + palette: { + primary: { + 50: '#C0CCD9', + 100: '#A5B8CF', + 200: '#6A96CA', + 300: '#4886D0', + 400: '#2178DD', + 500: '#096BDE', + 600: '#1B62B5', + 700: '#265995', + 800: '#2F4968', + 900: '#2F3C4C', + }, + }, + }, + }, +}); + +// Then, pass it to ``. +``` + +## Customizing global variant tokens + +To customize the global variants, we recommend to start from the Button component as it tends to have the larger amount of interactive variants when compared to other components. + +As an example, let's customize Joy UI's [`Button`](/joy-ui/react-button/) so they look like the ones from [Bootstrap](https://getbootstrap.com/docs/5.2/components/buttons/#examples): + +- Bootstrap's default buttons are comparable to Joy UI's `solid` variant. +- Bootstrap's `secondary` variant uses a grey color, similar to Joy UI's `neutral`. +- Bootstrap's `btn-light` is similar to Joy UI's button using the `soft` variant and `neutral` color palette. +- Joy UI doesn't have anything similar, out-of-the-box, to Bootstrap's `btn-dark`. + - We could achieve that using one of the tree main customization approaches. - +{{"demo": "BootstrapVariantTokens.js"}} -### Customizing global variant tokens +:::info +Customizing the global variant tokens affects all Joy UI components that support `variant` prop. +::: -### Removing the default palette +## Removing the default tokens + +To remove any default token, use `undefined` as a value. It will be removed from the `theme` object and the CSS variable will not be generated. + +For example, all default global variant tokens comes with styles for the `:active` pseudo class. +Here's how you'd remove it from the solid variant. + +```jsx +// ⚠️ If the value is `undefined`, it should be `undefined` for all color schemes. +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + solidActiveBg: undefined, + }, + }, + }, + dark: { + palette: { + primary: { + solidActiveBg: undefined, + }, + }, + }, + }, +}); +``` + +{{"demo": "RemoveActiveTokens.js"}} ## Adding more colors +You can add any custom tokens to the theme and still be able to use them in APIs like `styled` and `sx` prop. + +```js +extendTheme({ + colorSchemes: { + light: { + palette: { + // Example of new color tokens. + // We recommend to limit them to 3 levels deep－in this case `palette.gradient.primary`. + gradient: { + primary: 'linear-gradient(to top, var(--joy-palette-primary-main), #000)', + }, + }, + }, + }, +}); + +// `sx` prop usage example: + - - The shadow applied - - - - - - No custom shadow - - - - - ); -} diff --git a/docs/data/joy/customization/theme-tokens/theme-tokens-pt.md b/docs/data/joy/customization/theme-tokens/theme-tokens-pt.md deleted file mode 100644 index a9352acfdae468..00000000000000 --- a/docs/data/joy/customization/theme-tokens/theme-tokens-pt.md +++ /dev/null @@ -1,355 +0,0 @@ -# Theme tokens - -

Learn about the two categories of tokens within Joy UI's default theme and how to customize them.

- -The [W3C Community Group](https://github.com/design-tokens/community-group) defines design tokens as: _"...indivisible pieces of a design system such as colors, spacing, typography scale."_ Joy UI builds up on this concept to develop its theme, consisting of two categories: low-level and global variant tokens. - -## Low-level tokens - -Low-level tokens refer to the smallest units of style that defines the look and feel Joy UI has out-of-the-box. They're labeled as _low-level_ because they can be used to compose larger tokens, such as the typography scale. - -### Structure - -Joy UI's default theme has three main categories of low-level design tokens: - -1. Color -2. Typography -3. Shape-related - -#### Color - -The first theme node within the color category is `colorSchemes`. It houses the `light` and `dark` nodes, and inside each one of them, there is a `palette` node, containing the [global variant tokens](#global-variant-tokens) adjusted for both modes. - -```js -colorSchemes: { - light: { - palette: { - primary: { - plainColor: 'valid CSS color', - plainHoverBg: 'valid CSS color', - plainActiveBg: 'valid CSS color', - }, - neutral: {...}, - ... - }, - }, - dark: { - palette: { - primary: { - plainColor: 'valid CSS color', - plainHoverBg: 'valid CSS color', - plainActiveBg: 'valid CSS color', - }, - neutral: {...}, - ... - }, - }, -} -``` - -Visit the [ColorSystem interface](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/types/colorSystem.ts#L142) to see all of the available interfaces. - -#### Channel tokens - -The tokens ended with `Channel` are automatically generated from the provided theme unless you explicitly specify them. These tokens are useful for creating translucent (alpha) colors. - -```js -import Typography from '@mui/joy/Typography'; - - ({ - color: `rgba(${theme.vars.palette.primary.mainChannel} / 0.72)`, - })} -> -``` - -#### Typography - -Within the typography-related tokens, there are first the ones that map out to common CSS typography properties: - -```js -fontSize: {...}, -fontFamily: {...}, -fontWeight: {...}, -lineHeight: {...}, -letterSpacing: {...}, -``` - -They're then used to build up Joy UI's typographic scale: - -```js -typography: { - h1: { - fontFamily: 'var(--joy-fontFamily-display)', - fontWeight: 'var(--joy-fontWeight-lg)' as CSSProperties['fontWeight'], - fontSize: 'var(--joy-fontSize-xl4)', - lineHeight: 'var(--joy-lineHeight-sm)', - letterSpacing: 'var(--joy-letterSpacing-sm)', - color: 'var(--joy-palette-text-primary)', - }, - h2: {...}, - h3: {...}, - ... -} -``` - -#### Shape - -The two main theme nodes related to shape elements are: - -```js -radius: {...}, -shadow: {...}, -``` - -### Overriding low-level tokens - -To customize the theme's low-level design tokens, use the `extendTheme` API to create a new theme and then pass it to the `CssVarsProvider`. The specified tokens will be deeply merged into the default values. - -```js -import { CssVarsProvider, extendTheme } from '@mui/joy/styles'; - -const theme = extendTheme({ - colorSchemes: { - light: { - palette: { - background: { - // palette.neutral.50 is the default token - body: 'var(--joy-palette-neutral-50)', - }, - }, - }, - }, -}); - -function App() { - return ...; -} -``` - -:::info -**Note**: Joy UI will add the prefix (default as `joy`) to all CSS variables. To change it, use ``. and the generated CSS variables will then be: - -```diff -- --joy-palette-primary-50: /* color */ ; -+ --myproduct-palette-primary-50: /* color */ ; -``` - -::: - -### Adding low-level tokens - -You can add any custom tokens to the theme and still be able to use them in APIs like `styled` and `sx` prop. - -```ts -extendTheme({ - colorSchemes: { - light: { - palette: { - // Example of new color tokens. - // We recommend to limit them to 3 levels deep－in this case `palette.brand.primary`. - brand: { - primary: 'green', - secondary: 'red', - }, - }, - }, - }, -}); -``` - -For **TypeScript**, you need to augment the theme structure to include the new tokens. - -```ts -import { CssVarsProvider, extendTheme } from '@mui/joy/styles'; - -declare module '@mui/joy/styles' { - interface Palette { - brand: { - primary: string; - secondary: string; - }; - } -} -``` - -After that, you can use those tokens in the `styled` function or the `sx` prop: - -```jsx -// sx prop - diff --git a/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js index baffa2ab9d4b23..831e154568b7df 100644 --- a/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js +++ b/docs/data/joy/customization/theme-shadow/CustomShadowOnElement.js @@ -7,6 +7,7 @@ export default function CustomShadowOnElement() { size="lg" sx={(theme) => ({ boxShadow: theme.shadow.md, + transition: '0.2s', '--joy-shadowChannel': theme.vars.palette.primary.mainChannel, '--joy-shadowRing': 'inset 0 -3px 0 rgba(0 0 0 / 0.24)', '&:hover': { @@ -14,12 +15,13 @@ export default function CustomShadowOnElement() { transform: 'translateY(-3px)', }, '&:active': { + boxShadow: theme.shadow.md, transform: 'translateY(0px)', '--joy-shadowRing': '0 0 #000', }, })} > - Button + Buy ); } diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js index 0d3450cb2e1715..98f38afacbc64d 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js @@ -9,17 +9,29 @@ const Table = styled('table')(({ theme }) => ({ border: '1px solid', borderColor: theme.vars.palette.divider, borderRadius: theme.vars.radius.xs, - width: '100%', borderCollapse: 'separate', - borderSpacing: 20, - thead: { - height: 32, - }, + borderSpacing: 0, + width: '100%', + overflowY: 'scroll', th: { textAlign: 'left', + padding: 12, + position: 'sticky', + top: 0, + zIndex: 1, + ...theme.variants.soft.neutral, }, td: { verticalAlign: 'top', + padding: '8px 12px', + }, + tr: { + '&:hover': { + backgroundColor: theme.vars.palette.background.level1, + }, + '&:first-of-type': { + '& td': { paddingTop: 6 }, + }, }, })); const defaultTheme = extendTheme(); diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index b730cdca24d35e..c5e6c4b2652744 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -9,17 +9,29 @@ const Table = styled('table')(({ theme }) => ({ border: '1px solid', borderColor: theme.vars.palette.divider, borderRadius: theme.vars.radius.xs, - width: '100%', borderCollapse: 'separate', - borderSpacing: 20, - thead: { - height: 32, - }, + borderSpacing: 0, + width: '100%', + overflowY: 'scroll', th: { textAlign: 'left', + padding: 12, + position: 'sticky', + top: 0, + zIndex: 1, + ...theme.variants.soft.neutral, }, td: { verticalAlign: 'top', + padding: '8px 12px', + }, + tr: { + '&:hover': { + backgroundColor: theme.vars.palette.background.level1, + }, + '&:first-of-type': { + '& td': { paddingTop: 6 }, + }, }, })); const defaultTheme = extendTheme(); diff --git a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js index 17bab3aaa72179..ba6ebfca9fd3d6 100644 --- a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js +++ b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js @@ -6,27 +6,40 @@ import Typography from '@mui/joy/Typography'; const defaultTheme = extendTheme(); -const Table = styled('table')({ - width: 'max-content', +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, borderCollapse: 'separate', - borderSpacing: '12px 0', - thead: { - height: 32, - }, + borderSpacing: 0, + display: 'block', + width: 'max-content', + overflowX: 'scroll', th: { textAlign: 'left', - '&:first-child': { - width: 100, - }, + padding: 12, + position: 'sticky', + top: 0, + zIndex: 1, + ...theme.variants.soft.neutral, }, td: { verticalAlign: 'top', - padding: 0, + padding: '8px 12px', '& > *': { - padding: '4px 0', + padding: '8px 12px', + margin: '-8px -12px', + }, + }, + tr: { + '&:hover': { + backgroundColor: theme.vars.palette.background.level1, + }, + '&:first-of-type': { + '& td': { paddingTop: 6 }, }, }, -}); +})); const extractFromVar = (value, field) => (value || '').replace(`var(--joy-${field}-`, '').replace(')', ''); diff --git a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx index 36ff93490ae24e..4ab56493c779ad 100644 --- a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx +++ b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx @@ -6,27 +6,40 @@ import Typography from '@mui/joy/Typography'; const defaultTheme = extendTheme(); -const Table = styled('table')({ - width: 'max-content', +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, borderCollapse: 'separate', - borderSpacing: '12px 0', - thead: { - height: 32, - }, + borderSpacing: 0, + display: 'block', + width: 'max-content', + overflowX: 'scroll', th: { textAlign: 'left', - '&:first-child': { - width: 100, - }, + padding: 12, + position: 'sticky', + top: 0, + zIndex: 1, + ...theme.variants.soft.neutral, }, td: { verticalAlign: 'top', - padding: 0, + padding: '8px 12px', '& > *': { - padding: '4px 0', + padding: '8px 12px', + margin: '-8px -12px', + }, + }, + tr: { + '&:hover': { + backgroundColor: theme.vars.palette.background.level1, + }, + '&:first-of-type': { + '& td': { paddingTop: 6 }, }, }, -}); +})); const extractFromVar = (value: string, field: string) => (value || '').replace(`var(--joy-${field}-`, '').replace(')', ''); diff --git a/docs/data/joy/customization/theme-typography/theme-typography.md b/docs/data/joy/customization/theme-typography/theme-typography.md index d0de954fcab9bc..3c67fdca27228d 100644 --- a/docs/data/joy/customization/theme-typography/theme-typography.md +++ b/docs/data/joy/customization/theme-typography/theme-typography.md @@ -17,7 +17,7 @@ The default system consists of 13 built-in levels: 🔍 You can hover on each cell in the table below to see the preview value. ::: -{{"demo": "TypographyThemeViewer.js"}} +{{"demo": "TypographyThemeViewer.js", "bg": "inline"}} :::info [CSS Baseline](/joy-ui/react-css-baseline/), [Scoped CSS Baseline](/joy-ui/react-css-baseline/#scoping-on-children), and [Typography](/joy-ui/react-typography/) are the only components that consume the theme typography directly. From 22037013a1d2696312dbe7adb2bfe8e6480e4ca8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 5 Jan 2023 14:37:40 +0700 Subject: [PATCH 23/38] update theme shadow --- .../theme-shadow/theme-shadow.md | 41 +++++++++++++------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md index 972d6782cac87c..8f25fc33ad600a 100644 --- a/docs/data/joy/customization/theme-shadow/theme-shadow.md +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -10,9 +10,9 @@ These tokens are grouped inside `theme.shadow` node: {{"demo": "ShadowThemeViewer.js", "bg": "inline"}} -## Customization +## Customizing the default shadow -Provide a key-values to the `shadow` node to create a custom theme: +Provide a key-values to the `shadow` node to override the default shadows: ```js import { extendTheme } from '@mui/joy/styles'; @@ -34,7 +34,7 @@ const theme = extendTheme({ We recommend that the shadow value uses `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` similar to the above [default token value](#default-tokens). ::: -### Adding new shadows +## Adding new shadows You can add any custom keys to the `shadow` node: @@ -51,7 +51,9 @@ const theme = extendTheme({ // Then, pass it to ``. ``` -For **TypeScript**, you need to augment the theme's `Shadow` interface with the new keys: +### TypeScript + +You need to augment the theme's `Shadow` interface with the new keys: ```ts // You can put this to any file that's included in your tsconfig @@ -63,9 +65,9 @@ declare module '@mui/joy/styles' { } ``` -### Shadow ring +## Shadow ring -To create a shadow ring, provide a value to `shadowRing` property: +The shadow ring can be configured for both light and dark color schemes. To create a shadow ring, provide a valid CSS box-shadow to the `shadowRing` node: ```js import { extendTheme } from '@mui/joy/styles'; @@ -91,7 +93,7 @@ Customizing the theme's shadow ring will affect all Joy UI components that consu If you want to create a shadow ring to a specific element, see [Customizing shadow on an element](#customizing-shadow-on-an-element). ::: -### Shadow colors +## Shadow colors The color of the shadow comes from the theme's token named `var(--joy-shadowChannel)`. You can customize the value for both light and dark color schemes: @@ -116,15 +118,16 @@ const theme = extendTheme({ The `shadowChannel` value must be rgb channels, e.g. `187 187 187`. ::: -### Customizing shadow on an element +## Customizing shadow on an element -To customize a shadow color or shadow ring on a specific instance, only use the raw value from the theme. +To customize a shadow color or shadow ring on a specific instance, use the raw value from the `theme.shadow.*`. :::info -**Don't** use shadows from `theme.vars` or from the shorthand syntax `shadow: '{key}'`. +**Don't** use shadows from `theme.vars` or the shorthand syntax `{ shadow: '{key}' }`. ::: ```js +// ✅ + +// ❌ Both of these do not work + diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index c5e6c4b2652744..729070dbf90df1 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -79,7 +79,7 @@ export default function ShadowThemeViewer() { {token} diff --git a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js index ba6ebfca9fd3d6..7cc2d3d059117c 100644 --- a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js +++ b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.js @@ -143,7 +143,12 @@ export default function FontSizeThemeViewer() { } sx={{ pointerEvents: 'none' }} > - + {defaultTheme.typography[level].color || '-'} @@ -162,7 +167,12 @@ export default function FontSizeThemeViewer() { } sx={{ pointerEvents: 'none' }} > - + {defaultTheme.typography[level].fontSize || '-'} @@ -175,12 +185,14 @@ export default function FontSizeThemeViewer() { title={ defaultTheme[field][ extractFromVar(defaultTheme.typography[level][field], field) - ] || 'unset' + ] || '' } sx={{ pointerEvents: 'none' }} > diff --git a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx index 4ab56493c779ad..4bb2c284b7d1b2 100644 --- a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx +++ b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx @@ -144,7 +144,12 @@ export default function FontSizeThemeViewer() { } sx={{ pointerEvents: 'none' }} > - + {defaultTheme.typography[level].color || '-'} @@ -163,7 +168,12 @@ export default function FontSizeThemeViewer() { } sx={{ pointerEvents: 'none' }} > - + {defaultTheme.typography[level].fontSize || '-'} @@ -180,12 +190,14 @@ export default function FontSizeThemeViewer() { defaultTheme.typography[level][field] as string, field, ) - ] || 'unset' + ] || '' } sx={{ pointerEvents: 'none' }} > From 936db2e730a187715e5e524f27b14a4076ef343f Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Tue, 10 Jan 2023 08:10:26 +0700 Subject: [PATCH 32/38] Apply suggestions from code review Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Siriwat K --- .../theme-colors/theme-colors.md | 41 ++++++++++--------- .../theme-shadow/theme-shadow.md | 26 ++++++------ 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 6674af019a2640..13d5f6779ef877 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -4,13 +4,14 @@ ## Default tokens -The table below lists all the default tokens and their values in light and dark color schemes. Some tokens reuse other token's value using the [`var(--*)`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) syntax. +The table below lists all the default tokens and their values in light and dark color schemes. +Some tokens reuse values from other tokens using the [`var(--*)`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) syntax. {{"demo": "PaletteThemeViewer.js", "bg": "inline"}} ### Channel tokens -The default tokens ended with `Channel` are automatically generated for each palette. +The default tokens ending with `Channel` are automatically generated for each palette. These tokens are useful for creating translucent colors (`rgba`). - `lightChannel`: is generated from the palette's `200` token. @@ -37,10 +38,10 @@ The global variant token is composed of three parts, in the format of **variant For example: -- `solidBg` refers to the solid variant's background color at initial state. -- `outlinedHoverBorder` refers to the outlined variant's border color on hover state. +- `solidBg` refers to the solid variant's background color in its initial state. +- `outlinedHoverBorder` refers to the outlined variant's border color in its hover state. -There are 6 palettes (`primary`, `neutral`, `danger`, `info`, `success`, and `warning`) that contain the global variant tokens as listed in the [table above](#default-tokens). +There are six palettes (`primary`, `neutral`, `danger`, `info`, `success`, and `warning`) that contain the global variant tokens as listed in the [table above](#default-tokens). ## Customizing the default palette @@ -77,25 +78,26 @@ const theme = extendTheme({ ## Customizing global variant tokens -To customize the global variants, we recommend to start from the Button component as it tends to have the larger amount of interactive variants when compared to other components. +We recommend using the [Button](/joy-ui/react-button/) component as a jumping-off point when customizing the global variants, because it gives you access to more of the interactive variants available than some other components. -As an example, let's customize Joy UI's [`Button`](/joy-ui/react-button/) so they look like the ones from [Bootstrap](https://getbootstrap.com/docs/5.2/components/buttons/#examples): +As an example, let's customize Joy UI's Button so to match the style of [Bootstrap](https://getbootstrap.com/docs/5.2/components/buttons/#examples): - Bootstrap's default buttons are comparable to Joy UI's `solid` variant. - Bootstrap's `secondary` variant uses a grey color, similar to Joy UI's `neutral`. - Bootstrap's `btn-light` is similar to Joy UI's button using the `soft` variant and `neutral` color palette. -- Joy UI doesn't have anything similar, out-of-the-box, to Bootstrap's `btn-dark`. - - We could achieve that using one of the tree main customization approaches. +- Joy UI's defaults don't include anything similar to Bootstrap's `btn-dark`. + - We can recreate it using one of the three main customization approaches. {{"demo": "BootstrapVariantTokens.js"}} :::info -Customizing the global variant tokens affects all Joy UI components that support `variant` prop. +Customizing the global variant tokens affects all Joy UI components that support the `variant` prop. ::: ## Removing the default tokens -To remove any default token, use `undefined` as a value. It will be removed from the `theme` object and the CSS variable will not be generated. +To remove any default token, use `undefined` as a value. +This removes it from the `theme` object and prevents the corresponding CSS variable from being generated. For example, all default global variant tokens comes with styles for the `:active` pseudo class. Here's how you'd remove it from the solid variant. @@ -126,7 +128,7 @@ const theme = extendTheme({ ## Adding more colors -You can add any custom tokens to the theme and still be able to use them in APIs like `styled` and `sx` prop. +Any custom tokens that you add to theme are available for use with both the `styled` and `sx` APIs. ```js extendTheme({ @@ -150,7 +152,7 @@ extendTheme({ ### TypeScript -You need to augment the theme's `Palette` interface to include the new tokens. +When working in TypeScript, you must augment the theme's `Palette` interface to include the new tokens. ```ts // You can put this to any file that's included in your tsconfig @@ -164,20 +166,21 @@ declare module '@mui/joy/styles' { ``` :::success -Adding new tokens is worth it when you know that a large number of components will use them. That's because doing so increases stylesheet bundle size, plus the added maintenance costs. +Adding custom tokens increases your stylesheet's bundle size, and adds an extra set of maintenance costs to your app. +These tradeoffs mean that adding new tokens is usually only worthwhile when you know that they'll be used by many components. -If you're not sure about it yet, we recommend using [the `sx` prop](/joy-ui/customization/approaches/#sx-prop) for one-off customizations. +As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#sx-prop) for one-off customizations. ::: ## Adding more palettes -Adding a new palette lets you use it on Joy UI components that support `color` prop. +You can add your own palettes to your app's theme to pass custom color schemes to any components that accept the `color` prop. -:::info +:::warning Adding a new palette increases the HTML bundle size. The more tokens you added to the palette, the bigger the bundle size. ::: -The snippet below adds the `secondary` palette to the theme. +The snippet below adds a custom `secondary` palette to the theme. ```js import { extendTheme } from '@mui/joy/styles'; @@ -258,7 +261,7 @@ Then, you will be able to use `secondary` color on Joy UI components: ### TypeScript -You need to augment the theme's interfaces to include the new palette. +When working in TypeScript, you must augment the theme's interfaces to include the new palette. ```ts // You can put this to any file that's included in your tsconfig diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md index 8f25fc33ad600a..fbe0c950290450 100644 --- a/docs/data/joy/customization/theme-shadow/theme-shadow.md +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -1,18 +1,18 @@ # Theme shadow -

Learn about the theme's default shadow and how to customize them.

+

Learn about the theme's default shadow and how to customize it.

## Default tokens -Joy UI uses T-shirt scale for defining shadows which are used by components such as [`Card`](/joy-ui/react-card/), [`Menu`](/joy-ui/react-menu/), etc. +Joy UI uses a T-shirt scale (sm, md, lg, etc.) for defining shadows used by components such as [Card](/joy-ui/react-card/), [Menu](/joy-ui/react-menu/), and more. -These tokens are grouped inside `theme.shadow` node: +These tokens are grouped inside the `theme.shadow` node: {{"demo": "ShadowThemeViewer.js", "bg": "inline"}} ## Customizing the default shadow -Provide a key-values to the `shadow` node to override the default shadows: +Provide key-values to the `shadow` node to override the default shadows: ```js import { extendTheme } from '@mui/joy/styles'; @@ -30,8 +30,8 @@ const theme = extendTheme({ // Then, pass it to ``. ``` -:::info -We recommend that the shadow value uses `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` similar to the above [default token value](#default-tokens). +:::success +We recommend using `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` for shadow values, similar to the [default token value](#default-tokens). ::: ## Adding new shadows @@ -53,7 +53,7 @@ const theme = extendTheme({ ### TypeScript -You need to augment the theme's `Shadow` interface with the new keys: +When working in TypeScript, you need to augment the theme's `Shadow` interface with the new keys: ```ts // You can put this to any file that's included in your tsconfig @@ -67,7 +67,8 @@ declare module '@mui/joy/styles' { ## Shadow ring -The shadow ring can be configured for both light and dark color schemes. To create a shadow ring, provide a valid CSS box-shadow to the `shadowRing` node: +The shadow ring can be configured for both light and dark color schemes. +To create a shadow ring, provide a valid CSS box-shadow value to the `shadowRing` node: ```js import { extendTheme } from '@mui/joy/styles'; @@ -90,12 +91,13 @@ const theme = extendTheme({ :::warning Customizing the theme's shadow ring will affect all Joy UI components that consume the theme's shadows. -If you want to create a shadow ring to a specific element, see [Customizing shadow on an element](#customizing-shadow-on-an-element). +If you want to create a shadow ring for a specific element, see [Customizing shadows on an element](#customizing-shadows-on-an-element). ::: ## Shadow colors -The color of the shadow comes from the theme's token named `var(--joy-shadowChannel)`. You can customize the value for both light and dark color schemes: +The color of the shadow comes from the theme token named `var(--joy-shadowChannel)`. +You can customize the value for both light and dark color schemes: ```js import { extendTheme } from '@mui/joy/styles'; @@ -118,11 +120,11 @@ const theme = extendTheme({ The `shadowChannel` value must be rgb channels, e.g. `187 187 187`. ::: -## Customizing shadow on an element +## Customizing shadows on an element To customize a shadow color or shadow ring on a specific instance, use the raw value from the `theme.shadow.*`. -:::info +:::warning **Don't** use shadows from `theme.vars` or the shorthand syntax `{ shadow: '{key}' }`. ::: From 4099d5d42a96868049127d280efb91d617364895 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Jan 2023 10:34:18 +0700 Subject: [PATCH 33/38] update shadow warning --- docs/data/joy/customization/theme-shadow/theme-shadow.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md index fbe0c950290450..99c03c08c49591 100644 --- a/docs/data/joy/customization/theme-shadow/theme-shadow.md +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -67,7 +67,7 @@ declare module '@mui/joy/styles' { ## Shadow ring -The shadow ring can be configured for both light and dark color schemes. +The shadow ring can be configured for both light and dark color schemes. To create a shadow ring, provide a valid CSS box-shadow value to the `shadowRing` node: ```js @@ -96,7 +96,7 @@ If you want to create a shadow ring for a specific element, see [Customizing sha ## Shadow colors -The color of the shadow comes from the theme token named `var(--joy-shadowChannel)`. +The color of the shadow comes from the theme token named `var(--joy-shadowChannel)`. You can customize the value for both light and dark color schemes: ```js @@ -125,7 +125,7 @@ The `shadowChannel` value must be rgb channels, e.g. `187 187 187`. To customize a shadow color or shadow ring on a specific instance, use the raw value from the `theme.shadow.*`. :::warning -**Don't** use shadows from `theme.vars` or the shorthand syntax `{ shadow: '{key}' }`. +**Don't** use shadows from `theme.vars` or the shorthand syntax `{ shadow: '{key}' }` because the value points to the global CSS variable which does not work with the custom `shadowChannel` and `shadowRing` on the instance. ::: ```js From 94d7c53a9b66738e81ee6c232762f3d53da2e6b8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Jan 2023 10:34:22 +0700 Subject: [PATCH 34/38] run prettier --- docs/data/joy/customization/theme-colors/theme-colors.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 13d5f6779ef877..3959601ce3f08a 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -4,7 +4,7 @@ ## Default tokens -The table below lists all the default tokens and their values in light and dark color schemes. +The table below lists all the default tokens and their values in light and dark color schemes. Some tokens reuse values from other tokens using the [`var(--*)`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) syntax. {{"demo": "PaletteThemeViewer.js", "bg": "inline"}} @@ -96,7 +96,7 @@ Customizing the global variant tokens affects all Joy UI components that support ## Removing the default tokens -To remove any default token, use `undefined` as a value. +To remove any default token, use `undefined` as a value. This removes it from the `theme` object and prevents the corresponding CSS variable from being generated. For example, all default global variant tokens comes with styles for the `:active` pseudo class. From 116496272b86d3a3513f4c0596a38ea45a62646b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Jan 2023 10:37:36 +0700 Subject: [PATCH 35/38] shorten comment --- docs/data/joy/customization/theme-colors/theme-colors.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 3959601ce3f08a..0413fb059dd664 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -190,7 +190,8 @@ const theme = extendTheme({ light: { palette: { secondary: { - // Credit: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js + // Credit: + // https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', @@ -219,7 +220,8 @@ const theme = extendTheme({ dark: { palette: { secondary: { - // Credit: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js + // Credit: + // https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', From 65a5c3cd6637657c663814a3c6644eb122bbdd52 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 17 Jan 2023 12:18:07 +0700 Subject: [PATCH 36/38] add copy functionality --- .../theme-colors/PaletteThemeViewer.js | 61 +++++-- .../theme-colors/PaletteThemeViewer.tsx | 61 +++++-- .../theme-shadow/ShadowThemeViewer.js | 152 +++++++++++------- .../theme-shadow/ShadowThemeViewer.tsx | 152 +++++++++++------- .../src/modules/components/CodeCopyButton.tsx | 19 +-- docs/src/modules/utils/useClipboardCopy.ts | 32 ++++ 6 files changed, 329 insertions(+), 148 deletions(-) create mode 100644 docs/src/modules/utils/useClipboardCopy.ts diff --git a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js index 741e0e1c273478..c5a46339484b88 100644 --- a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js @@ -1,11 +1,15 @@ import * as React from 'react'; +import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy'; import { extendTheme, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; +import Link from '@mui/joy/Link'; import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; +import Check from '@mui/icons-material/Check'; const defaultTheme = extendTheme(); @@ -63,6 +67,7 @@ const Table = styled('table')(({ theme }) => ({ })); export default function PaletteThemeViewer() { + const { copy, isCopied } = useClipboardCopy(); const light = traverseObject(defaultTheme.colorSchemes.light.palette); const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); const paletteTokens = Array.from( @@ -96,7 +101,29 @@ export default function PaletteThemeViewer() { ); return ( - + + + }> + Copied + +
- Key + Token Value diff --git a/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx similarity index 97% rename from docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.tsx rename to docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index 7c762a29bbcd58..24c605df6e7ad5 100644 --- a/docs/data/joy/customization/default-theme-viewer/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -40,7 +40,7 @@ export default function ShadowThemeViewer() {
- Key + Token Value diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md new file mode 100644 index 00000000000000..444b95b44adbe0 --- /dev/null +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -0,0 +1,139 @@ +# Theme shadow + +

Learn about the theme's default shadow and how to customize them.

+ +## Default tokens + +Joy UI uses T-shirt scale for defining shadows which are used by components such as [`Card`](/joy-ui/react-card/), [`Menu`](/joy-ui/react-menu/), etc. + +These tokens are grouped inside `theme.shadow` node: + +{{"demo": "ShadowThemeViewer.js"}} + +## Customization + +Provide a key-values to the `shadow` node to create a custom theme: + +```js +import { extendTheme } from '@mui/joy/styles'; + +const theme = extendTheme({ + shadow: { + xs: '{CSS box-shadow}', + sm: '{CSS box-shadow}', + md: '{CSS box-shadow}', + lg: '{CSS box-shadow}', + xl: '{CSS box-shadow}', + }, +}); + +// Then, pass it to +``` + +:::info +We recommend that the shadow value uses `var(--joy-shadowRing)` and `var(--joy-shadowChannel)` similar to the above [default token value](#default-tokens). +::: + +### Adding new shadows + +You can add any custom keys to the `shadow` node: + +```js +import { extendTheme } from '@mui/joy/styles'; + +const theme = extendTheme({ + shadow: { + subtle: '{CSS box-shadow}', + strong: '{CSS box-shadow}', + }, +}); + +// Then, pass it to +``` + +For **TypeScript**, you need to augment the theme's `Shadow` interface with the new keys: + +```ts +// You can put this to any file that's included in your tsconfig +declare module '@mui/joy/styles' { + interface Shadow { + subtle: string; + strong: string; + } +} +``` + +### Shadow ring + +To create a shadow ring, provide a value to `shadowRing` property: + +```js +import { extendTheme } from '@mui/joy/styles'; + +const theme = extendTheme({ + colorSchemes: { + light: { + // This creates a 1px box-shadow. + shadowRing: '0 0 0 1px rgba(0 0 0 / 0.1)', + }, + dark: { + shadowChannel: '0 0 0 1px rgba(255 255 255 / 0.1)', + }, + }, +}); + +// Then, pass it to +``` + +:::warning +Customizing the theme's shadow ring will affect all Joy UI components that consume the theme's shadows. + +If you want to create a shadow ring to a specific element, see [Customizing shadow on an element](#customizing-shadow-on-an-element). +::: + +### Shadow colors + +The color of the shadow comes from the theme's token named `var(--joy-shadowChannel)`. You can customize the value for both light and dark color schemes: + +```js +import { extendTheme } from '@mui/joy/styles'; + +const theme = extendTheme({ + colorSchemes: { + light: { + shadowChannel: '12 12 12', + }, + dark: { + shadowChannel: '0 0 0', + }, + }, +}); + +// Then, pass it to +``` + +:::warning +The `shadowChannel` value must be rgb channels, e.g. `187 187 187`. +::: + +### Customizing shadow on an element + +To customize a shadow color or shadow ring on a specific instance, only use the raw value from the theme. + +:::info +**Don't** use shadows from `theme.vars` or from the shorthand syntax `shadow: '{key}'`. +::: + +```js + +``` + +{{"demo": "CustomShadowOnElement.js"}} diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 87b4657dd7c625..d6ddf0092e70fc 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -98,6 +98,8 @@ const pages = [ children: [ { pathname: '/joy-ui/customization/approaches' }, { pathname: '/joy-ui/customization/dark-mode' }, + { pathname: '/joy-ui/customization/theme-colors' }, + { pathname: '/joy-ui/customization/theme-shadow' }, { pathname: '/joy-ui/customization/theme-tokens' }, { pathname: '/joy-ui/customization/theme-typography' }, { pathname: '/joy-ui/customization/themed-components' }, diff --git a/docs/pages/joy-ui/customization/theme-colors.js b/docs/pages/joy-ui/customization/theme-colors.js new file mode 100644 index 00000000000000..3e42d92c980c2c --- /dev/null +++ b/docs/pages/joy-ui/customization/theme-colors.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/joy/customization/theme-colors/theme-colors.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/joy-ui/customization/theme-shadow.js b/docs/pages/joy-ui/customization/theme-shadow.js new file mode 100644 index 00000000000000..d7a1c16b7c5481 --- /dev/null +++ b/docs/pages/joy-ui/customization/theme-shadow.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/joy/customization/theme-shadow/theme-shadow.md?@mui/markdown'; + +export default function Page() { + return ; +} From 3cc63041fe5029422ad0d6fd066dd6125f641639 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Jan 2023 18:04:42 +0700 Subject: [PATCH 18/38] update shadow viewer --- .../default-theme-viewer/default-theme-viewer.md | 10 +--------- .../customization/theme-shadow/ShadowThemeViewer.js | 7 +++++-- .../customization/theme-shadow/ShadowThemeViewer.tsx | 7 +++++-- .../joy/customization/theme-shadow/theme-shadow.md | 2 +- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md index bedf3877815563..eec20e5fc99594 100644 --- a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md +++ b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md @@ -20,14 +20,6 @@ The tables below gives you a quick preview of the default theme properties that The tokens are generated from `theme.colorSchemes.(light|dark).*` and attached to `theme.vars.*`. -{{"demo": "PaletteThemeViewer.js"}} +{{"demo": "PaletteThemeViewer.js", "bg": true}} To customize the theme palette, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. - -### Shadow - -The tokens can be accessed from `theme.vars.shadow.{token}`. - -{{"demo": "ShadowThemeViewer.js"}} - -To customize the theme shadow, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js index 57483282aefb1d..0d3450cb2e1715 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js @@ -5,7 +5,10 @@ import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; -const Table = styled('table')({ +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, width: '100%', borderCollapse: 'separate', borderSpacing: 20, @@ -18,7 +21,7 @@ const Table = styled('table')({ td: { verticalAlign: 'top', }, -}); +})); const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index 24c605df6e7ad5..b730cdca24d35e 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -5,7 +5,10 @@ import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; -const Table = styled('table')({ +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, width: '100%', borderCollapse: 'separate', borderSpacing: 20, @@ -18,7 +21,7 @@ const Table = styled('table')({ td: { verticalAlign: 'top', }, -}); +})); const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md index 444b95b44adbe0..469a93f180c208 100644 --- a/docs/data/joy/customization/theme-shadow/theme-shadow.md +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -8,7 +8,7 @@ Joy UI uses T-shirt scale for defining shadows which are used by components such These tokens are grouped inside `theme.shadow` node: -{{"demo": "ShadowThemeViewer.js"}} +{{"demo": "ShadowThemeViewer.js", "bg": "inline"}} ## Customization From 63cf07957761a3c11aee3099c576eaf4cedca7fc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Jan 2023 23:27:37 +0700 Subject: [PATCH 19/38] adjust palette theme viewer table --- .../default-theme-viewer.md | 12 +---- .../PaletteThemeViewer.js | 7 ++- .../PaletteThemeViewer.tsx | 46 +++++++++++++++---- .../theme-colors/theme-colors.md | 12 +++-- 4 files changed, 51 insertions(+), 26 deletions(-) rename docs/data/joy/customization/{default-theme-viewer => theme-colors}/PaletteThemeViewer.js (96%) rename docs/data/joy/customization/{default-theme-viewer => theme-colors}/PaletteThemeViewer.tsx (83%) diff --git a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md index eec20e5fc99594..73e3bff69c90d8 100644 --- a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md +++ b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md @@ -12,14 +12,4 @@ Explore the default theme: {{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}} -## Preview - -The tables below gives you a quick preview of the default theme properties that are involved in `light` and `dark` color schemes. - -### Palette - -The tokens are generated from `theme.colorSchemes.(light|dark).*` and attached to `theme.vars.*`. - -{{"demo": "PaletteThemeViewer.js", "bg": true}} - -To customize the theme palette, see [theme tokens customization](/joy-ui/customization/theme-tokens/) page. +To create your own theme, starts with customizing the [theme colors](/joy-ui/customization/theme-colors/). diff --git a/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.js b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js similarity index 96% rename from docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.js rename to docs/data/joy/customization/theme-colors/PaletteThemeViewer.js index 990907e56c3603..5e971942180457 100644 --- a/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.js +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js @@ -31,7 +31,10 @@ const collator = new Intl.Collator(undefined, { sensitivity: 'base', }); -const Table = styled('table')({ +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, borderCollapse: 'separate', borderSpacing: '8px 0', margin: '0 -8px', @@ -44,7 +47,7 @@ const Table = styled('table')({ td: { verticalAlign: 'top', }, -}); +})); export default function PaletteThemeViewer() { const light = traverseObject(defaultTheme.colorSchemes.light.palette); diff --git a/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.tsx b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx similarity index 83% rename from docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.tsx rename to docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx index d09a87a48468ce..e8201d9802dc36 100644 --- a/docs/data/joy/customization/default-theme-viewer/PaletteThemeViewer.tsx +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx @@ -31,20 +31,36 @@ const collator = new Intl.Collator(undefined, { sensitivity: 'base', }); -const Table = styled('table')({ +const Table = styled('table')(({ theme }) => ({ + border: '1px solid', + borderColor: theme.vars.palette.divider, + borderRadius: theme.vars.radius.xs, borderCollapse: 'separate', - borderSpacing: '8px 0', - margin: '0 -8px', - thead: { - height: 32, - }, + borderSpacing: 0, + display: 'block', + height: 500, + overflowY: 'scroll', th: { textAlign: 'left', + padding: '8px 6px', + position: 'sticky', + top: 0, + zIndex: 1, + ...theme.variants.soft.neutral, }, td: { verticalAlign: 'top', + padding: '3px 6px', }, -}); + tr: { + '&:hover': { + backgroundColor: theme.vars.palette.background.level1, + }, + '&:first-of-type': { + '& td': { paddingTop: 6 }, + }, + }, +})); export default function PaletteThemeViewer() { const light = traverseObject(defaultTheme.colorSchemes.light.palette); @@ -84,15 +100,25 @@ export default function PaletteThemeViewer() {
- Token + + Token + - }> + } + textColor="inherit" + > Light - }> + } + textColor="inherit" + > Dark
- Token + + Token + - }> + } + textColor="inherit" + > Light - }> + } + textColor="inherit" + > Dark {light[token]} @@ -172,8 +174,10 @@ export default function PaletteThemeViewer() { {dark[token]} diff --git a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx index e8201d9802dc36..3416011aa6bcfd 100644 --- a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx @@ -162,8 +162,10 @@ export default function PaletteThemeViewer() { {light[token]} @@ -171,8 +173,10 @@ export default function PaletteThemeViewer() { {dark[token]} diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js index 98f38afacbc64d..b364436860f502 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js @@ -80,7 +80,7 @@ export default function ShadowThemeViewer() { {token} - + {formatShadowLayers(defaultTheme.shadow[token])} - + {formatShadowLayers(defaultTheme.shadow[token])}
@@ -131,8 +158,13 @@ export default function PaletteThemeViewer() { .map((token) => ( ))} diff --git a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx index 3416011aa6bcfd..6f9cbb7a5c31a3 100644 --- a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.tsx @@ -1,11 +1,15 @@ import * as React from 'react'; +import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy'; import { extendTheme, Palette, styled } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; +import Link from '@mui/joy/Link'; import Tooltip from '@mui/joy/Tooltip'; import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; +import Check from '@mui/icons-material/Check'; const defaultTheme = extendTheme(); @@ -63,6 +67,7 @@ const Table = styled('table')(({ theme }) => ({ })); export default function PaletteThemeViewer() { + const { copy, isCopied } = useClipboardCopy(); const light = traverseObject(defaultTheme.colorSchemes.light.palette); const dark = traverseObject(defaultTheme.colorSchemes.dark.palette); const paletteTokens = Array.from( @@ -95,7 +100,29 @@ export default function PaletteThemeViewer() { /> ); return ( - + + + }> + Copied + +
- copy(token)} endDecorator={ light[token].match(/^[0-9]+\s[0-9]+\s[0-9]+$/) ? ( ) : null } + sx={{ cursor: 'copy' }} > {token} - + - copy(light[token])} > {light[token]} - + - copy(dark[token])} > {dark[token]} - +
@@ -130,8 +157,13 @@ export default function PaletteThemeViewer() { .map((token) => ( ))} diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js index b364436860f502..70e2890b421834 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.js @@ -1,9 +1,13 @@ import * as React from 'react'; +import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy'; import { styled, extendTheme } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Link from '@mui/joy/Link'; import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; +import Check from '@mui/icons-material/CheckCircle'; const Table = styled('table')(({ theme }) => ({ border: '1px solid', @@ -37,6 +41,7 @@ const Table = styled('table')(({ theme }) => ({ const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { + const { copy, isCopied } = useClipboardCopy(); const tokens = Object.keys(defaultTheme.shadow); const formatShadowLayers = (shadow) => React.Children.toArray( @@ -52,64 +57,97 @@ export default function ShadowThemeViewer() { ); return ( -
- copy(token)} endDecorator={ light[token].match(/^[0-9]+\s[0-9]+\s[0-9]+$/) ? ( ) : null } + sx={{ cursor: 'copy' }} > {token} - + - copy(light[token])} > {light[token]} - + - copy(dark[token])} > {dark[token]} - +
- - - - - - - - - - {tokens.map((token) => ( - - - + {tokens.map((token) => ( + + + + + + + ))} + +
- Token - - Value - - }> - Light - - - }> - Dark - -
- {token} - - - {formatShadowLayers(defaultTheme.shadow[token])} + + + }> + Copied + + + + + + + + - + + - ))} - -
+ Token + + Value + + }> + Light - - - theme.shadow[token], - borderRadius: 'xs', - mr: 2, - }} - /> - - theme.shadow[token], - borderRadius: 'xs', - }} - /> - + }> + Dark + +
+ +
+ {token} + + copy(token)} + > + {formatShadowLayers(defaultTheme.shadow[token])} + + + theme.shadow[token], + borderRadius: 'xs', + mr: 2, + }} + /> + + theme.shadow[token], + borderRadius: 'xs', + }} + /> +
+ ); } diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index 729070dbf90df1..374fb3768ee044 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -1,9 +1,13 @@ import * as React from 'react'; +import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy'; import { styled, extendTheme, Shadow } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Link from '@mui/joy/Link'; import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import LightMode from '@mui/icons-material/LightModeOutlined'; import DarkMode from '@mui/icons-material/DarkModeOutlined'; +import Check from '@mui/icons-material/CheckCircle'; const Table = styled('table')(({ theme }) => ({ border: '1px solid', @@ -37,6 +41,7 @@ const Table = styled('table')(({ theme }) => ({ const defaultTheme = extendTheme(); export default function ShadowThemeViewer() { + const { copy, isCopied } = useClipboardCopy(); const tokens = Object.keys(defaultTheme.shadow) as Array; const formatShadowLayers = (shadow: string) => React.Children.toArray( @@ -51,64 +56,97 @@ export default function ShadowThemeViewer() { ), ); return ( - - - - - - - - - - - {tokens.map((token) => ( - - - + {tokens.map((token) => ( + + + + + + + ))} + +
- Token - - Value - - }> - Light - - - }> - Dark - -
- {token} - - - {formatShadowLayers(defaultTheme.shadow[token])} + + + }> + Copied + + + + + + + + - + + - ))} - -
+ Token + + Value + + }> + Light - - - theme.shadow[token], - borderRadius: 'xs', - mr: 2, - }} - /> - - theme.shadow[token], - borderRadius: 'xs', - }} - /> - + }> + Dark + +
+ +
+ {token} + + copy(token)} + > + {formatShadowLayers(defaultTheme.shadow[token])} + + + theme.shadow[token], + borderRadius: 'xs', + mr: 2, + }} + /> + + theme.shadow[token], + borderRadius: 'xs', + }} + /> +
+ ); } diff --git a/docs/src/modules/components/CodeCopyButton.tsx b/docs/src/modules/components/CodeCopyButton.tsx index f64da582102db5..4a314345b796e2 100644 --- a/docs/src/modules/components/CodeCopyButton.tsx +++ b/docs/src/modules/components/CodeCopyButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import copy from 'clipboard-copy'; +import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy'; interface CodeCopyButtonProps { code: string; @@ -7,23 +7,11 @@ interface CodeCopyButtonProps { export default function CodeCopyButton(props: CodeCopyButtonProps) { const { code, ...other } = props; - const [copied, setCopied] = React.useState(false); + const { copy, isCopied } = useClipboardCopy(); // This component is designed to be wrapped in NoSsr const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; const key = macOS ? '⌘' : 'Ctrl + '; - React.useEffect(() => { - if (copied) { - const timeout = setTimeout(() => { - setCopied(false); - }, 2000); - return () => { - clearTimeout(timeout); - }; - } - return undefined; - }, [copied]); - return (