[docs] Add Joy default theme viewer #35554

siriwatknp · 2022-12-21T08:57:23Z

Preview: https://deploy-preview-35554--material-ui.netlify.app/joy-ui/customization/default-theme-viewer/
Theme colors: https://deploy-preview-35554--material-ui.netlify.app/joy-ui/customization/theme-colors/
Theme shadows: https://deploy-preview-35554--material-ui.netlify.app/joy-ui/customization/theme-shadow/

Got feedback from the community that the table view is better than the tree view.

Some improvements

split "theme tokens" into "theme colors" and "theme shadow"
able to see light and dark previews at the same time.
extra info is added to some tokens via tooltip

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2022-12-21T09:00:01Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-35554--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 815a227

oliviertassinari

Nice to see more docs. I wonder if it would make more sense to have https://deploy-preview-35554--material-ui.netlify.app/joy-ui/tools/default-theme-viewer/#typography inside https://deploy-preview-35554--material-ui.netlify.app/joy-ui/customization/theme-typography/ the information seems to duplicate.

oliviertassinari · 2022-12-22T18:30:07Z

docs/data/joy/tools/JoyDefaultTheme.js

+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';
+  }


Is there a way we could abstract https://github.com/mui/material-ui/blob/defd28e6dc56b136e7af38331c129a3d15006f43/docs/data/material/customization/default-theme/DefaultTheme.js so we don't duplicate the logic?

Sure, it can be extracted.

oliviertassinari · 2022-12-22T18:32:58Z

test/regressions/index.js

  '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',


It would be great if we add a motive on why we blacklist them. Outside of the first one, the other seems valuable, not sure.

Suggested change

'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',

'docs-joy-tools/PaletteThemeViewer.png',

'docs-joy-tools/ShadowThemeViewer.png',

'docs-joy-tools/TypographyThemeViewer.png',

I don't see a value in having visual regression for the theme tokens. I will add comments on them.

siriwatknp · 2022-12-23T04:10:25Z

Nice to see more docs. I wonder if it would make more sense to have https://deploy-preview-35554--material-ui.netlify.app/joy-ui/tools/default-theme-viewer/#typography inside https://deploy-preview-35554--material-ui.netlify.app/joy-ui/customization/theme-typography/ the information seems to duplicate.

Agree!

…default-theme-explorer

oliviertassinari · 2023-01-01T20:12:07Z

Agree

@siriwatknp What's your take on pushing this direction a few extra steps? We could imagine that:

https://deploy-preview-35554--material-ui.netlify.app/joy-ui/tools/default-theme-viewer/ would only be about the "Explore" header
that "Palette" and "Shadow" could be moved under:

We could also update Material UI sidenav to have clearer title. I like how "Theme typography" is clear. We had many people ask why is there 3 "Typography" pages (theme, component, system) in the past.

siriwatknp · 2023-01-03T03:07:05Z

that "Palette" and "Shadow" could be moved under:

No objection.

@oliviertassinari For the Default theme viewer, do you think it should live under Customization? I plan to add Theme builder in the next PR, that's why I created the Tools section. cc @samuelsycamore any thoughts on this?

…default-theme-explorer

mapache-salvaje · 2023-01-03T16:09:57Z

@oliviertassinari For the Default theme viewer, do you think it should live under Customization? I plan to add Theme builder in the next PR, that's why I created the Tools section. cc @samuelsycamore any thoughts on this?

That is an interesting consideration. From a user's perspective, I think it makes more sense to find these "tools" in the "Customization" section. I do like the idea of a "Tools" section, but I can't think of any examples where I've seen this in other docs. I imagine the difference between a "tool" doc and a "customization" doc could get blurry—the tool is aimed at improving the customization experience, so it fits in both places.

siriwatknp · 2023-01-04T07:13:15Z

@oliviertassinari For the Default theme viewer, do you think it should live under Customization? I plan to add Theme builder in the next PR, that's why I created the Tools section. cc @samuelsycamore any thoughts on this?

That is an interesting consideration. From a user's perspective, I think it makes more sense to find these "tools" in the "Customization" section. I do like the idea of a "Tools" section, but I can't think of any examples where I've seen this in other docs. I imagine the difference between a "tool" doc and a "customization" doc could get blurry—the tool is aimed at improving the customization experience, so it fits in both places.

👍 Alright, I will go with customization for consistency.

…default-theme-explorer

oliviertassinari

Very cool 👍

danilo-leal

Ah, sweet! This is very, very cool and for sure a useful tool for folks navigating through Joy! I particularly enjoyed the tooltips on the typography table 👨‍🍳

I'm still looking forward to doing some further design explorations on the tables before merging this PR but to give already some feedback, here are a couple of things I've thought about:

Maybe we could create a sub-section within Customization, similar to the "Migration" and "Upgrade to v5" in Material UI?! That's to save the number of repeated "Theme" in the side nav. The page titles could still remain "Theme color".
There are some color/interaction improvements to do on the table, such as the gray hover clashing a bit with the blue bg on dark mode (hence the explorations with a subtler dark mode). Also adding some slight background to the table itself.
Use a monospace font whenever adding code snippets, such as the token value.
Curious to hear thoughts about maintaining both the theme object-specific pages (e.g. shadow, typography, etc) and the "Default theme viewer" one with everything. Does it make sense to have both or should we do one or another?

siriwatknp · 2023-01-09T08:16:59Z

Maybe we could create a sub-section within Customization, similar to the "Migration" and "Upgrade to v5" in Material UI?! That's to save the number of repeated "Theme" in the side nav. The page titles could still remain "Theme color".

Sounds good to me.

There are some color/interaction improvements to do on the table, such as the gray hover clashing a bit with the blue bg on dark mode (hence the explorations with a subtler dark mode). Also adding some slight background to the table itself.

Feel free to tweak the colors.

Use a monospace font whenever adding code snippets, such as the token value.

Got it, will update them.

Curious to hear thoughts about maintaining both the theme object-specific pages (e.g. shadow, typography, etc) and the "Default theme viewer" one with everything. Does it make sense to have both or should we do one or another?

I think Default theme viewer is useful for me to see the whole thing of what the default theme looks like. Maintaining it should be fine since it is reading values from the source code (no hard-coded).

…default-theme-explorer

…terial-ui into joy/default-theme-explorer

mapache-salvaje

Great job @siriwatknp! My comments are mostly all small grammar stuff.

docs/data/joy/customization/theme-colors/theme-colors.md

docs/data/joy/customization/theme-shadow/theme-shadow.md

Co-authored-by: Sam Sycamore <[email protected]> Signed-off-by: Siriwat K <[email protected]>

mnajdova

Another idea for the palette maybe we can use some illustration closer to how it is done in the Material Design spec, something like:

mnajdova · 2023-01-12T12:17:31Z

docs/data/joy/customization/theme-colors/theme-colors.md

+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"}}


I would recommend using the colors as a background on the cells, and allow copying the token when clicking/hovering over the cell. Once upon a time I was doing something like this for Fluent UI, I managed to find a link to it :D: https://fluentsite.z22.web.core.windows.net/0.65.0/color-schemes

I would recommend using the colors as a background on the cells

Honestly, I don't think this would be that much different from the current look and I guess it needs JS to calculate the correct contrast (between white and black text color).

and allow copying the token when clicking/hovering over the cell

Yep, this would be useful.

mapache-salvaje

Text content looks great! 👍

mnajdova

There is a bug with how the copy button is hidden, which causes showing two scrollbars:

Also, when you click to copy a color there is a layout shift because of the two scrollbars being shown/hidden.

…default-theme-explorer

siriwatknp added 8 commits December 21, 2022 10:23

move to tools

db6321e

add PaletteThemeViewer

bf77c4d

update viewer

7e7b273

add ShadowThemeViewer

159bca9

update types

8731588

update

ada92b8

update content

90f1685

update

89d4a91

siriwatknp added the docs Improvements or additions to the documentation label Dec 21, 2022

siriwatknp requested a review from danilo-leal December 21, 2022 08:57

siriwatknp added 5 commits December 21, 2022 16:12

exclude mode

6415086

update content

074d1e3

add JoyDefaultTheme explorer

6ad6043

update

d55e241

fix lint

57e46a3

siriwatknp requested a review from a team December 22, 2022 07:06

oliviertassinari reviewed Dec 22, 2022

View reviewed changes

oliviertassinari added the package: joy-ui Specific to @mui/joy label Dec 22, 2022

siriwatknp added 3 commits December 23, 2022 11:40

extract ThemeViewer

b721d8f

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

72b5a3a

…default-theme-explorer

move typography viewer to another page

333360c

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

4c58894

…default-theme-explorer

siriwatknp self-assigned this Jan 3, 2023

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

06d5141

…default-theme-explorer

siriwatknp requested a review from mapache-salvaje January 5, 2023 08:33

oliviertassinari added 3 commits January 9, 2023 01:02

Improve Material UI page title too

400e462

no horizontal scrollbar

78efd27

remove legacy expend-path URL query param

c7ef2fa

oliviertassinari reviewed Jan 9, 2023

View reviewed changes

danilo-leal reviewed Jan 9, 2023

View reviewed changes

siriwatknp mentioned this pull request Jan 9, 2023

[Joy][Colors] Provide (docs on) extendable color system #35707

Closed

2 tasks

siriwatknp added 5 commits January 9, 2023 15:22

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

346a573

…default-theme-explorer

udpate content

35ab9f0

update sidebar

5bfca44

use code font family

7629344

Merge branch 'joy/default-theme-explorer' of github.com:siriwatknp/ma…

a57ce37

…terial-ui into joy/default-theme-explorer

mapache-salvaje reviewed Jan 9, 2023

View reviewed changes

siriwatknp and others added 4 commits January 10, 2023 08:10

Apply suggestions from code review

936db2e

Co-authored-by: Sam Sycamore <[email protected]> Signed-off-by: Siriwat K <[email protected]>

update shadow warning

4099d5d

run prettier

94d7c53

shorten comment

1164962

siriwatknp requested review from mapache-salvaje and danilo-leal January 11, 2023 08:31

siriwatknp added this to the Joy UI stable release milestone Jan 11, 2023

mnajdova reviewed Jan 12, 2023

View reviewed changes

add copy functionality

65a5c3c

mapache-salvaje approved these changes Jan 18, 2023

View reviewed changes

mnajdova reviewed Jan 20, 2023

View reviewed changes

siriwatknp added 3 commits January 24, 2023 16:21

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

1f90150

…default-theme-explorer

fix scroll bar

247414f

fix lint

815a227

siriwatknp merged commit 5717d16 into mui:master Jan 24, 2023

oliviertassinari mentioned this pull request Apr 1, 2023

[docs] Fix Joy UI URL to tokens #36742

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Add Joy default theme viewer #35554

[docs] Add Joy default theme viewer #35554

siriwatknp commented Dec 21, 2022 •

edited

Loading

mui-bot commented Dec 21, 2022 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari Dec 22, 2022

siriwatknp Dec 23, 2022

oliviertassinari Dec 22, 2022

siriwatknp Dec 23, 2022

siriwatknp commented Dec 23, 2022

oliviertassinari commented Jan 1, 2023

siriwatknp commented Jan 3, 2023

mapache-salvaje commented Jan 3, 2023

siriwatknp commented Jan 4, 2023

oliviertassinari left a comment

danilo-leal left a comment

siriwatknp commented Jan 9, 2023 •

edited

Loading

mapache-salvaje left a comment

mnajdova left a comment

mnajdova Jan 12, 2023

siriwatknp Jan 17, 2023

mapache-salvaje left a comment

mnajdova left a comment

[docs] Add Joy default theme viewer #35554

[docs] Add Joy default theme viewer #35554

Conversation

siriwatknp commented Dec 21, 2022 • edited Loading

mui-bot commented Dec 21, 2022 • edited Loading

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

oliviertassinari Dec 22, 2022

Choose a reason for hiding this comment

siriwatknp Dec 23, 2022

Choose a reason for hiding this comment

oliviertassinari Dec 22, 2022

Choose a reason for hiding this comment

siriwatknp Dec 23, 2022

Choose a reason for hiding this comment

siriwatknp commented Dec 23, 2022

oliviertassinari commented Jan 1, 2023

siriwatknp commented Jan 3, 2023

mapache-salvaje commented Jan 3, 2023

siriwatknp commented Jan 4, 2023

oliviertassinari left a comment

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

siriwatknp commented Jan 9, 2023 • edited Loading

mapache-salvaje left a comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Jan 12, 2023

Choose a reason for hiding this comment

siriwatknp Jan 17, 2023

Choose a reason for hiding this comment

mapache-salvaje left a comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp commented Dec 21, 2022 •

edited

Loading

mui-bot commented Dec 21, 2022 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

siriwatknp commented Jan 9, 2023 •

edited

Loading