Add token-based CSS theming #11262 #11319
Conversation
Allows using a selector with all: revert-layer to isolate arches CSS
jacobtylerwalls
force-pushed
the
jtw/arches-theme
branch
from
7aa0824
to
607e866
Compare
|
My assumption is that basic theme-switching will be stubbed out here, but lemme know if that assumption is wrong 👍 |
|
I think there's value in doing that in follow-up work in another PR, as theme switching isn't really blocking further arches-references development, but having this in is. |
| red: palette(archesColors.red), | ||
| }, | ||
| semantic: { | ||
| primary: palette(archesColors.blue), |
There was a problem hiding this comment.
This avoids having to manually override every sky token. On our side, we just have to define one blue color and let primevue deal with gradients.
| }, | ||
| color: "{arches.legacy.sidebar}", | ||
| }, | ||
| iconSize: "small", |
There was a problem hiding this comment.
I would recommend remove this, I don't believe we should have our "default" icon size be small ( or that we should offer a "default" icon size)
There was a problem hiding this comment.
PrimeVue themes come with an iconSize whether we like it or not (1rem), so I have a feeling we will want to override it with something. But we can definitely punt.
| }, | ||
| semantic: { | ||
| primary: palette(archesColors.blue), | ||
| navigation: { |
There was a problem hiding this comment.
IMO this needs to either be removed or have more descriptive naming. arches-navigation-list could refer to many things. arches-navigation-list-padding is better. same with color IMO but I feel less strongly there
There was a problem hiding this comment.
This is another one that comes from primevue theming. (Sorry, tried to clarify this by putting "custom" tokens beneath a comment, but as of now we won't have any custom tokens.) This is what we get if we do nothing:
navigation
item
{padding: '0.5rem 0.75rem', borderRadius: '{border.radius.sm}', gap: '0.5rem'}
list
{padding: '0.25rem 0.25rem', gap: '2px'}
submenuIcon
{size: '0.875rem'}
submenuLabel
{padding: '0.5rem 0.75rem', fontWeight: '600'}I think leaving this in is less opinionated by taking some of these paddings down to 0 or at least equal X/Y
On second look, the navigation-color one is custom, so I'll find a way to rename/clarify.
|
@chrabyrd No doubt we'll want to evaluate those navigation tokens again with the benefit of some usage experience, but I think this is ready for another look! |
Types of changes
Description of Change
Begin building a theme preset for arches that can be used/extended in arches applications also.
PrimeVue docs
Issues Solved
Closes #11262
Checklist
Accessibility Checklist
Developer Guide
Ticket Background