feat(tags): use design tokens, add theming #641
Conversation
| @@ -171,6 +171,10 @@ states: | |||
| componentGroups: | |||
| input: | |||
| description: 'Input elements' | |||
| tag: | |||
| description: 'Tag elements' | |||
| tag-warning: | |||
There was a problem hiding this comment.
wasn't 100% sure on whether to allow multiple states or to put it as a separate component group;
|
I think I made a mistake making the visual spec. I'll fix it tomorrow 😥 |
| const overwrittenVars = { | ||
| ...vars, | ||
| ...theme, | ||
| }; |
There was a problem hiding this comment.
Q: do we allow all custom properties to be overwritten or should we only allow design tokens?
There was a problem hiding this comment.
That's something I've thought about. The idea is that (for now), users can override choices. And since our designTokens use choices, that's kind of how it's working together for now.
However, there's some other variables that we could allow users to override as well, but I think it would make sense to rename them first.
UI Kit wide variables
example:
spacing8
These are often named in a way that would make overriding them weird. Spacing8 is set to 16? 😕 . We would probably want to rename these.
Component specific variables
These are sort of like "magic" numbers. If we allow users to override them, it should be documented in the individual components.
sizeHeightTag
standardInputHeight
I'll open up an issue for this.
There was a problem hiding this comment.
#644 to track this
There was a problem hiding this comment.
Right, the spacings tokens should probably be something like spacingsXs, spacingsS, etc
| @@ -63,10 +64,10 @@ export const component = () => ( | |||
| {longText} | |||
| </Tag> | |||
| </Spec> | |||
| <Spec label="Normal - onRemove (disabled)"> | |||
There was a problem hiding this comment.
No, made a mistake 🙈
montezume
force-pushed
the
ml-design-tokens-for-tags
branch
from
11a37bb to
de5682b
Compare
| @@ -180,7 +180,7 @@ | |||
| "rollup-plugin-json": "4.0.0", | |||
| "rollup-plugin-node-resolve": "4.0.1", | |||
| "rollup-plugin-replace": "2.1.1", | |||
| "serve": "10.1.2", | |||
| "serve": "11.0.0", | |||
There was a problem hiding this comment.
the outdated warning was annoying me
montezume
force-pushed
the
ml-design-tokens-for-tags
branch
from
de5682b to
9951368
Compare
Summary
Create new tokens to use for
Tags. These tokens will also be used in theSelectInputs(for when isMulti is enabled).Enable theming as for Tags.