Document all CSS Variables
I'm going through the customization of the Cord web components. The Live CSS Editor at https://docs.cord.com/get-started/live-css-editor gave a nice start, but it's severely limited in the actual CSS variables it uses. Instead I need to inspect the DOM and CSS in my app to find all the CSS variables I can override. Some examples of variables that I've had to find manually instead of having them all documented:
--cord-font-size-body
--cord-font-size-small
--cord-font-weight-regular
--cord-line-height-body
--cord-secondary-button-content-color
--cord-primary-button-background-color--disabled
These are just a small sampling of ones that I've had to find. It would be much simpler and faster if there was simply a CSS variable reference doc page that lists all available CSS variables. A great example of this is in the ag-grid docs: https://ag-grid.com/javascript-data-grid/global-style-customisation-variables/ This would make my life vastly better.
Had a colleague comment on same page as me / reply to my comment- had to refresh page to get the comment to appear.
Had a colleague comment on same page as me and reply to my comment - neither showed up without a hard refresh of the page.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Hey @John Woodruff -- we used to have a page documenting all the CSS variables, but they are not needed anymore. All our components have stable CSS classnames you can target and use the full power of CSS, rather than being limited to the CSS variables we expose. (See CSS customization)
If you're using web component, you will have to add use-shadow-root="false" to them to remove Cord's shadowRoot and be able to target everything using CSS selectors. Let me know if that helps!
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Hey @David Rudman, not sure your comment is related to the original post. Mind creating a new one, and perhaps adding a bit more details to help us debug further? Thanks!