Use mdjs-layout #4
Conversation
|
@m4dz this is almost ready! I think |
bashmish
force-pushed
the
feat/use-mdjs-layout
branch
2 times, most recently
from
285032a to
1e0acf2
Compare
|
@m4dz finally finished this :) I managed to fix a lot of small things, which are present in the current main branch anyway and not related to mdjs-layout migration, but just became visible thanks to that, but not everything is clear how to fix. I'll leave it up to you to decide as you probably know better. Read my comments about particular code. |
| <template> | ||
| <div> | ||
| <Button outlined name="Rioters 🤘" /> | ||
| <MyButton outlined name="Rioters 🤘" /> |
There was a problem hiding this comment.
I had to change vue lang to html to make sure the code highlighting is working. But this activates prettier which doesn't like capital letters in native tags, which was introduced to rewrite e.g. <BUTTON> to <button>, but the same happens to <Button> -> <button> which is undesired. So I renamed the tag to <MyButton> to workaround this behavior. Maybe best to introduce a prefix for all components in the DS so that all component names do not overlap with native HTML tags? Up to you what's the best fix here.
| css-props-prefix="--color" | ||
| component-class="box" | ||
| style-key="background-color" | ||
| ></dockit-sass-showcases> | ||
| ></dockit-css-showcases> |
There was a problem hiding this comment.
since I fixed dockit-css-showcases to properly show opacity in the documentation context, it became clear that one of the colors you have is transparent... not sure if you meant that or created such color by mistake, please double check
| css-props-prefix="--shadow" | ||
| component-class="box" | ||
| style-key="box-shadow" | ||
| checkered-background="false" | ||
| ></dockit-sass-showcases> | ||
| ></dockit-css-showcases> |
There was a problem hiding this comment.
elevation is not visible in the dark mode
one might think it's because of mdjs-layout typography which has too dark background which is not compatible with the DS (and doesn't set var(--doc-color-background) on the body) , but I think the shadows themselves are not dark compatible, so I'd recommend to consider adding 2 sets of shadows for light and dark separately
if you feel like it's because of mdjs-layout or how I set it up, we should discuss it
I have a well-thought vision here and prefer to have it discussed thoroughly before changing to smth different, the devil is in the details here
There was a problem hiding this comment.
Yep, I agree on having two different set of shadows for light/dark modes. Thanks 👍
| <dockit-sass-showcases | ||
| ```html story | ||
| <dockit-css-showcases | ||
| mode="time" |
There was a problem hiding this comment.
I had to add mode="time" here, because --transition has been deprecated in favor of --time in dockit-core
just pay attention to this and maybe consider actually changing the prefix to --time
I just didn't feel like such renaming belongs to this PR, so left it untouched
|
Beeing a bot here :D (in next PRs it should be done automatically) 💻 Link the PR in your app (?)
|
bashmish
force-pushed
the
feat/use-mdjs-layout
branch
from
1e0acf2 to
79ce950
Compare
Integrated mdjs-layout with all goodies from light/dark modes to good typography, nicely decorated demos and so on.