chore(docs): rebuild table from all-tokens json #72
Conversation
There was a problem hiding this comment.
I'm not sure of the process for generating the docs - these token files are out of date so they really shouldn't be checked in. And maybe the docs need to be updated? +1 to @nicolethoen's comment that we need to document the process.
My only other comment is that the menu to filter the selection is a little odd with checkbox and also a check on hover. But I'm fine with refining that later.
|
Thanks @srambach for the feedback - I'll take a look at addressing your comments, not quite sure what I did to get those double checkmarks so thanks for catching that 🤔 |
evwilkin
force-pushed
the
chore/68-token-docs
branch
2 times, most recently
from
c522a98 to
950c490
Compare
evwilkin
force-pushed
the
chore/68-token-docs
branch
from
0cf8042 to
c60c1b8
Compare
evwilkin
force-pushed
the
chore/68-token-docs
branch
from
791189d to
82b2515
Compare
| height: 1em; | ||
| display: inline-block; | ||
| aspect-ratio: 1 / 1; | ||
| border-radius: 50%; |
There was a problem hiding this comment.
You can use this here --pf-t--global--border--radius--pill
There was a problem hiding this comment.
Thanks! Opening a follow-up issue to swap this value out 👍
| @media (min-width: 1200px) { | ||
| .tokens-table-outer-wrapper { | ||
| width: calc(92vw - var(--pf-v6-c-page__sidebar--Width)); | ||
| max-width: calc(92vw - var(--pf-v6-c-page__sidebar--Width)); |
There was a problem hiding this comment.
I'm curious about the 92vw. Is this a place where we could use .pf-m-limit-width on the page section instead?
There was a problem hiding this comment.
Thanks for calling this out - our docs limits the width of the wrapper element that this content loads into, that value worked well when testing to increase the width of the table (to make it less squished unnecessarily) but yes we should swap it out for something more dynamic. Opening a follow-up issue to review this suggestion 👏
Preview: Preview link
Closes #68
This PR implements new tokens tables which:
README has been updated to explain commands to execute this code, but in summary the data needed for the table is pulled when
yarn buildoryarn build:scssis run (they trigger the same code), as two new json files containing all the token data displayed in the table are created by Style Dictionary in the same process as the scss files creation.